Ada info menarik bagi anda yang suka memajang gambar di blognya. Info kali ini adalah tentang cara memasang gambar yang akan selalu muncul di bagian depan blog anda, gambar tersebut akan selalu muncul walaupun pengunjung melakukan scrolling ke halaman bagian bawah blog anda,Screenshot nya seperti ini :
Tertarik ingin tahu triknya? Berikut adalah langkah langkahnya :
Langkah #1
-
Buatlah gambar yang ingin anda tampilkan nanti. Saya sarankan gambar tersebut sekitar 125 X 125 agar tidak terlalu mengganggu pengunjung anda. Format gambar terserah anda, bentuk animasipun tentu saja boleh. Contoh Gambar :
- uploadlah gambar tersebut ke hosting tempat anda menyipan gambar. Belum tahu cara upload gambar? Baca dulu posting yang ini.
- Catat alamat gambar yang sudah anda upoad.
Langkah #2
- Silahkan login ke blogger dengan ID anda
- Klik Tata Letak.
- Klik Tab Edit HTML
- Klik tulisan Download Template Lengkap. silahkan backup dulu templatenya biar aman.
-
Copy lalu paste kode berikut persis di atas kode ]>><b:skin>
#top_image {
position:fixed;
_position:absolute;
bottom:5px;
left:5px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); } - Silahkan cari kode <body> di template anda.
- Copy lalu paste kode berikut persis di bawah kode <body> (ini contoh saja)
<div id='top_image'>
<img border='0' src='http://lh3.ggpht.com/_pt7i0nbIOCY/SUL0frimGbI/AAAAAAAAAgE/FrMr_MKfweA/Doraemon-1_thumb.gif?imgmax=800'/>
</div> - Klik tombol simpan template.
- Selesai. Silahkan lihat hasilnya.
Secara default kode di atas adalah untuk menampilkan gambar di sebelah pojok kiri bawah layar monitor. Posisi tersebut bisa anda ubah sesuai keinginan, misal ingin di simpan di sebelah pojok kanan bawah, pojok atas kanan ataupun pojok atas kiri. Kode yang bisa anda edit adalah seperti ini ;
#top_image {
position:fixed;
_position:absolute;
bottom:5px;
left:5px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
kode yang berwarna merah adalah kode yg bisa anda ganti sesuai keinginan.
Untuk pojok kanan bawah :
bottom:5px;
right:5px;
untuk pojok kanan atas :
top:5px;
right:5px;
untuk pojok kiri atas
top:5px;
left:5px;
Pada contoh di atas, gambar yang tampil tidak bisa di klik. Jika anda menginginkan agar gambar ada bisa di klik atau nge link, anda hanya menambahkan kode link di dalamnya. contoh :
<div id='top_image'>
<a href="http://kolom-tutorial.blogspot.com"><img border='0' src='http://lh3.ggpht.com/_pt7i0nbIOCY/SUL0frimGbI/AAAAAAAAAgE/FrMr_MKfweA/Doraemon-1_thumb.gif?imgmax=800'/> </a>
</div>
Selamat mencoba!
Ingin artikel seperti ini langsung ke Email anda? Silahkan masukan alamat email anda untuk berlangganan.
Privacy guaranteed. We'll never share your info.
si akang inovasinya bisa aja...
(eit, ini teh pertama bukan?)
Gara-gara lelet jadi gak pertamax, siaaaal..kang, jangan nanggung donk ilmunya, yang ada close ads gimana tuh?kan pengen tahu juga
hehe... ntar malah jadi tambah berat blogku, tambah gambar lagi... ni aja lagi tak kurangi dikit2, kecuali buat iklan yang 100rb/ bulan kyak k rohman gak papa... ya gak... ???
tapi sip juga ntar bisa tak pasang di blogku yg lain.
Iya Kang, jangan nanggung dong ilmunya. Kasih tau dong, cara pasang tombol close ads kayak punya akang ini. Pleaseee. ya Kang
kang, kenapa sy terapkan tidak bisa?dn ada tulisannya Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The reference to entity "tag" must end with the ';' delimiter. mhn konfrmasinya. trm ksih
Hmmm,....Nyoba dulu kang,..
Makasih kang Atas Ilmunya..Ini Sudah tahu Kang Rohman dari Mas Kendhin..Tapi Kang Rohman Tetap Top Dah...
Kang ROhman GImana Cara MasangKayak Yang Di Samping ini..Ada Tulisan Close Ads?
ni aku suka
terus, supaya ada tambahan image dibawahnya yang kalo diklik gambar di pojok itu bisa ngilang kayak punya kang rohman ini gmn?
mantab kang artikelnya. buat bloggers lainnya ada tips penting buat kemajuan blognya yaitu tentang Blogwalking.Mampir balik friend...dtunggu....
hoho..pengen nyoba sih....tapi bikin berat gak yah??
bos apa itu gak bikin mengganggu,
soalnya bikin terbatas pangdangan
pengunjung, apalagi kalau itu gambar yang bergerak
dan pastinya itu bikin berat. soalnya menurut yang saya baca webhosting gratisan performanya gak bagus dan bikin lambat
kunjungi
SEO DIRTY TRICK
Wah... Mantap tuh Kang...
Tapi, bikin berat nggak Kang?
Kang ikutan comment yach.... He..he dalam rangka 1000 ngelink nich
waduh udah banyak yg comment,sial telat truz he..he..makasih infonya kang,patut dicoba nih tipsnya
mau.. mau! ntar dicoba. makasih bgt ilmunya :D
oya, boleh ga saya review blog ini spt posting di blog 'utak-atik blog'?
wah kalo saya pasang nutupin tulisan nih mas :(
Iya, tombol closenya ajarin donk Kang :)
Kang ! tombol closenya/ model yang kayak begini dong Kang ! please klik yang mirip begini http://www.formulabisnis.com/index2.php
Kang ! tombol closenya/ model yang kayak begini dong Kang ! please klik yang mirip begini http://www.formulabisnis.com/index2.php
Waduh ,,,, telat nech aku.
Dapat tuto gretongan yang joss beginih inih.
Tak coba dulu kang. Thanks tuto-nya :D
Waduh sakti bener abang satu ini
hatur nuwun
Waduh kedualimax gw.. jauh bener.. hehehe..
Kang makasih ilmunya...
Salam kenal Kang Rohman... terima kasih atas ilmunya, saya akan coba satu2 deh. boleh tukeran link nggak ? o ya mohon izin untuk menampilkan tulisan Kang Rohman di blog/website saya, dan bimbingan dari para senior neh, maklum saya mah masih pemuda, eh! pemula.
Ikut Ah Nimbrung Sapa Tau Dapat Ide menarik Nih :)
waduh doraemon ya...wah fans berat nih..bloh juga nih tips nya kang
Owh, menarik juga nih kang untuk dicoba
menarik kang... patut di coba nech...
mirip punya mas kendhin, tutor nya kang...
kang pertama maaf klo, pertanyaacong tencong tp, klo d wordpress gmn ya ?
da yg tw ga ?
plz d share y ..
Yups! Ini yang Whienda car-cari. Tengkiyu Kang!
posting asik kang. tutorialnya aq tiru ya... tp gak usak kuatir coz disitu aq sebutin nama kang rohman. thnx... buanget
kang saya mau tanya ni kang,cara upload animasi plash player ,cara seperti apa kang...........?
terima kasih, dari blogger baru ni kang....!!!
wah.. bagus tuh...
kang kalo pengen banyak gambarnya gmn ya?
kang...ini si udah sering...tp yang aneh kaya punya situ...musti di close dulu baru bisa make blognya kang...
terus kalo situs yang nyediain banyak gambar flash dimana tuch
maap ya...kang punya akang saya pke ntar gambarnya saya ganti kok!thankz
ada orang ganteng di www.cybercez.blogspot.com
kang kalu always top mo disimpen dibwah tapi diketengahin gmana caranya???? syukron
Kang Kalau buat 2 atauu lebuh gambar always on top nya bisa gak???
;)
keren juga bang.....