bagi kita yang suka ngeblog kepingin membuat tampilan blog kita sedikit bagus, minimal ada menu diatas halaman yang berguna untuk mengelompokkan entri berdasarkan topik
berikut saya mau sering sedikit ilmu tutorial cara membuat menu di bawah header dengan memanfaatkan gadget yang ada tanpa harus merubah code html pada template
adapun langkah langkahnya sebagai berikut:
1. login dulu ke google
2. buka blog
3. buka menu Tambahkan Gadtet pilih HTML/JavaScript
4. Masukkan code yang ada di bawah ini:
<style>
#tab_menu {
background:url(https://goo.gl/lq5RoX) no-repeat;
height:50px;
width:960px;
line-height:50px;
list-style:none;
margin-top:10px;
font-size:14px;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
overflow:hidden;
}
#tab_menu li {
float:left;
border-right:1px solid #FFA722;
border-left:1px solid #CC5200;
}
#tab_menu li:first-child {
border-left:none;
}
#tab_menu li:last-child {
border-right:none;
}
#tab_menu li a{
text-decoration:none;
float:left;
display:block;
height:50px;
padding:0 20px;
color:#FFF;
}
#tab_menu li a.current, #tab_menu li a:hover, #tab_menu li a.tool:hover {
color:#622900;
text-shadow:1px 1px 0px #E8964B;
}
#tab_menu li a.tool{
color:#000;
text-shadow:1px 1px 0px #E8964B;
}
</style>
<ul id='tab_menu'>
<li ><a href='#'>HOME</a></li>
<li ><a href='#'>REVIEW</a></li>
<li ><a href='#'>TUTORIAL</a></li>
<li ><a href='#'>DOWNLOAD</a></li>
</ul>
5. Selanjutnya masukkan alamat blog anda pada baris yang ada tanda # merah, timpa tanda # nya, pada code diatas ada empat menu yang bisa anda gunakan untuk membuat menu , sauadara bisa menambah atau mengurangi sesuai dengan kebutuhan, sebagai contoh:
umpama blog kita alamatnya http://trickdantip.blogspot.co.id/ maka ganti tanda # pada
<li ><a href='#'>HOME</a></li> menjadi
<li ><a href='http://trickdantip.blogspot.co.id/ '>HOME</a></li>
Untuk Review atau Tutorial atau yg lainnya agar halaman ngelink tambahkan /search/nama label post yang kita miliki. contohnya, kita kepingin kalau pengunjung blog kita mau membuka halaman kelompok Tutorial saja dengan klik menu tutorial maka contohnya seperti ini
<li ><a href='http://trickdantip.blogspot.co.id/ search/Tutorial'>TUTORIAL</a></li>
6. Sedang untuk warna latar belakang bila saudara ingin mengganti warnanya, saudara bisa mengganti link yang ada di code diatas ( background:url(https://goo.gl/lq5RoX) no-repeat;) yang berwarna merah di ganti dengan warna yang sudah saya sediakan lima pilihan warna di bawah ini
Demikian semoga bermanfaat
hitam
https://goo.gl/nVcLwE
abu abu
https://goo.gl/3iYVHG
hijau
https://goo.gl/lq5RoX
hijau daun
https://goo.gl/nHvmO3
putih
https://goo.gl/F2NzrQ
Artikel keren lainnya:
Belum ada tanggapan untuk "Tutorial Tip dan Trik membuat menu pada blog tanpa merubah code html pada mainblog"
Post a Comment