Cara Membuat Link Partner Tampil Lebih Keren + Background

Tengah malam masih belum bisa merem nih mata, otak atik script buat mencoba di blog akhirnya jadi juga, Apa itu ?? 'Cara Membuat Link Partner Blog Tampil Dengan Background', Bingung gua bikin judulnya gimana, okelah langsung aja anda lihat demonya DISINI, Atau saya kasih Screen shotnya di bawah ini :






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/AVvXsEgWzLz7tUoDTH0Xp99C9rM76GoOB2426O7ihlyIYZPxma9hAJpidKe1t3mCzYnmtpqQ5w0hlNnPKuftadu59hoHSAhrPhrDcW_S49hORFL-LM2HixZb3BUmo_sr-tVKsyx6u6MxOHoWRYM/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://ilmu-dedy.blogspot.com/" target="_blank" title="Berita IT | Software | Empires | Hacking | Blog Tutorial, etc.">free shop ilmu</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://ilmu-dedy.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!

Posted in: Tutorial Blogger