Monday, January 21, 2013
Memasang Tombol Share Pinterest, Facebook, Twitter Melayang di Blogger

Tombol Sosial Share yang Mana yang Harus Digunakan?
Prioritas pertama yang harus ada adalah Facebook, Google +, Twitter, Linkedin dan Sekarang Pinterest. Semua sosial share ini memainkan peranan dengan baik dalam sirkulasi konten Anda melalui banyak pengunjung. Social Media adalah mesin yang bekerja non-stop, yang jika didorong dengan benar dan hati-hati dapat memberikan berton-ton traffic dan juga dapat menghasilkan dolar juga dari website Anda. Setelah menampilkan banyak tombol share pastinya akan mempengaruhi waktu loading blog Anda, karena itu saya telah menambahkan tombol share AddThis yang menyediakan pengunjung dengan lebih dari 330+ pilihan sosial sharing semua di satu tempat.
Kenapa Tidak Menggunakan JQuery?
Abaikan penggunaan JavaScript dan Jquery sebanyak mungkin. Browser seperti Internet Explorer masih kekurangan dukungan untuk semua fungsi yang ditawarkan oleh jquery. Apalagi JavaScript bertanggung jawab untuk persentase besar dari waktu beban blog Anda secara keseluruhan. Oleh karena itu tidak ditambahkan efek smooth sliding untuk plugin ini.
Bagaimana Cara Kerjanya?
Saya telah mengintegrasikan Addthis dan layanan ShareThis di dalamnya. Dalam rangka untuk menyesuaikan tombol twitter dan lain-lain saya mengambil kode default ShareThis dan menyesuaikannya untuk mengubah gambar tombol, ukuran gelembung dan count text. Widget yang sejak awalnya kita kembangkan memang terlihat lebih menarik dibanding yang satu ini. Anda dapat melihat versi draft pertama yang dirancang pada gambar di bawah ini:
Jika Anda lihat gambar di atas, tombol-tombol share kurang rapat dan menghabiskan banyak ruang di blog Anda. Berbeda dengan ini yang terlihat lebih rapat dan seksi, juga tidak menghabiskan banyak ruang blog.
Cara Memasang Tombol Share Melayang
Langkah-langkahnya sangat mudah untuk diterapkan. Yang Anda butuhkan hanya mengcopy dan paste potongan panjang kode yang ada di bawah ini ke template Anda. Ikuti langkah-langkah berikut ini:
- Masuk ke Blogger > Template
- Backup dulu template Anda
- Klik Edit HTML
- Klik Expand Widget Templates
- Kemudian cari kode berikut ini:
<b:includable id='post' var='post'>
- Letakkan kode di bawah ini tepat di bawah kode tadi:
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.gnr_social_floating{
position:fixed; bottom:6%; margin-left:-72px; float:left; width:60px;
background-color:#f7f7f7; padding: 5px 0 0px 0px;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.gnr_social_floating .gnr_side_social_button{
margin-bottom:5px;
float:none;
height:auto;
width:60px;
}
.gnr_social_floating .st_twitter_vcount, .gnr_social_floating.st_plusone_vcount, .st_email{
margin-left:5px;
}
.gnr_social_floating .st_fblike_vcount{
margin-left:5px;
}
.gnr_social_floating .stButton_gradient{
background:none !important;
height:21px !important;
padding-left:0 !important;
}
.gnr_social_floating .chicklets, .gnr_social_floating .stMainServices {
background:url('http://1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/TCBwHNxEwR4/s400/gc_social_sprite.gif') no-repeat !important;
height:19px !important;
width:45px !important;
padding:0 !important;
}
.st_email .chicklets{
background-position:0 -77px !important;
background-image:url('http://1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/TCBwHNxEwR4/s400/gc_social_sprite.gif') !important;
}
.gnr_social_floating .st_twitter_vcount .st-twitter-counter{
background-position:0 -58px !important;
}
.gnr_social_floating .stButton_gradient{
border:none !important;
}
.gnr_social_floating .stBubble_count{
width:44px !important;
font-size: 15px !important;
font-weight: normal !important;
padding-top:7px !important;
height:23px !important;
background:none !important;
}
.gnr_social_floating .st_twitter_vcount .stBubble_count{
color:#00a6df;
background-color:#f8fbfc !important;
}
.st_fblike_vcount{
margin-bottom: 0px;
display: block;
}
.st_twitter_vcount{
margin-bottom: 3px;
display: block;
}
.st_email{
margin-bottom: 5px; margin-top: 3px;
display: block;
}
.gnr_social_floating .stBubble{
background-position: 21px 31px !important;
height:35px !important;
}.gnr_social_floating .st_pinterest_vcount{
margin-left:5px;
}
.gnr_social_floating .st_pinterest_vcount .st-pinterest-counter{
background-position:0 -19px !important;
}
.gnr_social_floating .st_pinterest_vcount .stBubble_count{
color:#FF0505;
background-color:#fbf8f8 !important;
}
.gnr_social_floating .st_pinterest_vcount .stBubble{
background-image:url('http://1.bp.blogspot.com/-meqDjtBStCA/ULFkqTG88qI/AAAAAAAAIGs/hjCRAqGL270/s400/bubble_arrow_pinterest.png') !important;
}
.st_pinterest_vcount{
margin-bottom: 0px;
display: block;
}
</style>
<div class='gnr_social_floating'>
<script type='text/javascript'>var switchTo5x=true;</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({onhover:false});</script>
<span class='st_fblike_vcount' displaytext=''/>
<span class='st_twitter_vcount' displaytext='' st_via='DGeneraBlog'/>
<span class='st_pinterest_vcount' displaytext=''/>
<div style='margin:0px 0 0 5px;'>
<span class='st_plusone_vcount' displaytext=''/>
</div>
<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
ui_cobrand: "D-GENERA BLOG",
ui_header_color: "#ffffff",
ui_header_background: "#0080FF"
}
</script>
<script type='text/javascript'>var addthis_config = {"data_track_addressbar":true};</script>
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5064705719d41eef' type='text/javascript'/>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://d-genera.blogspot.com/2013/01/memasang-tombol-share-pinterest.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>
Keterangan:
position:fixed; bottom:10% : Untuk mengatur tinggi rendah widget.
margin-left:-60px; float:left; : Untuk mengatur jarak kiri kanan windet.
background-color:#f7f7f7; : Untuk mengganti warna background widget.
DGeneraBlog : Gantilah dengan username Twitter Anda.
- Simpan perubahan yang telah Anda lakukan.
Kesimpulan
Widget share melayang ini akan ditampilkan pada halaman posting saja dan tidak akan ditampilkan pada homepage. Widget ini memiliki latar belakang putih dan melayang di sebelah kiri posting blog. Jika Anda ingin membuat widget ini melayang di sebelah kanan maka yang Anda butuhkan adalah mengedit bagian dari kode yang sudah saya tandai. Jika ada tambahan atau koreksi silahkan tulis di kotak komentar yang tersedia.
Salam damai sobat blogger..!! :D
Labels:
Widgets and Plugins

