Jumat, Februari 12, 2010

Cara Menambahkan Background Gambar Pada Postingan

Siapa sih yg ndak pengin tulisan-tulisannya dibaca, disukai dan kemudian dikomentari banyak pengunjung. Siapapun pasti pengin lah ya... ndak peduli itu blogger kawakan maupun blogger newbie seperti saya ini.
Yup... saya akan selalu berusaha bagaimana supaya tulisan saya menjadi lebih menarik dan tidak membosankan. Apapun caranya, pasti itu akan saya lakukan demi membuat tulisan saya menjadi nyaman untuk dinikmati. Mulai dari mencari topik yg ndak terlalu memberatkan, memilih kata-kata yg tepat dan tidak berbelit-belit, menyisipkan beberapa gambar menarik dan bahkan terkadang juga perlu menambahkan background pada postingan-postingan tertentu.

Nah beberapa waktu yg lalu, ketika saya nekad menyatakan cinta pada pujaan hati saya melalui sebuah surat "Untuk Tyas Mirasih Sang Pujaan Hati", seorang sahabat Cantik bertanya, gimana sih Kang cara menambahkan background gambar pada postingan seperti itu?

hmmmmmm..... sebenarnya ini adalah pekerjaan yg sangat mudah dan tentu saja sama sekali tidak membebani kita dalam menulis. Langkah pertama yg harus kita lakukan adalah menyiapkan gambarnya.

Siapkan gambar yg tentu saja harus sesuai dengan topik yg sedang kita bahas. Usahakan gambar tidak terlalu tajam dan mendominasi. Simpan gambar tersebut di tempat yg biasa kalian gunakan untuk meng-upload gambar lalu ambil URLnya.
Jangan lupa untuk menyesuaikan ukuran gambar dengan lebar main wraper dan panjang postingan, jika kalian pengin menambahkan background gambar tunggal atau no-repeat. Untuk ukuran gambar, lebih besar sedikit itu akan lebih baik daripada kurang. Gunakan resize pada tool-tool image editor, atur contrasnya kalo gambar masih terlalu tajam.
Kalo sudah... sekarang awali postingan kalian dengan kode, <div style="background: URL(http://url.gambarkalian.com) no-repeat center bottom; padding: 10px;" align="justify"> tulis isi postingan kalian disini. Sebagai contoh, lihat previewnya disini atau disini.
Penjelasan :
- http://url.gambarkalian.com adalah lokasi dimana gambar kalian tersimpan
- no-repeat adalah untuk menampilkan hanya satu gambar (gambar tidak diulang-ulang)
- center bottom adalah letak posisi gambar ada di tengah bawah
- padding: 10px adalah jarak tulisan dari garis batas pinggir
- align="justify" adalah pengatur kerataan paragraf, bisa juga diganti left untuk rata kiri, right untuk rata kanan atau center untuk rata tengah.

Atur semuanya sesuai dengan keinginan kalian dan kalo sudah, jangan lupa tutup postingan tersebut dengan kode </div>.
Nah... demikian tadi sedikit penjelasan mengenai cara menambahkan background gambar pada postingan. Dan untuk penambahan background gambar yg di repeat, resize gambar dan pengaturan posisi tidak diperlukan lagi. Langsung saja gunakan kode seperti ini, <div style="background: URL(http://url.gambarkalian.com) repeat; padding: 10px;" align="justify">
Dan hasilnya akan menjadi seperti pemajangan award berikut ini.
Ini adalah award dari Neng Yolisz. Happy 1st anniversary buat Coretan Kehidupanku...


Award yg kedua, saya terima dari Mas Ayas, terimakasih


Dan yg terakhir ini adalah award dari Kucing Tengil


Oke teman-teman... sampai disini dulu postingan saya kali ini, ketemu lagi dipostingan berikutnya.
Semoga bermanfaat...Share/Save/Bookmark Subscribe



Related Posts :



43 komentar:

suryaden on 12 Februari 2010 22.34 mengatakan...

bisa ikut-ikutan dong...

reni on 12 Februari 2010 23.25 mengatakan...

