NEWEST

Friday, March 23, 2012

Membuat Widget Kotak Blogroll Sederhana

Oke sob,…kali ini saya akan menshare cara membuat widget kotak blogroll sederhana. Tapi sebelumnya, mungkin ada yang belum tahu artinya blogroll? Blogroll adalah saling menukar link blog masing-masing blogger dan meletakkannya pada blog mereka. Blogroll melibatkan dua orang blogger yang saling tukar menukar link blog mereka.
Oke langsung saja ke langkah pembuatan widgetnya.
1. Login blogger dan masuk ke Design >>> Page Elements
2. Klik Add a gadget.
3. Pilih HTML / Javascript
4. Copy kode dibawah ini.
 <style> .list { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNQznVsgl059gYnRu8nLnMUtBqZTgUx0ffwyQ-CE0AtBwNU5jno0L7WgGZ9pq11c-kh1qxjyJj-zSYvhpIrWCOKn5XrYGJwR_8W-EWNSWOhHBCbsP4coArwtcfUaqQsLCiiydwmxs9tX9m/s128/panah.gif") no-repeat left center;border-bottom:1px dotted #ddd;line-height:1.2em;padding:3px 0px 0px 20px; } </style>

<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:302px; height:220px; background-color: #transparant; border: 1px solid #fff;">

<div class="list">
<a href="http://alugora.blogspot.com/"target="_blank">Alugora Blogspot</a></div>

</div>

5. Paste pada field HTML.
6. Ganti kode berwarna merah dengan alamat blog yang terkait, dan ganti kode berwarna hijau dengan nama blog terkait.
7. Kode berwarna biru adalah ukuran widget. Sobat bisa menyesuaikannya dengan mengganti nilai angka pada kode tersebut (width=lebar, height=tinggi).
8. Kode yang tercetak hitam tebal adalah URL dari icon yang akan digunakan. Sobat bisa menggantinya dengan URL icon Sobat sendiri jika Sobat memiliki icon lain (icon size=17px). Jika tidak, biarkan saja seperti itu.
9. Klik Save untuk mengakhiri.
10. Untuk menambah link blog lagi, Sobat tinggal mengulang kode di bawah ini.
<div class="list">
<a href="http://alugora.blogspot.com/"target="_blank">Alugora Blogspot</a></div>
Letakkan kode tersebut di atas kode </div> terkahir. Tentu saja dengan mengganti tulisan berwarna merah dan hijau sesuai langkah nomer 6.
Selamat mencoba !



0 komentar:

Post a Comment