BOPLO: Widgets

Tampilkan postingan dengan label Widgets. Tampilkan semua postingan

Cara Membuat Sesuatu Melayang Di Blog

Mungkin masih ada yang belum paham dengan Cara Membuat Sesuatu Melayang Di Blog. nah kali ini saya akan berbagi cara atau trik tersebuat. Di dalam kode ini sobat blogger semua dapat menyisipkan gambar, banner, script atau kode apapun. Nah pastinya keren donk bila blog sobat bisa seperti itu. Blog sobat akan kelihatan lebih menawan dan indah. Tapi jangan terlalu rame ya, ntar nutupin halaman blog semuanya lagi. Gambar melayang ini akan mengikuti kemanapun scroll ditarik gambar akan tetap pada posisi semula jadi akan terus kelihatan sobat. Baiklah gak usah terlalu lama bicaranya ya, langsung saja kita praktekin yuck :

Langsung saja kita kasih tau cara membuatnya yach. Ikuti saja langkah berikut ini sobat :

1. Sebelum memulai mengedit saya sarankan buat menyimpan template punya sobat dulu yach.

2. Login ke Blogger , pergi ke Tata Letak -> Edit HTML

dan tandai kotak centang " Expand Template Widget ".

3. Sekarang cari (CTRL + F) kode ini ]]></b:skin> di template dan masukkan kode berikut ini sebelum kode tadi atau di atas kode tadi :

* Jika ingin memasang gambar/banner di posisi kanan atas blog.

#registrasi {
top:5px;
right:5px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#registrasi a img {border:0}

* Jika ingin memasang gambar/banner di posisi kanan bawah blog.

#registrasi {
bottom:5px;
right:5px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#registrasi a img {border:0}

* Jika ingin memasang gambar/banner di posisi kiri atas blog

#registrasi {
top:5px;
left:5px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#registrasi a img {border:0}

* Jika ingin memasang gambar/banner di posisi kiri bawah blog.

#registrasi {
bottom:5px;
left:5px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#registrasi a img {border:0}

4. Selanjutnya Copy-paste kode di bawah ini setelah </body>

Catatan :

* Untuk text yang berwarna orange sobat ganti dengan alamat blog sobat.
* Untuk text yang berwarna pink sobat ganti dengan apa saja yang sobat mau.

5. Simpan template dan lihat hasilnya sobat.

Semoga sukses dan berhasil ya sobat

readmore »»

Cara Mengganti Cursor Mouse Pada Blog

Hallo sobat jumpa kembali nich. Mungkin tiap hari ngeblog ada yang udah bosen dengan tampilan mouse yang sobat punya pada tampilan blog sobat yang standart melulu. Hemmmmm di sini saya mau membantu sedikit nich mempercantik tampilan blog sobat sekalian dengan mengganti cursor mouse pada blog. Gak terlalu sulit kok sobat caranya. Penasaran gak nich. Langsung saja ke TKP saja yah. Tapi jangan lupa buat menyimpan dahulu template milik sobat yach sebelum mengedit.

Ikuti cara-cara berikut sobat :

Cara Pertama :

1. Masuk account Blogger.

2. Pilih Dashboard/dasbor.

3. Layout/tataletak trus pilih EDIT HTML.

4. Trus cari kode berikut body { Kalau sudah ketemu, kalian copy kode di bawah ini tepat dibawah kode tersebut :

cursor: url("http://i23.photobucket.com/albums/b377/xXPaRaDiSeBaBiXx/Cursors/peace.gif"), default;

5. Selesai

Catatan :

* Untuk url yang berwarna orange dapat sobat ganti dengan url sesuai keinginan sobat.

Cara Kedua :

1. Masuk account Blogger.
2. Pilih Dashboard/dasbor.
3. Pilih tambah gadget tambahkan HTML java script.
4. Pastekan kode berikut sobat :

5. Selesai.

Catatan :

* Untuk url yang berwarna orange dapat sobat ganti dengan url sesuai keinginan sobat.

Cara Ketiga :

1. Masuk account Blogger.

2. Pilih Dashboard/dasbor.

3. Layout/tataletak trus pilih EDIT HTML.

4. Trus cari kode berikut ]]></b:skin> Kalau sudah ketemu, kalian copy kode di bawah ini tepat dibawah kode tersebut :

