BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

Membuat widget or gadget berbeda-beda tampilan

Otrelah boogle_lover kali ini saya akan menulis trik bagaimana caranya membuat widget/gadget berbeda-beda tampilan untuk background, warna tulisan , border dan lain-lain. trik ini di khususkan terutama bagi yang suka berexperimen dan pingin beda.

Untuk melihat hasilnya bisa boogle_lover  lihat di blog bloon_online ini.

perhatin

Saya menggunakan trik ini pada minima standar , jadi mungkin untuk template yang lain bisa saja kasus-nya berbeda-beda.

Pemahan Dasar

1. Ini sering saya jelaskan. Setiap kita menambah gadget baik Html/Javascript, Text, Linklist dan lain-lain, Blogspot menambahkan Id yang sangat khusus berupa angka / penomeran di ujung nama gadgetnya . untuk widget/gadget Html misalnya HTML1, dan jika kita menambah widget HTML lagi maka yang kita dapati menjadi HTML2, HTML3, HTML4. begitu juga untuk widget yang lain-nya.

2. Untuk mengetahui nama dan id sebuah widget/gadget secara mudah boogle_lover dapat mengenalinya melalui halaman depan ketika posisi kita login. buka/tekan gambar berbentuk obeng&kunci ( atau bisa juga pada halaman page elements tekan Edit pada gadgetnya ). setelah jendela gadget terbuka periksa pada bagian frame atas. seperti yang di tunjukan gambar di bawah ini.

 

gadget

3. Pemahaman dasar selanjutnya menggenal bagian-bagian script html gadget secara garis besar. ( yang nantinya dapat boogle_friends mangfaatkan untuk mengatur latar belakang berupa gambar/color, warna tulisan , border/binkai dan lain-lain. red )

 

a. id = Text1 merupakan gadget itu sendiri

b. h2 merupakan title/judul gadget

c. widget-content merupakan konten / isi gadget

 

Jika di ilustrasikan hasilnya akan seperti ini.

widget4

 

4. Pemahan dasar yang terakhir ialah dalam penulisan css nya hurup-nya harus benar dan sesuai. contoh Text1 = penulisan yang benar - text1 = penulisan yang salah. HTML1 = benar – Html1 = salah.

Otre deh boogle_friends ternyata pegel juga nulis-nya hehe..

Setelah memahami tulisan di atas yang kita lakukan menambah kode Css –nya ke dalam blog ( biasanya saya menyimpan sebelum tulisan ini   ]]></b:skin> . red ).

Oh iya jangan lupa karena ini merupan sebuah selektor id , maka menurut buku mang omo harus di awali dengan tanda pagar [ # ] . jadi contohnya seperti ini.

 

sebelum tulisan ini

]]></b:skin>

masukan kode css di bawah ini

a.

#Text1 {background:#d3c6ac;padding:3px;}

b.

#Text1 h2 {background:#8bed99}

c.

#Text1 .widget-content {background:#99bde1;}

 

Untuk gadget Html

#HTML1 {background:#d3c6ac;padding:3px;}
#HTML1 h2 {background:#8bed99}
#HTML1 .widget-content {background:#99bde1;}

 

thankiyu untuk komentarnya :)

Page views this post: reader

53 komentar:

GADO GADO said...

apakah akan mempengaruhi kecepatan akses blog? Thx

zoel said...

wah keren mas, baru tau nih cara rubah warna widget sprt ini.. he.. thanx

JALOE said...

@ Gado2

ngga donk

@ Zoel

ah cuma iseng koq mas

Anasku said...

keren,,,, ide bagus nih om....

mardee said...

wew, masih inget passwd blog? :))
aku kira udah ga inget blog keren ini..

JALOE said...

@ anasku

mayanlah dari pada ngga di update

@ mardee

oh ingat donk cuman malas di service :))

Herdiansyah Hamzah said...

Akhirnya datang juga!he...3x.

Herdiansyah Hamzah said...

Kemana aja kang?

JALOE said...

@ Herdiansyah H

hehe lagi kena demam males :D

NanLimo said...

sekian lama menanti... Akhirnya Datang Juga.. Uhuuuy.....
muantab Om... ntar mlm aku coba dech... :D
Salam kompak dri Pekanbaru .. :)

bee said...

ada contoh??

Kurnia Septa said...

maksih, lama gak update????????

Zippy said...

Wew..akhirnya muncul juga ni si akang dari peradaban luar, xixixixi...
Kemana aja kang..??
Baru nongol gini...

Btw, makasih buat infonya, ntar kapan2 saya praktekin.
Lagi males ngutak ngutik template soalnya :D

Dunia Hape said...

