Sunday, February 2, 2014

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/AVvXsEi_RVcYLMoM09YPW-O6rx8MWKlBy0AKSZqnGWiVeqS95rKkF65rI9e-rZl0_O0mFSN5I_fui29_DQ7icU3ahb_NA3SrJl_HzYrhephhvexSKWDq8eCm3wl_JXUOrVdT2UaGrisqHnoBPGB1/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/tesBlogs" 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
Comments
0 Comment