Widget Google Followers Static

Widget Google Followers Static | Tutorial Blog

Pada tutorial ini saya akan berbagi cara memasang Widget Google Followers Static, maksudnya Widget Followers yang letaknya selalu di pojok Blog, walaupun halaman blog sobat di scroll / di geser, widget Follower sobat akan terus berada di bagian pojok blog.

Ada juga cara lain dalam memasang widget followers, yaitu Widget Google Followers Show Hide, namun kali ini kita bahas tentang Widget Followers Static.

Berikut cara Memasang Widget Google Followers Static :

1. Login ke Blogger, klik Design / Rancangan > Edit HTML.
   
2. Beri tanda centang pada kotak Expand Template Widget.
   
3. Cari kode ]]></b:skin> dan kalau sudah ketemu, letakkan kode berikut tepat di atasnya
   #followers-pojok { position:fixed;_position:absolute;bottom:0px; left:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
4. Selanjutnya, carilah kode </body> dan letakkan kode berikut tepat di atasnya
   <div id='followers-pojok'> <div style='background:#dddddd; overflow: auto; padding: 1px; text-align: right;'>

   Letakkan kode Follower disini

   <font size="0.1"><span style="color: #eeeeee;">Widget by </span><a href="http://kutu-blogspot.blogspot.com/" target="_blank"><span style="color: #eeeeee;">Tutorial Blog</span></a></font> </div></div>
   Ganti tulisan yang berwarna merah dengan kode followers blog soabt, Untuk mendapatkan kode Follower silakan baca Widget Followers Google Friend Connect.
5. Jika sudah selesai klik SAVE / SIMPAN TEMPLATE, dan lihat hasilnya.
   

Silakan dicoba dan Semoga berhasil...

Sekian postingan tentang Widget Google Followers Static.

Widget Google Followers Show Hide

Widget Google Followers Show Hide | Tutorial Blog

Widget followers pada umumnya memperberat loading blog, karena itu pada tutorial ini saya akan berbagi cara membuat widget followers yang lebih ringan dengan mode Show-Hide.

Berikut cara Memasang Widget followers yang lebih ringan dengan mode Show-Hide :

1. Login dengan akun blogger sobat, klik Rancangan / Design > Elemen laman / Page Element.
   
2. Klik Add a gadget / Tambah Gadget, dan pilih HTML/Javascript.
   
3. Letakkan kode berikut didalam area konten;
   <style type="text/css">

   #fl{position:fixed; left:150px; z-index:+1000;}

   * html #fl{position:relative;}

   .flcontent{

   float:left;

   border:2px solid #676767;

   background:#dddddd repeat-x bottom center scroll;

   -moz-border-radius-topleft:15px;

   -moz-border-radius-topright:15px;

   -moz-border-radius-bottomleft:15px;

   -moz-border-radius-bottomright:15px;

   padding:10px;

   }

   </style>

   <script type="text/javascript">

   function showHideFL(){

   var fl = document.getElementById("fl");

   var w = fl.offsetWidth;

   fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);

   fl.opened = !fl.opened;

   }

   function moveFL(x0, xf){

   var fl = document.getElementById("fl");

   var dx = Math.abs(x0-xf) > 25 ? 35 : 1;

   var dir = xf>x0 ? 1 : -1;

   var x = x0 + dx * dir;

   fl.style.bottom = x.toString() + "px";

   if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}

   }

   </script>

   <div id="fl">

   <div class="fltab" onclick="showHideFL()"> </div>

   <div class="flcontent">

   
   

   Letakan Kode Widget Follow Disini

   
   

   <div style="text-align: right;">

   <a href="javascript:showHideFL()">

   [Close]

   </a></div>

   <font size="2"><a href="http://kutu-blogspot.blogspot.com/"target=_blank"><div style="color: #eeeeee;">

   <span >Tutorial Blog</span></div></a></font>

   </div>

   <script type="text/javascript">

   var fl = document.getElementById("fl");

   fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";

   </script></div>
4. Selanjutnya buat kode widget followers-nya dengan google friend connect, untuk mengambil kode widget follownya silahkan ikuti tutorial Widget Followers Google Friend Connect
5. Setelah dapat kode-nya, paste kode tersebut pada area konten Widget Follow tadi (Ganti Letakan Kode Widget Follow Disini [kode yang berwarna merah] dengan kode Widget Follow dari google friend connect), Lalu Save
6. Terakhir, masih pada Elemen Halaman, klik Tambahkan gadget > HTML/Java Script sekali lagi, Kemudian copy paste-kan kode berikut ini:

   <a href="javascript:showHideFL()"/><img border="0" src="http://i1193.photobucket.com/albums/aa345/bakulatz/fl.png" alt="Follow" title="Klik untuk membuka kotak Follow" style="display:scroll;position: fixed; top:30px;right:50px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ;" height="49px" width="130px" /></a>

7. Save dan lihatlah hasilnya.

Selain mode Show Hide Sobat juga bisa memasang Widget Google Followers Static.

Semoga artikel ini bisa membantu sobat yang ingin Memasang Widget Google Followers dengan mode Show Hide.

Widget Followers Google Friend Connect

Widget Followers Google Friend Connect | Tutorial Blog

Widget Followers dari Google Friend Connect ini sama saja dengan Widget Followers default dari blogger, cuman widget ini menggunakan kode dari Google Friend Connect.

Langsung saja Sob, berikut tutorialnya :

1. Masuk ke situs http://www.google.com/friendconnect/, dan Login menggunakan account gmail anda.
2. Pilih blog Sobat yang ingin di pasang widget Google Followers, lalu klik pada Tambahkan Gadget Anggota.
   
3. Atur lebar widget,font dan warnanya, sesuaikan dengan sidebar blog Anda.
   
4. Kalau sudah selesai, tekan tombol Buat Kode pada bagian bawah halaman.
   
5. Copy kode yang diberikan oleh Google Friend Connect tersebut.
   
6. Selanjutnya, Login ke blogger. pilih Design / Rancangan > Page Element.
   
7. Kemudian pilih Add a Gadget.
   
8. Pilih HTML/Javascript dan masukkan kode yang diberikan oleh Google Friend Connect tadi.
   
9. Lalu klik Save.
   Selesai...

Selanjutnya saya akan berbagi tentang Widget Google Followers Show Hide.

Memasang Widget Google Followers

Memasang Widget Google Followers | Tutorial Blog

Tutorial kali ini mungkin bukan hal yang asing bagi para blogger yang sudah lama pakai Blogspot, jadi tutorial ini buat para pemula saja. Google Followers atau Google Friend Connect (GFC) adalah suatu program komunitas sosial seperti BlogCatalog, MyBlogLog, dan lain-lain. Tepatnya, Google Friend Connect merupakan sarana penghubung untuk memudahkan kita berinteraksi satu sama lain. Kita bisa menambah, mengundang, mengunjungi teman-teman kita dengan mengklik fotonya. Dan dari sini pula kita dapat meningkatkan trafik blog kita.

Widget Google Friend Connect dapat memudahkan pengunjung agar bisa dengan mudah menjadi pelanggan artikel. apalagi jika Anda menggunakan blogger, maka setiap artikel yang terbit dari blog yang diikuti ( Di Follow ) akan tampil di dashboard blogspot Anda.

Berikut cara Memasang Widget Google Followers :

1. Login ke Blogger klik Design/Rancangan > Page Element/Elemen Laman.
   
2. Klik Add a Gadget/Tambah Gadget.
   
3. Pilih Followers.
   
4. Terakhir klik Save.
   

Selesai... Widget Google Followers sudah terpasang di blog Anda.

Selanjutnya postingan saya tentang memasang Widget Followers Google Friend Connect.

Memasang Widget Search Box

Memasang Widget Search Box | Tutorial Blog

Tutorial kali buat sobat yang masih belum bisa dan ingin memasang widget Kotak Penelusuran (Search Box) di blog. Cara memasangnya tidak menggunakan coding, karena sekarang Blogger sudah menyediakan widget Kotak Penelusuran. Jadi caranya lebih mudah dari Membuat Kotak Pencarian (Search Box).

Berikut cara Membuat Search Box di Blog :

1. Login ke Akun Blogger milik Anda, pilih Rancangan (Design) > Elemen Laman (Page Elements).
   
2. Klik Tambah Gadget (Add a Gadget).
   
3. Pilih Kotak Penelusuran (Search Box).
   
4. Pada bagian Judul / Title, isi dengan Cari di Blog Ini atau kata lain yang Anda inginkan. Pada bagian Tab, centang pada Blog ini (This Blog).
   
5. Terakhir klik tombol Simpan (Save), dan lihat hasilnya.
   

Semoga tutorial ini bisa membantu sobat yang ingin Memasang Search Box di Blog.