Cara Membuat Widget Media Sosial Pada Blog Atau Website | Fb Twitter IG

Assalamu 'alaikum sobat kkhtop dimanapun berada, semuanya tanpa terkecuali. Senang rasanya admin bisa berjumpa kembali untuk menulis sebuah artikel yang didalamnya termuat sebuah info yang mungkin bisa menjadi info penting untuk sobat kkhtop.

Pada kesempatan yang baik ini, admin ingin memberikan sebuah tutorial tentang bagaimana cara membuat widget social media atau dalam bahasa Indonesia media sosial (medsos).

Media sosial yang dimaksud yaitu bisa berupa situs facebook, situs youtube, situs instagram, situs twitter atau chat whatsapp. Mungki sobat kkhtop juga ingin memasang widget social media pada blog sendiri, yuk kita ikuti tutorialnya di bawah ini.

Caranya terbilang cukup mudah dan simpel hanya menempelkan kode kode saja yang sudah admin persiapkan untuk sobat.

Letakan kode ini sebelum kode </body> atau bisa diletakan di sidebar atau footer.

Kode :

<div id='socialcounter'> <ul class='social-counter'> <li class='social_item-wrapper'><a class='social_item social_facebook' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook social_icon'/><span class='social_num'>FACEBOOK</span></a> </li> <li class='social_item-wrapper'><a class='social_item social_twitter' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter social_icon'/><span class='social_num'>TWITTER</span></a> </li> <li class='social_item-wrapper'><a class='social_item social_youtube' href='https://www.youtube.com/channel/UCUUdloeLE6wnhmIfWrf5sGw' rel='nofollow' target='_blank'><i class='fa fa-youtube social_icon'/><span class='social_num'>YOUTUBE</span></a> </li> <li class='social_item-wrapper'><a class='social_item social_google-plus' href='https://google.com' rel='nofollow' target='_blank'><i class='fa fa-cube social_icon'/><span class='social_num'>GOOGLE</span></a> </li> <li class='social_item-wrapper'><a class='social_item social_instagram' href='#' rel='nofollow' target='_blank'><i class='fa fa-instagram social_icon'/><span class='social_num'>INSTAGRAM</span></a> </li> <li class='social_item-wrapper'><a class='social_item social_instagram' href='#' rel='nofollow' target='_blank'><i class='fa fa-whatsapp social_icon'/><span class='social_num'>WHATSAPP</span></a> </li> </ul> </div>

Kemudian silahkan sobat cari kode selanjutnya yaitu kode skin atau style. Letakan kode berikut ini sebelum ]]</b:skin> atau di style <style> terserah anda.

Kode :
/* Social Media */ #socialcounter{overflow:hidden;margin:0 0 20px 0} #socialcounter ul{margin:0} #socialcounter ul a{color:#fff} #socialcounter ul li.social_item-wrapper{float:left;width:48%;text-align:center;margin:0 4% 10px 0;color:#fff} #socialcounter ul li a.social_item{position:relative;display:block;opacity:.9;height:50px;line-height:50px;overflow:hidden} #socialcounter ul li.social_item-wrapper:nth-child(2n+2){margin:0} .social_icon{float:left;line-height:50px;width:41px;font-size:1.3rem} #socialcounter ul li a.social_item.social_facebook{background:#3F5B9B} .fa-facebook.social_icon{background:#2E4372} #socialcounter ul li.social_item-wrapper:hover .fa-facebook.social_icon{background:#3F5B9B} #socialcounter ul li.social_item-wrapper:hover .social_facebook{background:#2E4372} #socialcounter ul li a.social_item.social_twitter{background:#1C97DE} .fa-twitter.social_icon{background:#1571A5} #socialcounter ul li.social_item-wrapper:hover .fa-twitter.social_icon{background:#1C97DE} #socialcounter ul li.social_item-wrapper:hover .social_twitter{background:#1571A5} #socialcounter ul li a.social_item.social_youtube{background:#E22020} .fa-youtube.social_icon{background:#B31919} #socialcounter ul li.social_item-wrapper:hover .fa-youtube.social_icon{background:#E22020} #socialcounter ul li.social_item-wrapper:hover .social_youtube{background:#B31919} #socialcounter ul li a.social_item.social_rss{background:#E86321} .fa-rss.social_icon{background:#C2521B} #socialcounter ul li.social_item-wrapper:hover .fa-rss.social_icon{background:#E86321} #socialcounter ul li.social_item-wrapper:hover .social_rss{background:#C2521B} #socialcounter ul li a.social_item.social_google-plus{background:#E82C2C} .fa-google-plus.social_icon{background:#BF2424} #socialcounter ul li.social_item-wrapper:hover .fa-google-plus.social_icon{background:#E82C2C} #socialcounter ul li.social_item-wrapper:hover .social_google-plus{background:#BF2424} #socialcounter ul li a.social_item.social_instagram{background:#8E714D} .fa-instagram.social_icon{background:#6F583C} #socialcounter ul li.social_item-wrapper:hover .fa-instagram.social_icon{background:#8E714D} #socialcounter ul li.social_item-wrapper:hover .social_instagram{background:#6F583C} #socialcounter ul li a.social_item.social_pinterest{background:#CA2027} .fa-pinterest.social_icon{background:#AB1B21} #socialcounter ul li.social_item-wrapper:hover .fa-pinterest.social_icon{background:#CA2027} #socialcounter ul li.social_item-wrapper:hover social_pinterest{background:#AB1B21}

Setelah semuanya selesai silahkan sobat klik simpan atau save dan meluncur ke website sobat untuk melihat hasilnya apakah berhasil atau belum.

Demikian dan mungkin cukup itu saja yang bisa admin infokan, semoga bisa bermanfaat untuk sobat semuanya. Terimakasih dan sampai jumpa di lain artikel.

Search label :

tutorial membuat menu widget social media, cara buat media sosial di blog blogger atau website, cara bikin widget media sosial fb twitter instagram youtube whatsapp, kode pasang html media sosial blog, kkhtop tutorial