-
Jumat, 12 Juli 2013
Cara Membuat Widget Label Atau Blogroll Dengan Efek Keren
Keyword : Cara Membuat Widget
Blogroll, Label, Atau Link List Di Blog, Cara Membuat Label Keren Dengan
Css3, Mengedit Gadget Blogroll Keren Di Blog.
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'>Kemudian, kalian simpan.
<div class='systemyondarkness'>
<ul>
<li><a href='http://anonymous-bunshin.blogspot.com' target='_self'>YONDARKNESS</a></li>
<li><a href='http://anonymous-bunshin.blogspot.com' target='_self'>YONDARKNESS</a></li>
<li><a href='http://anonymous-bunshin.blogspot.com' target='_self'>YONDARKNESS</a></li>
<li><a href='http://anonymous-bunshin.blogspot.com' target='_self'>YONDARKNESS</a></li>
</ul></div></div>
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.
