Slide Out Follower Button



Tutorial kali ini Safiena nak kongsi macam mana nak memasang Slide Out Google Follower button. Biasanya kita lihat diatas skrin sebelah kan? Okay, yang ini pula terletak dibawah skrin sebelah kanan. Sebab adakalanya widget Follower ni agak malu-malu sikit. Terpaksa refresh dua tiga kali baru timbul. Kena lagi kalau kuota internet dah reached quota limit. Jom kita cuba sesuatu yang baru.

Sila lihat contoh dalam gambar diatas dan dibawah.



Caranya :
Dashboard - Layout - add a gadget (Pilih HTML/JAVASCRIPT)

Copy and paste code dibawah.

 <style scoped='' type="text/css">  
 /*<![CDATA[*/  
 #arlinafollowSubscribe{background-color:#464646;width:220px;color:#fff;position:fixed;z-index:999;right:10px;bottom:0}  
 .arlinafollowButton{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}  
 .arlinafollowButton span{background:url("https://4.bp.blogspot.com/-fc3-0J--iW8/VyPNjRmxJtI/AAAAAAAAD7U/emRRY6ntYEg3IaL-mev9XxE9M1OKh50fACLcB/s1600/follow-blogger.png") no-repeat scroll 0 3px transparent;padding-left:15px}  
 .arlinafollowButton:hover,.arlinafollowButton:focus,.followActive,.followActive:hover{color:#fff}  
 .arlinafollowButton:hover span,.followActive span{background-position:0 -37px!important}  
 .followactive{background-color:#333}  
 .arlinafollowForm{padding:15px;margin:auto;text-align:center;font-size:12px}  
 .arlinafollowForm p{margin:10px 0}  
 .arlinaFollowFooter{text-align:center;font-size:11px;padding:7px 0;margin:0 0 -15px;border-top:1px solid #3c3c3c}  
 .arlinaFollowFooter a{color:#aaa;background:none;text-decoration:none}  
 .arlinaFollowFooter 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("#arlinafollowSubscribe"),t="-"+o.outerHeight()+"px";o.hide().css({bottom:"-510px"}),setTimeout(function(){o.show().animate({bottom:t})},500),e(".arlinafollowButton").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="arlinafollowSubscribe" style="bottom: -971px;">  
  <div class="arlinafollowForm">  
   <a class="arlinafollowButton" href="#" title="Follow"><b>+ Follow</b></a>  
   <br />  
   <a href="http://www.Blogger.com/follow-blog.g?blogID=7342017194742683056" 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://1.bp.blogspot.com/-HViEx99kxmQ/VyPMrPGAvEI/AAAAAAAAD7M/bWz5CKpHrHkxtVdgL0z-xJQa_nA_tK0gACLcB/s1600/Follower.png" alt="Join on this site" /></a>  
   <br />  
   <p>with Google Friend Connect</p>  
  </div>  
 </div>  


Jangan lupa tukarkan blogID
Cara nak dapatkan blogID :


Bila dah selesai tekan SAVE. You are done. Goodluck. 



Nur Safiena

Married. Sarawakian. On and off blogger since 2008. Freelance graphic/web designer. Loves cute stuffs, pink and web designing. Plain and simple. Passionate about creating clean and cute graphics. 

11 comments:

  1. Comel aih blog ni, hihihihi. Nice tutorial, unik betul button follow kat bawah mcm tu...

    ReplyDelete
    Replies
    1. Terima kasih sis.. nanti share tutorial yang lain pula

      Delete
  2. wahh nice.. safiena nak rekues toturial blh x?? macamn nk buat consor link.. means kita ada ready counsor then bila consur kita nk klik link dia brubah jdi counser lain.. pendek kata kalau tunujuk link dia berubah consour.. ekkk ngm ka ayat Unni tu..hahahaha.. mcm yang sekarang consur anak panah bila link jadi consur tangan. hihihi

    ReplyDelete
    Replies
    1. Thanks dear.. Maksud Unni yang macam roll image tu ka? Maaf saya kurang paham hihi

      Delete
    2. Oooo rasanya akak paham apa yang Unni maksudkan tu. Cursor kan? Okay nanti Safiena buat tuto :))

      Delete
  3. Wah! Hebat la tutorial fiena. nanti abam kie try buat. hehehhe..
    dtg sini sambil follow gak. no 50. tq.

    ReplyDelete
    Replies
    1. Terima kasih Abam Kie kerana sudi berkunjung ke blog Safiena. Happy blogging cikgu y-)

      Delete

* Terima kasih daun keladi. Lain kali komen lagi hihi...
* Sila tinggalkan link blog dalam ruangan komen (untuk memudahkan Safiena mengunjungi blog kalian.
* Kalau dah FOLLOW BLOG sila bagitahu ya.
* Happy blogging si comel semua!

Instagram