Wah..hebat ni si akang.
Blognya lama gak di update tapi Alexanya masih tetep ramping, hehehehe...

Oh..ya, keren tutornya :)

JALOE said...

@ bee

contohnya ada tuh link di atas

@ Kurnia septa, @ Zippy

lagi meditasi neh sob

Herdiansyah Blog said...

Blog Jaloee, mantap pisan euy....

Rofi Rokhman said...

wah keren artikelnya...
trims.
by belajar ngeblog

Gooble said...

Keren.. jarang apdet, tapi sakali ngapdet infona haneut pisan beda tibatur.

chugy said...

keren boz bisa dicoba...good blog and good post

SMK Islam Tanjung said...

Waduh, Kang Jaloe lama nggak posting di Catalog Tutorial ya..
Jadi kangen nih...
Mantabb tutorialnya, Kang..

Beben said...

saya dah baca versi blogbulk kang...xixixixi

Beben said...

ngarus kang, saya kan langganan submit disalah satu web, nah sempat berenti eta teh kang peripikasina, pas feedna digentos ku ieu aya deui (tp duka oge sih)
ngomong2 eta kode naon anu teu diganti di komenar saya?

—¤(rIDa)¤— said...

belon ada yang anget lagi gan??
kasih kabar ane ya gan..
ato kalo pengen yang anget anget, datang maen ke blog ane ya gan.
ada beuleum sampeu, mau gan?

Bisnis Online said...

Makasih yach informasinya.

kdrama ost said...

infonya membantu saya yg masih newbie ini.makasih.

elektroku said...

keren banget tips nya.....

Gardening Tips said...

Kang makin keren wae ayeuna... sayah udah lama eung gak mampir kesini...

Makin master wae ayeuna mah... keren kang...

JALOE said...

@ gardening tips

hahaha.. jadi malu.. ngomong2 siapa y ? :D

dewa said...

, kasih masukan buat blog saya, boz

http://iamisvamvire.blogspot.com

FAISAL HILMI said...

boleh juga tuh dipraktekin

Indonesia Blogger Teens said...

mat kenal ya...

mulyanto said...

mencoba memperlajri dlu sobbbb


jangan lupa mampir ke blog ane yaaaaa










terim kasih salm kenal

Herdiansyah Hamzah said...

Apa Kabar Kang? Sekedar info, blog saya sekarang pindah alamat url, setelah domainna expired!he...3x. Ini alamat blog saya yang baru : http://herdiansyahblog.blogspot.com.

Warm Regards,-
Herdiansyah

mulyanto said...

karen bozz templte yaaa, slam kenal yaa

artana's blog said...

makasi ya ilmunya
salam kenal sebelunya .......
bisa posting gak tentang buat link postingan supaya postingan kita bisa linkan aku dah muter2 nyari gak ktemu2.....

subagya said...

hmm .. lumayan nambah ide buat desain kang..

problogger said...

dah jarang buat template , tapi cukup buat inspirasi

Mardi said...

wah bagus, baru tau,

jabon said...

ok tutorialnya ... saya juga lagi pengen belajar HTML lebih lanjut

Roni said...

Mas, mau tanya euy..
kalo balikin kotak komentar yang ilang caranya gimana ya...
jadi gak ada yang bisa komen di blog sy dah.
untuk lebih jelasnya,silahkan liat di blog sy.
thank,mas,,

JALOE said...

@ Roni

coba cek di tab setting -> comment -> pada tulisan - > Comments pilih Show

Jabon said...

WOW bakal keren nich...

Jabon said...

owh ya sama juga yach buat wordpress??

abinya syafiq said...

puyeng ah blum bisa. Padahal pengen bisa utak atik gituan.

investasi online terbaru dan tercepat said...

keren banget nich triknya. makasih mas.

Muhammad Taqi said...

puyeng euy.. :)

LeeRz said...

nice inpo,,,,,,, keyen!!!!
bagus tp g grti..... bnyak kode'' aneh.
rmit tnyta bwt gnian,

Noah Lirik Video said...

thanks mas, inih likuh kerennnn... hehehe

Let's Share Together said...

salam kenal :)
thanks bos infonya :)

oh ya ditunggu kunjungan balik di blog ane ya, sekalian tukeran link yuk :)

Android Phone Tips said...

ohw...geto ya gan caranya, ane baru ngeh ne disini, thanks yo.

Android Phone Tips | Android Phone Tips

alat ukur kadar air said...

perlu di coba nih tipsnya

DNA Photography said...

thnk buat infonya...

Djangkaru Bumi said...

Tambah puyeng..xixiiii

Post a Comment

" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah

Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"

Makacih Atas Komentar-Nya

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial