4 Cara Membuat Tombol Join This Site di Blog

Selamat datang kembali di Demo IdBoegis, Blog yang membahas seputar Tips Adsense, Tips Komputer, Tutorial Blog, SSH Gratis, Tips Youtube, Tips Smartphone dan informasi internet lainnya.

Pada Artikel kali ini kita akan membahas 4 Cara Membuat Tombol Join This Site di Blog, Postingan ini masih berhubungan dengan Artikel Tutorial Blog. Artikel Widget.

Baca juga:

4 Cara Membuat Tombol Join This Site di Blog

Advertisement

Cara Memasang Tombol Join This Site - Halo sobat blogger semua dimanapun anda berada. Semoga kita semua senantiasa dalam PerlindunganNYA. Baiklah, pada kesempatan kali ini saya akan memberikan 4 cara untuk membuat tombol join this site/ followers button dimana salah satunya dengan menggunakan efek show hide, Fungsi dari widget ini sebenarnya sama dengan tombol follow blog yang lainnya, hanya saja cara yang akan saya berikan di bawah menggunakan tombol show hide melayang pada bagian sisi kanan halaman. Sebelum kita melangkah lebih jauh, saya akan sedikit menjelaskan apa sih tombol follower blog?

Tombol follow this blog merupakan tombol yang di gunakan untuk menambahkan jaringan ataupun pertemanan di dalam dunia blogging. Fungsi atau kegunaan dari tombol follow ini pun sama seperti halnya ketika anda menambahkan teman dalam facebook ataupun twitter. Hanya saja layanan ini di gunakan dalam dunia blog. Dan tentunya anda juga akan mendapatkan informasi update terbaru dari teman-teman blogger yang sudah anda follow, dimana anda bisa melihat update tersebut pada halaman dashboard blogger anda, cukup menarik bukan :)

Sebenarnya ketika anda googling dengan kata kunci cara membuat tombol follow di blog akan ada banyak artikel/ tutorial yang telah membagikannya, namun cara menampilkan dan cara pemasangannya pun akan berbeda-beda. Dan bagi anda yang penasaran dengan 4 cara yang akan saya bagikan ini. anda bisa mengikuti langkah-langkah di bawah ini.

Cara Memasang Tombol Follow di Blog

1. Tombol Join This Site dengan Foto Follower

Sebenarnya blogger sudah menyediakan widget tersebut. Jadi anda tinggal memasangya pada blog anda dengan cara berikut :

• Pertama silahkan masuk ke halaman blog sobat
• Kemudian silahkan anda menuju halaman tata letak
• Selanjutnya pilih add gadget --> pilih gadget lainnya pada bagian kiri atas dan silahkan pilih pengikut.
• Silahkan simpan dan lihat hasilnya.

2. Tombol Join This Site tanpa Foto Followers

Selain cara nomor 1 di atas, kita juga bisa menampilkan tombol join this site tanpa foto followers, bagi anda yang ingin memasangnya silahkan ikuti langkah-langkah berikut :

• Pertama silahkan masuk ke halaman blog sobat
• Kemudian silahkan anda menuju halaman tata letak
• Selanjutnya pilih add gadget --> pilih HTML dan silahkan masukkan kode di bawah ini kedalamnya.

  <a href="http://www.blogger.com/follow-blog.g?blogID=XXXXXXXXXXXXXXX"><img src="https://4.bp.blogspot.com/-t5qPRGEcuH0/V0Mr3I-y0YI/AAAAAAAAAkQ/XWvYx7Ii7t8Xsa1OqCYggKaOtdDgmzg_QCLcB/s1600/Follow%2Bmy%2Bblog%2B%25281%2529sac.gif" /></a>

• Silahkan simpan dan lihat hasilnya.
• Note : Ganti tulisan XXXXXXXXXX dengan ID blog anda.

3. Tombol Join This Site dengan Efek Marque/ Berjalan
Tombol Join This Site berikut sama dengan tombol nomor 2. Hanya saya tombol join thisnya berjalan seperti gambar di atas.

• Pertama silahkan masuk ke halaman blog sobat
• Kemudian silahkan anda menuju halaman tata letak
• Selanjutnya pilih add gadget --> pilih HTML dan silahkan masukkan kode di bawah ini kedalamnya.

  <div class='widget-content'>
  <marquee behavior="alternate"><a href ="http://www.blogger.com/follow-blog.g?blogID=XXXXXXXXXXXXXXXXX"><img src="https://4.bp.blogspot.com/-t5qPRGEcuH0/V0Mr3I-y0YI/AAAAAAAAAkQ/XWvYx7Ii7t8Xsa1OqCYggKaOtdDgmzg_QCLcB/s1600/Follow%2Bmy%2Bblog%2B%25281%2529sac.gif"/></a></marquee>
  </div>

• Silahkan simpan dan lihat hasilnya.
• Note : Silahkan ganti huruf XXXXXXXXXXXXX dengan ID Blog Anda

4. Tombol Join This Site dengan Efek Show Hide
Fungsi dari widget ini sebenarnya sama dengan tombol follow blog yang lainnya, hanya saja cara yang akan saya berikan di bawah menggunakan tombol show hide melayang pada bagian sisi kanan halaman. Cara ini telah di bagikan oleh mbak arlina, bagi anda yang ingin memasangnya silahkan ikuti langkah-langkah di bawah ini :

• Pertama silahkan masuk ke halaman blog sobat
• Kemudian silahkan anda menuju halaman tata letak
• Selanjutnya pilih add gadget --> pilih HTML dan silahkan masukkan kode di bawah ini kedalamnya.

  <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=XXXXXXXXXXXXXXXXXXX" 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>

• Silahkan simpan dan lihat hasilnya.
• Note : Silahkan ganti huruf XXXXXXXXXXXXX dengan ID Blog Anda

Itulah 4 cara untuk membuat tombol join this site pada blog. Semoga artikel di atas bermanfaat dan selemat mencoba :)