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 jika kamu 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 yakni dengan effect pantul. Jadi widget terlihat memantul seperti 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 jika tulisan +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 dibuat dengan menggunakan fungsi javascript. Untuk kamu 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, lalu pilih HTML/javascript.

4. Setelah jendela Pop-Up terbuka, kamu copy kode 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/AVvXsEjiwp0eh2PtUBdifV930Q0F3bdF6tp6ODGPTnJAzB1NYhxHCqTJG27WfoZU5daWDBuCnEDYOhx9ccNreirkV-h58PyVr2JkjWytnjmgeducWCI_61XbXOI7PDeP_KsiuK1uW0Uh-xY6Qhf8/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="Follow"><b>+ Follow</b></a>

    <br />

    <a href="http://www.Blogger.com/follow-blog.g?blogID=4446121247762886028" 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/AVvXsEiOW97lf9TgG5a3aZqoqpuC4N0HyAACwcUl0Tqe1vTZaSm8KDHXFbAfbsAVMchhjH3bwIkgqQ7KP16Wz7iaJqCTrTGRtDeRPpu6nzPfPhvjFnZLKjxeU2uJmjYmAlORe614jCDyGfPZOiA5/s1600/Follower.png" alt="Join on this site" /></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, kamu masuk ke akun Blogger, ID Blogger kamu ada diatas dashbor. Berikut contoh screnshootnya :

5. Klik tombol Simpan 

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

Subscribe to receive free email updates: