Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Background Gambar di Sudut Halaman Blog

Background Gambar Sudut Halaman Blog
Membuat Background Gambar di Sudut Halaman Blog – terinspirasi dari blog-blog tetangga yang juga menggunakan gambar pada background halaman blognya dan untuk membuat background gambar pada sudut halaman blog seperti yang mungkin juga sering anda lihat maka akan saya bahas pada tutorial ini. Mungkin juga ada yang menginginkan namun masih bingung maka dari itu mari kita bahas bersama agar untuk membuat sudut pada halaman blog dengan menggunakan gambar dapat kita modifikasi sesuai dengan keinginan. Apalagi jika masih menggunakan template bawaan blogger sudah pasti masih standar dan belum tercustom, namun jika ingin membuat background gambar pada sudut halaman blog juga bisa dilakukan dengan langkah yang mudah hanya dengan menambahkan sedikit kode CSS kedalam template blognya. Untuk yang menggunakan template download pun biasanya juga sudah langsung disertakan sehingga tidak perlu lagi karena sudah dilengkapi oleh pembuat template itu sendiri, namun ada juga yang belum. Maka dari itu untuk lebih jelasnya, berikut adalah tutorial cara Membuat Background Gambar di Sudut Halaman Blog dengan tambahan CSS yang simple.

1. Login ke akun blogger.
2. Buka editor template seperti biasa klik Template pilih Edit HTML.
3. Untuk template default blogger atau standar bawaan dari blogger, maka caranya copy kode CSS berikut ini lalu paste di atas kode ]]></b:skin> kemudian klik Simpan Template.
.content-inner {
background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2rdysuh-eL_Pen8RGpOti6eOQZJt246dnPcrqRUgSFZtZ-ePLJxxWon_3NtzP6iYZ2NE1_D8iiUsL7pMDhDwsIW6_y9lTGnzwFQA40EcOWUC-K-c5N9inguupXFTNHYpwfl7I0Oj16F0c/w990-h300-no/Faceblog-Evolutions+%25286%2529.gif) no-repeat;
background-position:bottom;
}
Keterangan:
Ganti kode #FFF dengan warna latar blog anda.
Jika ingin menggunakan gambar lain, bisa merubah URL gambar dengan pilihan URL yang terdapat dibawah gambar. Silahkan lihat gambar lebih banyak lagi untuk memilih URL yang ada.
Untuk yang menggunakan template download dari situs-situs template maka kode tidak selalu sama. Maka dari itu sebagai contoh saja mungkin sebagian ada yang sama, cari kode seperti dibawah ini:
#container {
Atau:
#outer-wrapper {
Atau bisa juga:
.content {
Apabila sudah ketemu maka tinggal menambahkan saja kode berikut ini didalamnya kurung kurawal {}.
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2rdysuh-eL_Pen8RGpOti6eOQZJt246dnPcrqRUgSFZtZ-ePLJxxWon_3NtzP6iYZ2NE1_D8iiUsL7pMDhDwsIW6_y9lTGnzwFQA40EcOWUC-K-c5N9inguupXFTNHYpwfl7I0Oj16F0c/w990-h300-no/Faceblog-Evolutions+%25286%2529.gif) no-repeat;
background-position:bottom;
Lalu bisa pratinjau template terlebih dahulu kemudian jika sudah sesuai bisa klik Simpan Template.

Berlangganan artikel via email

96 Response to "Membuat Background Gambar di Sudut Halaman Blog"

kayaknya di templateku ga cocok.. :D .

Balas

bisa dipasamjg di template blok ku ga ya

cantik ya aku suka pojok ada gambar kembangnya

Balas

taroh di #content-wrapper pasti seepppp dahh..

Balas

aku juga suka kembang yang di pojokan :) hiks,,

Balas

cobain dulu...baru beli :)

Balas

mas Andes kayaknya dominan suka warna hijau ya..
punya alasannya mas?... :)

Balas

cobain dulu ah kali aja tambah nyuzz hehe.Thanks

Balas

Tenang mas bisa tukar kok kalau gak cocok asal nanti bawa bonnya yah hehe...

Balas

Pasti ada anginnya yah mas...

Balas

Kalau hijau kan sehat mas buat mata...

Balas

Iya mas silahkan dicoba nggak bakalan nyesel deh hehe...

Balas

kayak nyi roro kidul doyan warna hijau hihihi

Balas

yang penting labelnya masih utuh mas bud barang bisa ditukar hehe

Balas

kapan ya bisa praktek?

Balas
avatar
Anonymous

Asal niat pasti bisa mbak... lanjutken :)

Balas
avatar
Anonymous

kok kode #outer-wrapper { di blog saya kok nggak ada yah mas :o mohon pencerahannya :)

Balas
avatar
Anonymous

serem ah kalo kayak nyi roro kidul mah...

Balas
avatar
Anonymous

Saya coba bisa sih mas tapi kok jadinya tumpang tindih sama widget saya yang FB di footer yah... jadinya saya hapus lagi...

Balas

cari #kotak-kontent lalu taroh didalemnya :)

Balas

mas anthoni tarohnya di dalam #content-wrapper apa bukan?

Balas
avatar
Anonymous

wew keren mas..kupu2nya..ijo lagi

Balas

ada baling2 nya mas..hehe :)

Balas

bisa lgsg dicoba nihh mass ... :)

Balas

@mas Anthonie: struknya bisa di tuker odol juga loh mas..hehe

@kang Ruli: iya kang...gak perlu nambah duit..hehe :)

Balas

mending so imah dong...hehe
joss gandosss... :)

Balas

keren banget , berat nggak ya mas?

Balas

Nah...baru saya mau kasih tau.. :)

Balas

karena kodenya ikut puasa di jamin enteng kok mas. dimas :)

Balas
avatar
Anonymous

hijau itu sejuk dipandang ^_^

Balas
avatar
Anonymous

kupu2 versi baru nih ^_^

Balas

pake gerobak mas biar gak berat..wkwkwkwk

Balas

mas Andes , aku bener-bener suka kembang dipojok terus goyang ketiup angin , tp jangan ke html atau pake css , ada ga yang pake gadget cara masang kodenya

hikz

Balas

hijau daun kerasa adem
bunga pink terasa tentrem

aku suka

Balas

kereen mas,,templatenya jadi bisa seperti di lipat

Balas

kebeneran mas odol saya pas habis nih hehe...

Balas

ada mbak tapi nunggu mas Andes bertapa dulu baru bisa hehe...

Balas

hari ini gratis tapi besok bayar hehe...

Balas

saya taruh di dalam #outer-wrapper { mas

Balas

mendingan suruh diet aja biar enteng...

Balas

silahken dicoba mas...

Balas

coba kalo di #content-wrapper pasti hasilnya beda :)

Balas

pastinya dong mas babol :)

Balas

pasti mas2 sama mbak2 baru tau kan kalo warna ijo lebih terang di banding warna hitam :)

Balas

@ mbak ayu>
coba mbak copy kode ini:
.main-inner {
background:#FFF2F2 url(https://lh4.googleusercontent.com/-PRtaYezJIyI/UdyF07EqEYI/AAAAAAAAFto/SQW-SV53KsI/w990-h250-no/Faceblog-Evolutions+%252812%2529.gif) no-repeat;
background-position:bottom;
}

taruh di klik template > sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode CSS ini didalam kolom tersebut). lalu klik terapkan ke blog (kalo belom sesuai bisa dihapus lagi :)

@mas anthoni>
pegel mas kebanyakan bertapa, udah malem susah ntar kalo mao cari balsem :)

Balas

nice info mas,, biar lebih enak nih kalau mau ganti background blog, yang terpenting diusahakan agar gambar tidak terlalu berat, biar lebih cepat loadingnya :)

Balas

siip bos,
Nanti bisa tak coba diblog saya
Blogwalking
http://blog-abicom.blogspot.com
http://cara-aan.blogspot.com

Balas

Siip tutor nya... :)

Balas
avatar
Anonymous

hohoho, hijau backgroundnya. Style ane banget mas..
kupu-kupunya hijau, kumbang icon acara was-was nya juga hijau. Serba hijau, GO GREEN

Balas

Wah keren dengan background disudut halaman blog, keren Mas, kok bisa ya..?

Balas

keren sih mas, tapi gw belum bisa edit gambarnya biar agak sedikit bagus gitu.. :D
http://dedy-suna.blogspot.com/

Balas

enk nihh puasa'' praktekin nih tutorial :)

Balas

yang biru ada gak mas, biar cakep sama templte ku

Balas

eh ada ding, tadi loding nya lambat,,hehe

Balas

kok gak muncul ya, apa karna kebanyuakn widget di bawah punya ku ya

Balas

sampean kok puinter tho mas, makan apa sih...
blog saya biarkanlah apa adanya yang penting dikunjungi mas andes, hehehe

Balas

Sory mas bro baru bisa mampir kesini,soalnya masih dalam tugas jauh daqri tempat semula,,,,

Balas

BTW adalagi nih yang baru mas bro,keren euy ,,terus berkarya bro and tetap semangat ,,Lanjutkannnnnn

Balas

mas Andes itu makanya sego mpok kadang sego jagung Cak Gus,,,

Balas

makanya ditunggu dulu mas bro,,,,kakakak

Balas

cari kode #content-wrapper mas lalu masukin background sama backgound-position di dalamnya

Balas

siipplah kang, semoga teh sehat tugasnya lancar yah kang :)

Balas

sangat keren mas.. nambah ilmu baru

Balas

balsem cap laron..mesti :)

Balas

rezeki Ramadhan tuh mas nama nya :)

Balas

jadi pengen ngedit photo yang seperti di lipat,:)

Balas

berarti tetep ken ya mas :)

Balas

kayak kursi lipat..praktis..hehe :)

Balas

mas HeQris tampilan mobile nya di pasang dong..biar loading cepet kalo di buka via hp..
njeh.. :)

Balas

mas tiyang suka yg lipatan ya :)

Balas

tapi kalau difikir-fikir memang lagi demam ijo neh sekarang ...

Balas

sabar dikit kenapa coba hehhe

Balas

Amin mas... kalo rejeki nggak lari kemana yah mas hehe...

Balas

kalo ijo lumut sama item manis cakep mana mas :)

Balas

hidup ijo... sekali ijo tetep ijo :)

Balas

siapa dulu donk mas yang comment hehe...

Balas

haha... kan apa ken mas :)

Balas

Iya mbak sangat menarik dan kreatip, keren deh pokoknya :)

Balas

Hal2 seperti ini sy selma ini kurang tau, wkwkwkwk dah lama ngeblog tp msh gaptek, wkwkwk

Balas

iyo iyo, sabar kok,,hehe

Balas

Lipat-lipatan nie...? kayak itu sejenis lontong Bang

Balas
avatar
Anonymous

demonya ada nggak?

Balas

ada mas, ada banget malah..
bisa di liat tuh di samping kanan gambar kupu2 :)
ato bisa juga kalo mau liatnya di blog demo ya kunjungi link ini http://demofaceblog.blogspot.com ntar ada juga di sudut bawah

Balas
avatar
Anonymous

Asik nih backgroundnya... izin tempel ya mas..

Balas
avatar
Anonymous

memang terlihat lebih cantik yyah :)

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Background Gambar di Sudut Halaman Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode