Cara Membuat Menu Horizontal Dekat Footer - Biasanya Menu Horizontal letaknya di bawah Header Blog, tapi ini lain sekarang Menu Horizontal bisa di Bawah Footer kaya di Blog Kucoba.com.
Lihat Gambar Di Bawah Ini.
Ganti Kode Yang berwarna Biru Dengan URL Blog Kamu.
Ganti Tanda # Dengan URL tujuan.
Ganti Kode yang berwarna Merah dengan Judul.
Jika sudah selsai Klik dulu Pertinjau Jika berhasil Klik Simpan Template, dan jika tidak berhasil Bersihkan Edit.
Lihat Gambar Di Bawah Ini.
Gambar ini saya ambil sebagai Contoh dari Kucoba.com
Sebelum kita masuk pada tahap Cara Membuatnya, kalian harus tau dulu Cara Membuat Menu Horizontal Dekat Footer ini
biasnya sudah ada dari Hasil Download Template saat kita Mendownload
Template, tapi setelah saya coba Copy Code nya ke Blog saya ternyata
Berhasil tapi kemungkinan Berhasil Di Blog kamu hanay 50%.Dan jika kamu
tetap tertarik bagaimana cara membuatnya sekarang Lihat langkah-langkah
di bawah ini.
- Login Ke Blog kamu.
- Pilih Rancangan lalu Pilih EDIT HTML.
- Sebelunya kamu Backup dulu Template dengan Cara Download Template Lengkap untuk mencegah hal-hal yang tidak di inginkan.
- Lalu Cari Kode ]]></b:skin>
- Lalu letakan Kode di bawah ini tepat di atas Kode ]]></b:skin>
/* Menu Horizontal Bottom
---------------------------------------------*/
.menubottompic {background:#A00000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi37ZSEvC4RDUGTBZoDllkgjwd3eMuIpc0MJ7nhp5uTGndwKioxlNLAmFiMsh5GtdiZCQomi0dNIrXDUP4eFFuHEDifz_kl_QcP9hgHveE4rZ8xcJ6phmJQ66HtWHNTTppqLoZHX7_F5Sw/s1600/bg_menubottom.gif) repeat-x top left;width:100%;margin:0 auto;padding:0 auto;height:42px;}
.menubottom {width:950px;height:20px;margin:0 auto;padding:14px 0;}
.menubottom ul {margin: 0;padding-left:0px;color:#fff;text-transform:none;
list-style-type: none;font:normal 11px Arial,sans-serif;}
.menubottom li{display: inline; margin: 0;}
.menubottom li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5cV4rqvz5VheR-OJZxI3o6dgsRr-iNcEWuI3yxgUc2xjgJJq9UMVw17emO_AA7YduSNOL5_SSS36Ibd4Jb9FCiUmVycmyhvhufkgp_KUSUP72c-CMqgiQ963eLGGhZQm0zaeaQCARVrk/s1600/bg_spritebottom.gif) no-repeat center right;float: left;display: block;text-decoration:none;
padding:1px 8px;color:#eee;line-height: 1.2em;}
.menubottom li a:visited{color:#eee;}
.menubottom li a:hover {color:#000;text-decoration:none;}
- Langkah Selanjutnya cari kode </body> biasanya kode </body> itu terletak bagian Akhir Template
- Lalu letakan kode dibawah ini tepat di atas kode </body>
<div class='menubottompic'>Keteranagan:
<div class='menubottom'>
<ul>
<li><a href='http://blazerracing.blogspot.com'>Home</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='#'>Support</a></li>
<li><a href='#'>Resource</a></li>
<li><a href='#'>Hot Topics</a></li>
<li><a href='#'>Popular News</a></li>
<li><a href='#'>Social Media</a></li>
<li><a href='#'>Technology</a></li>
<li><a href='#'>Politics</a></li>
</ul>
</div>
<div style='clear:both;'/>
</div>
Ganti Kode Yang berwarna Biru Dengan URL Blog Kamu.
Ganti Tanda # Dengan URL tujuan.
Ganti Kode yang berwarna Merah dengan Judul.
Jika sudah selsai Klik dulu Pertinjau Jika berhasil Klik Simpan Template, dan jika tidak berhasil Bersihkan Edit.
0 komentar:
Posting Komentar