Hai gan ketemu dengan om wavker lagi sesuai judul kita akan membuat widget social media, tentunya untuk kita para bloger, Tapi sebelum nya apa sih fungsinya widget social media? yaa tentunya ini akan menjadi teknik seo yang baik untuk blog kita,  ini cara yang paling mudah untuk mempromosikan link kita ke sosial media kita contohkan saja, Misalnya ada pengunjung yang datang baca artikel kita dan merasa puas atau merasa penting pasti dia akan meng share link kita atau agan bisa lebih jelas nya baca di artikel saya tentang : Tipe Penggunjung blog


Nah dengan kita membuat ikon sosial media seperti facebook, Google+, twiter dan lain lain maka kita dengan mudah meningkatkan vistor ini bisa kita sebut dengan On Page Seo Pengertian tentang seo nya agan bisa baca

Nah jika sejumlah besar blog kita terhubung dengan Social media maka kemungkinan besar blog kita jadi bombastis traffik nya, Artinya widget media social penting untuk kita para bloger.

Nah sekarang ayo kita membuat widget Social media adalah sebagai berikut :

Catatan : Sebelum memasang kode widget sosial media nya adakalanya agan mem backup template nya dulu, jika nantinya ada kesalahan kan repot nantinya untuk mengembalikan nya ke semula.

Disini kita menerapkan model widget social media sederhana antara lain sebagai berikut :
Pertama agan masuk ke Dashboar Bloger > Template > Edit HTML, Setelah itu cari kode </style> maka kita taruh kode CSS dibawah ini diatas kode </style> berikut kode CSS nya

/*================= CSS Social Icons Widget by wavker.xyz =====================*/
.widget_social_apps{margin-left:-.5%;margin-right:-.5%}.widget_social_apps:before,.widget_social_apps:after{content:&quot; &quot;;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}

Setelah kode diatas sudah agan masukan di atas kode </style> lalu simpan template.
Nah langkah selanjut nya agan cuma masuk ke menu layout untuk memasukan kode selanjut nya caranya : Pilih layout > Add Gadget > HTML/Javascript lalu kita masukan kode berikut :

<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>

Setelah itu pilih simpan dan lihat hasil nya .
Keterangan : User_Name adalah link social media its, mengubah semua User_Name menjadi link social media.

APP_Count : seperti social media counter, menggubah nomer count dengan jumlah social media kita ketika di share, 1 kali di sahare maka angka nya pun berubah.

nah berikut sedikit tips weidget media social nya buat agan - Terima kasih

Baca Juga : Halaman apa saja yang kita perlukan untuk blog