Content

Tutorial buat butang kongsi terapung

Khamis, 5 Januari 2012

Blog baru. Takde modal. Last-last aku tulis tutorial kat sini. Keh keh keh. Bagaimana cara untuk membuat butang share facebook, twitter, dan google plus, macam kat Lensa Pisyek ni? Usha tutorial di bawah untuk lebih lanjut.

Tutorial ini hanyalah ditujukan kepada pengguna blogspot sahaja. Untuk jenis-jenis site yang lain, boleh juga nak pakai, tapi kena buat pengubahsuaian la sikit. (dan aku malas nak cerita kat sini :P)

facebook twitter

Apa yang korang kena buat?

1. Salin kod dibawah. Aku saja tulis kecik-kecik, jimat ruang. LOL.

<style> #pageshare {position:fixed; top:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#dddddd;padding:0 0 2px 0; z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=185420221512210"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div id='pageshare' title="Share This With Your Friends"> <div class='sbutton fb-like' id='gb' data-send="false" data-layout="box_count" data-width="49" data-show-faces="true" data-font="arial"></div> <div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div> <div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div> <div class='sbutton' id='tut'> <a style='color:#ff0080; font-size: 8px;' href='http://lensa.pisyek.com/2012/01/tutorial-buat-butang-kongsi-terapung.html'>[Get This Box]</a> </div> </div>

2. Buka Dashboard > Layout > Add a gadget. Pilih HTML/Javascript.

3. Tampal kan kod yang telah disalin tadi. Kemudian save.

Cuba lihat korang punya blog. Mesti jadi kan? Hahahaha. Cara nak tambah gadget tu mungkin berlainan kalau korang pakai interface blogger yang lama. Aku dah pakai yang baru dah sekarang ni. :)

0 ulasan:

Catat Ulasan

Label

Siapa Suka Pisyek?