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 :
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 :
Tombol Sharing Animasi contohnya silahkan klik gambar dibawah ini :
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>
<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;
}
/* 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>
<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.
wah .. master dari mesir beraksi lagi nih ... pengen coba nih santet na .. kaya'na kren nih
wew sangar ya.....
mantap sobat...
terus semangat ngeblognya
bagus kang, seru artikelnya
nice info sob, makasih juga kemarin dah komen di tempatku.
wah keren nih infonya
wah keren bgt..
aku kira flash tuh......
wow... manteeepp... nih infonya, thanks bro, langsung dibungkus ya...
oia...Ayo refreshing ketempatku sobat, sekalian ngisi tebak2an. Lumayan bisa naikin SEO lho....
selalu ada yang menarik untuk dicaoba, trims scriptnya!
baru dapat yang ginian...
tapi kalau di blog pasti nggak cocok ,... entar tambah lola..
makasih banyak sobat.
Apakabar???
Blog nya makin ok
Wah mantap triknya... met sore aja sob..
Wahhh... keren nich tutorialnya...
Good & interesting information. Thanks
Dapat ilmu baru lagi nich...
Coba dulu ahhh...
mantab sob
ijin coba dlo ah
wah ternyata yg ini yah
udah pernh coba bos
berat juga yah
satu lagi tutorial keren dan yang pasti tutorial disini selalu jempolan hasilnya seperti popular post banyak dipake ama sahabat
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
wah semakin mantap artikel dari blog ini sob, sukses slalu...
Omyo@ makasih udah nambahin lagi..semoga berguna bagi yang lain juga...
wah keren banget tombol donlotnya
nyoba yg punya omyo dulu
kunjungan perdana
salam hangat dari blue
thanks mas, tak coba dlu yah.....
angel@ silahkan sob.. semoga bermanfaat..
Sip BRO! Dicoba !!!
dah aq lihat demonya keren bgt
Wah, ijin sharing ya.