Cara Memasang Widget Social Media yang Atraktif

Pada postingan kali ini, saya akan memberitahu kalian cara memberikan widget Social Media yang Atraktif. Pada widget ini kalian dapat membagi Facebook, Twitter, Rss , Google plus, linkedin dan YouTube. Widget ini sangat cocok bagi kalian yang ingin membagikan link Social Media yang banyak karena widget ini Rensponsive bagi kebanyakan template. Cek gambar dibawah ini :

1. Login pada Blogger dan pilih "Layout"
2. Pilih "Add Gadget" dan klik pada "HTML/Javascript"3. Paste script berikut :

<style type="text/css">
.btrix_socialwidget { width: 280px; }
.btrix_socialwidget ul { border: 1px solid #CCCCCC; margin: 0; padding: 0; }
.btrix_socialwidget ul li { list-style:none; padding: 0; text-transform: none; border-bottom: 1px solid #CCCCCC; border-top: 1px solid #FFFFFF; }
.btrix_socialwidget ul li:first-child { border-top: 0 none; }
.btrix_socialwidget ul li:last-child { border-bottom: 0 none; }
.btrix_socialwidget ul li a { background-color: #F2F2F2 !important; color: #404040; display:block; }
.btrix_socialwidget ul li a:hover { background-color: #949494 !important;color: #0d0354; }
.btrix_socialwidget ul li .rss { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQbznUrepcJ3XUQWb2T1s6wKZ04NOn3vqihTPKDSzZ31tVCJPRZVFkGb6pJXiWTkDH9nr77VR8hhVHZSKayzmCZC_ysFoU2bkMXZj_oonkOHF7Odd2E3G38me1z___AzvXLZrXd5TfqHQ/s1600/bt-RSS.png") no-repeat scroll 10px center #F87E12; padding: 17.5px 60px; }
.btrix_socialwidget ul li .twitter { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe3LyyWDyIX_d2KFvG5qIPv_fbjb08E2oZ41lJRcG3xp6w8Z-8eQSdaAtAJAEuI7CirRN89iAvRxpNBXOdteFKsQ-6lv6gvTHhhTH8qN9EI7FZ02Br6UvvdetBRCtU2zuWDSjvy77XaI8/s1600/bt-Twitter.png") no-repeat scroll 10px center #4CACEE; padding: 17.5px 60px;}
.btrix_socialwidget ul li .facebook { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF3S98xwNJJC2LC3ik4bj4KFmKMpL31qV8ThCMrZvyex2f5UV1CotHyO5XxzkXU3g2lIf9ZtihuU8fB1FGZGwM_F80m6teNvwAUCq0SyRXejB8AKzcGYQ5wGUE3NWwpZaeTD6FngYDCkU/s1600/bt-Facebook.png") no-repeat scroll 10px center #3B5998; padding: 17.5px 60px; }
.btrix_socialwidget ul li .google { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXFeUbRM6TUHuDH_I-z1lxoU33ySMv4AP2WBDo-ANJWE-nFOD1TKpZ1mf2oh1VJWQ_Wlqbx3nrH23sLQoQrgKkUjvxhhfV5rrfjM5Bc5cr4_5Sq22GIAgzmcjSHZfykYd3IEEj8I0vNS8/s1600/bt-google.png") no-repeat scroll 10px center #D44937; padding: 17.5px 60px; }
.btrix_socialwidget ul li .linkedin { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSQeJvqSmslziX0wnHVgTxCzjhJ5skzqINjOslSADCNUSU8K474nKitf1H2thFzgxb14Q_fcIQ3eN2ft4F428cOexv51yPPzUKN5HEaKnKzuiNgdeOzlu2sKuyyDiIJwIMbi9qrnGtquA/s1600/bt-LinkedIn.png") no-repeat scroll 10px center #3692C3; padding: 17.5px 60px; }
.btrix_socialwidget ul li .youtube { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxJw8zBcIGCUlPZq11H4SDXa8qc1hAR2gBOzDoFHCZN1ngG5ye6Gta44GNNXwgpO999uvEh_2FoaGrt7vlC7ttMR92bz6wajvvEDuyRi1ImUfzGX25jc2177-f8PsHq7d_ONce9gCabzI/s1600/bt-Youtube.png") no-repeat scroll 10px center #C6312B; padding: 17.5px 60px; }
.social-about { display: none; }
</style>
<div class="btrix_socialwidget">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/bloggunk-d">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/gunkde_hoppus">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/people/Aditya-Pratama/100000130062770">Find me on Facebook</a></li>
<li><a class="google" href="https://plus.google.com/116707876226686614661" rel="author">Join me on Google+</a></li>
<li><a class="linkedin" href="http://linkedin.com/Username">Connect on LinkedIn</a></li>
<li><a class="youtube" href="http://www.youtube.com/Username">Watch me on YouTube</a></li>
</ul>
</div>

Ubah bloggunk-d dengan ID Feeburner
Ubah gunkde_hoppus dengan ID Twitter
Ubah people/Aditya-Pratama/100000130062770 dengan ID Facebook
Ubah 116707876226686614661 dengan ID Google+
Ubah Username dengan ID Linkedin
Ubah Username dengan ID Youtube

3. Jika telah selesai, klik Simpan/Save

Sekian dulu postingan kali ini, semoga bermanfaat

Selamat Mencoba!
(Sumber : http://www.bloggertrix.com/)

Tweet