Widget Sosial Media adalah
widget yang berisi tombol like dan profile seperti Facebook, Twitter, Google
Plus dan masih banyak lagi dan Blogger. Widget ini sangat diperlukan untuk blog
agar pengunjung dapat berinteraksi tidak hanya di blog saja, namun di Sosial
Media juga. Baca juga artikel tentang sosial media Membuat Tombol Facebook,
Twitter dan Google Plus Valid HTML5.
Catatan bagi yang masih newbie : Sebelum Anda menambahkan widget ini alangkah baiknya Anda mem-backup dulu templeta Anda untuk menghindari hal yang tak diinginkan.
Catatan bagi yang masih newbie : Sebelum Anda menambahkan widget ini alangkah baiknya Anda mem-backup dulu templeta Anda untuk menghindari hal yang tak diinginkan.
Cara Memasang Widget Sosial Media + Counter di Blog
1. Silakan masuk pada akun Blogger Anda
2. Simpan kode CSS dibawah ini diatas kode </style>
CSS - Info Blog News
/*==CSS Social Icons Widget by infoblogberita.blogspot.co.id
===*/
.widget_social_apps{margin-left:-.5%;margin-right:-.5%}.widget_social_apps:before,.widget_social_apps:after{content:"
";display:table}.widget_social_apps:after{clear:both}.widget_social_apps
.app_social{margin:0 .5%
.5%;width:24%;float:left;text-align:center;background-color:#111;-webkit-transition:all
.2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.widget_social_apps
.app_social.facebook{background-color:#3e64ad}.widget_social_apps
.app_social.twitter{background-color:#58ccff}.widget_social_apps
.app_social.pinterest{background-color:#de010d}.widget_social_apps
.app_social.instagram{background-color:#125688}.widget_social_apps
.app_social.google{background-color:#dd4b39}.widget_social_apps
.app_social.linkedin{background-color:#007bb6}.widget_social_apps
.app_social.flickr{background-color:#ff0084}.widget_social_apps
.app_social.vine{background-color:#00bf8f}.widget_social_apps
.app_social:hover{background-color:#111}.widget_social_apps .app_social
a{display:block;color:#fff;padding:15px 5px}.widget_social_apps .app_social
span{display:block}.widget_social_apps .app_social span.app_icon
i{font-size:24px;margin-bottom:5px}.widget_social_apps .app_social
span.app_count{font-weight:700;line-height:16px}.widget_social_apps .app_social
span.app_type{font-size:14px;line-height:16px}
3. Kemudian Save
template
4. Kemudian Tambahkan Gadget dan pilih HTML/JavaScript, lalu simpan kode dibawah ini
HTML - Info Blog News
<div class="widget_social_apps">
<div class="app_social facebook">
<a href="https://www.facebook.com/"
target="_blank">
<span class="app_icon"><i
class="fa fa-facebook"></i></span>
<span class="app_count">7845</span>
<span class="app_type">Fans</span> </a></div>
<div class="app_social twitter">
<a href="https://www.twitter.com/"
target="_blank">
<span class="app_icon"><i
class="fa fa-twitter"></i></span>
<span class="app_count">32</span>
<span class="app_type">Followers</span>
</a></div>
<div class="app_social pinterest">
<a href="https://www.pinterest.com/"
target="_blank">
<span class="app_icon"><i
class="fa fa-pinterest"></i></span>
<span class="app_count">4774</span>
<span class="app_type">People</span>
</a></div>
<div class="app_social instagram">
<a href="https://www.instagram.com/"
target="_blank">
<span class="app_icon"><i
class="fa fa-instagram"></i></span>
<span
class="app_count">65684</span> <span
class="app_type">Followers</span> </a></div>
<div class="app_social google">
<a href="https://www.google.com/"
target="_blank">
<span class="app_icon"><i
class="fa fa-google-plus"></i></span>
<span
class="app_count">65684</span> <span
class="app_type">People</span> </a></div>
<div class="app_social linkedin">
<a href="https://www.linkedin.com/"
target="_blank">
<span class="app_icon"><i
class="fa fa-linkedin"></i></span>
<span
class="app_count">65684</span> <span
class="app_type">Fans</span> </a></div>
<div class="app_social flickr">
<a href="https://www.flickr.com/" target="_blank">
<span class="app_icon"><i
class="fa fa-flickr"></i></span>
<span class="app_count">44</span>
<span
class="app_type">Followers</span>
</a></div>
<div class="app_social vine">
<a href="https://www.vine.com/"
target="_blank">
<span class="app_icon"><i
class="fa fa-vine"></i></span> <span
class="app_count">574</span> <span
class="app_type">People</span> </a></div>
</div>
Catatan : ganti semua yang saya tandai biru diatas
dengan ID sosial media milik Anda.
5. Simpan dan lihat hasilnya…
Semoga bermanfaat..