Cara Membuat Menu Horizontal di Blog

Nih sedikit pengetahuan cara Membuat Menu Horizontal Blogspot . Bagaimana Tutorial Cara Membuat Menu Horizontal di blogspot seperti menu kolom Home, About, Contact and Other secara horizontal,banyak jenis menu horizontal yang bisa divariasikan, seperti dengan dropdown CSS ,multi level jquery ,anvigasi slide dan dengan html jquery.
nah kali ini saya akan berikan tutorial cara Membuat Menu Horizontal pada Blogspot , berikut caranya :
1.Login ke blogger.com, lalu pilih design .
2.Pilih Edit HTML, download full template untuk jaga jaga kalau nanti ada kesalahan jadi bisa di kembalikan   seperti semula templatenya.
3.Lalu Centang kotak expand template widget pada template Anda, dan cari kode: </b:skin>
Hapus kode tersebut dan ganti dengan kode:


 </b:skin><style type='text/css'>.pagemenu-container #pagemenu{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:#000 repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase}.pagemenu-container #pagemenu ul{margin:0;5px;0px;5px;padding:0;border:1px solid $bordercolor;list-style-type:none;width:860px}.pagemenu-container #pagemenu ul li{display:block;float:left;margin:0 1px 0 0}.pagemenu-container #pagemenu ul li a{display:block;float:left;color:#fbdafa;text-decoration:none;padding:10px 18px 0 18px;height:28px}.pageme nu-container #pagemenu ul li a:hover,.pagemenu-container #pagemenu ul li a.current{color:#fff;background:#306 no-repeat top center}</style>

Lalu sobat cari kode:

<div id='content-wrapper'>
Hapus dan ganti dengan:


    <div class='pagemenu-container'> <div id='pagemenu'> <ul> <li class='page_item home'><a href='http://www.aryciker.co.nr/' title='Home'>Home</a></li> <li class='page_item page-item-2'><a href='http://www.aryciker.co.nr/l' title='About'>About</a></li> <li class='page_item page-item-3'><a href='http://www.blogger.com/profile/16474552668039271355' title='Contact Us'>Contact</a></li><li class='page_item page-item-4'><a href='http://www.aryciker.co.nr/2011/10/daftar-isi.html' title='Daftar Isi'>Daftar Isi</a></li><li class='page_item page-item-5'><a href='http://www.aryciker.co.nr/2011/12/belajar-blog-dari-awal.html' title='Belajar Blog'>Blog</a></li></ul></div> </div> <div id='content-wrapper'>



Keterangan:

Kode background: #000 : warna latar belakang dari menu horizontal, #000 adalah kode warna hitam, silakan ubah warna latar sesuai keinginan sobat.

Kode width:860px : panjang horizontal menu nya, silakan samakan dengan panjang pada kode#header-wrapper atau panjang #outer-wrapper blog sobat.

Kode{color:#fff;background:#306 no-repeat top center} : warna text dan warna background pada saat disorot dengan pointer mouse.

Jangan lupa gan url link aryciker blog dengan punya sobat .
Semoga tutorial cara Membuat Menu Horizontal di Blogspot dapat bermanfaat bagi sobat blogger semua.

Read More

Cara Membuat icon Menu blog

 Wew akan membahas tutorial cara mudah dan cepat membuat icon gambar di menu blogspot sepeti home,about dan lain lain dengan icon atau gambar yang kita miliki sendiri, oke dari pada cerita terus mending langsung saja Sobat  meluncur di langkah-langkahnya di bawah ini :
1. Sobat login ke blogger
2. Kemudian Pilih  rancangan atau design
3. Lalu pilih edit html
4. Cari kode]]></b:skin>  ,lalu copas kode dibawah ini letakkan di atas kode ]]></b:skin>

   #newnavbar ul li{ list-style-type: none; display:inline; margin:0px; padding:30px; border:0px solid; }

5.Kalau suda sobat klik  Save
6. masuk ke bagian rancangan ,pilih add gadget ,html javasript lalu kopas kode di bawah ini :

<div id='newnavbar'> <ul> <li><a href="URL "><img src="URL gambar" /></a></li> <li><a href="URL "><img src="URL gambar" /></a></li> <li><a href="URL "><img src="URL gambar" /></a></li> sobat bisa menambahkan dengan yang lain bila mau </ul></div>

Dan sesudah itu sobat klik save, demikian cara membuat icon menu bergambar di blogspot semoga bermanfaat untuk sobat semua .

Read More