Cara Membuat Widget Sosmed Keren dan Ringan di Blog

Sebagai seorang blogger tentu kita menginginkan tampilan blog yang sangat bagus , elegan , ringan , dan juga indah untuk dipandang mata pengunjungnya . Dan oleh sebab itu tentu para blogger akan melakukan berbagai cara untuk membuat tampilan blognya menjadi keren dan dapat memanjakan mata pengunjungnya.

Salah satu hal yang paling utama diblog adalah widget , untuk blog tentu sangat banyak jenis widget yang bisa digunakan , dan salah satu yang paling populer dan banyak digunakan adalah widget akun sosial media dari penulis atau yang mempunyai blog tersebut .

Widget sosial media tentunya sangat bermanfaat untuk pengunjung dan juga untuk pemilik blog , karena dari situlah pengunjung dapat mendapatkan informasi mendalam tentang pemilik dari blog tersebut dan bisa jadi itu dimanfaatkan untuk berbagai hal , misalnya untuk berkomunikasi secara langsung mengenai konten ataupun request artikel dari pengunjung kepada pemilik blog ataupun penulis.

Nah ... lalu bagaimana cara untuk membuat widget keren dan tentunya ringan pada blog anda ?
Begini caranya ...

Cara Membuat Widget Sosmed di Blog

1.Buka dashboard blogger anda

2.Masuk ke menu Tata Letak

3.Klik Tambah Widget pada bagian sidebar

4.Isikan Script berikut ini :

<style>
a.social_item {position: relative;display: block;height: 50px;line-height: 50px;overflow: hidden;border-radius: 4px;}
li.social_item-wrapper {float: left;width: 48%;text-align: center;margin-right: 4% !important;margin-bottom: 10px !important;color: #fff;}
.social_item-wrapper:nth-child(2n+2) {margin-right: 0 !important;}
.social_icon {float: left;line-height: 50px;width: 41px;font-size: 1.3rem;}
a.social_item.social_facebook {background: #5d82d1 !important;}
.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: #40bff5 !important;}
.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:#ef4e41 !important;}
.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: #f7659c !important;}
.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:#ff7e30 !important;
}
.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: #eb5e4c !important;
}
.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: #3897f0 !important;
}
.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: #3f91cb !important;
}
.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="https://SiHadi_Link" class="social_item social_facebook">
<i class="fa fa-facebook social_icon"></i><span class="social_num">SiHadi_Name</span></a></li>
<li class="social_item-wrapper"><a href="https://SiHadi_Link" class="social_item social_twitter">
<i class="fa fa-twitter social_icon"></i><span class="social_num">SiHadi_Name</span></a></li>
<li class="social_item-wrapper"><a href="https://SiHadi_Link" class="social_item social_youtube">
<i class="fa fa-youtube social_icon"></i><span class="social_num">SiHadi_Name</span></a></li>
<li class="social_item-wrapper"><a href="https://SiHadi_Link" class="social_item social_dribbble">
<i class="fa fa-dribbble social_icon"></i><span class="social_num">SiHadi_Name</span></a></li>
<li class="social_item-wrapper"><a href="https://SiHadi_Link" class="social_item social_rss">
<i class="fa fa-rss social_icon"></i><span class="social_num">SiHadi_Name</span></a></li>
<li class="social_item-wrapper"><a href="https://SiHadi_Link" class="social_item social_google-plus">
<i class="fa fa-google-plus social_icon"></i><span class="social_num">SiHadi_Name</span></a></li>
<li class="social_item-wrapper"><a href="https://SiHadi_Link" class="social_item social_linkedin">
<i class="fa fa-linkedin social_icon"></i><span class="social_num">SiHadi_Name</span></a></li>
<li class="social_item-wrapper"><a href="https://SiHadi_Link" class="social_item social_instagram">
<i class="fa fa-instagram social_icon"></i><span class="social_num">SiHadi_Name</span></a></li></ul>
</div>

5.Silahkan edit atau rubah beberapa kode diatas sesuai dengan ketentuan berikut :

-SiHadi_Link : Silahkan anda ubah sesuai dengan url / link dari akun sosial media yang tertera dibawahnya
-SiHadi_Name : Silahkan anda ubah sesuai dengan nama dari akun sosial media tersebut

6.Terakhir save , lalu lihat hasilnya pada blog anda .

7.Selesai ..

Demikianlah artikel tentang Cara Membuat Widget Sosmed Keren dan Ringan di Blog semoga bermanfaat dan membantu ..
Terima kasih sudah berkunjung ..

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel