Cara Membuat Social Button Responsif

apa kabar sobat sekalian , pasti kalian lagi bingung atau ingin menambahkan sosial button di blog kalian nah sekarang saya kasih tutorialnya lengkap dan kalian nggak perlu susah payah cari di blog lain hehehe, oke langsung ke tutorial aja ya simak di bawah


Langkah - Langkah : 

1. Masuk ke dashboard blogger kalian lalu klik Template seperti di gambar ini :

2.setelah itu klik edit Html .

3. setelah itu cari /]]></b:skin> agar lebih mudah gunakan control + f dan copykan kode di bawah ini :

 

/* Social Counter --------------------------------------*/

li.social_item-wrapper { float: left; width: 48%; text-align: center; margin-right: 4% !important; margin-bottom: 10px !important; color: #fff; } #sidebar .widget { margin-bottom: 35px; } a.social_item { position: relative; display: block; height: 60px; line-height: 60px; overflow: hidden; } .social_item-wrapper:nth-child(2n+2) { margin-right: 0 !important; } .social_icon { float: left; line-height: 60px; width: 41px; font-size: 1.3rem; } a.social_item.social_facebook { background: #3F5B9B; } .fa-facebook.social_icon { background: #2E4372; } li.social_item-wrapper:hover .fa-facebook.social_icon { background: #3F5B9B; } li.social_item-wrapper:hover .social_facebook { background: #2E4372; } a.social_item.social_twitter { background: #1C97DE; } .fa-twitter.social_icon { background: #1571A5; } li.social_item-wrapper:hover .fa-twitter.social_icon { background: #1C97DE; } li.social_item-wrapper:hover .social_twitter { background: #1571A5; } a.social_item.social_youtube { background: #E22020; } .fa-youtube.social_icon { background: #B31919; } li.social_item-wrapper:hover .fa-youtube.social_icon { background: #E22020; } li.social_item-wrapper:hover .social_youtube { background: #B31919; } a.social_item.social_dribbble { background: #E82159; } .fa-dribbble.social_icon { background: #B51A45; } li.social_item-wrapper:hover .fa-dribbble.social_icon { background: #E82159; } li.social_item-wrapper:hover .social_dribbble { background: #B51A45; } a.social_item.social_rss { background: #E86321; } .fa-rss.social_icon { background: #C2521B; } li.social_item-wrapper:hover .fa-rss.social_icon { background: #E86321; } li.social_item-wrapper:hover .social_rss { background: #C2521B; } a.social_item.social_google-plus { background: #E82C2C; } .fa-google-plus.social_icon { background: #BF2424; } li.social_item-wrapper:hover .fa-google-plus.social_icon { background: #E82C2C; } li.social_item-wrapper:hover .social_google-plus { background: #BF2424; } a.social_item.social_linkedin { background: #0275B6; } .fa-linkedin.social_icon { background: #02669E; } li.social_item-wrapper:hover .fa-linkedin.social_icon { background: #0275B6; } li.social_item-wrapper:hover .social_linkedin { background: #02669E; } a.social_item.social_instagram { background: #8E714D; } .fa-instagram.social_icon { background: #6F583C; } li.social_item-wrapper:hover .fa-instagram.social_icon { background: #8E714D; } li.social_item-wrapper:hover .social_instagram { background: #6F583C; } a.social_item.social_pinterest { background: #CA2027; } .fa-pinterest.social_icon { background: #AB1B21; } li.social_item-wrapper:hover .fa-pinterest.social_icon { background: #CA2027; } li.social_item-wrapper:hover social_pinterest { background: #AB1B21; } ul.social-counter a { color: #fff; } */

3. untuk yang belum paham peletakannya contohnya seperti di gambar ini :

 

jika sudah di copy codenya tinggal kalian save dan kita ke tahap terakhir yaitu menambahkan wigetnya caranya copy dulu code di bawah ini :

<div class="socialcounter"><ul class="social-counter"><li class="social_item-wrapper"><a href="https://www.facebook.com/droidtechteach" class="social_item social_facebook"><i class="fa fa-facebook social_icon"></i><span class="social_num">735</span></a></li><li class="social_item-wrapper"><a href="https://www.twitter.com/droidtechteach" class="social_item social_twitter"><i class="fa fa-twitter social_icon"></i><span class="social_num">32</span></a></li><li class="social_item-wrapper"><a href="https://www.youtube.com/channel/UCY1xtR9haHe8ex9McLzF9Qw" class="social_item social_youtube"><i class="fa fa-youtube social_icon"></i><span class="social_num">12</span></a></li><li class="social_item-wrapper"><a href="https://feedburner.google.com/fb/a/mailverify?uri=Droidtechteach" class="social_item social_rss"><i class="fa fa-rss social_icon"></i><span class="social_num">15</span></a></li><li class="social_item-wrapper"><a href="https://plus.google.com/u/0/118113714047274223094" class="social_item social_google-plus"><i class="fa fa-google-plus social_icon"></i><span class="social_num">2</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_linkedin"><i class="fa fa-linkedin social_icon"></i><span class="social_num">0</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_instagram"><i class="fa fa-instagram social_icon"></i><span class="social_num">0</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_dribbble"><i class="fa fa-dribbble social_icon"></i><span class="social_num">0</span></a></li></ul></div>

nah kalian tinggal mengubah URLnya dengan URL kalian untuh menambahkannya lihat gambar di bawah ini :

jika sudah kalian klik save maka social button sudah ada di blog kalian , gi amana mudah bukan caranya mungkin hanya ini yang bisa saya kasih kurang lebih saya mohon maaf dan jangan lupa coment jika belumpaham .