Thursday, 28 July 2011

Menambahkan Tombol Facebook Melayang Pada Left Sdidebar


contohnya seperti ini :



banyak tutorial di master blog dengan memasang tombol share / submit semacam ini. tapi engga’ jarang pula menggunakan CSS code yang sedikit membingungkan bagi blogger nubitol seperti saya. 
tapi ini lainnya ceritanya, atau bahkan sudah pernah di bahas tutorial seperti ini. jadi sekali lagi BlognyaThengery cuma sekedar sharing Accesoris Blog bagi blogger pemula ( Nubitol ) seperti Thengery ini.
sobat bisa sedikit edit / tambahkan widget tersebut dengan kemampuan ilmu CSS / JavaScript / lainnya. maka code tersebut engga’ cuman ada 3doank, tp bisa lebih seperti menambahkan code RSS / Technorati semacamnya.




Buat teman2 yang masih nubitol seperti saya, terimakasih udah baca posting ini. code yang satu ini bisa dibilang cukup ringkas, karena apa? cuman gunakan HTML / JavaScripts dan itu pula juga menambahkan elemen halaman, jadi engga’ perlu masuk ke EDIT HTML blog mas brow.  cuman disini tombolnya ada 3 saja ( Facebook, stumbleupon, dan Twitter ), kapan hari Thengery sempat sedikit edit dengan menambahkan tombol RSS feeds dan technorati tapi karena berhubung Thengery masih nubitol tidak jadi di pasang / diaplikasikan di blognya Thengery ini karena engga' yakin :P . jadi silahkan Oprek sendiri ya. kasih bocoran sedikit kalo pengen gunakan icon kalo bisa pake rosul 100x70px ico.
Kalo berminat pasang tombol FLY submit button tersebut, ikuti cara seperti biasa berikut ini :
  • Login di blog dan masuk dasbor sobat
  • pilih rancangan dan ADD Template Widget
  • pilih option HTML / JavaScript jangan kasih title ya.
  • copy paste code dibawah ini ke widget kosong tersebut :
<div style="display:scroll; position:fixed; top:40%; left:2%; border: 1px dotted #E8E8E8; padding:0px 0px 0px  5px; height:220px; width:53px "> 
    <table cellpadding="1px" cellspacing="0">
 
    <tr>
 
    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;">
 
    <iframe src="
http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=box_count&amp;show_faces=true&amp;width=50&amp; action=like&amp;font&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:65px;" allowtransparency="true"></iframe> 
    </td>
 
    </tr>
 
    <tr>
 
    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">
 
    <script src="
http://www.stumbleupon.com/hostedbadge.php?s=5"></script> 
    </td>
 
    </tr>
 
    <tr>
 
    <td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">
 
<a href="
http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="TheNgery">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> 
    </td>
 
    </tr>
 
    </table>
 
    </div>
Keterangan : Ganti kata yang dicetak tebal berwarna MERAH denga ID TWITTER sobat.
Terus SAVE WIDGET. Yapz, cuman itu saja. silahkan dilihat hasilnya di blog sobat.

semoga bermanfaat brow.  

Reactions:

0 comments:

Post a Comment

Silahkan Komentarnya Gan ^_^
Jangan SPAM Ya