Cara Membuat Menu Kategori di Blog Secara Manual dengan Sentuhan CSS

Kali ini saya akan mengshare sebuah tutorial tentang cara membuat Menu kategori secara manual di blog menggunakan sentuhan css. Bagaimana? Tertarik? Langsung saja, berikut ini adalah caranya :

• Pertama, masuk dasboard blog kalian

• Masuk ke Template, pilih Edit HTML

• Masukkan kode di bawah ini tepat di atas kode ]]></b:skin>

.widgetSystem a{text-decoration:none;border-bottom:1px solid #46eb14;display:block;font-size:13px;font-weight:700;font-family:Arial,Arial,sans serif;-webkit-transition:all .5s ease 0;-moz-transition:all .5s ease 0;-o-transition:all .5s ease 0;transition:all .5s ease 0;margin:5px;padding:5px}

.widgetSystem a:hover{background:#46eb14;color:#fff}

.widgetSystem li{list-style:none;margin:5px;} 

.systemyondarkness{background:#000; height:140px; overflow:auto; margin-top:10px; border:2px solid #46eb14; border-radius:3px}

• Kemudian simpan

Keterangan :

Ganti kode yang berwarna HIJAU dengan kode warna garis bawah link yang kalian inginkan

Ganti kode yang berwarna MERAH dengan kode warna background link saat hover yang kalian inginkan

Ganti kode yang berwarna KUNING dengan kode warna teks link yang kalian inginkan

Ganti kode yang berwarna UNGU dengan kode warna background widget yang kalian inginkan

Ganti kode yang berwarna ORANGE dengan kode tinggi widget yang kalian inginkan

Ganti kode yang berwarna BIRU dengan ukuran border widget yang kalian inginkan

Ganti kode yang berwarna AQUA dengan kode warna border widget yang kalian inginkan

Ganti kode yang berwarna PINK dengan tingkat kelengkungan widget yang kalian inginkan

Jika tidak tahu kode warna yang kalian inginkan, kalian bisa cari disini Tool Kode Warna

• Belum selesai, sekarang masuk ke Tata Letak
• Tambahkan widget HTML/JavaScript di tempat yang kalian inginkan
• Masukkan kode di bawah ini

<div class='widgetSystem'><div class='systemchikara'>
<ul><li><a href='http://bayupost.blogspot.com/' target='_self'>Link</a>
<li><a href='http://bayupost.blogspot.com/' target='_self'>Link</a>
<li><a href='http://bayupost.blogspot.com/' target='_self'>Link</a>
<li><a href='http://bayupost.blogspot.com/' target='_self'>Link</a>
<li><a href='http://bayupost.blogspot.com/' target='_self'>Link</a>
<li><a href='http://bayupost.blogspot.com/' target='_self'>Link</a></li></li></li></li></li></li></ul>
</div></div>

• Terakhir, simpan widgetnya 

Keterangan :
Ganti kode yang miring/italic dengan link tujuan link yang kalian inginkan
Ganti kode yang bergaris bawah/underline dengan nama link yang kalian inginkan