Cara Membuat Widget Media Sosial di Blogger

Selamat datang di ilmu internet, kali ini saya akan membagikan tutorial membuat widget media sosial seperti Facebook, Youtube, Instagram, Twitter di blog atau website dengan tampilan keren, kekinian. Bagi teman-teman blogger yang belum tahu apa yang dimaksud dengan widget media sosial diblog. Berikut saya saya jabarkan pengertian dan fungsinya!

Apa Itu Widget Media Sosial?

Widget merupakan Tata letak yang berfungsi untuk menampilkan postingan maupun aksesoris penting di sidebar blog contohnya Widget Popular Post, Author, Arsip Blog, sehingga akan selalu terlihat dan tidak akan tergusur postingan baru. Widget terletak pada sidebar maupun footer sebuah blog, hal tersebut untuk memudahkan pengunjung untuk menavigasi blog agar bisa membedakan antara postingan dengan widget.

Begitu pula dengan widget media sosial yang fungsinya untuk menampilkan halaman media sosial yang kalian miliki berupa sebuah widget. Secara umum blogger memungkinkan untuk menambahkan widget media sosial dengan tampilan sebagus mungkin sesuai keinginan Anda.

Langkah-langkah Membuat Widget Media Sosial di Blogger:

Langkah-langkah menambahkan widget media sosial di blogger sangatlah mudah, bagi Anda yang masih pemula dan belum mengetahuinya silahkan untuk menyimak tahapan yang saya ajarkan berikut.

Buka atau kunjungi https://www.blogger.com/
Login menggunakan akun blogger Anda.
Pilih menu Tata Letak
Selanjutnya cari Sidebar Blog -> Tambahkan Widget -> HTML/Javascript
Kemudian masukan salah satu kode widget media sosial dibawah ini didalamnya.
Simpan dan lihat hasilnya.

Koleksi Widget Media Sosial Blogger Keren, Elegan dan Kekinian

Dalam blogger widget media sosial sebenarnya tidak tersedia, namun mereka menyediakan widget HTML/Javascript yang artinya agar para pengguna bisa berkreasi dalam membangun blog sesuai keinginan. Berhubung sebelumnya saya pernah mempercantik tampilan blog ilmu internet dan salah satunya membuat widget media sosial ini, berikut kumpulan kode widget media sosial keren dan kekinian yang bisa Anda gunakan gratis.

1. Style Grid

Widget media sosial pertama yang saya rekomendasikan dan bisa Anda gunakan langsung mempunyai tampilan kotak-kotak atau grid yang tersusun apik dan elegan. Keren bukan? widget tersebut sangat cocok untuk blog dengan tampilan modern sepert blog Berita, Majalah, Tutorial, dan lainnya.Silahkan copy dan paste kode berikut ke dalam widget HTML/Javascript.

 
  
 
  <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://facebook.com/" class="social_item social_facebook"><i class="fa fa-facebook social_icon"></i><span class="social_num">230,000</span></a></li>
<li class="social_item-wrapper"><a href="https://twitter.com/" class="social_item social_twitter"><i class="fa fa-twitter social_icon"></i><span class="social_num">230,000</span></a></li>
<li class="social_item-wrapper"><a href="https://youtube.com/" class="social_item social_youtube"><i class="fa fa-youtube social_icon"></i><span class="social_num">230,000</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">230,000</span></a></li>
<li class="social_item-wrapper"><a href="#" class="social_item social_rss"><i class="fa fa-rss social_icon"></i><span class="social_num">230,000</span></a></li>
<li class="social_item-wrapper"><a href="https://plus.google.com/" class="social_item social_google-plus"><i class="fa fa-google-plus social_icon"></i><span class="social_num">230,000</span></a></li>
<li class="social_item-wrapper"><a href="https://linkedin.com/in/" class="social_item social_linkedin"><i class="fa fa-linkedin social_icon"></i><span class="social_num">230,000</span></a></li>
<li class="social_item-wrapper"><a href="https://www.instagram.com/" class="social_item social_instagram"><i class="fa fa-instagram social_icon"></i><span class="social_num">230,000</span></a></li></ul></div>

