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
