Memasang Slide Out Tombol Follow Join This Site Di Blog

Memasang Slide Out Tombol Follow Join This Site di Blog - Join This Site merupakan widget yang dimana kalau kau ingin bergabung dengan Blog yang sedang kita kunjungi. Sebenarnya widget ini sudah saya ulas pada artikel sebelumnya, tetapi sangat sederhana hanya didukung gambar format Gif.

Namun, ada juga yang sedikit lebih menarik ialah dengan effect pantul. Kaprikornus widget terlihat memantul ibarat bola menyentuh lantai atau dinding.

Terkait :

• Cara Membuat Join This Site Menarik di Blogger
• Cara Membuat Widget Join This Site Bergerak Memantul di Blog

Pada Join This Site ini berbeda dari sebelum-sebelumnya, widget join ini dilengkapi effect slider, dimana kalau goresan pena +Follow di klik makan widget akan muncul dari atas ke bawah. Widget ini pada umunya terletak di sisi kanan bawah layar.

Demo

Effect slider pada Follow Join This Site ini dibentuk dengan memakai fungsi javascript. Untuk kau yang ingin memasang widget Follow Join This Site Slider di blog, silahkan ikuti langkah-langkahnya dibawah ini:

Cara Pasang Slide Out Tombol Follow Join This Site

1. Login ke akun Blogger

2. Setelah masuk ke dashbor Blog, pilih Tata letak/ Layout.

3. Kemudain klik add Gadget, kemudian pilih HTML/javascript.

4. Setelah jendela Pop-Up terbuka, kau copy instruksi dibawah ini dan pastekan pada kolom tersedia

<style scoped='' type="text/css">

/*<![CDATA[*/

#aakfollowSubscribe{background-color:#464646;width:220px;color:#fff;position:fixed;z-index:999;right:10px;bottom:0}

.aakfollowButton{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}

.aakfollowButton span{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9tzJrlixOfKKJwb64YOOLDjjaWsyGMhER7F7Hgx0CbgE9NRZQB1xgpCM5LAVlUFLBfNcr0o9ElMpyBUR9947xtCSsTHOxqMZFJc3FJsRS6tNoEMkJIdZYF3KUriD_TXBtlmgWLeKXHx_P/s1600/follow-blogger.png") no-repeat scroll 0 3px transparent;padding-left:15px}

.aakfollowButton:hover,.aakfollowButton:focus,.followActive,.followActive:hover{color:#fff}

.aakfollowButton:hover span,.followActive span{background-position:0 -37px!important}

.followactive{background-color:#333}

.aakfollowForm{padding:15px;margin:auto;text-align:center;font-size:12px}

.aakfollowForm p{margin:10px 0}

.aakFollowFooter{text-align:center;font-size:11px;padding:7px 0;margin:0 0 -15px;border-top:1px solid #3c3c3c}

.aakFollowFooter a{color:#aaa;background:none;text-decoration:none}

.aakFollowFooter 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("#aakfollowSubscribe"),t="-"+o.outerHeight()+"px";o.hide().css({bottom:"-510px"}),setTimeout(function(){o.show().animate({bottom:t})},500),e(".aakfollowButton").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="aakfollowSubscribe" style="bottom: -971px;">

  <div class="aakfollowForm">

    <a class="aakfollowButton" href="#" title="Memasang Slide Out Tombol Follow Join This Site di Blog"><b>+ Follow</b></a>

    <br />

    <a href="http://www.Blogger.com/follow-blog.g?blogID=4446121247762886028" title="Memasang Slide Out Tombol Follow Join This Site di Blog" 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/AVvXsEg7XKH3FM7mtFY16tFlMNAzKtPgLAV3OH2hzfIUsu1G9CRSFid6LuoWzoEp7_6U_JXkteylI8jNB9dpYti41XKiS-7-WWwdObyfhbrxSWh_DrqwGsaoIOqYU0yOmzyfOJ9idZTlVtJSHMoK/s1600/Follower.png" alt="Memasang Slide Out Tombol Follow Join This Site di Blog Memasang Slide Out Tombol Follow Join This Site di Blog" /></a>

    <br />

    <p>with Google Friend Connect</p>

  </div>

</div>

Note : Silahkan ganti ID Blogger warna merah , dengan ID Blogger kamu

Untuk mengetahui ID Blogger kamu, kau masuk ke akun Blogger, ID Blogger kau ada diatas dashbor. Berikut teladan screnshootnya :

5. Klik tombol Simpan 

Demikian saya sampaikan tutorial Membuat Follow Join This Site Effect Slide. Sekian dari saya, terima kasih dan biar bermanfaat.

Sumber http://www.websiteedukasi.com/