Cara Membuat Blogroll Keren dengan CSS

Blogroll Keren Dengan CSS -- Memang Blogroll sendiri juga banyak digunakan pada blog untuk memasang Link Sahabat dan banyak yang memanfaatkannya untuk mendapatkan Backlink terutama dari blog yang sudah ber PageRank banyak.

Banyak cara membuat Blogroll yang cantik dan keren, bisa menggunakan Marquee atau dengan Sentuhan CSS.Kali ini Warehouse1994 akan memberikan tutorial bagaimana Membuat Blogroll Keren dengan CSS.Tampilannya akan seperti gambar dibawah ini :

SCREENSHOOT

Step by Step untuk Membuat Blogroll Keren dengan CSS :

  

1. Masuk ke Blogger 
2. Masuk ke edit Tata Letak ( Layout )
3. Klik Add a Gadget ( Tambah Gadget ) 
4. Pilih HTML/JavaScript
5. Copy dan Paste kode berikut ke dalam Gadget HTML/JavaScript

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh95CQhyphenhyphenZFQS0Xv48Jc7oLKSwg5p8RKRwD6An5UfvzusQIbbdJTcfa11XS5APs0_MHN4tefWnqmYhzw0tZaTcKCAKeJGrVRkxeWYHS1yV29vWiiD2WSOOk-RlwYWtQivHeedxj84pURwLY/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;
  $20 margin: 5px
    }
</style>

Simpan dan lihat hasilnya.

NB :

Jika kurang suka dengan desain saya, sobat bisa edit sendiri dengan selera sobat masing-masing.