Beranda » Creating Tab Menu Bar with Easy on Blogspot » Creating Tab Menu Bar with Easy on Blogspot

Creating Tab Menu Bar with Easy on Blogspot

If you pay attention to the display jadipintar.com blog, see a series of blue box with a white paper containing a list of menu items such as; SALAM I du'a, prayers I FASTING I DIE I INHERITANCE I KIAMAT, etc., (appearance before this, now see model 2 under-red) and if the cursor is touched, will be rolled up screen that contains many title of the article, That is called Menu and Sub-Menu bar. The menu and sub-menu bar is needed in order to search for information based on category or sub-menu. Giving sub menu bar also makes all the article title can be displayed on the screen in the eyes; our blog appear more scientific, organized and simple. If you are interested in installing it in the blog, which means you people who think systematically and liked keteraturan.Selamat try. Step Installation - Click Design - Select and select Edit HTML Template - Select / click Continue - Select / click Expand Widget Templates Search scrift following:

<div class = 'main-outer'>
 or
<div id = 'main-wrapper'>
 or
<div id = 'main'>
To make it easier, just click F3 on the keyboard and then choose the one scrift above. Based on my experience after flipping through information on www.google.com then matching is:
div class = 'main-outer'>
It could be different from the other templates ...
Once you can, copy and paste the following scrift just above scrift sought earlier:
<style>
/ * - Horizontal Menu + Sub Menu-- * /
# cat-nav {background: # 156,994; margin: 15px 0; padding: 0; height: 35px;}
# cat-nav a {color: # eee; text-decoration: none; text-shadow: # 033 148 1px 0px 0px; border-right: 1px solid # 156 994;}
# cat-nav a: hover {color: # fff; }
# cat-nav li: hover {background: # 000; }
# cat-nav a span {font-family: Verdana, Geneva, sans-serif; font-size: 11px; font-style: normal; font-weight: 400; color: # fff; text-shadow: none;}
# cat-nav .nav-description {display: block; }
# cat-nav a: hover span {color: # fff; }
#secnav, #secnav ul {position: relative; z-index: 100; margin: 0; padding: 0; list-style: none; line-height: 1; background: # 0d5e88; }
#secnav a {font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-weight: 700; font-size: 14px; display: block; z-index: 100; padding: 0 15px; line-height: 35px; text-decoration: none;}
#secnav li {float: left; width: auto; height: 35px;}
#secnav ul li {position: absolute; left: -999em; width: 200px; top: 35px}
#secnav li ul li {height: 30px; border-top: 1px solid # fff; }
#secnav li ul li a {font-family: Verdana, Geneva, sans-serif; width: 180px; line-height: 30px; padding: 0 10px; font-size: 11px; font-style: normal; font-weight: 400; color: # eee; }
#secnav ul ul li {margin: -30px 0 0 180px; }
#secnav li: hover ul ul, #secnav li: hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul {left: -999em; }
#secnav li: hover ul, #secnav li li: hover ul, #secnav li li li: hover ul, #secnav li.sfhover ul, li #secnav li.sfhover ul, li #secnav li.sfhover ul li {left: auto; }
#secnav li: hover, # secnav li.hover {position: static; }
# cat-nav #secnav {width: 100%; margin: 0 auto;}
</ style>
<div id = 'cat-nav ">
<ul class = 'fl' id = 'secnav'>
<li> <a href='#'> Home </a> </ li>
<li> <a href='#'> Menu 1 </a> </ li>
<li> <a href='#'> Menu 2 </a>
<ul id = 'sub-custom-nav ">
<li> <a href='#'> Sub Menu2 a </a> </ li>
<li> <a href='#'> Sub Menu2 b </a> </ li>
</ ul>
</ li>
<li> <a href='#'> Menu3 </a>
<ul id = 'sub-custom-nav ">
<li> <a href='#'> Sub Menu3a </a> </ li>
<li> <a href='#'> Sub Menu3b </a> </ li>
</ ul>
</ li>
<li> <a href='#'> Menu4 </a>
<ul id = 'sub-custom-nav ">
<li> <a href='#'> Sub Menu4a </a> </ li>
<li> <a href='#'> Sub Menu4b </a> </ li>
</ ul>
</ li>
<li> <a href='#'> Menu5 </a> </ li>
</ ul>
</ div>

