Beranda / Blogger

Membuat widget media sosial di blog

Daftar isi [Tampil]

Secara default tombol social media tidak terpasang ketika template baru pertama kali diupload, memang tidak menjadi kewajiban pemilik blog namun dengan memasangnya di blog Anda akan menjadikan suatu promosi kepada pengunjung blog dan juga sebagai data diri sosial media blog maupun pemiliknya.

SOCIAL atau media sosial menjadi salah satu pilar SEO blog. Widgetnya bisa dipasang dimana saja sesuai selera yang punya blog. Dengan menampilkan, menambah, atau memasang widget icon/link media sosial di sidebar blog yang juga berfungsi menambah follower, liker, dan teman. DEMO-nya bisa dilihat di ilustrasi gambar pada postingan artikel ini.

Tetapi sebelum memasangnya Anda harus sudah punya akun-akun media sosialnya, terutama facebook, twitter, linkedin, instagram, youtube dan lain- lain. Banyak pilihan Widget model Ikon Link Media Sosial di Sidebar Blog. Anda tinggal pilih salah satunya sesuai selera anda

widget media sosial model 1

Untuk membuat widget media sosial di blog seperti diatas, kamu silahkan copy dan pastekan kode di bawah ini.


<div class="kt-social-buttons-widget"><ul class="sidebar-social clearfix">
<li><a href="https://facebook.com/bangrizkyw" class="social-btn-facebook">Like on Facebook <i class="fa fa-facebook"></i> </a></li>
<li><a href="https://instagram.com/bangrizkyw" class="social-btn-instagram">Follow on Instagram <i class="fa fa-instagram"></i> </a></li>
<li><a href="http://bit.ly/rizkywyoutube" class="social-btn-youtube">Subscribe on Youtube <i class="fa fa-youtube"></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;
}
</style>

Penting: Ganti kode yang di tandai warna merah dengan link media sosial milik Anda.

widget media sosial model 2

Untuk membuat widget media sosial di blog seperti diatas, kamu silahkan copy dan pastekan kode di bawah ini.


<!-- social media button start -->
<br />
<ul class="nav-social">
<li><a class="fcb" href="https://facebook.com/BangRizkyW" rel="nofollow"><i class="fa fa-facebook-square fa-2x"></i></a></li>
<li><a class="igicon" href="https://www.instagram.com/BangRizkyW" rel="nofollow"><i class="fa fa-instagram fa-2x"></i></a></li>
<li><a class="twt" href="https://twitter.com/BangRizkyW" rel="nofollow"><i class="fa fa-twitter-square fa-2x"></i></a></li>
<li><a class="ytb" href="http://bit.ly/rizkywyoutube" rel="nofollow"><i class="fa fa-youtube fa-2x"></i></a></li>
<li><a class="social-btn-linkedin" href="https://linkedin.com/in/bangrizkyw" rel="no follow"><i class="fa fa-linkedin fa-2x"></i></a></li>
</ul>
<!-- social media button end -->

Penting: Ganti kode yang di tandai warna merah dengan link media sosial milik Anda.

widget media sosial model 3

Untuk membuat widget media sosial di blog seperti diatas, kamu silahkan copy dan pastekan kode di bawah ini.


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

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

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




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

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

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




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

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

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




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

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

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




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

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

Penting: Ganti kode yang di tandai warna merah dengan link media sosial milik Anda.

widget media sosial model 4

Untuk membuat widget media sosial di blog seperti diatas, kamu silahkan copy dan pastekan kode di bawah 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://facebook.com/BangRizkyW" 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/BangRizkyW" 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/channel/UCXhqWd9vHfeGXkr6ytrm_dQ/" 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/+BangRizkyw" 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/bangrizkyw" 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/BangRizkyW" class="social_item social_instagram"><i class="fa fa-instagram social_icon"></i><span class="social_num">230,000</span></a></li></ul></div>

widget media sosial model 5

Untuk membuat widget media sosial di blog seperti diatas, kamu silahkan copy dan pastekan kode di bawah ini.

