Mega Menu with Images or Thumbnails for Blogger
Visual content has a certain appeal as websites place images on every page or even work solely on photos. Now, thanks to the new AJAX navigation menu widget, images can also be added to the dropdown menu.
The Blogger AJAX Navigation Menu is a widget designed specifically for the Blogger platform. It was inspired by Mashable long before it was changed. Despite being simple and straightforward, the image dropdown menu is a huge hit.
It is powered by the jQuery library and Blogger's JSON update API. In terms of functionality, it works like a regular drop-down menu when JavaScript is disabled. To work on the web, the blog must be open to all visitors, so the Blogger JSON Feed API will work as expected.
Some of the supported Windows browsers include IE5+, Firefox, Google Chrome, Safari Netscape 7+ and Opera 8+. On a Mac, AJAX menus are supported by Firefox, IE and Safari. However, if JavaScript is disabled, the menu is still available, but only as a pure CSS menu.
There are many more features, but you won't be able to use or experience them unless you install the new image mega menu. So what do you need to do to include it on your blog or website?
Step 2: Click on " Template ", then click on the " Edit HTML " button. Click anywhere in the code area and use CTRL + F to make searching faster and easier. Type the following tag and press Enter to find it:
Step 3: Check if jQuery plugin is installed on your blog. If not, you need to add a few lines of code first link (CTRL + F to find it). See the code below:
Note that:
- If the jQuery plugin already exists, remove the red line.
- To change the number of messages, change the value 4 to:
Step 4: Carefully add the HTML code to make sure the image dropdown works as expected. There are only three types of URLs that an AJAX menu accepts and they should be used accordingly.
Label URL: http://yourblogurlblogspot.com/search/label/LABELNAME .
Search Query: http://yourblogurl.blogspot.com/search?q=SEARCHQUERY
Search query label: http://yourblogurl.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY .
Among the three URLs, the search query must be scrambled with a special tool.
Step 5: Find the next row using CTRL+F.
Step 6: Click Save Template for all changes to take effect.
If you can't find the row in step 5, go to the "Design " tab, click " Add Widget " and select the " HTML/JavaScript " widget. Copy the HTML code and paste it into the box… then click the Save button.
It!
With that done, your AJAX menu will be loaded with images and ready to use. Make sure you choose photos that match your menus and submenus to make your site cohesive and attractive. However, studies show that text accompanied by any image can attract attention.
The Blogger AJAX Navigation Menu is a widget designed specifically for the Blogger platform. It was inspired by Mashable long before it was changed. Despite being simple and straightforward, the image dropdown menu is a huge hit.
It is powered by the jQuery library and Blogger's JSON update API. In terms of functionality, it works like a regular drop-down menu when JavaScript is disabled. To work on the web, the blog must be open to all visitors, so the Blogger JSON Feed API will work as expected.
Characteristics
Multilevel menu support.
An AJAX menu is a multi-level drop-down list based on a standard HTML unordered list. When a menu contains a submenu, it loads immediately when the user hovers over the main menu. The good thing is that it saves outgoing traffic, especially on a website that uses complex navigation.Cross-browser compatibility
Most AJAX applications will work in browsers, even with other plug-ins or proprietary technologies already installed. The image menu works the same way, but is browser independent. Since you don't know which browser you or your blog readers will use, the new AJAX Image Mega Dropdown is the perfect choice.Some of the supported Windows browsers include IE5+, Firefox, Google Chrome, Safari Netscape 7+ and Opera 8+. On a Mac, AJAX menus are supported by Firefox, IE and Safari. However, if JavaScript is disabled, the menu is still available, but only as a pure CSS menu.
Automatic display of submenus
With the new AJAX menu, you just hover over a menu item and the submenu will load automatically. It is not necessary to click on the menu to view the sub-menu. This not only saves users valuable browsing time but also saves outgoing traffic.menu design
The AJAX menu can be styled by simply changing the megamenu.js and CSS styles. The former is used when JavaScript is enabled and the latter is used when it is disabled. You can customize the menu options manually or use pre-designed templates.There are many more features, but you won't be able to use or experience them unless you install the new image mega menu. So what do you need to do to include it on your blog or website?
LOOK
Add a mega image/thumbnail menu to Blogger
Step 1. Log into your Blogger account and go to your dashboard. Select the blog where you want to post your new mega menu.CSS:
Step 2: Click on " Template ", then click on the " Edit HTML " button. Click anywhere in the code area and use CTRL + F to make searching faster and easier. Type the following tag and press Enter to find it:
]]>:Once you find the tag, add the following code just above/before it.
.megamenu * { margin: 0; padding: 0; font-family: 'PT Sans Narrow'} ul.megamenu {list-style: none; row height: 1; overflow: visible! important} ul.megamenu: na { field: 0; padding: 0; content:' ';display:block;height:0px;clear:both}ul.megamenu li{float:left;display:inline;position:relative;text-transform:mapercase}ul. megamenu li a.menu-target:na{content:"";width:0;height:0;left-edge:3px solid transparent; border-right: 3 px transparent solid; top border: 3 px solid #fff; font size: 0; row height: 0; bottom: 22px; right: 5 pixels; position: absolute} ul.megamenu li a {display: block ;line-height:50px;padding:0px 20px;text-wrap:none;left-border:1px solid #000;box-shadow:1px 0 0 0 rgba( 255 , 255, 255, 0.1) box-shadow;color :# d9d9d9;font-size:14px;transition:all 0.3 seconds after entry and exit} 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; minimum width: 149px; float: no background: #000; textshadow: none} ul.megamenu ul li a {texttransform: 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 easy -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;limit:0 none !important ; field :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;right border:1px with dots #e5e5e5 !important}ul.megamenuid ul.leftmenulist a{border-left:none !important;color:#555}ul.megamenuid ul rightmenulist { position:relative;screen: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-holder{left:0;width:100%; height: 100%; position: absolute; crowded hidden; font size: 0; line-height: 0}ul.megamenuid ul.rightmenulist li .thumb-holder img{position: relative; top: 10px; charge 0; width: 100%; high: 100%; screen:lock} ul.megamenuid ul.rightmenulist li a{screen:lock; left edge. 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(' htt p: top: 50%; top-margin : - 11px;right: 5px}ul.megamenuid .menu-icon{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #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(top-center, # 3d3d3d , #212121) repeat offset 0 0; background:-webkit-linear-gradient(top,#3d3d3d,#212121);background-color:#3d3d3d;box-shadow:1px 1px 0 0 rgba(255, 2555, 2555 , 2555, 2555, 2255, 2555, 2255, 212121); , 0.1) margin; height: 50px; width: 100%; relative position; max width: 1000px; margin: 0 auto; padding: 0px}#megamenuid h5{font-size: 16px; margin-top:70px;text - align:center} #megamenuid h5:fore{content:"";position:absolute;top:50px;left:50%;width:5px;height:2px;margin-left:-4px ;border-left:2px solid black ;border-right: 2px solid black}#megamenuid h5:after{content:"";position:absolute;top:55px;left:50%;width:10px;height:5px;margin -left:-7px;border- top: 2px solid black; border-left: 2px solid black, border-right: 2px solid black; border-radius: 8px 8px 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-box:focus{border:none;outline:neno;background:#4C4C4C;color:#fff } li .search-box .search-button{background:url('http://4.bp.blogspot.com/-VJqk_zzkAuw/VazlDH_goDI/AAAAAAAAALVM/t-AjU3ix55k/s1600/search.png') without repetition; edge: no; pointer: pointer; padding: 5px 10px; fade: all 0.3 with easy in and out //TQMok5egm8c/Va44AXnjg3I/AAAAAAAAALV8/eq_8ICAlH2I/s1600/search-info.png ) no-repeat;background-position:5px;marginca-transform::upper 5px;padding:0px 15px 0px 40px; screen :none;border-radius:5px}
javascript:
Step 3: Check if jQuery plugin is installed on your blog. If not, you need to add a few lines of code first link (CTRL + F to find it). See the code below:
Note that:
- If the jQuery plugin already exists, remove the red line.
- To change the number of messages, change the value 4 to:
Number of seats: 4- To add another thumbnail when there is no image in the post, replace the blue highlighted URL with:
no thumbnail. ' http://2.bp.blogspot.com/-Z7jG9iO9OTg/Vazz6YJnFQI/AAAAAAAAALVs/wlSvXPgdDAo/s1600/no_image_disponible.png '
HTML code:
Step 4: Carefully add the HTML code to make sure the image dropdown works as expected. There are only three types of URLs that an AJAX menu accepts and they should be used accordingly.
Label URL: http://yourblogurlblogspot.com/search/label/LABELNAME .
Search Query: http://yourblogurl.blogspot.com/search?q=SEARCHQUERY
Search query label: http://yourblogurl.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY .
Among the three URLs, the search query must be scrambled with a special tool.
Step 5: Find the next row using CTRL+F.
Add the following HTML code right above this line:
Note: Replace the blue text with the URL of the tag and the red text with the name of the tag. This is the tag you added in your post editor's tag settings.
Step 6: Click Save Template for all changes to take effect.
If you can't find the row in step 5, go to the "Design " tab, click " Add Widget " and select the " HTML/JavaScript " widget. Copy the HTML code and paste it into the box… then click the Save button.
It!
With that done, your AJAX menu will be loaded with images and ready to use. Make sure you choose photos that match your menus and submenus to make your site cohesive and attractive. However, studies show that text accompanied by any image can attract attention.
Post a Comment for "Mega Menu with Images or Thumbnails for Blogger"