The AJAX navigation carte du jour for blogger is a widget designed specifically for the Blogger platform. It is inspired from the Mashable website long earlier it was given a makeover. Despite the evidently as well as uncomplicated inspiration , the drib downward carte du jour amongst images is a huge hit.
It industrial plant based on the jQuery library as well as Blogger JSON Feed API. Function-wise , it industrial plant precisely similar a normal drop-down carte du jour when JavaScript is disabled. For it to piece of employment online , a weblog must last for populace visitors , thence the Blogger JSON Feed API volition component subdivision equally designed.
Features
Multi-Level Menu Support
The AJAX carte du jour is a multi-level drop-down carte du jour that is based on the criterion unordered listing of HTML. When a carte du jour contains a sub-menu , it loads on the wing when a user rolls over the chief menu. What is dandy nigh this is that it saves outgoing traffic , peculiarly on a website that uses a large navigation.
Cross-browser Compatibility
Most AJAX applications volition piece of employment across unlike browsers fifty-fifty amongst other plugins or proprietary technology already installed. The carte du jour amongst images industrial plant inward the same premise , instead of existence designed for a specific browser. Because at that spot is no telling which browser y’all or your weblog readers would usage , the novel AJAX drop-down mega carte du jour amongst images is the ideal option.
Some of the Windows browser supported includes IE5+ , Firefox , Google Chrome , Safari Netscape 7+ as well as Opera 8+. When you’re using a Mac , the AJAX carte du jour is supported on Firefox , IE as well as Safari. If JavaScript is disabled , soundless , the carte du jour is soundless accessible , but only equally pure CSS menu.
Automatic Sub-Menu Display
With the novel AJAX carte du jour , y’all only require to ringlet over a carte du jour particular as well as sub-menus volition automatically load. No require to click on a carte du jour to larn the sub-menu to drib down. This non only saves users’ valuable navigation fourth dimension , but also outgoing traffic.
Menu Styling
AJAX menus tin give notice last styled past times precisely changing the megamenu.js as well as the CSS style. The old is used when javaScript is turned on , piece the latter is when it is turned off. You tin give notice conform the carte du jour parameters manually or y’all tin give notice usage ready-to-use templates.
There are enough of other features , but y’all would non last able to usage or sense them if y’all exercise non install the novel mega carte du jour amongst images. What exercise y’all require to exercise thence to implement it inward your weblog or website?
Adding Mega Menu amongst Images/Thumbnails inward Blogger
Step 1. Log inward to your Blogger trouble concern human relationship , thence become to the Dashboard. Select the weblog where y’all desire to install the novel mega menu.
CSS
Step 2. Click on Template , thence press the Edit HTML button. Press anywhere within the code expanse as well as usage the CTRL + F component subdivision to brand your search quicker as well as easier. Type the next tag as well as striking Enter to uncovering it:
]]>
Once y’all uncovering the tag , add together the code below precisely above/before it:
.megamenu *{margin:0;padding:0;font-family:’PT Sans Narrow’}ul.megamenu{list-style:none;line-height:1;overflow:visible !important}ul.megamenu:after{margin:0;padding:0;content:’ ‘;display:block;height:0px;clear:both}ul.megamenu li{float:left;display:inline;position:relative;text-transform:uppercase}ul.megamenu li a.menu-target:after{content:””;width:0;height:0;border-left:3px enterprise transparent;border-right:3px enterprise transparent;border-top:3px enterprise #fff;font-size:0;line-height:0;bottom:22px;right:5px;position:absolute}ul.megamenu li a{display:block;line-height:50px;padding:0px 20px;text-decoration:none;border-left:1px enterprise #000;box-shadow:1px 0 0 0 rgba(255 , 255 , 255 , 0.1) inset;color:#d9d9d9;font-size:14px;transition:all 0.3s ease-in-out}ul.megamenu li a:hover{background:#111111;color:#fff}ul.megamenu ul{position:absolute;display:none;top:100%}ul.megamenu li:hover > ul{display:block}ul.megamenu ul li{z-index:72;min-width:149px;float:none;background:#000;text-shadow:none}ul.megamenu ul li a{text-transform:none;font-weight:normal}ul.megamenu ul li a:hover ,ul.megamenuid ul li a.hover{background:#E0E0E0;color:#444}ul.megamenu ul ul{display:none;left:100%;top:0}ul.megamenuid li div.megasubmenu{background:#F9F9F9;position:absolute;width:830px;z-index:90;left:0;top:100%;overflow:hidden;min-height:150px;-moz-transform:translate(0 ,30px);-webkit-transform:translate(0 ,30px);-o-transform:translate(0 ,30px);transform:translate(0 ,30px);transform-origin:50% 0;visibility:hidden;opacity:0;color:#888;box-shadow:0 10px 7px -7px rgba(0 ,0 ,0 ,0.1);transition:all 0.3s ease-in-out}ul.megamenuid li:hover div.megasubmenu{visibility:visible;opacity:1;-moz-transform:translate(0 ,0);-webkit-transform:translate(0 ,0);-o-transform:translate(0 ,0);transform:translate(0 ,0)}ul.megamenuid ul ,ul.megamenuid ul li{display:block !important;border:0 none !important;margin:0 !important;padding:0 !important}ul.megamenuid ul li{background:none !important;float:left !important}ul.megamenuid ul.leftmenulist{position:absolute;width:18%;left:0;top:0;bottom:0;background:#EEEEEE;border-right:1px dashed #e5e5e5 !important}ul.megamenuid ul.leftmenulist a{border-left:none !important;color:#555}ul.megamenuid ul.rightmenulist{position:relative;display:block;width:81%;float:right;margin:0px 0px 0px !important;background:none}ul.megamenuid ul.rightmenulist li{display:block;overflow:hidden;position:relative;min-height:210px;padding:5px 17px 5px 0px !important}ul.megamenuid ul.rightmenulist li .thumb-container{left:0;width:100%;height:100%;position:absolute;overflow:hidden;font-size:0;line-height:0}ul.megamenuid ul.rightmenulist li .thumb-container img{position:relative;top:10px;padding:0;width:100%;height:100%;display:block}ul.megamenuid ul.rightmenulist li a{display:block;border-left:none !important;padding:0px 5px !important;line-height:1.4;color:#777;font-weight:bold;font-size:14px}ul.megamenuid ul.rightmenulist li a:hover{color:#000;background:transparent}ul.megamenuid .loading-icon{background:url(‘http://2.bp.blogspot.com/-N9HNU11nhiA/Va-NLcGF0lI/AAAAAAAALW4/HzSlCK7PGeY/s1600/wait.gif’) no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}ul.megamenuid .menu-icon{border-bottom:4px enterprise transparent;border-top:4px enterprise transparent;border-left:4px enterprise #777;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0}#megamenuid{background:rgba(0 , 0 , 0 , 0) -moz-linear-gradient(center transcend , #3d3d3d , #212121) repeat scroll 0 0;background:-webkit-linear-gradient(top ,#3d3d3d ,#212121);background-color:#3d3d3d;box-shadow:1px 1px 0 0 rgba(255 , 255 , 255 , 0.1) inset;height:50px;width:100%;position:relative;max-width:1000px;margin:0 auto;padding:0px}#megamenuid h5{font-size:16px;margin-top:70px;text-align:center}#megamenuid h5:before{content:””;position:absolute;top:50px;left:50%;width:5px;height:2px;margin-left:-4px;border-left:2px enterprise black;border-right:2px enterprise black}#megamenuid h5:after{content:””;position:absolute;top:55px;left:50%;width:10px;height:5px;margin-left:-7px;border-top:2px enterprise black;border-left:2px enterprise black;border-right:2px enterprise black;border-radius:8px 8px 0px 0px}li.search-box{float:right !important;line-height:35px;margin:7px 10px 0 0}li.search-box .search-field{border:none;padding:3px;background:#3F3F3F;color:#fff;width:135px;font-size:13px}li.search-box .search-field:focus{border:none;outline:none;background:#4C4C4C;color:#fff}li.search-box .search-button{background:url(‘http://4.bp.blogspot.com/-VJqk_zzkAuw/VazlDH_goDI/AAAAAAAALVM/t-AjU3ix55k/s1600/search.png’) no-repeat;border:none;cursor:pointer;padding:5px 10px;transition:all 0.3s ease-in-out}li.search-box .search-button:hover{opacity:0.9}.search-alert{background:#E84C3D url(http://3.bp.blogspot.com/-TQMok5egm8c/Va44AXnjg3I/AAAAAAAALV8/eq_8ICAlH2I/s1600/search-info.png) no-repeat;background-position:5px;text-transform:capitalize;color:#fff;margin:-5px;padding:0px 15px 0px 40px;display:none;border-radius:5px}
JavaScript
Step 3. Check if your weblog has the jQuery plugin already installed. If non , y’all require to add together a few lines of code earlier the tag (CTRL + F to uncovering it). See the code below:
Note
– If jQuery plugin already be , take the trace inward red.
– To modify the divulge of posts , modify the iv value from:
postsNumber : 4
– To add together a unlike thumbnail when a post has no picture , supplant the url inward bluish from:
noThumbnail : 'http://2.bp.blogspot.com/-Z7jG9iO9OTg/Vazz6YJnFQI/AAAAAAAALVs/wlSvXPgdDAo/s1600/no_image_available.png'
HTML
Step 4. Carefully add together the HTML code to ensure that the drib downward carte du jour amongst images volition piece of employment equally designed. There are only 3 types of URLs that the AJAX Menu accepts as well as they must last used accordingly.
Label URL: http://yourblogurlblogspot.com/search/label/LABELNAME
Search Query: http://yourblogurl.blogspot.com/search?q=SEARCHQUERY
Label w/ Search Query: http://yourblogurl.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY
Among the 3 URLs , the Search Query has to last URL encoded using a specific tool.
Step 5. Search the next trace using CTRL + F:
Just to a higher identify this trace , add together the next HTML code:
- Home
- MENU TITLE
- MENU TITLE
- Normal Link
Search shape is empty!
Note: supplant the text inward bluish amongst the label url as well as the text inward cherry-red amongst the get upwards of the label. This is the label that y’all lead maintain added to the Labels settings of your post editor:
Step 6. Click on Save template for all the changes to bring effect.
If y’all can’t uncovering the trace from pace v , access the Layout tab , click on Add Gadget , as well as thence select HTML/JavaScript Gadget. Copy the HTML code as well as glue it within the box… thence press the Save button.
That’s it!
Once that is done , your AJAX carte du jour amongst images volition last implemented as well as create for y’all to use. Make sure as shooting to select photos that are relevant to the carte du jour as well as sub-menus thence your website volition lead maintain cohesive hold back as well as appeal. Research shows , soundless , that text accompanied past times whatever picture , fifty-fifty if completely irrelevant , tin give notice lead handgrip of attention.
Leave a Reply