Cara Membuat Widget Melayang di Blog [Tutorial Blogspot]

Gara-gara pembicaraan di twitter, bareng Fitrah(Mpit) akhirnya saya tertarik bikin tutorial kayak gini. Bukan berarti saya jago yah. Saya kebetulan tau yang bagian ini.

Nah kalo ngeliat disamping kiri ada tombol like follow dll yang melayang-layang ngikutin keman kita nge-scroll kan? nah kali ini kita akan membuat yang seperti itu. Tapi untuk kali ini cuma yang "melayang"-nya dulu aja ya. Untuk tombol like facebook, twitter dan G+ saya lanjutkan di postingan berikutnya.

Widget Melayang

Catatan: sebenarnya ada banyak cara bikin yang kayak begini tapi saya menjelaskan cara yang paling mudah saja ya :)

1. Login ke Blogger
2. Pilih blog anda dan pilih tab "Tata Letak" (ini ga tau kalo bahasa inggris tertulisnya apa :D)
3. Cari widget yang ada code shoutmix atau cbox-nya (Sebenarnya widget apa aja yang tipenya HTML/JavaScript) kemudian > klik "edit"
Kalo ga ada, silahkan klik "Tambah Gadget" > Cari "HTML/JavaScript" > Kosongkan "Judul" > Isi "Konten" dengan kode pada nomer 4.
4. Kemudian akan muncul dialog. Tambahkan kode berikut dibawah setelah kode shoutmix atau cbox anda.

<style type="text/css">
.melayang {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
background-color: black;
color: white;
margin: 10px;
padding: 20px;
}
</style>
<div class="melayang">
Ini adalah widget melayang. Tutorialnya bisa didapatkan <a href="http://incegha.blogspot.com/2012/01/cara-membuat-widget-melayang-di-blog.html">disini</a> :D
</div>

5. Kemudian Klik Simpan.

6. Nah lihat blog anda dibagian bawah kanan akan muncul widget yang melayang :)

Untuk mengatur posisinya, misalnya ingin seperti punya saya, bottom bisa diganti dengan top, kemudian left dengan right. Kemudian angka 0 nya bisa diganti dengan 100px. Kemudian baris margin: 10px bisa dihapus

top: 100px;
left: 0;

Ini berarti 100pixel jaraknya dari top dan 0 dari left.

Sementara untuk warnanya bisa disesuaikan dengan kemauan anda dengan mengedit background-color dan color untuk tulisannya.

Cara yang lebih gampang:
Kalo udah jago ngedit-ngedit template, langsung aja masuk ke "Template" kemudian tambahkan kode nomer 4 setelah tag <body>

Kelemahan: dengan cara ini script akan mudah dipasang tapi akan berbeda tampilannya dilayar yang kecil.

Untuk hasil tutorial ini silahkan liat di bagian bawah kanan post ini.

Nah selanjutnya kita akan menambahkan tombol like facebook dan tweet twitter dibagian yang melayang ini.




Ini adalah widget melayang. Tutorialnya bisa didapatkan disini :D

11 comments:

timbangan digital said...: ane coba ya gan scriptnya terima kasih; January 13, 2012 at 2:44 PM
inverter mitsubishi said...: bagus banget gan scriptnya, boleh nih ane belajar yang lain lain; January 13, 2012 at 2:45 PM
infrared thermometer said...: bener bener bagus gan scriptnya; January 13, 2012 at 2:47 PM
Setia Negara B. Tjaru said...: Hadeh ini 3 yang komen orang yang sama -_-a; January 13, 2012 at 7:28 PM
Unknown said...: yaaah bagus itu.. pinter amat lu gan.. hehehe; August 26, 2012 at 5:54 PM
Bang Vandawablog said...: Trima kasih gan,,,
sangat membantu saya nee.....
kunjung balik gan ke blog saya yang sederhana....

trimakasih.......; September 6, 2012 at 2:13 AM
Mang uem said...: Thanks sudah berbagi ilmunya, sukses selalu...; October 2, 2012 at 3:44 PM
Anonymous said...: Klo di buat di tengah-tengah bagaimana?; November 4, 2012 at 6:18 PM
topSpot | Find your top spot here said...: Nice tutorial sob! Kapan-kapan bakal saya cobain nih di blog saya.

SALAM KENAL & SALAM BLOGGER :); January 4, 2013 at 1:31 AM
lekitra said...: Thanks atas tutorialnya gan :D; January 4, 2013 at 1:32 AM
Setia Negara B. Tjaru said...: waw. terima kasih scriptnya udah dipake :); January 31, 2013 at 3:11 PM

Pages

Catatan Setia Negara

Cara Membuat Widget Melayang di Blog [Tutorial Blogspot]

11 comments:

Post a Comment

Navigation

Followers

About Me!