27 February 2014

Membuat Menu Navigasi Untuk Template DroidPluss

Menu Navigasi

Membuat Menu Navigasi Untuk Template DroidPluss - Hai sobat semua, sekarang saya akan memberikan Tutorial Membuat Menu navigasi untuk template droidpluss, saya memberikan Tutorial ini karena menu pada template droidpluss hanya sedikit... dan supaya menu pada template droidpluss bertambah, jadi saya memberikan tutorial membuat menu navigasi di bawah header Template DroidPluss....


Tutorial Dibawah Ini :

Langkah Pertama Yaitu : Letakan Kode dibawah ini tepat diatas </style>
/* Page Navigation
----------------------------------------------- */
#showpageArea {font:normal normal 13px Oswald, Geneva, sans-serif;margin-top:0;padding-top:0;text-transform:uppercase}
.showpageArea a {font-size:16px;font-weight:bold;text-decoration:none;}
.showpageNum a {background:#7b8690;font-size:16px;font-weight:normal;text-decoration:none;text-transform:uppercase;margin:0 4px;padding:8px 12px;color:#fff;transition: all 0.3s ease-in;}
.showpageNum a:hover {background-color:#929fab;color:#fff;}
.showpagePoint {background-color:#7b8690;color:#fff;font-size:16px;font-weight:normal;text-decoration:none;margin:0 2px;padding:8px 12px;}
.showpageOf {display:none;font-size:16px;font-weight:normal;text-decoration:none;padding:8px 12px;margin: 0 2px 0 0;color:#fff;text-transform:none;}
.showpage a {background-color:#7b8690;color:#fff;font-size:16px;font-weight:normal;text-decoration:none;padding:8px;}
.showpage a:hover {background-color:#929fab;color:#fff;text-decoration:none;border-bottom:3px solid #c97100;}
.showpageNum a:link,.showpage a:link {text-decoration:none;}
}
Simpan Kode dibawah ini di atas </style>

#menu {background:#41474c;display:block;float:left;margin:0 auto 1em;width:100%;border-bottom:5px solid #41474c;}
#menu ul {list-style:none;margin:0;padding-left:0;}
#menu ul li {float:left;position:relative;}
#menu ul li:last-child {border-right:none;}
#menu a {display:block;line-height:3em;-webkit-padding-before:4px !important;
padding:0 2em;text-decoration:none;color:#98a7b2;font-size:14px;text-transform:uppercase;transition:all 0.2s ease-in-out;font-family:Oswald;}
#menu ul ul {box-shadow:0 3px 3px rgba(0,0,0,0.2);display:none;float:left;
position:absolute;left:0;top:43px;z-index:99999;}
#menu ul ul ul {left:100%;top:0;}
#menu ul ul a {background:#41474c;line-height:2em;padding:.2em .2em .2em 1em;
width:10em;height:auto;text-align:left;}
#menu .current,#menu li:hover &gt; a{background:#ff6860;color:#fff;}
#menu:hover .current{border:none;}
#menu ul ul a:hover,#menu ul ul :hover &gt; a {background:#ff6860;color:#fff;} 
#menu ul li:hover &gt; ul {display:block;}
.tab [type=radio],.tab label{display:none;}
}
Simpan Kode dibawah ini di atas </style>
@media screen and (max-width:980px){
.tab {position:relative;}
.tab label {background:#41474c;color:#98a7b2;width:100%;line-height:35px;cursor: pointer;text-align:center;display:block;position:relative;}
.tab label i {font-style:normal;font-size:13px;color:#98a7b2;}
.tab [type=radio] {position:absolute;top:0;left:0;width:100%;height:100%;opacity: 0;margin:0;z-index:1;display:block;cursor:pointer;}
#menu {display:none;background:#41474c;color:#98a7b2;width:100%;}
#menu ul {margin:0;padding:0;list-style:none;}
#menu li{width:100%;}
#menu a {color:#98a7b2!important;display:block;white-space:nowrap;text-decoration: none;padding:5px;border-right:none!important;padding:5px;display:block;width:100%;}  
#menu ul ul{display:block;position:static;float:none;max-width:none;width:100%;margin:0 0 0 5px;}
#menu ul ul a {max-width:none;width:100%;color:#98a7b2!important;background:#41474c!important;}
#menu ul ul a:hover {color:#fff!important;background:#ff6860!important;}
#menu ul ul{display:block;float:none;}
[type=radio]:checked ~ label {z-index:2;}
[type=radio]:checked ~ label ~ #menu {z-index:
999;display:block;width:100%;overflow:hidden;}
.close-tab {position: absolute;z-index:-1;top:0;left:0;width:100%;height:100%;}
.close-tab label {background:#41474c;color:#98a7b2;}
[type=radio]:checked ~ label ~ .close-tab {z-index:3;}
}

Langkah Kedua Yaitu : simpan kode ini di atas </head>
<div class='tab'>
     <input id='tab-1' name='tab-group-1' type='radio'/>
        <label for='tab-1'>Show Menu <i>+</i></label>
        <div class='tab close-tab'>
          <input id='tab-close2' name='tab-group-1' type='radio'/>
            <label for='tab-close2'>Hide Menu <i>-</i></label>
        </div>
<nav id='menu' role='navigation'>
  <ul>
      <li><a href='/'>Home</a></li>
      <li><a href='#'>Tutorial</a></li>
      <li><a href='#'>Template</a></li>
      <li><a href='#'>Fakta Unik</a></li>
      <li><a href='#'>Pengetahuan</a></li>
      <li><a href='#'>More</a>
    <ul>
          <li><a href='#'>Google</a></li>
          <li><a href='#'>Blogger</a></li>
          <li><a href='#'>Blogspot</a></li>
          <li><a href='#'>Website</a></li>
          <li><a href='#'>Tutorial</a></li>
          <li><a href='#'>Styling</a></li>
          <li><a href='#'>Webmaster</a></li>
        </ul>
        </li>
  </ul>
</nav>
</div>


Setelah Itu Simpan Template Dan Liat Hasilnya..... :D


Source : 
http://aisukablog.blogspot.com/2014/02/sands-of-time-blogger-template.html

Jangan Lupa Like dan Share Yaa... 
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic