membuat Floating Widget Share Melayang

Tutorial BLog

Saturday, March 31, 2012

Belum ada komentar

Gan ada kabar bagus nih, yaitu MEMBUAT FLOATING WIDGET SHARE MELAYANG.

Emang bisa?? yaa bisa laah.. selain ngebahas tentang widget floating share melayang, saya  juga bakal ngasih kode-kodenya dan cara-cara pemasangannya..
Apa sih floating itu ? Floating adalah sebuah menu yang posisinya absolute dan selalu tampil di tengah-tengah atau melayang, Floating ini juga terkadang mengikuti scroll dari browser. Ya sesuai dengan variasinya lah :D hehe..
Jadi yang bakal kita jadiin floating adalah Widget Share (Twitter, Facebook, dan Google +1).

Nanti di blog agan bakal nampak seperti gambar dibawah:

  

Lalu bagaimana cara pemasangannya ?
Okelah, langsung disimak aja pemasangannya. Silakan ikuti langkah-langkahnya sebagai berikut:

• Seperti biasa kamu harus Login ke dashboard blogger kamu.

• Pilih Rancangan > Elemen Laman > Add gadget/Tambah Gadget > Pilih yangHTML/JavaScript.

• Copy script dibawah ini, Lalu pastekan pada gadget
• 
  <textarea name="code" rows="6" cols="10" style="border-style: solid; border-color: rgb(100, 100, 117); border-width: 3px 3px 5px 20px; padding: 5px; background: rgb(101, 99, 195) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(202, 61, 217); line-height: 1.5em; -moz-border-radius-topleft: 7px; -moz-border-radius-topright: 7px; -moz-border-radius-bottomright: 7px; -moz-border-radius-bottomleft: 7px;"><style> #floatdiv { position:fixed; bottom:15%; margin-left:-70px; z-index:10; float:left; padding-bottom:2px;  }  #mbtsidebar { background:#fff; border-top:1px solid #ddd; border-left:1px solid #ddd; border-bottom:1px solid #ddd; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding-left:5px; width:60px; margin:0 0 0 5px; }  .fb_share_count_top {width:52px !important;}  .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}  .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-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="floatdiv"> <div id="mbtsidebar"> <table cellpadding="1px" cellspacing="0">   <tr> <td style="padding:5px 0px 0px 0;"><a href="https://twitter.com/share" class="twitter-share-button" data-via="NAMA TWITTER AGAN" data-lang="en" data-related="anywhereTheJavascriptAPI" data-count="vertical">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </td> </tr>  <tr> <td style="padding:5px 0 2px 0;"> <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </td> </tr> <tr> <td style=" padding:5px 0px 0px 0px;">  <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>  <g:plusone size="Tall" expr:href="data:post.url"> </g:plusone></td> </tr> <tr> <td> <p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#000;" href="http://kusyarif.blogspot.com/2012/03/membuat-floating-widget-share-melayang.html"><blink>Get This</blink></a></p></td></tr></table></div></div>
  </textarea>
  
  Keterangan:
• Untuk teks yang berwarna merah, silakan ubah/ganti sesuai keinginan agan.
  -70px : Ini adalah ukuran, dimana biasanya menyesuaikan lebar konten. jadi kamu bisa mengubahnya apabila widget floating share melayang ini malah menutupi postingan. misalnya dari yang -70px menjadi -90px. pokoknya agar posisi widget ini pas.
  NAMA TWITTER AGAN : Ubah pake nama twitter kamu atau twitter blog agan ^_^
• Setelah dipaste, lalu agan save/simpan deh tanpa judul.
• Dan lihat hasilnya..

Bagaimana ? cukup mudahkan ? hehe.. B-)
Semoga postingan ini bermanfaat, dan widgetnya bisa mempercantik blog agan :) salam..

Sumber : http://kusyarif.blogspot.com