Skip to main content

Cara Membuat Widget Follower Melayang/Terbang

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! ^^

Comments

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

    ReplyDelete
  2. @1923427862544667407.0
    Seep gan, silahkan dicoba dulu ..

    ReplyDelete
  3. mksih ya gan tas infony....!!!

    kunjungi blog saya jga nih, gagahdbs.blogspot.com

    ReplyDelete
  4. @8233959245007133063.0
    Oke gan, jangan bosen mampir lagi ^^

    ReplyDelete
  5. terima kasih info yg sangat bermanfaat ini..


    #Semoga sehat selalu

    ReplyDelete
  6. susah klo gk ad gmbarx ya mas ;P

    ReplyDelete
  7. 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

Cara Meningkatkan Links In pada Alexa

Sebelumnya, ini adalah hasil copy paste. Entah cara seperti ini palsu atau nyata, tapi tidak ada salahnya mencoba. Oke, check this out .. Salam Blogger , pada kesempatan kali ini dan pada posting ini juga saya akan sedikit memberi sedikit trik untuk megoptimalkan semua static yang tertera di alexa. Jika sebelumnya saya membahas tentang cara meningkatkan links in alexa alhamdulillah di posting kali ini berkenaan dengan gimana caranya untuk meningkatkan atau menambah Link in pada alexa. alexa adalah salah satu situs yang memberikan pelayanan untuk trafik blog. Alexa dapat menghitung semua kegiatan lalu lintas blog anda, jadi dengan begitu sobat dapat mengetahui apakah blog anda sudah bagus trafiknya atau tidak. Alexa tidak hanya menghitung lalu lintas blog saja, tetapi alexa juga menyediakan widget untuk blog baik itu blogspot maupun wordpress dan alexa juga menyediakan toolbar untuk browser yang dipakai di komputer sobat. Dan ternyata banyak para blogger yang memil

Dokumentasi Project Kontes Robot Indonesia dan Tugas Akhir

     Pada Kontes Robot Indonesia (KRI) 2017, tim dari Universitas Jenderal Soedirman lolos ke tahap nasional yang bertempat di Universitas Pendidikan Indonesia.      Robot Pemadam Api Berkaki yang dibangun pada tahap regional, dan yang meloloskan tim Universitas Jenderal Soedirman ke tahap nasional.      Tim Universitas Jenderal Soedirman divisi ABU usai berlomba. Pada tahap ini tim tidak berhasil lolos ke tahap nasional.       Melakukan pengkalibrasian sensor IMU (Inertial Measurement Unit). Sensor IMU merupakan gabungan dari 3 sensor lainnya, yaitu accelerometer , gyroscope , dan magnetometer. Pada penelitian yang saya lakukan hanya menggunakan sensor accelerometer yang ada di sensor IMU.       Pengujian sensor IMU dalam mengukur perubahan sudut pitch .       Pengujian sensor IMU dalam mengukur perubahan sudut roll .        Sensor IMU yang telah mendeteksi perubahan sudut, merupakan konversi dari nilai percepatan bumi yang dideteksi oleh ac

Apa yang dimaksud dengan Cc dan Bcc?

Apa yand dimaksud dengan Cc dan Bcc? - Assalamu'alaikum! Akhir-akhir ini, saya sering membahas tentang cara mengirim email di gmail maupun yahoo!. Bukannya saya vacum dari membahas blogging , tapi saya hanya berbagi ilmu yang saya ketahui pada ilmu emailing . Karena, pastilah ada sobat-sobat di luar sana yang kurang paham akan hal emailing . Dan semoga saja, dengan membaca post ini, sobat-sobat semua bisa menjadi paham. :) Tapi tunggu sebentar, pada saat ingin mengirim pesan offline ke email lain, apakah sobat pernah melihat kata Cc dan Bcc ? Apa maksud dari kata Cc dan Bcc ? Ingin tahu? Silakan baca sampai tuntas post ini. Cc adalah singkatan dari Carbon Copy . Maksud dari Cc adalah apabila kita mengisi email pada kolom Cc , maka email tersebut akan menerima pesan yang telah kita buat dengan pemberitahuan bahwa pesan yang ia dapatkan adalah hasil salinan dari pesan yang telah kita kirimkan kepada email lain. Contoh: saya@gmail.com mengirim pesan kepada anda@gmail.com.