Hanya cara memasang Sroll di postingan

Halo teman teman saya ingin bagi abgi artikel lagi yang tentunya gratis yaitu cara memeasang scroll dii post
Biasanya fungsi dari blogroll ini digunakan untuk menempatkan link untuk tukar link atau sejenisnya. Untuk tutorial cara membuat blogroll kali ini saya buat agak berbeda pada blogroll yang pernah anda jumpai. Blogroll yang saya gunakan yaitu disertai dengan background gambar dan nantinya bisa anda utak-atik menurut selera anda.

Seperti biasa untuk membuat / memasang blogroll keren pada blog, langkahnya sebagai berikut :
1. Masuk ke Blogger
2. Rancangan
3. Tambah gadget
4. HTML/Javascipt
5. Copy kode berikut ke dalam HTML/Javascipt

<span><span style="font-style: italic;"><span style="font-style: italic;"><div style="height: 100px; width: 400px; font: 16px/26px Georgia,Garamond,Serif; overflow: scroll;"><div class='widgetSystem'>
<div class='nama'>Blogroll</div>
<div class='kulit'>
<li><a href="http://url sahabat">titel link sahabat</a></li>
<li><a href="http://url sahabat">titel link sahabat</a></li>
<li><a href="http://url sahabat">titel link sahabat</a></li>
<li><a href="http://url sahabat">titel link sahabat</a></li>
<li><a href="http://url sahabat">titel link sahabat</a></li>
<li><a href="http://url sahabat">titel link sahabat</a></li>
<li><a href="http://url sahabat">titel link sahabat</a></li>
</div>
</div>
<style type='text/css'>
.widgetSystem {
    width: 75%;
    padding: 5px;
    background: #DDD url(http://4.bp.blogspot.com/-aD1u1hoJ1VY/T3LAseXmiYI/AAAAAAAAACc/bYzHIM5GLPc/s1600/richie-sambora.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-radius: 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>
</span></span></span>

6. Selesai, simpan dan lihat hasilnya

Keterangan :
- Yang saya kasih warna merah, silahkan ganti aja atau otak-atik aja angka-angka yang di atas
- Silahkan lihat kode warna html
 </div>