Cara Membuat Menu Horizontal CSS Stripped Red

Hallo sobat kali ini Fortynyr bakalan kasih tau Cara Membuat Menu Horizontal CSS Stripped Red Blogger atau Blogspot seperti postingan sebelumnya Cara membuat menu navigasi Horizontal sama menu horizontal tetapi yang membedakan bentuknya lebih menarik lagi dengan bentuk CSS Stripped Red, 

ok sobatku langsung saja cekidott..

Cara Membuat Menu Horizontal CSS Stripped Red:

1. Login ke Blogger.

2. Di halaman Dasbor, kita pilih Rancangan.

3. Kemudian pilih Edit HTML

4. Beri tanda centang pada Expand Template Widget

5. Cari kode ]]></b:skin>

6. Jika sudah ketemu taruh kode berikut di atasnya:

Kode CSS:
ul.menu {list-style-type:none;width:auto;position:relative;display:block;height:33px;font-size:.6em;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT0F37oOc94uNrQ8VINuw4b3qdGz7KcR9JgeoeE8QmH3cmTNtsRNS2zEdR3vHIJZtOkgSYQR1M3iGKcWzDPt8slspScOQHju2Vr6GacC6feF7c4zPqS70lrMfWFRumK3uHzRILzwfD7sM/s1600/bg.png") repeat-x top left;font-family:Verdana,Helvetica,Arial,sans-serif;border:1px solid #000;margin:0;padding:0;}ul.menu li {display:block;float:left;margin:0;padding:0;}ul.menu li a {float:left;color:#A79787;text-decoration:none;height:24px;padding:9px 15px 0;font-weight:normal;}ul.menu li a:hover,.current {color:#fff;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT0F37oOc94uNrQ8VINuw4b3qdGz7KcR9JgeoeE8QmH3cmTNtsRNS2zEdR3vHIJZtOkgSYQR1M3iGKcWzDPt8slspScOQHju2Vr6GacC6feF7c4zPqS70lrMfWFRumK3uHzRILzwfD7sM/s1600/bg.png") repeat-x top left;text-decoration:none;}ul.menu .current a {color:#fff;font-weight:700;}/*Garis Merah*/ul.menu.red{background-color:#B11718;}ul.menu.red li a:hover, .menu.red li.current {background-color:#DE3330;}


3. Save template.
4. Copy Kode HTML, ganti #(url homepage anda) dengan url homepage blog, dan # dengan url-url lain yang ingin dipasang di menu. Ganti kata-kata Home, About Me, Contact Me , dan lain-lain dengan anchor text yang diinginkan.


Kode HTML:
<ul class="menu red">
<li class="current"><a href="#(url homepage anda)">Home</a>
</li><li><a href="#">About me</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Guest Book</a></li>
<li><a href="#">Link Exchange</a></li></ul>

Selamat Mencoba yaa...

^_^

Ditulis Oleh : Fortynyr Blog's™ ~ Tutorial Blogger,Tips,Trik Computer,Share dan SEO

Artikel Cara Membuat Menu Horizontal CSS Stripped Red Semoga bermanfaat bagi sobat blog. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar dan Jangan lupa follow, Like. | Sertakan Link Sumber Bila Copy Paste