Widget blogroll yang satu ini sangat cocok dipasang di blog karena tampilannya yang sangat menarik dan bisa digunakan untuk kotak tukar link / link exchange. Widget blogroll yang keren ini dilengkapi dengan fungsi scroll. Jika anda penasaran seperti apa bentuk widget blogroll yang akan Terlintas share ini, anda dapat melihat screenshotnya dibawah ini. Widget blogroll atau widget tukar link keren ini dapat anda letakkan di sidebar atau didalam postingan blog.
Cara Membuat Blogroll / Kotak Tukar Link :
1. Login ke Blogger.com
2. Pada dasbor, plih Tata Letak => Tambah Gadget
3. Pilih HTML/Javascript lalu copy paste kode berikut ini
<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(http://2.bp.blogspot.com/-gZeq3kGj43w/UmCJYp027LI/AAAAAAAAASc/JsiwtaNUl-Q/s1600/blogroll+keren.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 :
- Ubah warna hijau dengan gambar anda
- Ubah ukuran widget blogroll yang warna kuning sesuai lebar sidebar blog anda
- Ubah warna biru dengan link dan titel yang diajak bertukar link
Semoga pembahasan tentang cara membuat blogroll keren di blog dapat bermanfaat, silahkan diterapkan di blog anda.