<style type='text/css'>
.social ul {list-style:none; display:inline}
.social li {float:left;padding: 0px 2px 0px 0px; margin-top:-4px}
.social li a img{height:57px;width:57px}
</style>
<div class='social'> <span class='fade'><ul>
<li><a href="https://facebook.com/BangRizkyW" target=_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZkOudKSkGfhzBzpx0pdGih26Br5mnW3TfTwXOeO4pbKE-7QN0vAxfAuIS6i4Z6chvkLiildwudTNtM_CzNdwUhkvrIlP0mMtEnU7bZuelQrQrz2AmLnQLsyZouQPP39BQ0bS1xqxxRdbv/s57/Facebook%2520alt%25201.png" alt="facebook"/></a></li>
<li><a href="https://twitter.com/BangRizkyW" target=_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGOSzkvYMY_RKX7vbn8SQVBwp9ttRtE5022rV2iksyDLoKGohKeSjJTto_OVkpHdFjgAUWt67hYACHRtvS1y52MT47N2KDpz4ENsstyI3gLCY5F1dtUG6WTA6nhpmazl1gYLtyUgQGS_M2/s57/twitter%2520%252Balt.png" alt="twitter" /></a></li>
<li><a href="https://linkedin.com/in/bangrizkyw" target=_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN_87WkZWm6DQ4et_-uIoOBHRNim4fA18lswI8Db0ByCEFLHe1w0Q3WGJJ9WwcoQhAO9OjKdgO8LbXDEELhktVFZ_-mHqcxyOe56shJzA3tDSGHCpXc87aS3dRGUXwd5yBTA0QkboELy7C/s1600/linkedin.JPG" alt="linkedin"/></a></li>
<li><a href="https://www.instagram.com/BangRizkyW" target=_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKQurC9OG7GmJEXEtemc0PjxMs6Ge68iaukwWHXedOJeL8aS0qF1rnafoTQ8iNABHX91g9-jU2ugedJp1g8HN0nDPvFFQE38-sOq5icnJ-_W98-wZm5ff65xFFBaMyIM7TqWp81jGxBSyi/s1600/instagram.JPG" alt="instagram"/></a></li>
<li><a href="https://youtube.com/channel/UCXhqWd9vHfeGXkr6ytrm_dQ/" target=_blank"><img style='width:60px' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxGdH_1LffwYrnZWAB4vC1BV3yKsbJ6_WXeNqfYPveN-QvVonfUJGOUJw27mPLBb_NxZZb24G1g8eeDoW6IBUEc-pI0OtFQrGl5r2VF4fZow3SeUErC9GtE83gUwYyto8QScPZLvjokkjE/s57/YouTube%2520alt%25201.png" alt="youtube"/></a></li>
</ul></span> </div>

Penting: Ganti kode yang di tandai warna merah dengan link media sosial milik Anda.

Berikut langkah – langkah pemasangan membuat widget sosial media :

1. Masuk ke home/beranda blog kamu
2. Pilih Desain
3. Pilih Tata Letak lalu Pilih Add Gadget

5. Pilih HTML/Javascript

6. Copy kode script widget, pilih salah satu kode script widget sesuai pilihan kamu yang diatas. Jangan lupa rubah URL yang sudah di beri tanda merah di atas dengan URL social media milik sobat.

7. Paste-kan ke kolom konten

8. Kemudian yang terakhir pilih Simpan, Lihat blog anda, sudah terhias oleh widget sosial media bukan...?!

Mudah-mudahan share kali ini ada manfaatnya kalau tidak ada baiknya mohon jangan diambil. demikianlah postingan tentang Membuat widget media sosial di blog yang bisa saya sampaikan semoga bisa menambah pengetahuan anda, mungkin ada tambahan dari kamu sekalian? kalau ada silahkan isi di kolom komentar jangan lupa juga berikan sebuah saran

.

3 komentar untuk "Membuat widget media sosial di blog"

ZAINAL MUTAKIN27 Oktober 2019 pukul 23.10
Biar widgetnya bisa melayang gimana gan???
BalasHapus
Balasan
Novri Yanti13 Oktober 2022 pukul 15.12
Thank you bang rizky, aku copas yg model 1, tapi youtube nya kuganti twitter, alhamdulillah langsung sukses.. makasih ilmunya
BalasHapus
Balasan

Tambahkan komentar

Tata Tertib Berkomentar :
🔖 Berkomentarlah yang relevan sesuai topik.
🔖 Jika bermanfaat, sobat bisa bagikan juga ke teman-teman sobat melalui tombol media sosial di atas, karena berbagi itu indah, semoga jadi jalan kebaikan.