Minggu, 21 Februari 2010

Membuat Efek Timbul pada Banner

Assalamualaikum. Akhir-akhir ini santer terdengar isu tentang RUU nikah siri. Katanya, kalo nikah siri bakalan dipidana. Tapi saya tidak setuju sama RUU ini. Ok, setuju nggak setuju, itu kan kebebasan berpendapat. Lagipula saya tidak akan berbicara tentang RUU nikah siri ini. Tapi, nggak papa. Cuma nembak keyword aja... Lagipula saya nggak suka siri, saya sukanya cengkeh...

Kali ini kita akan membahas tentang cara membuat efek timbul pada banner. Anda tahu kan efek timbul atau relief, yang biasa ada di candi-candi itu, Kita bisa membuat efek timbul pada Banner. Nah, Kita akan mencoba membuat efek timbul pada banner. Tetapi, pada saat mouse berada diatasnya, image akan tampak seperti tenggelam. Contohnya bisa anda lihat di http://beritaduniamaya.blogspot.com.

Sudah lihat kan? Tertarik? Begini nih, cara membuatnya.

1. Seperti biasa, kita login ke Blogger terlebih dahulu.

2. Tuju Tata Letak > Edit HTML.

3. Backup dulu templatenya. Sudah tau kan cara membackup template?

4. Cari kode:

]]></b:skin>
5. Taruh kode ini diatasnya.
.banner, img.banner{
border: 5px outset;
border-color:#FFFFFF #000000 #000000 #FFFFFF;
}
.banner:hover, a:hover .banner{
border: 5px inset;
border-color: #585858 #A4A4A4 #A4A4A4 #585858;
}
6. Simpan.

Kini anda bisa meletakkan banner tersebut di postingan atau di sidebar. Untuk meletakkannya di sidebar, tuju menu Elemen Halaman, lalu klik Tambah Gadget, lalu pilih HTML/Javascript. Lalu, isikan bagian isi dengan kode berikut.
<a href="LINKYANGDIINGINKAN"><img class="banner" src="URLGAMBAR" /></a>
Ganti LINKYANGDIINGINKAN dengan link yang diinginkan. Sedangkan URLGAMBAR dengan URL dari gambar yang akan dibuat timbul. Lalu simpan.

Anda juga bisa memasukkannya di posting dengan mode Edit HTML. Masukkan kode yang sama dengan yang diatas, lalu klik Terbitkan Entri.

Selamat mencoba...


Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Buzz It

Artikel Menarik Lainnya



12 komentar:

akhatam mengatakan...

Wah keren triknya.. keep blogging!!

berita bola mengatakan...

baiklah aku coba dulu

bang salom mengatakan...

bagus sob, triknya sangat bermanfaat bagi yg membutuhkan

berita untuk negri mengatakan...

salam kenal sobat,,tipsnya mantap dan sangat berguna,,terima kasih banyak,,mohon bimbingannya,,
main ke blog saya ya...

download 7zip portable mengatakan...

sep nambah lagi daftar ilmu blogging di blogspot.di bookmark ya

internet gratis mengatakan...

knjungan perdana sambil sedot ilmunya sob

cara membuat tombol buzz this di blog mengatakan...

halo mas ini komentar kedua saya.muubh kalo terkesan spam.muuv muvv hanya ingin mencari backlink.^^

secangkir teh dan sekerat roti mengatakan...

main border kan..?

Pendi Ari Wibowo mengatakan...

baru tahu saya..

terimakasih tutornya mas..

Blogger Templates Colorizetemplates.com mengatakan...

makasii maz.
izin nge-save halaman ni di komputer saya.

How to Detect Fake Pagerank mengatakan...

Tapi kalau dah dirubah gini tar semua gambar otomastis berubah ya, apa cuma gambar2 tertentu doang

Irvan mengatakan...

Walah mantep2 ni artikelnya, sy sendiri agak males utak-atik daleman template, soalnya pas ganti themes biasanya harus ulangin lagi makanya sy biarin kaya aslinya dari template

Posting Komentar

Apa pandapat anda terhadap artikel ini? Berkomentarlah tanpa rasa malu, ragu dan takut.

Komentar diluar tanggung jawab pemilik blog. Jika anda berkomentar yang berbau pornografi atau sara, maka itu risiko anda sendiri.

Jika anda mengirimkan komentar spam, maka akan saya hapus.

Jika anda tidak ingin komentar anda ditampilkan, silakan kirimkan e-mail di halaman email me.

Jika anda ingin berceloteh bebas, silakan tuju halaman ini.

Anda dapat menggunakan beberapa tag HTML seperti <b>, <i>, <u>, <a>, <strike>, <sub>, <sup>, dan lain-lain. Anda juga dapat menggunakan emoticon Plurk seperti (lmao) (taser) (haha).

Untuk link exchange bisa dilakukan dihalaman ini, sedangkan banner exchange dihalaman ini. Permintaan link exchange dan banner exchange selain dihalaman tersebut tidak akan dilayani.



Emoticon yang dapat digunakan [Tampilkan] [Sembunyikan]



:-))
:-)
:-D
(lol)
:-p
(woot)
;-)
:-o
X-(
:-(
:'-(
:-&
(K)
(angry)
(annoyed)
(wave) | (bye)
B-)
(cozy)
(sick)
(:
(goodluck)
(griltongue)
(mmm)
(hungry)
(music)
(tears)
(tongue)
(unsure)
(highfive)
(dance)
(blush)
(bigeyes)
(funkydance)
(idiot)
(lonely)
(scenic)
(hassle)
(panic)
(okok)
(yahoo)
(cry)
(doh)
(brokenheart)
(drinking)
(girlkiss)
(rofl)
(money)
(rock)
(nottalking)
(party)
(sleeping)
(thinking)
(bringit)
(worship)
(applause)
8-)
(gym)
(heart)
(devil)
(lmao)
(banana_cool)
(banana_rock)
(evilgrin)
(headspin)
(heart_beat)
(ninja)
(haha)
(evilsmirk)
(eyeroll)
(muhaha)
(taser) | (rammi)
(banana_ninja)
(beer)
(coffee)
(fish_hit)
(muscle)
(smileydance)
(fireworks)
(goal)
(bzzz)
(dance_bzz)
(Русский)
(code)
(morning)

Cara menggunakan: ketikkan emoticon yang diinginkan. Untuk yang ada pemisah berupa "|" maka itu adalah alternatif. Seperti (wave) | (bye) maka bisa (wave) bisa (bye)


Pengikut

Follow via NetworkedBlogs



Jangan lupa jadi fans Muhammad Rizki Fadillah's Blog di Facebook. Klik link di bawah ini.

http://www.facebook.com/pages/Tips-Trik-Matematika-Tutorial-Blogging-Muhammad-Rizki-Fadillahs-Blog/277782561876

Setelah mengklik link diatas, klik tombol Become A Fan untuk menjadi fans Muhammad Rizki Fadillah's Blog.