Membuat Widget Social

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Alhamdulillah pada hari ini saya masih bisa memposting blog tercinta ini. Pada tutorial kali ini saya akan membahas tentang Membuat Widget Social, yang berisi RSS, Twitter, Facebook, dan Google +. Disini script ini tidak menggunakan jQuery dan ada sedikit animasi dari widget ini. Untuk demo bisa dilihat di bawah ini. Bla sobat blogger berminat ingin Membuat Widget Social ini silahkan untuk mengikuti langkah demi langkah.

Demo Widget SocialKlik disini untuk melihat demo Widget Social

1. Seperti biasa login ke akun blogger sobat
2. Kemudian klik Rancangan, lalu Edit HTML
3. Lalu Centang Expand Template Widget
4. Bila sudah, cari kode ini dengan menekan tombol CTRL + F

]]></b:skin>

5. Lalu copy kode di bawah ini

ul.social{
list-style: none;
margin: 10px;
overflow: hidden;
}
.social li {
float: left;
background: none !important;
padding: 0 !important;
margin: 0 8px;
}
.social li a {
display: block;
width: 40px;
height: 40px;
background: url(http://i766.photobucket.com/albums/xx310/Ikhfar/social.png) no-repeat transparent;
text-indent: -99999em !important;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.social li a:hover {
padding: 0 !important;
}
.social li.rssicon a {
background-position: 0 0;
}
.social li.twicon a {
background-position: -50px 0;
}
.social li.fbicon a {
background-position: -100px 0;
}
.social li.gicon a {
background-position: -150px 0;
}
.social li.rssicon a:hover {
background-position: 0 -50px;
}
.social li.twicon a:hover {
background-position: -50px -50px;
}
.social li.fbicon a:hover {
background-position: -100px -50px;
}
.social li.gicon a:hover {
background-position: -150px -50px;
}

6. Dan paste di atas kode

]]></b:skin>

7. Simpan template
8. Lalu klik Rancangan lagi, dan masuk Elemen Laman
9. Klik Tambah gadget
10. Setelah itu pilih HTML/Javascript
11. Copy kode ini pada kotak kontent

<ul class="social">
<li class="rssicon"><a href="http://www.junioriqfar.com">Rss</a></li>
<li class="twicon"><a href="http://www.junioriqfar.com">Twitter</a></li>
<li class="fbicon"><a href="http://www.junioriqfar.com">FaceBook</a></li>
<li class="gicon"><a href="http://www.junioriqfar.com">Google +</a></li>
</ul>

12. Klik Simpan

Silahkan sobat memodifikasi script ini dan selamat berkreasi.

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait