Membuat Widget Sosial Media Keren Untuk Blogger |
Ghiyats Blogs - Hai, sob... untuk artikel ini saya ingin berbagi widget sosial media untuk sobat semua.. widget sosial media memang diperlukan untuk sebuah blog/ website karena untuk bisa pengunjung ingin bertanya langsung dari sosial media mereka atau bisa menambah traffik dan pengunjung karena media sosial seperti Facebook, Twitter, dan lain lain, lagi menjadi tren untuk sekarang. Langsung saja kita coba membuat widgetnya dibawah ini
Membuat Widget Sosial Media Keren Untuk Blogger
---------------------------------------------------------------------------------
- Masuk ke Blogger
- Ke ''Tata Letak''
- Klik ''Tambah Gadget''
- Pilih Gadget ''HTML/JavaScript''
- Masukan kode dibawah di dalamnya
/*--------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/AVvXsEgBWf5WxOgtpgnrcwU2fjr6v4WL2o-lTct5jxioj5I9Ku7d2NRaHW4_e2rfY8ob_DVIwp2U8XmfcvcUiKx-_qS13PRWlk_MvO5pw8z5eM4wQ1TNnCrX0G-L5Un-g5ltn0dHJyQRRv5Bio5f/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/Username" id="iconTwitter" target="_blank" title="Follow us on Twitter">Twitter</a>
<a href="http://www.facebook.com/Username" id="iconFacebook" target="_blank" title="Join us at Facebook">Facebook</a>
<a href="http://feeds.feedburner.com/GhiyatsBlogs" id="iconRSS" target="_blank" title="Subscribe our RSS Feed">RSS</a>
<a href="http://www.blogger.com/youtube.com/username" id="iconYouTube" target="_blank" title="Follow our YouTube Channel">YouTube</a>
<a href="https://plus.google.com/ID Google+ anda" id="iconGooglePlus" target="_blank" title="Follow us at Google+">Google</a></div>
- Ganti huruf yang berwarna, dengan petunjuknya
- Setelah selesai, Simpan
Demikianlah artikel ini semoga artikel di atas bermanfaat bagi sobat semua dan sobat boleh bertanya di kolom komentar kalau ada yang masih binggung tentang artikel di atas...
Source code : www.BloggerTrix.com
