Cara Membuat Menu di Blogger

Setelah sekian lama vakum karena kesibukan di kampus, di sela-sela waktu senggang saya sempatkan untuk mempublikasikan tutorial ini untuk menjawab pertanyaan teman saya tentang bagaimana membuah menu bar di blogspot. simak ulasannya di bawah ini :

Tutorial ini saya sajikan apabila kita menggunakan template default (standar) dari blogger. dengan penambahan menu navigasi tersebut blog kita akan semakin elegan.

1.    Seperti biasa login dulu di akun

2.    Pilih template dan klik edit HTML dan lanjutkan

3.    Sobat cari kode ]]></b:skin> dan letakkan kode berikut tepat di atas kode ]]></b:skin>
untuk mempermudah pencariah tekan CTRL + F

#menu{

       position:absolute;top:130px; /*posisi Menu navigasi*/

       clear: both;

       width: 900px;

       height: 37px;

    overflow:hidden;

       margin: 0px 0px 10px 0px;;

       padding: 0px;

       border:0px solid; border-color:black;

background: #2f2828; /*warna baground navigasi*/

-moz-border-radius:10px;

-webkit-border-radius:10px;

border-radius:5px;

}

.menuleft {

       float: left;

       height:37px;

       width: 10px;

}

.menuright {

       float: right;

       height:37px;

       width: 10px;

}

#menu ul {

    margin: 0;

       padding: 0px 0px 0px 15px;

       list-style: none;

       text-align: center;           

       font-family:'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif;

  /*font menu navigasi*/

       font-size: 13px;

       color: #FFFFFF;

}

#menu ul li a {

float: left;

padding: 10px;

color: #FFFFFF; /*Warna font menu*/

text-decoration: none;

display: block;

height: 17px;

border: 1px solid #717171; /*pembatas navigasi*/

border-top: 0px;

border-bottom: 0px;

border-left: 0px;

}

#tmenu ul li a:visited{

       color: #5d5b5b;

}

#menu ul li a:hover, #menu ul li .current{

       color: #ffffff;

       text-decoration: none;

       background: #4b4848; 

}

4.    Selanjutnya sobat blogger cari kode berikut:

·                   <header>  : untuk menempatkan menu di atas nama blog

·                   </header> : untuk menempatkan menu di bawah nama blog

Jike kedua kode di atas tidak ditemukan carilah kode <div id='content-wrapper'> 

4.    Copy kode di bawah ini dan letakkan tepat di atas kode <header> atau di bawah kode </header>

Atau <div id='content-wrapper'>

<div id='menu'>

  <ul class='menunav superfish'>

  <li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSiLrW2h6elZvXKkrAcau5gnTI-lgVmfkBxzwal1Qo5aySTpslil7C7kg6lRdj2uu5nTsuzYTVnMSTU7n8NhrEF8Q7JcedFgvCQmLcuheWVnayDCipGgV5uuW_avF9EsVL5tn0c_3LiZw/s1600/home_white.png' style='padding:0px;'/> Home</a></li>

  <li class='page_item page-item-2'><a href='http://dempobarat.blogspot.com/2013/05/dowload-gratis-kbbi-offline-terbaru-2013.html' title='About'>Download</a></li>

  <li class='page_item page-item-3'><a href='mailto:#' title='Contact'>About</a></li></ul>

</div>

5. Save template 

selamat mencoba,,,,,!

semoga bermamfaat bagi sahabat blogger

Terima Kasih Sudah Berkunjung Di Blog K-Conk

Dilarang Mengcopy-Paste seluruh atau sebagian artikel di atas dalam bentuk apapun. Hak cipta sepenuhnya dipegang oleh K-Conk dan dilindungi oleh Digital Millennium Copyright Act (DMCA). Tindakan Copy-Paste bisa secara otomatis membuat blog/website Anda TERHAPUS DARI INDEX GOOGLE.

Suka artikel ini? Bagikan : Facebook Twitter Google+ Linkedin Technorati Digg

Artikel Terkait :