Cara Membuat Blogroll Keren

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

<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/AVvXsEhJq9MpB1OAWhpvr1Xqao6faf7rBAKCa8qzRj26kuLSsaVEyQazfu4no9ZWlFTxT_lqJ8YOBm8e-oYuO9Q-4EgdBlucctuHkTkA7RdqJSSfJ-Ead9nfxiIUQ3z5hoflv66jA2iBSP87I3k/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>

6. Selesai, simpan dan lihat hasilnya

Keterangan :
- Yang saya kasih warna merah, silahkan ganti aja dengan kreasi mu sendiri


Nah sekian postingan tentang cara membuat blogroll di blog, semoga bermanfaat, selamat mencoba

Anda baru saja membaca artikel yang berkategori dengan judul Cara Membuat Blogroll Keren. Anda bisa bookmark halaman ini dengan URL http://insanlangnegara.blogspot.com/2012/06/cara-membuat-blogroll-keren.html. Terima kasih!

Ditulis oleh: nursyamsiah dra - Jumat, 08 Juni 2012