Cara Membuat Blogroll Keren Ala Blogger symbian's

Cara Membuat Blogroll Keren Ala Blogger Bondowoso

Blogroll dapat digunakan sebagai widget tukar link / link exchange. Jadi siapa saja yang bertukar link dengan blog anda, anda dapat meletakkan link tukar link / link patner di wiidget blogroll keren seperti yang terlihat pada gambar di bawah ini. Widget blogroll yang Blogger Bondowoso share ini disertai dengan fungsi scroll dan scroll akan terlihat apabila nama atau link di dalam kotak blogroll sudah melebihi ukuran / kapasitas blogroll. Yuk simak saja bagaimana cara membuat kotak blogroll dengan scroll di blogspot.

Cara Membuat Blogroll Keren Ala Blogger Bondowoso :
1. Masuk ke Blogger.com
2. Pilih Tata Letak
3. Pilih Tambah Gadget
4. Pilih HTML/Javascript dan masukkan kode script berikut kedalammnya

<div class='widgetSystem'>
<div class='nama'>Link Sahabat</div>
<div class='kulit'>
<a href="Url Blog">Titel</a>
<a href="Url Blog">Titel</a>
<a href="Url Blog">Titel</a>
<a href="Url Blog">Titel</a>
</div>
</div>
<style type='text/css'>
.widgetSystem {
    width: 95%;
    padding: 5px;
    background: #DDD url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh07yN7b1y3LJVqZsz_Y-y2Y32_rxu4t5lHlqPem9disGZbTbMiVtTqvE1IMsYADtKqIvFrWFBXGh1KtAq4Ug78Wgq-Wp7RlnHJrPNOWj1XgJog4An5rAH4fF_p_ZvRhokF0URWyiFx9g/s1600/gambar-blogroll.jpg) no-repeat;
    margin: 5px auto;
    border: 1px solid #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 1px 1px #fff;
    -moz-box-shadow: 0 0 1px 1px #fff;
    box-shadow: 0 0 1px 1px #fff
    }
.widgetSystem .nama {
    text-align: center;
    font-size: 1.5em;
    background: #FF0000;
    background: rgba(153, 153, 153, 0.6);
    padding:5px;
    color: #FFF;
    font-family: "Times new roman", Arial, sans serif;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radits: 5px
    }
.widgetSystem .kulit {
    background: #FFFFFF;
    background: rgba(153, 153, 153, 0.5);
    height: 250px;
    overflow: auto;
    margin-top: 5px;
    border: 1px solid #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
    }
.widgetSystem a {
    text-decoration: none;
    margin: 5px;
    background: #C71585;
    background: rgba(153, 153, 153, 0.7);
    padding: 5px;
    display: block;
    color: #BBB;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    font-family: "Arial", Arial, sans serif;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s
    }
.widgetSystem a:hover {
    background: #1E90FF;
    color: #0000CD
    }
.widgetSystem li {
    list-style: none;
    color: #CCC;
    margin: 5px
    }
</style>

Keterangan :
1. Silahkan ganti warna biru diatas dengan gambar anda sendiri
2. Ganti ukuran widget blogroll yang warna merah sesuai ukuran sidebar blog anda
3. Ganti warna pink dengan link dan titel blog yang diajak tukar link