2. Style Daftar

Widget media sosial untuk kedua mempunyai tampilan daftar atau gaya list, biasanya saya menggunakan untuk blog tutorial dan tips teknologi, gadget, dan lainnya. Berhubung sangat responsive di versi mobile dan terlihat jelas memberikan pengalaman navigasi yang baik untuk pengunjung.

 
  
 
  <a href="https://facebook.com/">

<div class="fb-icon-bg"></div>

 <div class="fb-bg"></div></a>

<a href="https://twitter.com/">

  <div class="twi-icon-bg"></div>

    <div class="twi-bg"></div></a>

  <a href="https://plus.google.com/">

  <div class="g-icon-bg"></div>

  <div class="g-bg"></div></a>

<a href="https://linkedin.com/in/">

  <div class="lin-icon-bg"></div>

    <div class="lin-bg"></div></a>

<a href="https://www.instagram.com/">

  <div class="ins-icon-bg"></div>

  <div class="ins-bg"></div></a>

<style>


.fb-bg:hover, .twi-bg:hover, .g-bg:hover, .ins-bg:hover, .lin-bg:hover {background:#303030;
}

.fb-icon-bg {

 background: #354f88;

 height: 37px;

 margin: 0 0 -37px 0;

 width: 41px;

}

.fb-icon-bg:after {

 content: "\f09a"; font-family: FontAwesome;

  display: block;

  padding: 9px 10px 5px 15px;

color:#fff;

}

.fb-bg {

 background: #3b5998;

 display: block;

 height: 37px;

 margin: 0 0 10px 41px;

}

.fb-bg:after {

 color: #fff;

 content: "Facebook";

 height: 37px;

 left: 8%;

 position: relative;

 top: 22%;

 width: 41px;

}

.fb-bg:hover{

  cursor: pointer;

}

.fb-bg:active{

  background: #354f88;

}

/* Twitter */

.twi-icon-bg:after {

 content: "\f099"; font-family: FontAwesome;

  display: block;

  padding: 11px 10px 6px 11px;

color:#fff;

}

.twi-icon-bg {

 background: #40a2d1;

 height: 37px;

 margin: 0 0 -37px 0;

 width: 41px;

}

.twi-bg {

 background: #45b0e3;

 height: 37px;

 margin: 0 0 10px 41px;

}

.twi-bg:after {

 color: #fff;

 content: "Twitter";

 height: 37px;

  left: 11%;

 position: relative;

 top: 22%;

  width: 41px;

}

.twi-bg:hover {

  cursor: pointer;

}

.twi-bg:active {

  background: #40a2d1;

}

/* Google+ */

.g-icon-bg:after {

 content: "\f0d5"; font-family: FontAwesome;

  display: block;

  padding: 11px 10px 6px 13px;

color:#fff;

}

.g-icon-bg {

 background: #ce3e26;

 height: 37px;

 margin: 0 0 -37px 0;

 width: 41px;

}

.g-bg {


 background: #de4c34;

 height: 37px;

     margin: 0 0 10px 41px;

}

.g-bg:after {

 color: #fff;

 content: "Google+";

 height: 37px;

 left: 10%;

 position: relative;

 top: 22%;

 width: 41px;

}

.g-bg:hover {

  cursor: pointer;

}

.lin-icon-bg {

    background: #075e8c;

    height: 37px;

    margin: 0 0 -37px 0;

    width: 41px;

}

.lin-icon-bg:after {

    content: "\f0e1";

    font-family: FontAwesome;

    display: block;

    padding: 11px 10px 6px 13px;

    color: #fff;

}

.lin-bg {

    background: #0077B5;

    height: 37px;

    margin: 0 0 10px 41px;

}

.lin-bg:after {

    color: #fff;

    content: "Follow up on Linkedin";

    height: 37px;

    left: 10%;

    position: relative;

    top: 22%;

    width: 41px;

}

.ins-icon-bg {

    background: #ffc238;

    height: 37px;

    margin: 0 0 -37px 0;

    width: 41px;

}

.ins-icon-bg:after {

    content: "\f16d";

    font-family: FontAwesome;

    display: block;

    padding: 11px 10px 6px 13px;

    color: #fff;

}

.ins-bg {

    background: #ffd438;

    height: 37px;

    margin-left: 41px;

}

.ins-bg:after {

    color: #fff;

    content: "Follow us on Instagram";

    height: 37px;

    left: 10%;

    position: relative;

    top: 22%;

    width: 41px;

}


</style>

3. Style Minimalis

Terakhir, widget media sosial yang menghadirkan nuansa minimalis atau sederhana. Sehingga tidak terlalu mencolok untuk dilihat dan telihat profesional jika menggunakan hanya dengan satu warna. Selain itu Anda dapat mengkostumasi warna nya sendiri sesuka hati Anda.

 
  
 
  <div class="kt-social-buttons-widget"><ul class="sidebar-social clearfix">
<li><a href="https://facebook.com/" class="social-btn-facebook">Like on Facebook <i class="fa fa-facebook"></i> </a></li>
<li><a href="https://instagram.com/" class="social-btn-instagram">Follow on Instagram <i class="fa fa-instagram"></i> </a></li>
<li><a href="http://youtube.com" class="social-btn-youtube">Subscribe on Youtube <i class="fa fa-youtube"></i> </a></li>
<li><a href="http://twitter.com" class="social-btn-twitter">Follow on Twitter <i class="fa fa-twitter"></i> </a></li>
<li><a href="http://linkedin.com" class="social-btn-twitter">Follow on linkedin <i class="fa fa-linkedin"></i> </a></li>
</ul></div>
<style>
.kt-social-buttons-widget ul {
list-style: none;
padding-left: 0;
}
.kt-social-buttons-widget li a {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2px;
text-decoration: none;
display: block;
color: #0a0a0a;
padding: 10px 1px 10px 10px;
background:#f8f8f8;
}
.kt-social-buttons-widget ul li {
width: 100%;
margin-bottom: 10px;
}
.kt-social-buttons-widget li a i {
float: right;
width: 35px;
height: 14px;
line-height: 14px;
text-align: ;
margin: 0;
padding: 0 0 0 10px;
font-size: 14px;
}
.kt-social-buttons-widget li a i {
border-left: 1px solid #666;
line-height: 14px;
}
.kt-social-buttons-widget li:hover a.social-btn-facebook {
background: #3b5998;
color:#fff;
}
.kt-social-buttons-widget li:hover a.social-btn-instagram {
background: #405de6;
color:#fff;
}
.kt-social-buttons-widget li:hover a.social-btn-youtube {
background: #cd201f;
color:#fff;
}

.kt-social-buttons-widget li:hover a.social-btn-twitter {
background: #1571A5;
color:#fff;
}
.kt-social-buttons-widget li:hover a.social-btn-linkedin {
background: #3897f0;
color:#fff;
}
</style>

Catatan: Anda bisa mengganti link media sosial nya dengan tautan media sosial milik Anda. Jika ada media sosial yang mau ditambahkan tidak ada, Anda bisa mengeditnya sendiri melalui CSS dan kode HTML nya. Jika icon atau ikon media sosialnya tidak muncul, kemungkinan template blog Anda belum memasang kode javascript Font Awesome. Karena itu Anda bisa menambahkan kode berikut diatas </head> melalui menu Edit HTML blogger.

 
  
 
  <script src="https://kit.fontawesome.com/8731b8af2f.js" crossorigin="anonymous"></script>

Demikian tutorial pembuatan widget media sosial di blogger dengan tampilan keren dan menarik yang bisa Anda praktekkan pada blog pribadi Anda. Semoga bermanfaat dan membantu teman-teman mengkostumasi tampilan blog atau website menjadi lebih baik. Terima kasih sudah berkunjung, sempatkan waktu luang Anda untuk membagikan postingan ini jika Anda menyukainya! Dukungan Anda sangat berarti dan membangun ilmu internet lebih baik dan terpercaya.

Ilmu Internet