Cara Membuat Widget Follow Us on Social Media Keren - Hai sob, kali ini saya ingin update artikel tentang Cara Membuat Widget Follow Us on Social Media Keren.
Jika sobat perhatikan, setiap mengunjungi sebuah blog atau website, pasti kita melihat widget yang berisikan link meuju social media dari web atau blog tersebut. Tujuan mereka memasang widget ini adalah untuk mempromosikan web mereka melalui social media.
Baca Juga :
Baca Juga :
Widget berikut ini lumayan mudah untuk dipasang, jadi langsung saja kita menuju tutorialnya.
Pertama, login ke blogger dan langsung menuju Tata Letak > Tambahkan Gadget Baru > HTML/Javascript
/*--------Social Sharing Widget ------*/
<style type="text/css">
.socialsharing {
display: block;
margin: 2em auto;
width: 200px;
height:40px;
}
.socialsharing span {
float: left;
display: inline;
margin-right: 8px;
}
.socialsharing span a {
display: block;
width: 32px;
height: 32px;
text-indent: -9999px;
background-color: none;
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHxNg3_W02ypvD5pLLBbZ7W2UyUNN9EnuSqU2Otuz3ZxCawBKsscteMXZxYU_VoTZgYWCyQQlqBb2fngxsRWDoK9detotmwL-C7qtaVRLC0yW1XasK8d1tEkR0xwrZ-7dZPfJktLFezJKo/s1600/social+icon.png") 0 0 no-repeat;
}
#iconTwitter {background-position: -33px -33px;}
#iconFacebook {background-position: -66px -33px;}
#iconRSS {background-position: 0 -33px;}
#iconYouTube {background-position: -99px -33px;}
#iconGooglePlus {background-position: -132px -33px;}
#iconTwitter:hover {background-position: -33px 0;}
#iconFacebook:hover{background-position:-66px 0}
#iconRSS:hover{background-position:0 0}
#iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus:hover{background-position:-132px 0}
</style>
<div class="socialsharing">
<a href="http://www.twitter.com/+++++++++++" id="iconTwitter" target="_blank" title="Follow us on Twitter">Twitter</a>
<a href="http://www.facebook.com/+++++++++++" id="iconFacebook" target="_blank" title="Join us at Facebook">Facebook</a>
<a href="http://feeds.feedburner.com/+++++++++++" id="iconRSS" target="_blank" title="Subscribe our RSS Feed">RSS</a>
<a href="http://www.blogger.com/youtube.com/+++++++++++" id="iconYouTube" target="_blank" title="Follow our YouTube Channel">YouTube</a>
<a href="https://plus.google.com/+++++++++++" id="iconGooglePlus" target="_blank" title="Follow us at Google+">Google</a></div>Ganti +++++++++++ sesuai dengan link di depannya
Ketiga, simpan widget dan lihat hasilnya.
Sekian dulu artikel dari saya, semoga blog sobat menjadi lebih keren setelah menambahkan widget ini.
0 komentar