Cara Membuat Widget Social Media Share di Footer Blog

27 Februari    Blogging   

Halo sobat blogger, kali ini saya akan berikan sedikit tips buat para blogger yang mau blognya tambah laris dan banyak trafik. Kunci utama sukses tidaknya blog adalah trafik. Trafik tinggi artinya pundi-pundi uang siap menanti.

Masalahnya kini adalah banyak blogger khususnya pemula yang bingung gimana caranya menaikan trafik. Kunci utama sebenarnya adalah di konten. Content is a king, backlink is queen. Nah saya akan bagikan contoh trik si queen alias ratu.

Media sosial adalah salah satu backlink ampuh untuk mempromosikan blog kamu. Jika blog kamu nyamber ke berbagai medsos baik itu facebook, instagram, twitter dan lainnya maka sudah pasti trafik akan tinggi karena orang akan muter-muter melihat blog kamu nongkrong di medsos dan dampaknya kamu akan semakin dikenali.

Cara gampang membuat backlink medsos di blog adalah dengan membuat widget medsos di footer atau sidebar. Saya sendiri membuat di footer dengan icon, sehingga visitor nanti tinggal klik icon tersebut untuk masuk ke medsos saya. Mau tahu caranya?. Simak tutorialnya di bawah.

Tutorial blogging

1. Masuk template lalu cari footer wrapper. Kopas kode berikut ini di bawah footer wrapper. Ubah link medsos sesuai medsos kamu.
<!-- Footer social start --> <div id='sosmedup'> <div class='footer-social section' id='Postwidegt2' name='Footer Social Links'> <div class='widget LinkList' data-version='1' id='LinkList100'> <div class='widget-content'> <ul> <li><a href='link fb kamu' rel='nofollow noopener' target='_blank'><i class="fa fa-facebook-square"></i></a></li> <li><a href='link instagram kamu' rel='nofollow noopener' target='_blank'><i id="instagram" class="fa fa-instagram"></i></a></li> <li><a href='link youtube kamu' rel='nofollow noopener' target='_blank'><i class="fa fa-youtube-play"></i></a></li> <li><a href='link twitter kamu' rel='nofollow noopener' target='_blank'><i class="fa fa-twitter"></i></a></li> <li><a href='link blogger kamu' rel='nofollow noopener' target='_blank' title='Follow us on Blogger'><i class='fa fa-user'></i></a></li> </ul> </div> </div> </div> </div> <!-- Footer social end -->

2. Langkah kedua untuk CSS responsive di mobile. Kopas kode berikut ini di atas /style

/* Social Footer */ #sosmedup .widget-content{display:block;position:relative;margin:35px 0 20px} #sosmedup h2{display:none} #sosmedup ul{margin:0 auto;padding:0;display:block;text-align:center;width:100%;list-style:none} #sosmedup ul a{color:#ffffff} #sosmedup ul li{margin:0;padding:0} #sosmedup ul li{display:inline-block;margin:0 auto;padding:0} #sosmedup ul li a .fa{font-size:27px;display:block;text-align:center;padding:0;list-style:none;width:43px;height:43px;line-height:43px;border-radius:99em;margin:0 auto 10px;-webkit-transition: 0.4s;-o-transition: 0.4s;transition: 0.4s;} #sosmedup ul li a .fa-facebook,#sosmedup ul li a .fa-facebook-square{color:#3F5B9B} #sosmedup ul li a .fa-twitter{color: #1C97DE} #sosmedup ul li a .fa-linkedin{color:#306eeb} #sosmedup ul li a .fa-skype{color: #00AFF0} #sosmedup ul li a .fa-dropbox{color: #007ee5} #sosmedup ul li a .fa-wordpress{color: #21759b} #sosmedup ul li a .fa-vimeo, #sosmedup ul li a .fa-vimeo-square{color: #1ab7ea} #sosmedup ul li a .fa-slideshare{color: #0077b5} #sosmedup ul li a .fa-vk{color:#4c75a3} #sosmedup ul li a .fa-tumblr, #sosmedup ul li a .fa-tumblr-square{color: #34465d} #sosmedup ul li a .fa-yahoo{color: #410093} #sosmedup ul li a .fa-pinterest-p,#sosmedup ul li a .fa-pinterest-square, #sosmedup ul li a .fa-pinterest{color: #bd081c} #sosmedup ul li a .fa-youtube, #sosmedup ul li a .fa-youtube-play, #sosmedup ul li a .fa-youtube-square{color: #d12b19} #sosmedup ul li a .fa-stumbleupon, #sosmedup ul li a .fa-stumbleupon-circle{color:#eb4924} #sosmedup ul li a .fa-reddit-alien, #sosmedup ul li a .fa-reddit-square, #sosmedup ul li a .fa-reddit{color: #ff5700} #sosmedup ul li a .fa-quora{color:#b92b27} #sosmedup ul li a .fa-yelp{color: #af0606} #sosmedup ul li a .fa-weibo{color:#df2029} #sosmedup ul li a .fa-product-hunt{color: #da552f} #sosmedup ul li a .fa-hacker-news{color: #ff6600} #sosmedup ul li a .fa-soundcloud{color: #ff3300} #sosmedup ul li a .fa-rss, #sosmedup ul li a .fa-rss-square{color: #f57d00} #sosmedup ul li a .fa-whatsapp{color:#25D366} #sosmedup ul li a .fa-weixin{color: #09b83e} #sosmedup ul li a .fa-medium{color: #02b875} #sosmedup ul li a .fa-vine{color: #00b489} #sosmedup ul li a .fa-slack{color: #3aaf85} #sosmedup ul li a .fa-instagram{color: #ffffff} #sosmedup ul li a .fa-dribbble{color: #ea4c89} #sosmedup ul li a .fa-flickr{color: #ff0084} #sosmedup ul li a .fa-foursquare{color: #f94877} #sosmedup ul li a .fa-behance-square, #sosmedup ul li a .fa-behance{color: #131418} #sosmedup ul li a .fa-snapchat, #sosmedup ul li a .fa-snapchat-square, #sosmedup ul li a .fa-snapchat-ghost{color:#FFFC00} #sosmedup ul li a .fa-codepen{color: #222} #sosmedup ul li a .fa-stack-overflow{color: #f57d00} #sosmedup ul li a .fa-digg{color:#131418} #sosmedup ul li a .fa-delicious{color:#0084ff} #sosmedup ul li a .fa-user{color:#f6ab3f} #sosmedup ul li a #instagram {background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); -webkit-background-clip: text;background-clip: text; -webkit-text-fill-color: transparent;} #sosmedup ul li a #instagram:hover{background: radial-gradient(circle at 30% 107%, #ffffff 0%, #ffffff 5%, #ffffff 45%, #ffffff 60%, #ffffff 90%); -webkit-background-clip: text;background-clip: text; -webkit-text-fill-color: transparent)} #sosmedup ul li a .fa:hover{color:#fff}
Terakhir tentu save template dan lihat hasilnya. Contoh script diatas hasilnya adalah icon sosmed di footer blog ini. Kalau mau ganti lain silahkan cari kode lainnya. Trims.

Baca Juga