Menu Horisontal Untuk Template Sederhana

Y

ang saya maksud dengan template sederhana adalah template bawaan blogger ,sesuai dengan judulnya maka tutorial kali ini saya khususkan buat sobat blogger yang memiliki template asli bawaan blogger ,berikut contoh contoh template bawaan blogger

Sebenarnya tutorial tentang menu horisontal ini sudah pernah saya bahas beberapa waktu lalu secara lengkap ,baik itu untuk template modern ataupun untuk template sederhanan ,untuk yang belum baca artikelnya silahkan menuju kesini
Sebelum tutorial cara membuat menu horisontal untuk template sederhana ini saya buat alangkah baiknya jika sobat melihat hasilnya silahkan lihat sebentar disini

1. langkah yang pertama tentu sja sobat harus loggin dulu ke blogger.com
2. setalah masuk ke dasboard silahkan sobat mesuk ke Edit Html 
3. jangan lupa download lengkap dulu template untuk menjaga kemungkinan gagal dalam pengeditan
4. dengan bantuan Ctrl+F cari kode ]]></b:skin> lalu letak kan kode CSS nya tepat di atas kode ]]></b:skin> berikut kode nya :

   .topmenu2{width:100%;margin:0 auto;padding:0 auto}.topbar{background:url(http://karinafotocollection-project.googlecode.com/files/nav.png) repeat-x top left;width:940px;height:30px;border-bottom:2px solid #000;border-top:1px solid #000;margin:0 auto;padding:0 auto}.topbar ul{padding-left:0;color:#fff;text-transform:uppercase;list-style-type:none;font:bold 11px Arial;text-shadow:1px 1px 1px #000;margin:0}.topbar li a{float:left;display:block;text-decoration:none;color:#fff;border-right:1px solid #666;padding:8px 10px}.topbar li a:hover{background:url(http://karinafotocollection-project.googlecode.com/files/nav2.png) repeat-x;color:#fff;text-decoration:none}

5. Selanjutnya sobat cari kode </header> untuk mempermudah pencarian gunakan ctrl+F pada keyboard lalu letakkan kode di bawah ini tepat di bawah kode </header> berikut kode nya :

   <div class='topmenu2'>
   <div class='topbar'>
   <ul>
   <li><a expr:href='data:blog.homepageUrl'>HOME</a></li>
   <li><a href='#' rel='nofollow'>About Us</a></li>
   <li><a href='#' rel='nofollow'>Tutorial Blog</a></li>
   <li><a href='#' rel='nofollow'>Kode Warna</a></li>
   <li><a href='#' target='_blank'>Sitemap</a></li>
   <li><a href='#?max-results=10'>Hosting</a></li>
   <li><a href='#?max-results=10'>Domain</a></li>
   <li><a href='#?max-results=10'>Jquery</a></li>
   <li><a href='#' rel='nofollow'>Baner Exchange</a></li>
   </ul></div>
   </div>

6. Lalu save template (lakukan preview dulu sebelum di save )

NB:jika menu horisontal tersebut kepanjangan atau terlalu pendek lakukan pengeditan di bagian kode css pada text berwarna Biru

Judul Artikel : Menu Horisontal Untuk Template Sederhana

Terima Kasih Sobat sudah membaca Artikel saya Tentang Menu Horisontal Untuk Template Sederhana Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih