Cara Memasang Widget Sosial Subscription Cantik Untuk Blogger

Cara Memasang Widget Sosial Subscription Cantik Untuk Blogger - Ayung Avis™ | Widget sosial merupakan salah satu widget yang penting dari berbagai widget yang disediakan oleh Blogger. Widget sosial dapat membuat para pengunjung blog lebih mudah menemukan update terbaru dari blog yang telah mereka subscribe. Dalam artikel kali ini saya akan share widget sosial yang mana terlihat cantik, elegan, simple, dan komptaibel dengan ukuran widget blog. Widget sosial ini membuat pengunjung blog tersambung dengan berbagai situs jejaring sosial yang terkenal seperti Facebook, Twitter, RSS, YouTube, Google+ dan LinkedIN. Jika anda penasaran silahkan lihat demonya terlebih dahulu di bawah ini.

Demo

Cara Memasang Widget ke Blogger

Cara menambahkan atau memasang widget ini pada blogger sangatlah mudah hanya tinggal ikuti tutorial berikut ini.

1. Pergi ke Dashboard Blogger

2. Kemudian pergi ke Lay Out > Tambah Sebuah Widget > HTML Javascript

3. Salin dan tempelkan kode di bawah ini ke kotak kosong yang ada di widget HTML Javascript




<div class="btnt-chronicl-social"><ul><li><a class="rss" href="http://feeds.feedburner.com/ayungavis">Subscribe to the RSS Feed</a></li> <li><a class="twitter" href="https://twitter.com/ayungavis">Follow me on Twitter</a></li> <li><a class="facebook" href="https://www.facebook.com/ayungavis">Find me on Facebook</a></li> <li><a class="google" href="https://plus.google.com/115138941907488645041" rel="author">Join me on Google+</a></li> <li><a class="linkedin" href="http://in.linkedin.com/your url">Connect with me on LinkedIn</a></li> <li><a class="youtube" href="http://www.youtube.com/user/ayungavis">Watch me on YouTube</a></li> </ul></div><style type="text/css">.btnt-chronicl-social { width: 100%; } .btnt-chronicl-social ul { border: 1px solid #CCCCCC; margin: 0; padding: 0; } .btnt-chronicl-social ul li { list-style:none; padding: 0; text-transform: none; border-bottom: 1px solid #CCCCCC; border-top: 1px solid #FFFFFF; } .btnt-chronicl-social ul li:first-child { border-top: 0 none; } .btnt-chronicl-social ul li:last-child { border-bottom: 0 none; } .btnt-chronicl-social ul li a { background-color: #F2F2F2 !important; color: #404040; display:block; } .btnt-chronicl-social ul li a:hover { background-color: #fafafa !important; } .btnt-chronicl-social ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; padding: 17.5px 60px; } .btnt-chronicl-social ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; padding: 17.5px 60px;} .btnt-chronicl-social ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; padding: 17.5px 60px; } .btnt-chronicl-social ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; padding: 17.5px 60px; } .btnt-chronicl-social ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; padding: 17.5px 60px; } .btnt-chronicl-social ul li .youtube { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Youtube-1.png") no-repeat scroll 10px center #C6312B; padding: 17.5px 60px; } .social-about { display: none; }</style>

Edit

Ganti tulisan di bawah ini dengan URL akun Anda.

• http://feeds.feedburner.com/ayungavis
• https://twitter.com/ayungavis
• https://www.facebook.com/ayungavis
• https://plus.google.com/115138941907488645041
• http://in.linkedin.com/your url
• http://www.youtube.com/user/ayungavis

Demikian yang dapat saya sampaikan pada artikel kali ini. Terima kasih.

source code: truebloggertricks.blogspot.com