Salam Blogger..sebenarnya sudah banyak sekali di bahas tuturial tentang Cara Membuat Menu Horizontal di Blog. mulai dari yang biasa/sederhana sampai dengan yang cukup canggih. kali ini saya akan berbagi tentang bagaimana Cara Mudah Membuat Menu Horizontal Tanpa Edit HTML Template. dari judulnya saja sudah kelihatan bahwa cara ini benar benar sederhana/simple, karena kita tidak perlu repot repot Meng edit/meng Utak atik template. cukup Copy Paste aja Script di Widget. untuk Melihat Contohnya gak perlu jauh jauh, Cukup anda lihat di bagian Atas Blog saya ini.
Oke sobat, Langsung aja simak Tutorialnya di bawah ini :1. Masuk Ke Account Blogger anda.
2. Pilih Tata Letak.
3. klik Add gadget/Tambahkan Gadget.
4. Pilih HTML java Script.
5. Copy dan Paste kode di bawah ini :
<!doctype html>
<style>.float li
{
float: left;
list-style: none;
}
.float li a
{
color:#fff;
text-decoration: none;
font-variant: big-caps;
background:#000;
border: 2px solid white;
padding: 10px 15px;
-webkit-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;
-ms-transition:all 1s ease-out;
-o-transition:all 1s ease-out;
transition:all 1s ease-out;
}
.float a:hover
{
text-decoration: none;
background:#fff;
color: #000;
}
</style>
<ul class="float">
<li><a href="#">judul</a></li>
<li><a href="#">judul</a></li>
<li><a href="#">judul</a></li>
<li><a href="#">judul</a></li>
<li><a href="#">judul</a></li>
<li><a href="#">judul</a></li>
<li><a href="#">judul</a></li>
</ul>
</!doctype>
<style>.float li
{
float: left;
list-style: none;
}
.float li a
{
color:#fff;
text-decoration: none;
font-variant: big-caps;
background:#000;
border: 2px solid white;
padding: 10px 15px;
-webkit-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;
-ms-transition:all 1s ease-out;
-o-transition:all 1s ease-out;
transition:all 1s ease-out;
}
.float a:hover
{
text-decoration: none;
background:#fff;
color: #000;
}
</style>
<ul class="float">
<li><a href="#">judul</a></li>
<li><a href="#">judul</a></li>
<li><a href="#">judul</a></li>
<li><a href="#">judul</a></li>
<li><a href="#">judul</a></li>
<li><a href="#">judul</a></li>
<li><a href="#">judul</a></li>
</ul>
</!doctype>
6. selesai.
Catatan :
*Ganti Kode Warna Pink dengan URL Anda.
*Ganti Kode Warna Biru Sesuai Keinginan Anda.
*Anda juga bisa mengubah warna background, warna border, tebal border dll. Silahkan Kreasikan Sesuai keinginan sendiri ya..
SALAM BLOGGER MANIA..!!!
Artikel Terkait
Tidak ada komentar:
Posting Komentar