Cara Menambahkan CSS Navigation Bar Simpel Untuk Blogger

Dalam tutorial ini im akan menjelaskan bagaimana Menambahkan CSS Navigation Bar Simpel Untuk Blogger Anda, ikon pada sub menu. Menu bar ini bekerja dengan setiap internet browsers.Kamu dapat menghubungkan dengan halaman utama Anda dengan menggunakan navigasi ini. 

Copy Kode Berikut : 

• Pergi Ke > Edit Template > Tekan Ctrl + F dan mencari [[> </ b: skin>
• dan paste kode dibawah ini di atas kode [[> </ b: skin>

/* The CSS Code for the menu starts here tempat blogging */
.Tblogger_menu,.Tblogger_menu ul,.Tblogger_menu li,.Tblogger_menu a {
 margin: 0;
 padding: 0;
 border: none;
 outline: none;
}
.Tblogger_menu {
 height: 40px;
 width: 525px;
 background: #4c4e5a;
 background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}
.Tbloggerlogger_menu li {
 position: relative;
 list-style: none;
 float: left;
 display: block;
 height: 40px;
}
.Tbloggerlogger_menu li a {
 display: block;
 padding: 0 14px;
 margin: 6px 0;
 line-height: 28px;
 text-decoration: none;
 border-left: 1px solid #393942;
 border-right: 1px solid #4f5058;
 font-family: Helvetica, Arial, sans-serif;
 font-weight: bold;
 font-size: 13px;
 color: #f3f3f3;
 text-shadow: 1px 1px 1px rgba(0,0,0,.6);
 -webkit-transition: color .2s ease-in-out;
 -moz-transition: color .2s ease-in-out;
 -o-transition: color .2s ease-in-out;
 -ms-transition: color .2s ease-in-out;
 transition: color .2s ease-in-out;
}
.Tbloggerlogger_menu li:first-child a { border-left: none; }
.Tbloggerlogger_menu li:last-child a{ border-right: none; }
.Tbloggerlogger_menu li:hover > a { color: #8fde62; }
.Tbloggerlogger_menu ul {
 position: absolute;
 top: 40px;
 left: 0;
 opacity: 0;
 background: #1f2024;
 -webkit-border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 border-radius: 0 0 5px 5px;
 -webkit-transition: opacity .25s ease .1s;
 -moz-transition: opacity .25s ease .1s;
 -o-transition: opacity .25s ease .1s;
 -ms-transition: opacity .25s ease .1s;
 transition: opacity .25s ease .1s;
}
.Tbloggerlogger_menu li:hover > ul { opacity: 1; }
.Tbloggerlogger_menu ul li {
 height: 0;
 overflow: hidden;
 padding: 0;
 -webkit-transition: height .25s ease .1s;
 -moz-transition: height .25s ease .1s;
 -o-transition: height .25s ease .1s;
 -ms-transition: height .25s ease .1s;
 transition: height .25s ease .1s;
}
.Tbloggerlogger_menu li:hover > ul li {
 height: 36px;
 overflow: visible;
 padding: 0;
}
.Tbloggerlogger_menu ul li a {
 width: 100px;
 padding: 4px 0 4px 40px;
 margin: 0;
 border: none;
 border-bottom: 1px solid #353539;
}
.Tbloggerlogger_menu ul li:last-child a { border: none; }
.Tbloggerlogger_menu a.documents { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6NWIH-8GOyqqM_bV2lI9qu4lEfLou4Bb-CuDwVEirepTz_BuPlbrJYZ-3-d_o71ubPQulCGClAhMK-sJxIVNwVhOnnrnN1QrY6OqZ5fa0NowxySd1IrnM15wILwPi2RygIvOgi7cXT34p/s1600/docs.png) no-repeat 6px center; }
.Tbloggerlogger_menu a.messages { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzj16eLBzDEcTwPX2K_jXTgEUrzwaQj0-dEzbniuKAqduFM8WKfniF7s_ZZYq2Njk1iKWnhyphenhyphenGvmFjqhojNUemgvqez-in4mDkCU7zadYrWjawLA5T9hzoDR7gm7UkSb2gkSTvdozDvzAQ3/s1600/bubble.png) no-repeat 6px center; }
.Tbloggerlogger_menu a.signout { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglOJSml4aPAg584yto8HwlxqHGt0ixzAEe8BF13w5fYwg9t0npA9VVksM7saiT7oaPQWsmTFt4Y4gKrSkVJN2uDpwCGSqep2HrlfPJXsgwRB4eBp6V6LJCzVrUTANLP-AXjcCf1IacMVZF/s1600/arrow.png) no-repeat 6px center; }

• Pergi ke blogger dan klik Layout
• Klik Tambah Gadget dan pilih 'HTML / Javascript
• Paste kode di bawah ini.

<ul class="Tblogger_menu">
 <li><a href="#">Home</a></li>
 <li><a href="#">Likes</a></li>
 <li><a href="#">Views</a>
  <ul>
   <li><a href="#" class="documents">Documents</a></li>
   <li><a href="#" class="messages">Messages</a></li>
   <li><a href="#" class="signout">Sign Out</a></li>
  </ul>
 </li>
 <li><a href="#">Uploads</a></li>
 <li><a href="#">Videos</a></li>
    <li><a href="#">About</a></li>
 <li><a href="http://mas-basir.blogspot.com/2011/05/contact-mas-basir_3.html">Contact us</a></li>
</ul>

• Ganti Tanda # dengan Link Kamu
• Save 

Sekian Dulu Postingan Kali ini yang Membahas Tentang Cara Menambahkan CSS Navigation Bar Simpel Untuk Blogger Semoga Bermanfaat

Share this post