Membuat Tombol Sharing Animasi

Diposkan oleh Hery Prasetyo Thursday, January 28, 2010
بسم الله الرحمن الرحيم

Membuat tombol sharing animasi. sharing postingan keberbagai situs bookmark selain berguna untuk SEO judul tersebut, juga dapat membantu berbagi kepada semua orang. sharing is caring begitu kata orang. berbagi memberikan kepada sesama dengan apa yang berguna.

Tombol Sharing Animasi contohnya silahkan klik gambar dibawah ini :

Membuat Tombol Sharing Animasi

HAPIA Mesir mendapatkan cara ini melalui Sob Beben yang menunjukan kepada HAPIA Mesir situs atas tutorialnya.
bagi yang ingin melihat langsung situs tutorialnya silahkan klik disini.

Cara membuat tombol sharing animasi sebagai berikut :

- Login keBlogger.
- Masuk ke "Tata Letak" kemudian "Edit HTML".
- Jangan lupa centang tulisan "Expand Template Widget".
- Cari code <head> kemudian paste-kan code berikut dibawahnya :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://hapiajavascript.googlecode.com/files/sharescript.js"></script>


- Cari code ]]></b:skin> dan paste-kan code CSS berikut diatasnya :

#share{
/* The share box container */
width:500px;
background:#ececec;
height:200px;
margin:60px auto;
overflow:hidden;

-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}

#share-label{
/* The image on the right */
background:url(img/share.png) no-repeat 50% 50%;
float:left;
height:200px;
width:200px;
}

#stage{
/* This is where the animation takes place */
position:relative;

border-right:1px solid #DDDDDD;
width:290px;
height:200px;
background:white;
float:left;

border-bottom-left-radius:12px;
border-top-left-radius:12px;

-moz-border-radius-bottomleft:12px;
-moz-border-radius-topleft:12px;

-webkit-border-bottom-left-radius:12px;
-webkit-border-top-left-radius:12px;
}

.btn{
/* This class is assigned to every share button */
background-color:white;
height:90px;
left:0;
top:0;
width:60px;
position:relative;
margin:20px 0 0 10px;
float:left;
}

.bcontent{
/* Positioned inside the .btn container */
position:absolute;
top:auto;
bottom:20px;
left:0;
}
/* Individual rules for every share button */

.digg{ background:url(img/digg_reflection.png) no-repeat -4px bottom;}
.reddit{ background:url(img/reddit_reflection.png) no-repeat -4px bottom;}
.facebook{ background:url(img/facebook_reflection.png) no-repeat bottom center;}
.tweetmeme{ background:url(img/twit_reflection.png) no-repeat -5px bottom;}
.dzone{ background:url(img/dzone_reflection.png) no-repeat -7px bottom;}

.thanksto{
position:absolute;
bottom:2px;
right:4px;
font-size:10px;
}

.thanksto a,.thanksto a:visited{
color:#BBB;
}

/* Customizing the facebook share button */

span.fb_share_no_count {
display:block;
}

span.fb_share_count_top.fb_share_no_count {
line-height:54px;
}

span.fb_share_count_nub_top.fb_share_no_count{
display:none;
}

span.fb_share_no_count span.fb_share_count_inner {
background:#3B5998 url(http://static.fbshare.me/f_only.png) no-repeat scroll 20px 5px;
display:block;
}


- Cari code <data:post.body/> dan copi paste-kan code berikut dibawahnya :

<div id="share">
<div id="stage">

<div class="btn digg"><div class="bcontent"><a class="DiggThisButton"></a><script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script></div></div>
<div class="btn tweetmeme"><div class="bcontent"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div></div>
<div class="btn dzone"><div class="bcontent"><script language="javascript" src="http://widgets.dzone.com/links/widgets/zoneit.js"></script></div></div>
<div class="btn reddit"><div class="bcontent"><script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script></div></div>
<div class="btn facebook"><div class="bcontent"><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></div></div>

</div>

<div id="share-label">
<a href="#"><img border="0" width="190" height="190" src="http://sites.google.com/site/hapiamesir/javascript/sharing_is_caring.jpg"></a>
</div>

</div>

- Simpan template.


Silahkan cek dibawah setiap postingan.


Jika postingan ini dirasa berguna bagi yang lain. silahkan share untuk berbagi.

Dapatkan Update Terbaru Dari HAPIA Mesir, Masukan Email Anda :

HAPIA Mesir Readers

Bookmark and Share

Direkomendasikan Untuk Dibaca :

28 Responses to Membuat Tombol Sharing Animasi

  1. eRGe Says:
  2. wah .. master dari mesir beraksi lagi nih ... pengen coba nih santet na .. kaya'na kren nih

     
  3. witul4r Says:
  4. wew sangar ya.....
    mantap sobat...
    terus semangat ngeblognya

     
  5. EgaBlogSpot Says:
  6. bagus kang, seru artikelnya

     
  7. den-adnan Says:
  8. nice info sob, makasih juga kemarin dah komen di tempatku.

     
  9. tiyo Says:
  10. wah keren nih infonya

     
  11. Facechan Says:
  12. wah keren bgt..

    aku kira flash tuh......

     
  13. tovazone Says:
  14. wow... manteeepp... nih infonya, thanks bro, langsung dibungkus ya...

    oia...Ayo refreshing ketempatku sobat, sekalian ngisi tebak2an. Lumayan bisa naikin SEO lho....

     
  15. nuansa pena Says:
  16. selalu ada yang menarik untuk dicaoba, trims scriptnya!

     
  17. baru dapat yang ginian...
    tapi kalau di blog pasti nggak cocok ,... entar tambah lola..
    makasih banyak sobat.

     
  18. Apakabar???

    Blog nya makin ok

     
  19. akhatam Says:
  20. Wah mantap triknya... met sore aja sob..

     
  21. Rock Says:
  22. Wahhh... keren nich tutorialnya...

     
  23. LL Says:
  24. Good & interesting information. Thanks

     
  25. TRIK BLOG Says:
  26. Dapat ilmu baru lagi nich...

     
  27. E-BOOK Says:
  28. Coba dulu ahhh...

     
  29. Jaka Utama Says:
  30. mantab sob
    ijin coba dlo ah

     
  31. Jaka Utama Says:
  32. wah ternyata yg ini yah
    udah pernh coba bos
    berat juga yah

     
  33. munir ardi Says:
  34. satu lagi tutorial keren dan yang pasti tutorial disini selalu jempolan hasilnya seperti popular post banyak dipake ama sahabat

     
  35. Omyo Says:
  36. nambahin dikit, ada 2 model untuk retweet pertama model full yg ke dua model compact!!

    yg full kyk pnya hapia kalo yg compact nih kodenya :
    <script type="text/javascript">
    tweetmeme_style = "compact";
    </script>
    <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

    thanks hapia udah posting :D

     
  37. Bunglon Blog Says:
  38. wah semakin mantap artikel dari blog ini sob, sukses slalu...

     
  39. HAPIA Mesir Says:
  40. Omyo@ makasih udah nambahin lagi..semoga berguna bagi yang lain juga...

     
  41. annosmile Says:
  42. wah keren banget tombol donlotnya
    nyoba yg punya omyo dulu

     
  43. kunjungan perdana
    salam hangat dari blue

     
  44. angel Says:
  45. thanks mas, tak coba dlu yah.....

     
  46. HAPIA Mesir Says:
  47. angel@ silahkan sob.. semoga bermanfaat..

     
  48. Sip BRO! Dicoba !!!

     
  49. Rizky2009 Says:
  50. dah aq lihat demonya keren bgt

     
  51. Wah, ijin sharing ya.

     

Post a Comment