cara membuat blogroll

Hai sobat blogger,kali ini saya akan share tentang :"Cara buat blogroll keren dan  bergambar",Blogroll ini berguna untuk bertukar link,Nah jika kita ingin blog kita PageRanknya dan traffic blognya tinggi kita harus banyak backlink,Penasaran?kita lihat yuk










Cara-Caranya :
 1.Login > Tatak Letak > Tambah gadget > HTML JavaScript lalu masukan HTML berikut : 

<div class='widgetSystem'>
<div class='nama'>Link Sobat</div>
<div class='kulit'>
<li><a href="URL anda">Judul</a></li>
<li><a href="URL anda">Judul</a></li>
<li><a href="URL anda">Judul</a></li>
<li><a href="URL anda">Judul</a></li>
<li><a href="URL anda">Judul</a></li>
<li><a href="URL anda">Judul</a></li>
<li><a href="URL anda">Judul</a></li> 
</div>
</div>
<style type='text/css'>
.widgetSystem {
    width: 75%;
    padding: 5px;
    background: #DDD url(https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcSH6cyOxirqzb6Eq9QAEMLuNj-8fPaBMf-igtuCtId_OyHKiDjAaQ) 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;
  $20 margin: 5px
    }
</style>

*Ganti Text berwarna Hijau dengan Judul Anda sendiri
*Ganti Text berwarna Merah dengan URL anda atau teman anda
*Ganti Text berwarna Kunik dengan Title atau Judul Anda sendiri 
*Ganti Text berwarna Biru dengan URL Gambar  Anda sendiri 

Semoga Bermanfaat!!