http://www.yahoo.com
How to add a Tab on Your Blog
blogger and gentlemen, it could be as long as we assume that the pull down menu or sub-menu contained in the horizontal menu bar a blog can only be made on a blog that uses a custom template only. This is because each time we add a new menu using the 'Page (Page)' contained in the Blogger dashboard, then the menu is displayed in a single line tab menu, so it looks neat less impressed if the number of the menu is used quite a lot. But did you know that we can also customize the default template provided by Blogger to add a sub menu to the tab menu provided.
Keep in mind that if the number of the menu displayed quite a lot, while from the displayed menu there are several menus that have the same category, then it would actually be more effective if the menu with the same categories are grouped together in a sub menu or the pull down menu. And this is one of the goals of the standard Blogger template customization, that is to classify some of the menu that has the same category in a menu with pull down menus or sub-menus in it.
Keep in mind that if the number of the menu displayed quite a lot, while from the displayed menu there are several menus that have the same category, then it would actually be more effective if the menu with the same categories are grouped together in a sub menu or the pull down menu. And this is one of the goals of the standard Blogger template customization, that is to classify some of the menu that has the same category in a menu with pull down menus or sub-menus in it.
Well, for this purpose then you can do so by doing the following steps in order.
First, ubahsesuaikan menu tabs and menu settings page will be displayed, where the way is as shown in the picture below.
First, ubahsesuaikan menu tabs and menu settings page will be displayed, where the way is as shown in the picture below.
Image source: blogger.com
Description:
1. Select 'Tab top' to display the menu bar below the header.
2. The menu is made in the passage (in sign number 2) only menu that does not have a sub menu in it.
If the settings have been adjusted, then the next menu click 'Save settings'.
Second, open the template editor by clicking on the 'Template'> 'Edit HTML'> 'Continue'> 'Expand Widget Templates'.
Third, find this code]]> </ b: skin> and then paste the following CSS code right above it
Description:
1. Select 'Tab top' to display the menu bar below the header.
2. The menu is made in the passage (in sign number 2) only menu that does not have a sub menu in it.
If the settings have been adjusted, then the next menu click 'Save settings'.
Second, open the template editor by clicking on the 'Template'> 'Edit HTML'> 'Continue'> 'Expand Widget Templates'.
Third, find this code]]> </ b: skin> and then paste the following CSS code right above it
tabs-inner .widget li ul { z-index: 100; position: absolute; left: -999em; height: auto; margin: 0; padding: 0; border: 1px solid #999999; } .tabs-inner .widget li ul, .tabs-inner .widget li ul a, .tabs-inner .widget li ul li:first-child a { -moz-border-radius: 0px; -webkit-border-radius: 0px; -goog-ms-border-radius: 0px; border-radius: 0px; } .tabs-inner .widget li:hover ul, .tabs-inner .widget li.sfhover ul { left: auto; } .tabs-inner .widget li li a:hover, .tabs-inner .widget li li a:active { color: #ffffff; background: rgb(51, 102, 153); } .tabs-inner .widget li ul a { display: block; padding-left: 1.25em; padding-right: 1.25em; margin-left: 0px; margin-right: 0px; border: none; color: #000000; background: rgb(243, 244, 246); } .tabs-inner .widget li ul, .tabs-inner .widget li ul a { width: 220px; }
Description:
You can change the line color, text, background, and tailor a wide menu with the following code:
Code border: 1px solid # 999999; used for setting up the line, color: # 000000; background: rgb (243, 244, 246), is used to set the default color of the text and beckground, color: # ffffff; background: rgb (51, 102, 153), is used to set the text color and background when highlighted, and width: 220px; used to set the width of the sub menu.
Fourth, look for the code <li> <a expr:href='data:link.href'> <data:link.title/> </ a> </ li> and then note that there are several code <b:/loop> lines below. Now, insert the following code in the format right under <b:/loop>.
You can change the line color, text, background, and tailor a wide menu with the following code:
Code border: 1px solid # 999999; used for setting up the line, color: # 000000; background: rgb (243, 244, 246), is used to set the default color of the text and beckground, color: # ffffff; background: rgb (51, 102, 153), is used to set the text color and background when highlighted, and width: 220px; used to set the width of the sub menu.
Fourth, look for the code <li> <a expr:href='data:link.href'> <data:link.title/> </ a> </ li> and then note that there are several code <b:/loop> lines below. Now, insert the following code in the format right under <b:/loop>.
<li><a href='#'>Menu</a> <ul> <li><a href='URL'>Sub Menu 1</a></li> <li><a href='URL'>Sub Menu 2</a></li> <li><a href='URL'>Sub Menu 3</a></li> </ul> </li>
Description:
Change the URL matches the URL that will be used in the sub menu and adjust the 'Menu' and 'Sub Menu' in accordance with the text to be displayed. And when it will make some pull down menu, then repeatedly copy the code below and then adjust the settings in the same way as before.
Fifth, save the template.
And subsequently as an example of the result of the application of these techniques is as shown in the picture below.
Change the URL matches the URL that will be used in the sub menu and adjust the 'Menu' and 'Sub Menu' in accordance with the text to be displayed. And when it will make some pull down menu, then repeatedly copy the code below and then adjust the settings in the same way as before.
Fifth, save the template.
And subsequently as an example of the result of the application of these techniques is as shown in the picture below.
Tidak ada komentar:
Posting Komentar