EXPLANATION : 1. How to enter the URL address: Replace the # (blue) with a link / url you want. It could be a link posting or labels (categories) that exist on your blog. 2. How to write the title of the menu or the title of the posting: Change text in blue with the name of the menu and sub menu names you want. 3. How to change the width of the menu: please find the code:

# cat-nav {background: # 156,994; margin: 15px 0; padding: 0; height: 35px;} ---> the 3rd line. Then add the code (width: 900px) between {and}, so that it becomes:
# cat-nav {background: # 156,994; width: 900px; margin: 015px; padding: 0; height: 35px;}
900px figures only as an example, please change the number 900 to the size of the width you want, can also replace 900px code with code 100%.
4. To adjust the height menu please replace the number 35 on the code above 35px height you want.
5. To add or subtract the number of menu, please copy and paste or delete scripts with green color block (1 serving menu), the number of sub-menus can be added according to taste, for example submenu ..c, d, e, f, and so on.
6. To change the color, background and font, note the following scripts.
[1]. <style>
[2]. / * - Horizontal Menu + Sub Menu-- * /
[3]. # cat-nav {background: # 156,994; margin: 15px 0; padding: 0; height: 35px;}
[4]. # cat-nav a {color: # eee; text-decoration: none; text-shadow: 0px 1px # 033 148 ..........
A. Changing the background color menu: Please replace colors on a third line that I give red color, with the color you like, please click on the color code list.
B. Change the text color / font, please replace Warina on line 4 that I give a green color with the color that you like (change the code only).
C. Changing the model letters (font), notice scripts ranked 14th; replace purple paper with your favorite font type,
[14]. #secnav a {font-family: Georgia, "Times New Roman", Times, serif; font-
- Then click the Preview scrift first to make sure it is correct.
- Then keep / save.
Suggestion
* Back up your template before the change / add scrift above, to be used again if there is a problem with the addition of srcritf above.
* To eliminate the appearance of a double display to the Main Page,
- Then follow the following advice:
- Go to Menu Page
- Then select the page view by selecting the "do not show"
- Save the settings, the main page will show itself in accordance with scrift we type earlier.
Blogs can be published ...
If through this way that we share not succeed, try try again patiently friend. if many times it can not, a friend can be consulted via the comments section below.

Tips On Setting Sub Menu Layout / Side Bar Blog
After the tutorial on installing menu and sub menu on page article, this time still install menu and subnya, but on the outside of the post pages (side bar), do:
1. Log into your blogger dashboard
2. Select the Layout or Lay Out
3. Click the Add Gadget / Add a Gadget
4. Choose HTML / JAVASCRIPT.
(Leave field blank title gadget name, and then copy and paste the code below into the HTML column available)

<div id = "RickyMenu">
       <div id = "Rickybox">
      <ul id = "punch">
<li> <a href="#"> Home </a> </ li>
<li>
          <a href="#"> Sample Page </a>
          <ul>
<li>
              <a href="#"> Sub Page # 1 </a>
              <ul>
<li> <a href="#"> Sub Sub Page # 1 </a> </ li>
<li> <a href="#"> Sub Sub Page # 2 </a> </ li>
<li> <a href="#"> Sub Sub Page # 3 </a> </ li>
              </ ul>
            </ li>
<li> <a href="#"> Sub Page # 2 </a> </ li>
<li> <a href="#"> Sub Page # 3 </a> </ li>
<li> <a href="#"> Sub Page # 4 </a> </ li>
<li> <a href="#"> Sub Page # 5 </a> </ li>
          </ ul>
        </ li>
<li> <a href="#"> Sample Post </a> </ li>
<li> <a href="#"> Blog Page </a> </ li>
      </ ul>
    </ div>
  </ div>
