Skip to main content

Cara Membuat Widget Follower Melayang/Terbang

By
Assalamu'alaikum! Halo sobat, kali ini saya ingin posting yang baru saja saya praktekan pada blog saya ini. Trik kali ini adalah menambahkan widget follower. Tapi, widget follownya tidak sembarangan loh .. Soalnya kali ini widget followernya terbang alias melayang alias floating.

Fungsi dari widget ini adalah sebagai hiasan. itu hanya salah satu dari banyak manfaatnya. Dan juga itu hanya dilihat dari satu sudut pandang. Kalau dilihat dari sudut pandang yang lain, pasti masih ada banyak lagi manfaat/fungsi dari widget ini.

Saya menggunakan widget ini pun karena menurut saya lebih bagus dari pada widget follower yang biasa. Kemudian, selain itu, saya sedang mencari topik untuk artikel untuk diterbitkan di blog saya. Jadi, setelah praktek pada blog saya ini berhasil, saya tulis artikel ini ^^ . Yuk sob langsung ke TKP saja ...

Langkah I
1. Dasbor > Rancangan

2. Add Gadget > HTML/JavaScript

3. Copy kode berikut





<style type="text/css">
#fl{
position:fixed;
left:150px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #676767;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVaD1VYv9NtvfanzyoKrk630VEvDCa6pzYr-XVmCW74Cx80OQDrywRIGL5t2biZLbIhzPE6IawnQJF-0oRGX7R6Y7yiW9rcKzHBUEJOJl1QF62WYFllDJyRileOcjyymD2ic9XofdLbXY-/)#000000 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">


----------------Kode Widget Follow Disini-------------------


<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<font size="2"><a href="http://www.berbagidisini.com/2010/10/memasang-widget-follow-showhide.html"target=_blank"><div style="color: #444444;">
<span >By enda fiVers</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>
4. Jangan disimpan dulu, sobat langsung kunjungi link ini

5. Kemudian pilih yang mana blog sobat

6. Klik "Tambahkan gadget anggota"


7. Kemudian silahkan tentukan warna widget follower, jika sudah Buat kode

8. Copy kode tersebut dan paste di kalimat yang berwarna merah pada kode no.3

Langkah II
1. Dasbor > Rancangan > Edit HTML

2. Cari kode <body>

3. Letakkan kode dibawah ini tepat sebelum (di atas) kode <body>




<a href='javascript:showHideFL()' style='display:scroll;position: fixed; bottom:5px;left:5px;' title='Follow'><img src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/flwr.png'/></a>


Simpan Template !

Mudahkan sob? Mudah dong kan cuma mengikuti instruksi. Kalau sobat suka mengedit-edit HTML, mungkin sobat juga akan bisa mengganti gambar FOLLOW dengan sesuka hati sobat. Coba aja sendiri ya, soalnya artikel saya cuma sampai di sini. Wassalam! ^^
Labels:

Comments

  1. AP Office DigitalFebruary 18, 2012 at 4:28 AM

    makasih gan infonya.. segera ke TKP mau di coba :D

    ReplyDelete
  2. Rijal IslamiFebruary 18, 2012 at 6:55 PM

    @1923427862544667407.0
    Seep gan, silahkan dicoba dulu ..

    ReplyDelete
  3. Rijal IslamiFebruary 28, 2012 at 9:07 PM

    @8233959245007133063.0
    Oke gan, jangan bosen mampir lagi ^^

    ReplyDelete
  4. Darmawan SaputraJune 16, 2012 at 6:08 AM

    terima kasih info yg sangat bermanfaat ini..


    #Semoga sehat selalu

    ReplyDelete
  5. UnknownOctober 27, 2012 at 12:31 PM

    susah klo gk ad gmbarx ya mas ;P

    ReplyDelete
  6. UnknownDecember 20, 2012 at 3:18 PM

    mksh infonya

    ReplyDelete
  7. AnonymousJanuary 22, 2013 at 2:16 AM

    terima kasih atas infonya

    ReplyDelete

Post a Comment

Berkomentar dengan menggunakan kalimat yang baik dan santun. Dimohon untuk tidak berkomentar SPAM, karena komentar akan dihapus!
Tips:" Berlangganan Via Email " terlebih dahulu agar komentar cepat dibalas!

Popular posts from this blog

Tips Agar Blog Sering Dikunjungi Pengunjung

By
Tips agar blog banyak dikunjungi - Assalamu'alaikum! Kali ini saya ingin membagikan tips yang bisa mengingkatkan pengunjung sobat dan semangat nge-blog sobat. Semoga setelah sobat selesai membaca artikel saya ini, sobat menjadi bergairah untuk terus berada di dunia blogging. Pertama, setelah kita membuat blog, pasti sering sekali kita menerbitkan postingan. Hal seperti itu sudah menjadi sebuah kebiasaan. Setelah beberapa waktu, semangat menerbitkan posting pun melempem . Tidak apa-apa kalu benar hal itu terjadi, sobat hanya perlu mengumpulkan semangat untuk kembali menulis posting. Karena apabila posting di blog kita banyak, kemungkinan salah satu artikel kita terbaca oleh pengunjung pun semakin besar. Saya sendiri sudah merasakannya. Lalu, entah benar atau tidak, untuk mendapatkan pengunjung yang banyak, kita harus sering update posting setiap hari, minimal 1 posting. Kedua, jangan sering-sering menerbitkan artikel hasil copas (copy paste). Karena mesin pencari tidak akan member...
87 comments
Read more

Cara Membuat Cursor Diikuti Text

By
Assalamu'alaikum! Halo sob, ketemu lagi di blog saya ^^ Kali ini saya ingin mencoba berbagi tentang trik membuat cursor diikuti text . Sebenarnya postingan ini hasil referensi dari blog orang lain, tapi tidak apa, nanti akan saya beri sumbernya di bawah. Setelah saya membaca artikelnya, ternyata banyak pengunjung yang berkomentar bahwa triknya tidak work (tidak berhasil). Setelah diselidiki, ternyata ada beberapa bagian template yang tidak mendukung trik ini. Alhasil, yang seharusnya teks berputar di cursor, malah menjauh dari cursor. Jadi, bagi yang telah mencoba trik ini tapi tidak berhasil, sabar saja ya sob ^^ Oke langsung ke TKP aja yuk .. 1. Blogger > Rancangan/Tata letak 2. Tambah Gadget > Pilih HTML/JavaScript 3. Copy kode di bawah ini <script> //mouse //Circling text trail- Tim Tilton //Website: http://www.tempermedia.com/ //Visit http://www.dynamicdrive.com for this script and more function cursor_text_circle(){ // your message here var msg=' Cara Trik Blo...
6 comments
Read more

Cara Mengetahui Komentar Terbaru di Postingan

By
Cara mengetahui ada komentar baru - Bismillahirrahmannirrahiim ... Kini sudah banyak orang yang mulai menggeluti dunia blog. Hal itu menyebabkan banyak muncul blogger newbie (pemula). Blogger pemula tersebut biasanya datang berkunjung ke blog orang dari mesin pencari, karena pastinya kalau pemula mah belum tahu apa-apa termasuk situs/blog apa saja yang memposting tutorial tentang blogger. Dan bagi si pemilik blog yang dikunjungi oleh blogger pemula, biasanya ada kalanya ia dibanjiri komentar pertanyaan yang membingungkan oleh blogger pemula. Tapi bisa dimaklumi, namanya juga blogger pemula. Yang kadang membuat hati kita kesal adalah pengunjung yang bertanya ini, bertanya itu, dan dia sudah merasa pintar dalam hal blogging sampai-sampai saat bertanya kepada orang dia ngotot kalau pemikirannya itu benar. Sudahlah jangan terlalu menyimpang dari topik, dan topik artikel kali ini adalah cara mengetahui komentar terbaru ... Oke langsung ke TKP ... 1. Login blogspot > Komentar 2. Pada ta...
14 comments
Read more