Baru tahu nih caranya... Makasih ya Kang utk infonya.

anazkia on 12 Februari 2010 23.30 mengatakan...

Wah, keren mas infonya. Makasih yah :)

Aditya's Blogsphere on 13 Februari 2010 00.12 mengatakan...

thanks kang......sip....awalnya saya kira itu blockquote tapi ternyata ada sendiri toh..makasih banyak kang....

hendro on 13 Februari 2010 00.42 mengatakan...

terima kasih kang saya dapat ilmu lagi nih,,

Pohonku Sepi Sendiri on 13 Februari 2010 01.14 mengatakan...

weiss.. mantabh kang..
ini mah bermanfaat bangedh..
makasih buat pelajarannya kang.. :)

Itik Bali on 13 Februari 2010 04.50 mengatakan...

Wah keyen, nanti aku mau buat background dengan gambar Aa' Richie Five Minutes ahhh...

Ivan@mobii on 13 Februari 2010 05.23 mengatakan...

Wieh, nemu formula bru!!! Ntr mau ksh foto b*k*p, br pembaca pada betah. Trmasuk kamu! #dibakarmassa

SeNjA on 13 Februari 2010 06.36 mengatakan...

selamat pagi kang sugeng ^^

makasih infonya ya..ternyata selain jago menulis dan bercerita,kang sugeng juga jago soal tutorial ya.

have a great day.....

-Gek- on 13 Februari 2010 07.01 mengatakan...

Kang Sugeng memang rajin, tapi Gek malah ga sempat2 mempraktekkan ilmu.. hehehe. Mntabs kang.

anyin on 13 Februari 2010 07.12 mengatakan...

mesti diaplod dulu ya kang ke imagehosting?

angger on 13 Februari 2010 07.33 mengatakan...

manteb dech infonya,ini yang saya tunggu-tunggu kang,thenkyu kang sugeng

Clara on 13 Februari 2010 07.43 mengatakan...

ooooo gitu toh caranya Kang, hehehe baru tau aku

makasih tipsnya dan selamat untuk awardnya ya

Zippy on 13 Februari 2010 08.27 mengatakan...

Wew...keren mas...
Mantep deh...
Ntar saya coba...
Makasih infonya :)

Phone World on 13 Februari 2010 08.30 mengatakan...

Kalo untuk WP ada juga gak yah..?? :D
Keren sih... :)

Ayas Tasli Wiguna on 13 Februari 2010 08.47 mengatakan...

wah pantesan aku rd2 mikir gmn buat gambar background mawar itu bos. ok ty infonya :D

Saung Web on 13 Februari 2010 09.29 mengatakan...

Boleh juga kang untuk di coba.. cuman nambah berat kayaknya ya..kang ??

Kang Sugeng on 13 Februari 2010 09.41 mengatakan...

@saung : masalah related post kamu, msh saya pelajari. Sabar ya...

Aulawi Ahmad on 13 Februari 2010 11.11 mengatakan...

selamat ewodnya kang, n tq info tipsnya :)

fai_cong on 13 Februari 2010 11.19 mengatakan...

wah....
ini sangat bermanfaat buat pemula seperti saya nih..
makasih kang..... :)

dinoe on 13 Februari 2010 11.48 mengatakan...

makasih kang atas tutorialny...dan selamat juga buat awardnya............

Laksamana Embun on 13 Februari 2010 11.52 mengatakan...

Trimakasih kang, atas info yang sangat bagus ini..

jhoni on 13 Februari 2010 12.54 mengatakan...

wah simpen dulu ah caranya.........kali nanti pengen ngisi di blog!?!?!!?

Sang Cerpenis bercerita on 13 Februari 2010 13.18 mengatakan...

wah, keren...ternyata begitu caranya.

Sang Cerpenis bercerita on 13 Februari 2010 13.18 mengatakan...

lupa, bawain kue keranjang nih

mocca_chi on 13 Februari 2010 13.31 mengatakan...

tulisannya jd ga jela,s tp bsa pilih gambar yg lebih bagus. keren keren keren bangg

Seti@wan Dirgant@Ra on 13 Februari 2010 14.27 mengatakan...

