Hampir setiap blog atau website memiliki widget follow social media
dengan tombol icons yang beragam. Dengan memasang widget sosial media
pada blog, anda dapat mengundang pembaca/pengunjung blog untuk terlibat
dalam jejaring sosial anda, dan tentunya dapat meningkatkan reputasi
blog anda. Namun hal itu tak akan terjadi jika pengunjung tidak mengklik
tombol follow pada widget jaring sosial anda, dan mereka hanya akan
mengklik atau mengikuti update blog anda kecuali mereka merasa atau
menemukan hal yang berguna dan bermanfaat pada blog anda.
Widget
ini tidak otomatis dapat meningkatkan follower blog anda diberbagai
jaring sosial tapi setidaknya kita dapat memancing mereka untuk
setidaknya mengklik sekali pada tombol dengan membuat/menampilkan tombol
widget ini lebih menarik dan memiliki efek hover yang meluas, mulus dan
sexy . Efek hover ini kita buat dengan bantuan CSS3 transisi. Widget ini juga tanpa javascript, tanpa JQuery, murni hanya dengan CSS. Widget akan terlihat rapi dan bersih disidebar blog anda atau dibagian manapun anda meletakkannya.
Nah
silahkan lihat demo widget ini terlebih dahulu, jika anda menemukannya
menakjubkan atau tertarik sekedar mencoba membuatnya atau menambahkannya
pada blog anda silahkan melangkah pada tahapan pembuatannya
Fitur:
Widget ini cukup sederhana tapi memiliki beberapa fitur utama:
• Meliputi empat tombol jejaring sosial yang paling sering digunakan dan ditambah ikon RSS
• Efek memperluas, mulus dan sexy pada hover
• Penggunaan CSS sprite
• Sangat rapi dan bersih
• Tidak ada JavaScript. JQuery No. Ini murni CSS
CSS
sprite Teknik cukup keren dan berguna terutama ketika Anda memiliki
terlalu banyak gambar. Dalam widget ini Anda akan berpikir bahwa satu
gambar atau ikon yang digunakan untuk setiap tombol yang membuat total 5
gambar. Tapi sebenarnya hanya ada satu gambar yang digunakan yang
berisi semua ikon. Teknik ini berguna karena bukannya 5 permintaan HTTP,
Anda hanya membuat satu permintaan yang mempercepat waktu loading.
Teknik ini tidak sangat umum di blog Blogger tetapi dalam blog WordPress
teknik ini sering digunakan.
Sekarang mari kita menambahkan widget ini di blog Anda.
Catatan:
Jika
Anda ingin menambahkan widget pada tempat tertentu, gunakan HTML
terpisah dan CSS dan jika Anda ingin widget untuk muncul di suatu tempat
di sidebar Anda, silahkan melompat langsung di bagian Alternatif di
bagian bawah.
HTML
Login ke akun Blogger anda-> Template -> Edit HTML -> Proceed
Letakkan kode berikut pada bagian yang anda inginkan dari blog anda
Widget Follow Us Social Media Buttons Keren :
<!--Sexy Social Buttons Widget RePost TipsTrikBlogging.com-->
<ul id="tbisose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li>
</ul>
<!--Sexy Social Buttons Widget RePost TipsTrikBlogging.com—>
<small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://irrafeisal.blogspot.com/2013/06/hampir-setiap-blog-atau-website.html" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>
Ganti semua tanda # dengan URL jejaring sosial anda.
CSS
Sekarang tambahkan kode CSS yang akan membuat tombol ini sexy
Login ke akun Blogger anda-> Template -> Edit HTML -> Proceed
Cari kode ]]></b:skin> Letakkan kode berikut diatasnya
Jika ingin menambahkan widget ini pada sidebar blog anda
Login ke akun Blogger anda-> Layout
Klik tambah gadget pada sidebar
PilihHTML/JavaScript pada form letakkan kode berikut
Widget Follow Us Social Media Buttons Keren :
<style>
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKvOPJlf8cHLgdLaHBhPzkx-BpJFHbDHSgnEvrDlgwUJicd0yvGgj89Yd66eWToaRHD4pl7G_ivfdBqKRULivPOXmg6XsN5KLQ-0-hr2NGHCTuScpskxh8DJTIrIvpQxKe74GKfSrGdC8/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="tbisose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li>
</ul>
<small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://irrafeisal.blogspot.com/2013/06/cara-membuat-widget-follow-us-social.html" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>
Ganti semua tanda # yang berwarna biru dengan URL jejaring sosial anda
4. Simpan dan lihat hasilnya diblog anda!
Nah demikian tutorial membuat widget follow social media dengan tombol sexy. Semoga bermanfaat!
Ditulis Oleh : Irrafeisal ~ Journey Of Destiny|We learn together to increase knowledge|
we share knowledge and strengthen the friendship
Artikel Cara Membuat Widget Follow Us Social Media Buttons Keren ini diposting oleh Irrafeisal pada hari Senin, 10 Juni 2013. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat Anda sampaikan melalui kotak komentar. Semoga Artikel Cara Membuat Widget Follow Us Social Media Buttons Keren ini bermanfaat. Dan Apabila friend Irrafeisal ingin artikel ini ada di postingan Anda, silahkan di copy paste aja, agar bisa menyebarkan lebih luas lagi ilmu yang bermanfaat...
Hampir setiap blog atau website memiliki widget follow social media
dengan tombol icons yang beragam. Dengan memasang widget sosial media
pada blog, anda dapat mengundang pembaca/pengunjung blog untuk terlibat
dalam jejaring sosial anda, dan tentunya dapat meningkatkan reputasi
blog anda. Namun hal itu tak akan terjadi jika pengunjung tidak mengklik
tombol follow pada widget jaring sosial anda, dan mereka hanya akan
mengklik atau mengikuti update blog anda kecuali mereka merasa atau
menemukan hal yang berguna dan bermanfaat pada blog anda. 
. Efek hover ini kita buat dengan bantuan CSS3 transisi.
Artikel 
0 komentar