Trik Membuat Link Partner Blog Ada Backgroundnya

Hallo sobat blogger semua ,postingan kali ini saya akan membagi Trik Membuat Link Partner Blog Ada Backgroundnya,hehehe maaf sob judulnya agak panjang...
Dan berikut Screen Shootnya:

Berikut Tutorial Cara Pemasangannya :
1. Login ke akun blogger sobat dulu
2. Pilih Rancangan Kemudian Pilih Edit HTML
3. Centang Expand Widget
4. Tekan CTRL+F,Ketik ]]></b:skin>
5. Jika sudah ada,sobat pastekan kode dibawah tepat diatas kode ]]></b:skin>

/*- Start-*/
.widgetSystem {
    width: 75%;
    padding: 5px;
    background: #DDD url(http://files.energystorageforum.com/Energy%20Storage%20World%20Forum%202013%20Berlin%20240x400%20Fat%20Skyscraper%20B.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 -*/ 
6. Jika sudah selesai,Pratinjau terlebih dahulu.
7. Kemudian jika sudah tidak ada yang error lagi,klik Simpan Template
8. Sekarang masuk Rancangan-Pilih Elemen Laman
9. Kemudian Tambah Gadget-Pilih HTML/JAVASCRIPT
10 Dan pastekan kode berikut
  

    <div class='widgetSystem'>
    <div class='nama'>List</div>
    <div class='kulit'>
    <a href="http://fatholthearseko.blogspot.com/" target="_blank" title="Free Share | Download Software | All Trik">Kumpulan HTML Blog™</a><br>
    <a href="http://fatholthearseko.blogspot.com/" target="_blank" title="Free Share | Download Software | All Trik">Kumpulan HTML Blog™</a> <br>
    <a href="http://fatholthearseko.blogspot.com/" target="_blank" title="Free Share | Download Software | All Trik">Kumpulan HTML Blog™</a> 


11. Simpan dan lihat blog.

*Note :
-  Warna merah ganti dengan alamat blog sobat 
-  Warna Biru ganti dengan Title sesuai dengan konten blog sobat sendiri
-  Warna Ungu ganti dengan Judul yang akan ditampilkan pada daftar link partner  
Warna Coklat pada kode css yang paling atas adalah link gambar yang bisa sobat ganti.

+ Untuk menambahkan link lagi sobat cukup menambahkan kode berikut :

<a href="http://fatholthearseko.blogspot.com/" target="_blank" title="Free Share | Download Software | All Trik">Kumpulan HTML Blog™</a>

12. Jika sobat masih kesulitan dalam cara pemasangannya,silahkan bertanya di kotak komentar dibawah.  


Previous
Next Post »

2 comments

Click here for comments

Silahkan berkomentar dengan sopan dan sewajarnya... ConversionConversion EmoticonEmoticon

Thanks for your comment