Mantep banget kang ternyata begicu yah?
makasih banyak atas sharing ilmunya,..
Sudah banyak yang saya peroleh dari sini.
Salam Taksim

buwel on 13 Februari 2010 16.40 mengatakan...

wah, dulu waktu awalan postingan pernah neh pake begini.... thanks sudah membagi ilmunya kang... dan selamat awardnya ea....

a-chen on 13 Februari 2010 16.41 mengatakan...

wah, pengin nyobaaiinn neh kang....
beneran saya sangat terpukau ketika lihat background di surat tuk tyas mirasihnya kang... keren!

phonank on 13 Februari 2010 16.53 mengatakan...

Oohh begitu toh caranyaa..

owalaaaahh...
phonank sampe kutak katok di CSS,, hahahaha

ternyata cukup ditambahkan diawalan posting,, hahaha

mudah yah..

soewoeng on 13 Februari 2010 16.56 mengatakan...

duh sayang diriku gaptek ampunnn bos

Rock on 13 Februari 2010 17.46 mengatakan...

Keren kang... coba dulu ahhh...

Inuel^-^ on 13 Februari 2010 19.25 mengatakan...

hihihii, baru kemaren aku tanyanya , sekarang ada tutorialnya, biusa di contoh ni weeehehehehe thanks Om :)

angger on 13 Februari 2010 20.16 mengatakan...

ada award buat kang sugeng,dipinang ya kang,buat sahabat yang lain juga boleh ambil kok^_^

narti on 13 Februari 2010 21.02 mengatakan...

harus tahu lebar main wrapernya ya?
jd pengen nyobain nih...

sda on 13 Februari 2010 21.04 mengatakan...

ijin copas ya kang...
tp kapan prakteknya ya?
makasih tutorialnya.
eh tapi nambah berat gak kang?
apa tergantung size pic-nya?

Just Bryan on 13 Februari 2010 22.10 mengatakan...

Ilmu baru nih, baru tau kalau postingan bisa dikasih background...

03agoenk on 13 Februari 2010 22.42 mengatakan...

Wah bagus tuh untuk valentine besok isikan gambar background terus diisi dengan puisi, MANTAB.....
heheheheheheh.....

Met valentine day kang sugeng.....

J O N K on 13 Februari 2010 23.38 mengatakan...

wah mas sugeng lama2 makin jago nih, saya harus banyak belajar ke sini nih.

mmm tapi untu bakground gambarnya di pending dulu percobaanya mas :D

belajar autocad on 13 Februari 2010 23.44 mengatakan...

waduh, saya nyerah deh sob, kalau mau utak atik template lagi...maklum katro dengan html...ga lagi-lagi deh..pernah blog saya amburadul gara2 betulin / nambahin apa gitu waktu itu..ehehee

Dhe on 14 Februari 2010 12.25 mengatakan...

makasih tips nya kang sugeng. kapan2 posting dengan bg gambar ahh :D

Travel Jakarta Bandung on 5 Agustus 2010 23.26 mengatakan...

makasih tipsnya

KVM Switches on 30 Agustus 2011 18.15 mengatakan...

I want my main background to show behind the writing. I did this with one of my blogs but it was completely by accident and now I cannot repeat my mistake. I am looking someone to help me about this.

Posting Komentar

[ Full Page Comment Form ]

Maaf... karena banyak SPAMMER, terpaksa saya mengaktifkan MODERASI.
Ini adalah DOFOLLOW BLOG, setiap komen yg kamu tinggalkan, akan menjadi BACKLINK buat URL yg kamu sertakan, so... tinggalkan komen yg sesuai dengan TEMA, jangan NYEPAM..!!
Gunakan Name/URL biar lebih efektif. Jangan lupa pake http:// biar ndak BROKEN LINK.
Komentar APAPUN asal sopan dan punya aturan, PASTI saya terbitkan, KECUALI yg menyertakan LINK, akan langsung saya DELETE..!!

Back to TOP

 

Be A Great Person Copyright © 2009 WoodMag is Designed by Ipietoon for Free Blogger Template