Drag to Share : Langkah Mudah Mempublikasikan Website

Saat ini banyak sekali kita temukan jejaring sosial yang membantu kita dalam mempublikasikan website kita. berhubungan dengan itu, maka saya akan berbagi tips dan trik untuk mempermudah kita dan pengunjung website kita untuk bisa mempublikasikan tulisan kita ke jejaring sosial mereka. diantaranya adalah facebook, twitter, digg, delicious dan lain-lain. dan yang saya maksud pada tutorial kali ini adalah "Drag to Share", dengan fasilitas ini, kita bisa dengan mudah mempublikasikan tulisan kita hanya dengan menarik gambar yang ada pada tulisan kita ke pilihan yang sudah disiapkan.


Website seperti Mashable atau Abduzeedo telah menerapkan sistem ini, Anda dapat mengklik menyeret ke spidol sosial yang muncul untuk memudahkan pekerjaan. Mereka menggunakan sistem yang disebut Meebo, yang tidak tersedia bagi blogger biasa.

Langsung saja, dalam menambah fasilitas ini tidak sulit, siapapun bisa melakukannya. berikut langkah langkahnya :

1. Letakkan kode di bawah ini ke halaman edit html sebelum kode ingat.. sebelum kode </body>. lalu save/simpan.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js ' type='text/javascript'/>

<script src='http://inzacky.indrawebmaster.com/blogspotku/drag.js' type='text/javascript'/>

<style type='text/css'>
.ui-draggable { cursor:move !important; }

#tip { position:absolute; display:none; height:40px; padding:9px 9px 0px; color:#fff; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; background:#000; background:rgba(0,0,0,.5); }
#tip .arrow { width:0; height:0; line-height:0; border-right:8px solid #000; border-right:8px solid rgba(0,0,0,.5); border-top:8px solid transparent; border-bottom:8px solid transparent; position:absolute; left:-8px; top:9px; }

#targets { display:none; list-style-type:none; position:fixed; top: 10%; z-index:99999;}

#targets li { float:left; margin-right:20px; display:block; width:60px; height:58px; background:url(http://1.bp.blogspot.com/_WlrpZ6HxL6s/Sw5vlxCRsLI/AAAAAAAAHm8/39QZpnCSVxU/s0/dragicon.png) no-repeat 0 0; position:relative; }
#targets li#delicious { background-position:0 -60px; }
#targets li#facebook { background-position:0 -120px; }
#targets li#wikio { background-position:0 -180px; }
#targets li#meneame { background-position:0 -240px; }
#targets li#bitacoras { background-position:0 -300px; }
#targets li span { display:block; position:absolute; bottom:-40px; white-space:pre; color:#fff; }

#overlay { background-color:#000; position:fixed;top:0;left:0;width:100%;height:100%; z-index:1; }
#helper { background-color:#c2c2c2; position:absolute; height:35px; padding:15px 70px 0 20px; color:#fff; font-family:Verdana; font-weight:bold; font-size:18px; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; border:3px solid #7d7d7d; }
#thumb { width:50px; height:50px; position:absolute; right:0; top:0; border-left:3px solid #7d7d7d; }

.share { font-weight:bold; position:absolute; font-size:12px; text-align: center; }

</style></b:if>

2. Masuk ke "Page Ellements/Halaman Element" lalu tambahkan gadget baru dengan format HTML. lalu masukkan kode html di bawah ini :

<ul id="targets">
<li id="twitter"><a href="http://twitter.com"><!-- --></a></li>
<li id="delicious"><a href="http://delicious.com"><!-- --></a></li>
<li id="facebook"><a href="http://www.facebook.com"><!-- --></a></li>
<li id="wikio"><a href="http://www.wikio.es"><!-- --></a></li>
<li id="meneame"><a href="http://meneame.net"><!-- --></a></li>
<li id="bitacoras"><a href="http://bitacoras.com"><!-- --></a></li>
</ul>

Selesai... sekarang anda bisa melihat hasilnya pada website anda. Selamat mencoba dan semoga berhasil.




 Print this page