5. Selesai dech

Cattatan :

* Untuk url yang berwarna orange dapat sobat ganti dengan url sesuai keinginan sobat.

Cara Keempat :

1. Buka 123corsor.
2. Pilih kursor (klik).
3. Copy kode HTML yang ada didalam kotak link (dibawah gambar cursor yang sudah diklik).
4. Masuk account Blogger.
5. Pilih Dashboard/dasbor.
6. Pilih tambah gadget tambahkan HTML java script.
7. Pastekan kode yang tadi kamu copy.
8. Simpan dan Selesai dech.

Moga berhasil dan bermanfaat ya sobat

readmore »»

Cara Membuat Widget Penerjemah Dari Google

Hallo sobat ada yang sudah punya Widget Penerjemah Dari Google belum nich. kalau belum mari kita bahas dan kita pelajari di sini. Widget penerjemah bahasa dari google ini sudah banyak digunakan dikalangan blogger dan webmaster, apabila ada pengunjung dari manca negara yang tidak bisa mengartikan bahasa indonesia kedalam bahasa yang diinginkan maka widget google translate bisa membantu menerjemahkan situs kita, tapi jika kita menggunakan bahasa yang tidak baku google translate akan kesulitan menerjemahkanya, jadi diharapkan menggunakan bahasa baku jika ingin sempurna diterjemahkan oleh google translate ini. Baiklah langsung saja

kita mulai cara membuatnya ya sobat. Di sini saya akan memberikan 3 (macam) atau pilihan. Silahkan sobat pilih sendiri ya.

Ikuti langkah-langkah berikut ini sobat :

1. Masuk menu Layout kemudian masuk menu Page Elements

2. Pilih box layout yang diinginkan kemudian klik Add a gadgets

3. Pilih salah satu Gadget HTML/JavaScript dan taruh code dibawah ini :

a. Vertikal

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'id',
multilanguagePage: true
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Jadinya Seperti Ini Sobat :

b. Horizontal

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'id',
multilanguagePage: true,
layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Jadinya Seperti Ini Sobat :

c. Tarik-turun saja

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'id',
multilanguagePage: true,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Jadinya Seperti Ini Sobat :

4. Kalau sudah di save saja ya sobat.

Semoga berhasil dan sukses ya sobat

readmore »»

Cara Menampilkan Status G-Talk (Google Talk) Pada Blog Kita

Hallo sobat, siapa yang punya email gmail hayoo yang dipakai buat ngeblog. Di sini saya akan berbagi informasi tentang Cara Menampilkan Status G-Talk (Google Talk) Pada Blog Kita. Ya mudah dan sulitnya tergantung sobat semua memahami penjelasan ini hehehehe. Fungsi dari ini yaitu pengunjung bisa melihat admin sedang online atau offline. Jadi kalaupun admin sedang online maka pengunjung dapat chatting langsung atau tanya-tanya sama admin dari blog atau web yang sobat baca sekarang. Oke langsung saja kita mulai pembahasannnya ya sobat.

Ikuti saja langkah berikut ini ya sobat :

1. Buka situsnya Google yang ini (di sini) ya sobat.

2. Kemudian Log In dengan Account Google kamu sobat.

3. Setelah Log In ada Generate Code yang harus kamu pasang di blog kamu..

4. Cara pasang di blog seperti biaya yaitu masuk menu Layout--> Page Elements lalu klik Add a Gadet Lalu pilih HTML/JavaScript dan taruh deh generate codenya kedalamnya ya sobat.

Selain cara pemasangan saya akan menerangkan sedikit cara mengubah tampilanya sobat. Untuk mengedit bentuk dari widgetnya klik mengedit ya

Gambarnya seperti ini sobat :

Catatan :

* Title (optional) : Untuk meberi judul widget keseluruhan (dikosongi jika ingin menampilkan nickname)
* Your nickname : Nickname yang kamu tampilkan di widget
* Style : Bentuk dari widget bisa kamu udah dengan selera kamu sendiri
* Jika ingin mengubah panjang dan lebar tinggal cari code w=200 (untuk lebar) dan h=60 (untuk tinggi) silahkan ubah sesuai keinginan kamu

