Friday, April 25, 2014

Membuat Widget Sosial Media Keren


widget
  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/AVvXsEjgqioVjHcuW_5Q27HsZHBc7XEg4PPxSUaaoQGBqOXoX2-p_UMADqJPDJ0BJlAV9osZxSzrEPFzqk_Ga99p2cwfklIP2AUm8_Wu_tVTIrkRcyEx3M8TlzGVP1DuWzCca4wZ-p9WeTUmfnIp/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...


Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit
0 Comments
Tweets
Komentar

0 comments:

Post a Comment