Dengan efek slide out yang saya buat ini akan memudahkan pengunjung atau visitor blog kita jika mau mengikuti blog kita. Intinya pengunjung atau visitor kita akan mudah bila ingin mengikuti blog kita dan akan tertarik juga karena efek slide out nya. Oke, jika sobat tertarik bisa lihat langkah-langkah di bawah ini.
Cara Memasang Slide Out Tombol Follow di Blog
1. Buka Blogger > Tata Letak > Buat Widget baru dan copy kan kode di bawah ini.
<style scoped='' type="text/css">
/*<![CDATA[*/
#jevanfollowSubscribe{background-color:#464646;width:220px;color:#fff;position:fixed;z-index:999;right:10px;bottom:0}
.jevanfollowButton{background:#464646;color:#fff;font-size:13px;line-height:28px;padding:0 10px;text-decoration:none;position:absolute;top:-28px;right:0;display:block;border-radius:2px 2px 0 0;height:28px;font-weight:700}
.jevanfollowButton span{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhELRPRZUud4_TtAqKdJ66u_nCWMhTREjXxfr2QE-FLoY49JovnWcHFLRolGr7iSWyYZ45fpuHacBMEO0r2-5l0Z33Fb2cFJ2FO-swz4fw1zrMqwQW-YVxmm8f_jweR87Ky7gE5M4sOFEtB/s1600/follow-blogger.png") no-repeat scroll 0 3px transparent;padding-left:15px}
.jevanfollowButton:hover,.jevanfollowButton:focus,.followActive,.followActive:hover{color:#fff}
.jevanfollowButton:hover span,.followActive span{background-position:0 -37px!important}
.followactive{background-color:#333}
.jevanfollowForm{padding:15px;margin:auto;text-align:center;font-size:12px}
.jevanfollowForm p{margin:10px 0}
.jevanFollowFooter{text-align:center;font-size:11px;padding:7px 0;margin:0 0 -15px;border-top:1px solid #3c3c3c}
.jevanFollowFooter a{color:#aaa;background:none;text-decoration:none}
.jevanFollowFooter a:hover{color:#fff;background:none}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
!function(e){e(document).ready(function(){e.extend(e.easing,{easeOutCubic:function(e,o,t,a,n){return a*((o=o/n-1)*o*o+1)+t}});var o=e("#jevanfollowSubscribe"),t="-"+o.outerHeight()+"px";o.hide().css({bottom:"-510px"}),setTimeout(function(){o.show().animate({bottom:t})},500),e(".jevanfollowButton").click(function(a){o.hasClass("followOpened")?(e(this).removeClass("followActive"),o.removeClass("followOpened").stop().animate({bottom:t},{duration:300,easing:"easeOutCubic"})):(e(this).addClass("followActive"),o.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})),a.preventDefault()})})}(jQuery);
/*]]>*/
</script>
<div id="jevanfollowSubscribe" style="bottom: -971px;">
<div class="jevanfollowForm">
<a class="jevanfollowButton" href="#" title="Follow"><b>+ Follow</b></a>
<br />
<a href="http://www.Blogger.com/follow-blog.g?blogID=8829841906232825281" title="join this site" onclick="window.open(this.href, 'dmfollow', 'toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521');return false;" style="text-align:center;font-weight:bold;text-decoration:none;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGw6UcimVtL0kA3zLjRq5Vt6IxorYSbmhYUo67HgZZOGW3m9R9W6JPYnPmqANBssvLiI3_uu-gJYt32kZS4kHkcD25426ScMV4a4OeTRHYHkanSOkUEkXXZacfr4zVfcubl8bshz9_12B2/s1600/Follower.png" alt="Join on this site" /></a>
<br />
<p>with Google Friend Connect</p>
</div>
</div>Baca juga : Mempercepat Loading Blog Dengan Defer Image
Ganti kode yang ditandai dengan Blog ID anda.
Biar lebih jelas sobat bisa lihat demonya di bawah ini
Sekian trik untuk cara memasang slide out tombol follow di blog dari Anak Sembada.
Semoga bermanfaat
Terima kasih.
0 komentar: