Cara Menambahkan Social Media Button di Blogger

Assalamualaikum warahamtullahi wabarakaatih, Alhamdulillah segala puji bagi Allah ta'ala yang telah memberikan nikmat dan rahmat kepada admin, sehingga admin dapat kembali memberikan tutorial yang InsyaAllah bermanfaat bagi kita semua.

Tutorial Menambahkan Social Media Button di Blogger

Pembahasan kali ini adalah cara membuat dan menambahkan social media button pada blog, manfaat dari media sosial button ini adalah untuk mempermudah orang lain memfollow akun-akun sosial media milik kit, karena button yang kita buat langsung mengarah ke profil di masing-masing akun sosial yang kita punya. Selain itu, sosial media button yang dibuat sangat keren dan bahkan akan memperindah tampilan blog kita.

• Buka blogger
• klik menu tata letak
• Tambahkan widget di sisi kanan blog anda

• Pilih HTML/JAVASCRIPT
• Isi judul widget dengan "Sosial Media", lalu copy paste script dibawah ini di kolom konten, kemudian save

<style>
/* 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;
}
</style>
<div class="socialcounter">
 <ul class="social-counter">
  <li class="social_item-wrapper">
   <a href="#" class="social_item social_facebook">
    <i class="fa fa-facebook social_icon"></i><span class="social_num">nabil_chen</span>
   </a>
  </li>
  <li class="social_item-wrapper">
   <a href="#" class="social_item social_twitter">
    <i class="fa fa-twitter social_icon"></i><span class="social_num">@nabil_chen</span>
   </a>
  </li>
  <li class="social_item-wrapper">
   <a href="#" class="social_item social_youtube">
    <i class="fa fa-youtube social_icon"></i><span class="social_num">nabil_chen</span>
   </a>
  </li>
  <li class="social_item-wrapper">
   <a href="#" class="social_item social_google-plus">
    <i class="fa fa-google-plus social_icon"></i><span class="social_num">nabil_chen</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">nabil_chen</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">@nabil_chen</span>
   </a>
  </li>
 </ul>
</div>

• Hasil widget ada di sebelah kanan blog

Penjelasan :

• Anda dapat mengganti # dengan nama alamat media sosial anda, dan mengganti nama nabil_chen dengan nama akun media sosial anda