Home » » Cara Membuat Widget Social Media Efek Hover Dan Warna-Warni Di Blog

Cara Membuat Widget Social Media Efek Hover Dan Warna-Warni Di Blog

Ditulis oleh Dicky Fajriansyah pada Kamis, 20 Juni 2013 | 09.09


Kali ini Dicky's akan menshare Tips Blog yang berjudul Cara Membuat Widget Social Media Efek Hover Dan Warna-Warni Di Blog | Dari widget social media yang sudah banyak Dicky's share, kini Dicky's kembali share lagi widget social media, ada banyak keunikan diwidget ini yaitu Efek Hover (jika disentuh dengan cursor akan berubah), Warna-warni (Jika disentuh cursor akan berubah warna, yang semula  silver berubah menjadi warna masing-masing seperti Twitter jika disentuh berubah menjadi biru muda). Gimana keren gak ?? Bagi yang sudah ingin memasangnya, ikuti Tips-nya.

Berikut Cara Membuat Widget Social Media Efek Hover Dan Warna-Warni Di Blog :

  • Login ke Blogger, atau klik disini
  • Pilih Tata Letak --> Tambahkan Gadget --> Pilih HTML/JavaScript
  • Copy kode dibawah ini dan letakkan ke kolom HTML/JavaScript

<style>
a.db_twitter
{background-image:url(http://1.bp.blogspot.com/-nPqEydZDdeA/UcAezddCQCI/AAAAAAAAAnw/bG1hSNShD6U/s1600/btrix_twitter.jpg);
    background-position:0 0px;
    width:300px;
    height:51px;
    text-indent:-9999px;
    display:block;
    background-repeat: no-repeat;
    border:0px;
    float:left;}
a.db_facebook
{background-image:url(http://3.bp.blogspot.com/-BfoVIcAxk8g/UcAezEdK81I/AAAAAAAAAno/eRt7cUZRf5w/s1600/btrix_facebook.jpg);
    background-position:0 0px;
    width:300px;
    height:51px;
    text-indent:-9999px;
    display:block;
    background-repeat: no-repeat;
        border:0px;
        float:left;}
a.db_linkedin
{background-image:url(http://4.bp.blogspot.com/-nbSKR0YP5eY/UcAezIXXezI/AAAAAAAAAng/kxmuzD93CbM/s1600/btrix_linkedin.jpg);
    background-position:0 0px;
    width:300px;
    height:51px;
    text-indent:-9999px;
    display:block;
    background-repeat: no-repeat;
        border:0px;
        float:left;
}
a.db_stumbleupon
{   background-image:url(http://3.bp.blogspot.com/-VzVMyW0XsG4/UcAey2XWQhI/AAAAAAAAAnc/axMtkzfK07M/s1600/btrix_stumbleupon.jpg);
    background-position:0 0px;
    width:300px;
    height:51px;
    text-indent:-9999px;
    display:block;
    background-repeat: no-repeat;
        border:0px;
        float:left;
}
.db1social a:hover
{
    background-position:0 -51px;
}
.db1social
{
    width:255px;
}
</style>
<br />
<div class="textwidget">
<div class="db1social">
<a class="db_linkedin" href="http://id.linkedin.com/ID LINKEDIN SOBAT" target="_blank">linkedin</a>
<a class="db_stumbleupon" href="http://www.stumbleupon.com/ID STUMBLEUPON SOBAT" target="_blank">stumbleupon</a>
<a class="db_twitter" href="http://twitter.com/ID TWITTER SOBAT" target="_blank">twitter</a>
<a class="db_facebook" href="http://www.facebook.com/ID FACEBOOK SOBAT" target="_blank">Facebook</a>
</div>
</div>

Keterangan : sudah dikode diatas.


  • Simpan

Semoga Tips Blog yang berjudul Cara Membuat Widget Social Media Efek Hover Dan Warna-Warni Di Blog bisa bermanfaat......
dan selamat mencoba.......
Dilarang menduplikasi dan menyerbarluaskan artikel tanpa menyertakan sumbernya. Jika melanggar, berarti telah melanggar UUD 1945 No. 19 Tahun 2002 Tentang Hak Cipta dan akan dijatuhi denda.
thumbnail Title: Cara Membuat Widget Social Media Efek Hover Dan Warna-Warni Di Blog
Posted by:Dicky Fajriansyah
Published :2013-06-20T09:09:00-07:00
Rating: 5
Reviewer: 100 Reviews
Cara Membuat Widget Social Media Efek Hover Dan Warna-Warni Di Blog

4 komentar: