Cara Membuat Widget Melayang Pada Pojok Kanan Blog

Gara-gara melihat widget melayang pada blog sobat saya akhirnya saya tertarik bikin tutorial kayak gini. Bukan berarti saya jago yah. Kebetulan saja saya tau yang bagian ini.

Sebagai contoh hasilnya yaa google+ saya yang melayang pada pojok kanan bawah blog ini yang dapat anda lihat pada blog ini. Mau tau cara buatnya baca tutorial ini yaaa. klo mau buat widget melayang tutorial dasar nya ada di bawah ini:

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 dalam kotak dialog widget.

<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://economoy.blogspot.com">disini</a> :D
</div>

5. Kemudian Klik Simpan.

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

NB: tulisan warna merah dapat anda ganti dengan link gambar ataupun widget yang mau anda pasang.

Untuk mengatur posisinya, anda dapat merubah 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. begitu seterusnya anda bisa gunakan kreativitas anda disini

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

Mungkin itu saja yang dapat saya shere kan klo kurang paham tinggalkan komentar jaa yaa sob??

Posted in: Tutorial Blog,Widget