Widget HTML Atas

Cara Membuat Widget Follow Social di Blog

Membuat widget agar pengunjung dapat mengikuti kita dimana saja seperti Facebook, Twitter, Rss, dan lain lain, tentu widget ini akan meningkatkan peforma di situs kita, dikarenakan semua media terhubung di situs kita, tentu sebelum visitor yang ingin mengikuti kita harus tau apa saja media sosial agar mudah mengikuti nya.
agar mudah di temukan di sosial media

Seperti pada Fanspage Facebook, agar dia lebih mudah menyukai halaman kita agar tidak ketinggalan informasi baru dari kita, begitupun yang lain nya agar mudah mem follow atau mengikuti kita di sosial media.
Oh iyaa widget ini dibuat yang isi nya antara lain
  • Facebook
  • Twitter
  • Google+
  • Pinterest
  • Youtube
  • Rss Feedbunner

Agan bisa melihat tampilan nya seperti apa dengan melihat versi demo nya di bawah ini :

Tertarik, jika iya bagaimana untuk memulainya ? agan langsung saja masuk ke dashboard Blogger >Tema > Edit HTML.
Lalu cari kode ]]></b:skin> di dalam tema agan lalu masukan Kode berikut diatas kode ]]></b:skin> :
.social-buttons {
    position: fixed;
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #000000;
    background-image: url(https://goo.gl/8wK39O);
}
.button-left #facebook-btn span {
    background-position: right 8px;
}
.button-left #twitter-btn span {
    background-position: right -32px;
}
.button-left #google-btn span {
    background-position: right -125px;
}
.button-left #rss-btn span {
    background-position: right -78px;
}
.button-left #pinterest-btn span {
    background-position: 10px -175px;
}
.button-left #youtube-btn span {
    background-position: 10px -220px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}
.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google+-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {
    background-position: 11px -80px;
}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {
    background-position: 11px -223px;
}

.social-buttons a:hover .social-text {
    display: block;
}
.button-left .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 42px;
    margin-bottom: 2px;
    width: 42px;
}
.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}

.button-right .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
}

Sudah ? sekarang kita akan memasang kode pemanggil nya dengan cara : Masuk ke Dashboar Bloggger > Tema > Edit HTML > Cari kode </body> > Lalu masukan kode berikut diatas kode </body> :
<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/wavker' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/anakpantai021' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/+wavkerxyz' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/wavker' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/wavker/1233112' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/wavkerblog' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>
Keterangan : Coba preview blog agan, Oh iya.. Tulisan yang tebal ganti dengan url atau nomer id Social media agan, agar tidak salah sambung kemana-mana, perhatikan yaa.

Agan juga bisa membuat widget social lain nya dengan mode lain disini :