Edit all of the name of the menu according to your wishes. Do not forget to replace the # with the URL that you want
5. Click Save / Save
Adjust the position of the gadgets these horizontal drop down menu where you want, and then click SAVE SETTINGS button at the top right of the screen.
If you perform the above steps correctly, you will see a horizontal drop down menu where you want.
For Adding Item in the horizontal drop down menu is very simple:
Please find at the end there is a code like this:
<li> <a href="#"> Blog Page </a> </ li>
      </ ul>
Right at the top </ ul> can be inserted new menus, and will look like this:
<li> <a href="#"> Blog Page </a> </ li>
<li> <a href="LINK BARU"> TEXT NEW </a> </ li>
      </ ul>
If more than one additional menu will look like this
<li> <a href="#"> Blog Page </a> </ li>
<li> <a href="LINK NEW 1"> TEXT NEW 1 </a> </ li>
<li> <a href="LINK NEW 2"> TEXT NEW 2 </a> </ li>
<li> <a href="LINK NEW n"> TEXT NEW n </a> </ li>
</ ul>

If one additional menu has a sub menu, then look at the code </ li> is derived menu to open a new space for sub-menu in the menu
<li> <a href="#"> Blog Page </a> </ li>
<li> <a href="LINK NEW 1"> TEXT NEW 1 </a> </ li>
<li> <a href="LINK NEW 2"> TEXT NEW 2 </a>
<li> <a href="LINK NEW SUB MENU SUB MENU 1"> 1 </a> </ li>
<li> <a href="LINK 2"> NEW SUB MENU SUB MENU 2 </a> </ li>
</ li>
<li> <a href="LINK NEW n"> TEXT NEW n </a> </ li>

Hello friends all this time info Nice Facts Nice will share how to create a sub menu bar on the blog. Sub menu bar indispensable for any genuine blogger. For the visitors it is also needed in order to search for information based on the category in the sub-menu bar. Giving sub menu bar also make your blog look more handsome, regular, and practical (not messy). The steps associated with editing HTML. For the bloggers beginners might find it difficult, but actually it is very easy. Follow the steps we describe below. Ok, after a pep talk. Let's check it out ... Here are the steps that must be done: Click Menu Design Select Menu Template and select the Edit HTML Select / click menu Continue Select / click the Expand Widget Templates

Search scrift following: To make it easier, just click ctrl + F on the keyboard and then choose the one scrift above. Based on my experience after flipping through information on www.google.com then matching is: div class = 'main-outer'>. It could be different from the other templates ... Once you can, copy and paste the following scrift just above scrift sought earlier:

EXPLANATION : Replace the # (blue) with a link / url you want. It could be a link posting or labels (categories) that exist on your blog. Replace paper blue color with the menu and sub menu you want. Each sub-menus can be added or subtracted as desired. 7. Then click preview it to ensure it is correct scrift. Then save / save. HTML editing and close it. Tip: back up your template before the change / add scrift above, to be used again if there is a problem with the addition of srcritf above. 8. To eliminate the appearance of Dabel display the Main Page, Then follow the following suggestions: Go to Menu Page Then select the page view by selecting the "do not show" Save the settings, the main page will show itself in accordance with scrift we type earlier. Blogs can be published ... If through this way that we share not succeed, try try again patiently friend. if many times it can not, a friend can consult with Info Nice Facts Nice via the comments section below.

<data:blog.pagename/>Creating Tab Menu Bar with Easy on Blogspot<data:blog.pagetitle/><title> <meta content="Creating Tab Menu Bar with Easy on Blogspot, there are stout tips on a blog, how to make writing can be clicked and there is a sub menu again in his making the blog becomes more mobile friedly, from understanding the structure of the code to create the look becomes better again" name="description"/> <meta content="Tips to make the sub menu, how to create a menu in the menu, how to create a tabbed menu bar, making the tab menu bar, koade create tab menu, the code makes menu " name="keywords"/>

Spesifikasih Dan Harga Smartphone Terbaru

Belum ada tanggapan untuk: "Creating Tab Menu Bar with Easy on Blogspot"

Post a Comment

Jangan Lupa Langganan