:.
Gimana Sob, keren kan??? Mungkin bagi anda yang masih penasaran atau ingin mencobanya silahkan anda ikuti langkah-langkah berikut :
- Seperti biasa masuk blogger
- Pilih Rancangan >> Edit HTML
- Centang Expand Widget
- CTRL+F ketik ]]></b:skin>
- Kalau Sudah ketemu silahkan Pastekan code berikut di atasnya :
/*- Star Patner -*/
.widgetSystem {
width: 75%;
padding: 5px;
background: #DDD url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBvlVlhNH111rx5DFp1lCho8UKBiY7b5GTxf_0ny0a9SXFQBxyM3meUSM1CHFLbkeo2p4V7r9teK0AtdmnuQRa2M1yLnDDsTDlGC3If3GOgFICbXhskj5BcGIJFKrfqt983HgAOLDrFVM/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
}
/*- end -*/
- Kemudian Simpan
- Sekarang Masuk ke Rancangan -> Elemen Laman
- Seperti biasa Add Gadget/Tambah Laman
- Pilih HTML/JavaScript
- Masukkan Kode Berikut kedalamnya!
<div class='widgetSystem'>
<div class='nama'>My Friends</div>
<div class='kulit'>
<a href="http://amminessalafy.blogspot.com/" target="_blank" title="Berita IT | Software | Empires | Hacking | Blog Tutorial, etc.">Cah Dabloeng</a>
- Simpan Dan lihat hasilnya!
Keterangan :
- Warna Merah adalah Link Text Teman anda, silahkan Isi dengan link teman2 anda.
- Warna Biru adalah Nama Teman blog anda, silahkan isi dengan nama judul blog teman anda.
Untuk Menambahkan Link Anda tinggal menambahkan Code berikut di bawah kode di atas, Misalkan :
<a href="http://amienduty.blogspot.com/" target="_blank" title="Berita IT | Software | Empires | Hacking | Blog Tutorial, etc.">Power Of Lek Miend</a>Semoga bermanfaat bagi pembaca. salam....
Kalau belum jelas silahkan berkomentar!
