Mungkin anda suatu saat akan terganggu dengan banyaknya daftar link
yang ada pada blog anda. Mungkin daftar link yang anda miliki terlalu
banyak untuk ditampilkan pada sidebar, sehingga akhirnya memakan cukup
banyak tempat.
Oleh karena itulah, pada kali ini saya akan menjelaskan bagaimana cara membuat blogroll atau daftar link pada blog kita, yang tentu akan lebih menghemat tempat.
Priview :
Copy script blogroll di bawah ini, pastekan pada widget html yang anda miliki :
<!--Start Blogroll by som-plak.blogspot.com-->
<div class='widgetSystem'>
<div class='nama'>Link Sahabat</div>
<div class='kulit'>
<li><a href="
http://som-plak.blogspot.com">
Download Software</a></li>
<li><a href="
http://som-plak.blogspot.com">
Download Software</a></li>
<li><a href="
http://som-plak.blogspot.com">
Download Software</a></li>
<li><a href="
http://som-plak.blogspot.com">
Download Software</a></li>
<li><a href="
http://som-plak.blogspot.com">
Download Software</a></li>
</div>
</div>
<style type='text/css'>
.widgetSystem {
width:
80%;<!--Lebar-->
padding: 5px;
background: #DDD url(
url gambar anda) 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:
150px;<!--Panjang-->
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>
<!--Stop Blogroll by som-plak.blogspot.com-->
Keterangan :
- Kode yang berwarna "MERAH" ganti dengan URL blog teman.
- Kode yang berwarna "HIJAU" ganti dengan TEKS yang ingin ditampilkan.
- Kode yang berwarna "BIRU" sesuaikan dengan ukuran lebar blog anda.
- Kode yang berwarna "KUNING" sesuaikan dengan ukuran panjang blog anda.
- Kode "url gambar anda" ganti dengan url gambar yang anda inginkan.
Sekian dulu untuk hari ini. Jangan lupa kunjungi blog saya untuk menemukan hal - hal yang baru dan menarik. Salam Blogger...