Cara Membuat Widget Button Sosial Media Keren

Ngedit Template

Salam

Selamat datang di :

Cara Membuat Widget Button Sosial Media Keren 

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 Button Sosial Media Keren
---------------------------------------------------------------------------------

• 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/AVvXsEiKXrDjO9lc6MxhH_YS-2hMOGFdWRgKZarZ_ffCg-Kn_uQtjje4NhMQFiTKV8an7xpNk7mhdZmq95BEBXbKJ75NonsEdPA-TbF7bUFRjvDsbs2YcXaMG8D9DV1qwxdhePpkpQ0NDZdzPXM8/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...

HAPPY BLOGGING....

Bagikan

Jangan lewatkan

Cara Membuat Widget Button Sosial Media Keren

4/ 5

Oleh Home Sharing

Home Sharing 17.06 Komentar