Cara Membuat Widget Label Atau Blogroll Dengan Efek Keren

Oke, sekarang saya akan mengshare lagi artikel tentang desain blog. Kali ini saya akan mengshare tutorial cara membuat salah satu widget yang dipakai blog YONDARKNESS ini. Seperti yang kalian lihat dijudul artikel ini, kalian pasti sudah tahu apa widget yang saya maksud itu. Belum tahu? Oke, kalian bisa lihat di gambar postingan di atas.

Widget tersebut bisa kalian pakai sebagai Label, Blogroll, Tempat Link, atau apapun itu sesuai keinginan kalian. Ingin tahu cara membuatnya? Oke langsung saja, berikut ini caranya.

• Pertama, masuk dulu ke Dasboard blog kalian
• Masuk ke Template, pilih Edit Template
• Cari kode ]]></b:skin>
• Masukkan kode dibawah ini tepat di atas kode ]]></b:skin>

.widgetSystem a{text-decoration:none;border-bottom:1px solid #008ee0;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:#008ee0;color:#fff; }.widgetSystem li{list-style:none;margin:5px;}
.systemyondarkness{background:rgba(0,0,0,0.6);height:140px;overflow:auto;margin-top:10px;border:2px solid #008ee0;border-radius:3px}

• Kalau sudah, kalian simpan

Belum selesai sampai di situ, sekarang masuk ke Tata Letak, kemudian Add Gadget, pilih HTML/JavaScript. Kemudian kalian masukkan kode dibawah ini.

<div class='widgetSystem'>
<div class='systemyondarkness'>
<ul>
<li><a href='http://uzumakiramadan.blogspot.com' target='_self'>RAMADANAGATO</a></li>
<li><a href='http://uzumakiramadan.blogspot.com' target='_self'>RAMADANAGATO</a></li>
<li><a href='http://uzumakiramadan.blogspot.com' target='_self'>RAMADANAGATO</a></li>
<li><a href='http://uzumakiramadan.blogspot.com' target='_self'>RAMADANAGATO</a></li>
</ul></div></div>

Kemudian, kalian simpan.

Keterangan :
Ganti kode yang berwarna ORANGE dengan Link/Url yang akan dituju jika diklik
Ganti kode yang berwarna UNGU dengan Nama Link tersebut

Oke itulah caranya. Tidak hanya itu, kalian juga bisa memodifikasinya sendiri. Oke, sekian artikel kali ini. Semoga bermanfaat. Jika ada yang kurang jelas bisa kalian tanyakan di komentar.




Sumber : Yondarkness