Saya akan share tentang Cara Membuat Animasi Suscribe dan Follow me di Blog kepada sobat blogger semua. Tutorial animasi ini sangat keren d...
Saya akan share tentang Cara Membuat Animasi Suscribe dan Follow me di Blog kepada sobat blogger semua. Tutorial animasi ini sangat keren dan sobat bisa terapkan di blog, untuk live deom silahkan lihat gambar di bawah ini. Bagaimana? Tertarik untuk mencobanya?
 |
| suscribe animasi |
Cara pemasangannya tergolong simple dan mudah, untuk itu silahkan simak beberapa petunjuk di bawah ini :
Login ke accunt blogger sobat.
Pilih rancangan atau tatak letak kemudian, Klik tambah gadget.
Pilih opsi HTML/Javascript
Lalu copy-pastekan kode dibawah ini.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#MD-circle-mod {
bottom: 0 !important;
left: 5px;
position: fixed;
}
#MD-container-circle {
position:relative;
height:100px;
width:100px
}
#MD-base-button {background:-moz-linear-gradient(top,#008400 0,#00470a 100%) repeat #00470a;background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#008400),color-stop(100%,#00470a));background:-webkit-linear-gradient(top,#008400 0,#00470a 100%);background:-o-linear-gradient(top,#008400 0,#00470a 100%);background:-ms-linear-gradient(top,#008400 0,#00470a 100%);background:linear-gradient(top,#008400 0,#00470a 100%);
border:4px solid #fff;
text-decoration: none;
z-index:9999;
cursor:pointer;
border-radius:50px 50px 50px 50px;
box-shadow:0 1px 3px rgba(0,0,0,0.5);
color:#fff;
font:68px Arial;
height:80px;
left:0;
padding:0;
position:absolute;
text-align:center;
top:0;
width:80px
}
.MD-btn {
position:absolute;
height:50px;
width:50px;
border-radius:25px;
top:15px;
left:15px;
-webkit-transition:all 250ms;
-moz-transition:all 250ms;
-o-transition:all 250ms;
-ms-transition:all 250ms;
transition:all 250ms;
box-shadow:0 1px 3px rgba(0,0,0,.5)
}
#MD-fb.open {
top:-125px;
left:25px
}
#MD-fb.open.clicked {
top:-135px;
left:15px
}
#MD-tw.open {
top:-105px;
left:80px
}
#MD-gplus.open {
top:-75px;
left:125px
}
#MD-rss.open {
top:-30px;
left:160px
}
#MD-mail.open {
left:175px;
top:25px
}
.plus {
-moz-user-select: none;
-moz-transition:all 200ms ease-in 0s;
-webkit-transition:all 200ms ease-in;
-o-transition:all 200ms ease-in
}
.rot {
-moz-transform:rotate(137deg);
-o-transform:rotate(137deg);
-webkit-transform:rotate(137deg);
transform:rotate(137deg)
}
</style>
<script type="text/javascript">var delay=40,delayTime;$(function(){btns=$(".MD-btn");$("#MD-base-button").toggle(function(){$("span.plus").addClass("rot");btns.each(function(a){var b=$(this);delayTime=a*delay;window.setTimeout(function(){b.addClass("open")},delayTime)})},function(){$("span.plus").removeClass("rot");$($(btns).get().reverse()).each(function(a){var b=$(this);delayTime=a*delay;window.setTimeout(function(){b.removeClass("open")},delayTime)})})});</script>
<a href="http://www.makingdifferent.com" style="position:absolute;z-index:-11"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1836iPr9-VgaXmx0QRicOoWf8bEnHr2dPkPsi5XOGSJOa1nsIZNXWciAdck2rTT785iOuvKAVe-DMkf_kkuRKWleS4QniN2FqALyePQhbJYsbziLKzJtFQlKKBhwlt4SqE_LQ1yOpOZc/s1600/1x1juice.png"/></a>
<div id="MD-circle-mod">
<div id="MD-container-circle">
<a id="MD-fb" class="MD-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMCtAlVoMC-LAR15yhyphenhyphenVJWAUt9-jKJ53Xx4UABIl4N13ZXN17N4k8MoY1Hg9EQix7L6wRvmdeSwqxTEfQQTNOONAc2hTO7-9weeg6D8u5mP5cnNWomh729KejCPyKGW8UOPBibbXiGKXho/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -1px 0" href="https://www.facebook.com/muhammadiqbalBlog" rel="nofollow" target="_blank"></a><a id="MD-tw" class="MD-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMCtAlVoMC-LAR15yhyphenhyphenVJWAUt9-jKJ53Xx4UABIl4N13ZXN17N4k8MoY1Hg9EQix7L6wRvmdeSwqxTEfQQTNOONAc2hTO7-9weeg6D8u5mP5cnNWomh729KejCPyKGW8UOPBibbXiGKXho/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -52px 0" href="http://twitter.com/02IQb4L" rel="nofollow" target="_blank"></a><a id="MD-gplus" class="MD-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMCtAlVoMC-LAR15yhyphenhyphenVJWAUt9-jKJ53Xx4UABIl4N13ZXN17N4k8MoY1Hg9EQix7L6wRvmdeSwqxTEfQQTNOONAc2hTO7-9weeg6D8u5mP5cnNWomh729KejCPyKGW8UOPBibbXiGKXho/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -157px 0" href="https://plus.google.com/u/0/+muhammadiqbal02" rel="nofollow" target="_blank"></a><a id="MD-rss" class="MD-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMCtAlVoMC-LAR15yhyphenhyphenVJWAUt9-jKJ53Xx4UABIl4N13ZXN17N4k8MoY1Hg9EQix7L6wRvmdeSwqxTEfQQTNOONAc2hTO7-9weeg6D8u5mP5cnNWomh729KejCPyKGW8UOPBibbXiGKXho/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -105px 0" href="http://feeds.feedburner.com/masdabang" rel="nofollow" target="_blank"></a><a id="MD-mail" class="MD-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMCtAlVoMC-LAR15yhyphenhyphenVJWAUt9-jKJ53Xx4UABIl4N13ZXN17N4k8MoY1Hg9EQix7L6wRvmdeSwqxTEfQQTNOONAc2hTO7-9weeg6D8u5mP5cnNWomh729KejCPyKGW8UOPBibbXiGKXho/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -210px 0" href="http://feedburner.google.com/fb/a/mailverify?uri=Masdabang&loc=en_US" rel="nofollow" target="_blank"></a><a id="MD-base-button"><span class="plus">+</span></a>
</div>
</div>
Catatan : Ganti TULISAN yang di tandai warna Biru dengan URL fanpage, twitter, google +, feedburner dan ID feedburner SOBAT.
Langkah terakhir, silahkan klik save dan selesai.
COMMENTS