Cara Membuat Label, Blogroll, Menu Accordion Keren Di Blog Dengan Css

Keyword : Cara Membuat Label Dengan Efek Transisi Keren, Cara Membuat Daftar Link Blog (Blogroll) Keren Dengan Css, Membuat Menu Accordion Vertikal Keren Dengan Css.

Kali ini saya akan mengshare sebuah tutorial tentang cara membuat label, blogroll, menu accordion keren di blog menggunakan sentuhan css. Bagaimana? Tertarik? Sebenarnya dulu sudah pernah saya share di blog lama yang sekarang dihapus. Tapi tidak apa-apa. 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://accelerator-bunshin.blogspot.com/' target='_self'>Link</a>
<li><a href='http://accelerator-bunshin.blogspot.com/' target='_self'>Link</a>
<li><a href='http://accelerator-bunshin.blogspot.com/' target='_self'>Link</a>
<li><a href='http://accelerator-bunshin.blogspot.com/' target='_self'>Link</a>
<li><a href='http://accelerator-bunshin.blogspot.com/' target='_self'>Link</a>
<li><a href='http://accelerator-bunshin.blogspot.com/' target='_self'>Link</a></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

Nah, itulah caranya. Kalian bisa menambah efeknya sesuka hati kalian. Sekian artikel kali ini. Semoga bermanfaat. Jika ada yang kurang jelas silakan tanyakan di komentar.

Sumber