Author: Balaputra
Balaputra adalah seorang mahasiswa yang melakukan aktivitas blogging hanya untuk menghabiskan waktu luang. Follow @IshaMcSmile
Artikel Terkait:
Widgets and Plugins
Subscribe to:
Post Comments (Atom)
ko saya edit gbsa ya gan,error trus.gmna ya gan
ReplyDeleteErornya bagaimana sob??
Deletemantab gan,, langsung saya praktekkan semoga berhasil
ReplyDeleteSilahkan smoga berhasil kawan..
Delete^^
thanks gan,berguna beudt ini....
ReplyDeletekeren abiz
ReplyDeleteMakasih banyak mas tutorialnya, salam kenal ya
ReplyDeleteTrimakasih kawan..
DeleteSalam kenal..
langsung saya praktekaaaaaaaaan :D
ReplyDeleteberhasil ^^d thanks a lot
ReplyDeleteBerhasil gan widget sharenya keren banget and rapi di blog :D makasih banget tutorialnya ^^
ReplyDeleteKenapa blog ini tidak menggunakan tombol share pinterest? Apakah membuat berat blog?
ReplyDeletemantap mas broo,, thanks infonya..
ReplyDeletethanks brooo,, info yang menarik :)
ReplyDeletemantap artikelnya gan..
ReplyDeletebacklink ya gan
http://technogamecyber.blogspot.com/
http://thazbhy.blogspot.com/
http://mediapembelajaran-unm.blogspot.com/
makasih untuk tutor memasang toombol share ini gan..
ReplyDeletesangat bermanfaat sekali
ijin coba ya masss . . .
ReplyDeletekagak work tempat ane T_T
ReplyDeletebro, klw yg mau ditampilkan cuma tombol fb,twitter, dan G+ caranya gimana?
ReplyDeleteijin menyimak gan
ReplyDeletebanyak juga scripnya ya..jadi bingung malah..tapi tetep harus belajar
ReplyDeleteManteep sob artikelnya :)
ReplyDeletehttp://apotekherbalkita.com/
ini dia yg kucari. bentuk n size tombolnya proporsional banget. mantab sob, lgsung coba, berhasil alhamdulilah. nah yg muncul jmlhnya hy yg 'share' saja yaaa... bgmn versi utk memunculkan jmlh yg nge 'like' ? apakah tombolnya beda lagi yaa? mohon dibantu ya sob... terimakasih ilmunya sgt bermanfaat.
ReplyDeletesaya senang bisa membaca berita di website ini, saya akan sering berkunjung dan saya harap anda bisa mengunjungi website saya juga, terima kasih pakar seo
ReplyDeleteMakasih gan untuk tutornya, sangat membantu :)
ReplyDeletehttp://goo.gl/y46Sp3
makasih banyak buat infonya,,
ReplyDeletehttp://goo.gl/mc3qsD
Thanks sob informasinya, sangat membantu :)
ReplyDeletehttp://goo.gl/j2Mjbi
gmn caranya memasang tombol pin share tepat dibawah postingan bos...
ReplyDeletemakasih bro. visit blog saya http://mangabelajar.blogspot.co.id/2015/09/death-note-live-action-ke-4-akan-segera.html
ReplyDeletemasih bingung menggunakanya untuk blog saya di http://sumoxi.blogspot.co.id/
ReplyDelete