Thursday, June 28, 2012

Cara Membuat Widget Melayang di Blog

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


Banyaknya orang yang ingin memasang widget pada blog mereka, tetapi apa daya sidebar mereka sudah penuh. Tenang..!! ^_^
Ada solusinya kok, coba lihat gambar diatas, kalian bisa menempatkan widget kalian seperti itu. Pengen tau caranya, udah iya gak usah banyak omong lagi. Langsung aja ke TKP.. ^_^ :

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

Semoga bermanfaat iya kawan,. ^_^
Jangan Lupa buat berikan komentar iya,.

0 comments:

Post a Comment

Terima kasih telah berkomentar di postingan saya kali ini. Silahkan datang kembali pada post-post saya berikutnya ^_^

Click This Widget