5. Setelah semua udah di set klik tombol Update Badge ya sobat
6. Lalu code dibawahnya kamu masukkan ke blog kamu

Semoga berhasil dan sukses ya sobat

readmore »»

Membuat Gambar Melayang Di Pojok

Hallo sobat negeri semua, apayang akan kita bahas hari ini. Mari kita mencoba ngebahas gimana cara membuat gambar yang berada di pojok (bisa atas, bawah, kiri, kanan) meskipun "scroll bar" ditarik kemana-mana. "Scroll bar" itu apa sih? itu lho kotak kecil panjang yang ada disamping itu, yg biasanya ditarik kebawah dan keatas supaya bisa ngelihat isi blog yang kepanjangan. Trus maksudnya "gambar" itu apa? "gambar " itu maksudnya bisa gambar atau photo kamu, animasi, Jam, Hit Counter, Shoutbox, Kalender, Adsense, Iklan, Widget-widget dan lain-lain. taugak maksud saya. Itu lho contoh whos.amung.us yang saya pasng di bawah sebelah kiri. Oke langsung saja menuju saja ya sobat.

Ikuti langkah berikut ini :

Cara Pertama :

1. Login ke blogger trus klik "Layout -->> Edit HTML

2. Cari kode ini ]]></b:skin> kalau dah ketemu taru kode berikut ini di atasnya.

#trik_pojok {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

3. Text yang dicetak tebal adalah posisinya, kalo pingin ganti di posisi pojok kanan bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "bottom", jika pingin di posisi atas bisa diganti dengan "top".
4. Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode </body>

Catatan :

* "http://ceriwis-boplo.blogspot.com" adalah link. ganti dengan link kamu.
* "http://i700.photobucket.com/albums/ww6/mandalika3/soniclari.gif" adalah lokasi gambarmu. ganti dengan lokasi gambar kamu.

5. Simpan dan lihat hasilnya sobat.

Semoga berhasil ya

readmore »»

Cara Membuat Kotak Blogroll dan Marquee Pada Blog

Jumpa kembali sobat di sini. Apa kabarnya kalian hari ini. Kali ini ayo sama-sama kita coba mempelajari bagaimana Cara Membuat Kotak Blogroll dan Marquee Pada Blog. yang munkin banyak sekali manfaatnya pada blog kita fungsi dari Kotak Blogroll dan Marquee tersebut. Baiklah sobat langsung saja kita praktekin saja ya sobat caranya.

1. Kotak Blogroll Model Textarea

Untuk yang ini cara membuatnya adlah sebagai berikut :

Pasang code berikut ini di kedalam element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)

Keterangan:
- Kode width: 200px; dan height: 200px; adalah ukuran lebar dan panjang kotak, kamu bisa merubahnya dan menyesuaikanya dengan ukuran yg kamu suka.
- Ganti tulisan "#link1,#link2, #link3 dst" dengan daftar link-link kamu, bisa diisi dengan banner link.
- Jika kamu pingin daftar link-linknya berjajar maka hilangkan kode <br />

2. Kotak Blogroll Model Marquee

Kotak ini juga mampu menampung banyak link dalam tempat yang sempit. Namun kotak blog roll ini berbeda dengan kotak yg diatas, karena kotak yang ini tidak memiliki rollbar (yg biasanya disebelah kanan trus ditarik keatas kebawah itu lho). Link-link atau isi didalam kotak ini akan bergerak/berjalan, bisa vertikal ato horizontal.
Cara membuatnya:
Pasang code berikut ini di kedalam element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)

Keterangan :
- Kode "up" itu menunjukan arah pergerakan, kamu bisa menggantinya dengan down, left, right.
- Jika kamu menggantinya dengan pergerakan horizontal (left atau right) maka hilangkan kode <br />
- Angka "100" menunjukkan tinggi dari kotak blogroll kamu. Semakin banyak angkanya maka semakin tinggi pula ukuran blogroll.

Semoga sukses dan bermanfaat ya sobat

readmore »»