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
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
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'></style>
<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
}
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
nursyamsiah dra