PENGGABUNGAN SCRIPT CSS DENGAN HTML UNTUK POSTING


Bagaimana penggabungan/penulisan script css dengan html untuk posting? seperti itulah kiranya pertanyaan yang di lontarkan oleh mas rizky pemilik blog www.rizkyzone.com beberapa hari yang lalu di grub Dhana Discussion, dan kebetulan sekali saya mengerti tentang apa yang ditanyakan mas rizky, selesai menjawab terpikirlah saya untuk menaikkan ke postingan blog, berhubung saya juga lagi bingung belum posting karena experimen saya yang belum berhasil :P .

Dalam penulisan script css memang berbeda dengan html, kalo html kita bisa langsung menuliskannya dan mendapatkan hasilnya, namun untuk script css masih ada tag tambahan. Yaitu dengan menambahkan tag <style type="text/css">antara script css nya</style> .

Contoh : misal hasilnya seperti ini :

-PENULISAN/PENGGABUNGAN SCRIPT CSS DENGAN HTML UTK POSTINGAN

Maka penulisannya seperti ini :



<style type="text/css">
#Lontong {
background: #000;
color: #fff;
padding: 5px;
border: 2px solid #bbb;
border-radius: 5px 5px 5px 5px;
box-shadow: 2px 2px 2px 5px #ff0000;
}

#Lontong:hover {
background: #fff;
color: #000;
box-shadow: 2px 2px 2px 5px #ff000;
}
</style>

<div id="Lontong">
<div style="float: left; width: 100%; /* Hanya Pajangan */">
</div>
-PENULISAN/PENGGABUNGAN SCRIPT CSS DENGAN HTML UTK POSTINGAN</div>


Jadi hanya tinggal menambahkan tag <style type="text/css"> pada awal script css, dan tambahkan tag tutup </style> pada akhir script css.
Untuk pertanyaan lebih lanjut silahkan tinggalkan komentar :P .

Comments for this entry

AcerNoval

ohh jadi gitu ya sob? baru tau aku haha

Kerajaanhosting masa depan hosting Indonesia

KEDUAX : ijin nyemak

blue Water

O0o0 Thx yaa atas informasinya . . lumayan nihh ^^

Rizkyzone

ok mas aq makasih bangat nih, akan aq coba buat praktekkan sekarang

Anonim

@ AcerNoval : hahaha :D

@ Cekinfo : ~.~!! iy sob

Anonim

@ blue Water : siipp masama

@ Rizkyzone : Ohh iya mas sama2.. Semoga berhasil :D

ALI BLOGGERS COMMUNITY

wuih mantap gan, coba dulu ya scrip nya

Rizkyzone.com

cara mengecilkan kotaknya gimana mas ? aq ubah nilainya width: 100%; nggak ada perubahan

Anonim

@ Rizkyzone : waahh iyaa bener mas, hapus aja width yg di html, tambahkan width di css nya.

#Lontong {
background: #000;
color: #fff;
padding: 5px;
border: 2px solid #bbb;
border-radius: 5px 5px 5px 5px;
box-shadow: 2px 2px 2px 5px #ff0000;
width: 50%; /*Example width */
}

Anonim

ane gak ngerti gan.. bukan gak ngerti tutorial diatas,, tapi ane kurang negrti bahasa csssss.. apa itu..

oiya kalau mau belajar css, bagi pemula yang paling bagus belajar dimana ya gan..

Anonim

@ Bangjal Dua Tiga : wah dimana ya..? di google bangjal hehe maksudnya cari di google banyak kok. Kalo saya sie pertama diajarin tmn "nangkep logic nya", trus sering sorot2 source css org aja :D +

TituitBom

waah, keren dah, saya kurang faham sama css-css-an.. wkwkwkwk

Anonim

Wah..keren script css nya. Pengen belajar lebih jauh.

Shinobi Blog

bingung sob... nggak ngerti ... hhha :D :P

Ap-DBK

Gua kaga ngerti nih sob. . .

Hendro Prayitno

hanya dengan style saja bisa tapi tidak valid.
Mungkin yang agak ambigu adalah media, apakah media perlu ditambahkan? atau mungkin hanya untuk sebuah device yang mendukung?
<style type="text/css" media="screen">
<style type="text/css" media="print">
<style type="text/css" media="all">

Kerajaanhosting masa depan hosting Indonesia

sob, ane mau tanya gmna cara buat text berjalan trus kalo text berjalanny dsorot kursor trus text yang tadiny berjalan langsung berjenti, itu gmna buatny sob??? krm codeny k komentar Cek Info y :D

Anonim

@ Hendro Prayitno : Ohh makasih bang buat tambahannya.. lumayan jadi tahu tambahkan untuk media :D

Anonim

@ Cek Info : yang berentinya ane ngga tau sob.. kalo ada contohnya ane bisa, nanti ane ambilin scriptnya

Unknown

Ijin nyimak juga sob.. Kunjungan pertama nich, lamkenal Sobat.... ;)

trik ini sering saya gunakan,hee,,, nice posting Sobat.! ^^Ijin nyimak juga sob.. Kunjungan pertama nich, lamkenal Sobat.... ;)

trik ini sering saya gunakan,hee,,, nice posting Sobat.! ^^

Kerajaanhosting masa depan hosting Indonesia

makasi mas, text berjalanny uda sy pake d blog sy buat percobaan promosi d sana. hehe

──────▄▌▐▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀​▀▌
───▄▄██▌█ ░░░░ Dukung Cek Info ░░░
▄▄▄▌▐██▌█ ░░░░ Di kontes SEO I ░░░
███████▌█▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄​▄▌
▀(@)▀▀▀▀▀▀▀(@)(@)▀▀▀▀▀▀▀▀▀▀▀▀(​@)▀▘<<<< JOIN US <<<<< . . . .

coba lagi akh :D prit...prit...prit...

Kerajaanhosting masa depan hosting Indonesia

wah coba mau test sob :D

──────▄▌▐▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀​▀▌
───▄▄██▌█ ░░░░ Dukung Cek Info ░░░░░░░
▄▄▄▌▐██▌█ ░░░░ Di kontes SEO I ░░░░░░░
███████▌█▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄​▄▌
▀(@)▀▀▀▀▀▀▀(@)(@)▀▀▀▀▀▀▀▀▀▀▀▀(​@)▀▘<<<< JOIN US <<<<< . . . .

Kerajaanhosting masa depan hosting Indonesia

bagus y sob, truk ny hehe yg no. 2 bagus tu :D

Info game online

kok ane udh rubah widthnya jadi 50& bahkan kurang tapi lebarnya tetap sama ya gan...
klo mau lihat disini alamatnya....
http://infogame-online.blogspot.com/2011/08/shouth-mix.html

Anonim

@ Cek Info : ckckck (--")

Anonim

@Info game online : disitukan udh ane kasih note, kalo width & float itu cuma pajangan, kalau mau tinggal tambahkan width nya di css nya

Raindra

oh gituyah kalao pake gambar gimana kang jadi kepengen coba2 nih

Zona Download Gratis

antara css sama html beda bahasa ya sob?
trus bagus yang mn dari kedua itu?
mav kl pertanyaan saya terlalu mendasar soalnya gak ngerti.
he...he...he...

Boy RR

mampir dimari sob... keep blogging!

Ladida

sipp nih, ini dasarnya utk yg mau mainan css, tinggal bikin dan panggil, ehehee . .
saya juga suka mainan kyk gini, sampe template hancur, nah itulah kepuasan tersendiri, wwkwkwkk
makasih infonya . .

Shinobi Blog

waaa... ada truk yg lewat tu '......

Info game online

Haha...
Ane kan kaga faham css ato html gan, jadi asal comot ja..
Ane cuma tau sedikit.
di antaranya ya buat ngrubah ukuran object tinggal ubah nilai width ato height gitu..
jadi klo nemu apa2 langsung copas and tinggal sesuain ukuran dengan template ane..

Ane ada sedikit request neh gan..
Buat posting selanjutnya agan posting yang kaya gini lagi tapi tuh tulisan dilengkapi dengan warna yang berjalan kaya neon..

Blog SEO DAW - XP | Tutorial Blogspot | Belajar SEO Blogspot

Wah hebat ya, semua keren dengan efek CSS. Ada tutorial gak mengenai efek shadow? masih bingung nih. :)

Cewek Sexy Lagi Pipis

sumpahh...
keren banget nihhh...

AcerNoval

saya setuju dengan @DAW-xp :)

Anonim

@ Zona Download Gratis : gpp sobb.. ane malah lebih suka komentar yg banyak tanya dr pada OOT :P .
CCs dan Html : berbeda ,, ibaratnya html tuh buminya, css bulannya.
Atau Html = elemen nyaa..
Css = pernak-perniknya.
kurang lebih seperti itu

Anonim

@ Ladida : walaupun jelek tp mempunyai kesenangan dan kepuasan tersendiri ya sob.. :) sama seperti saya

@Info Game Online : Kaya neon nya gmna ya sob..?? nanti ane postingin

Anonim

@ Daw Xp & AcerNoval : nanti ane postingin dhh sobb..

@ Cewek : Makasih :)

Anonim

@ Sorry Raindra : Sorry ketinggalan :P kalo pake gambar jadi kya gini :

#Lontong {
background: url("LINK GAMBAR")repeat scroll 00 transparent;
color: #fff;
padding: 5px;
border: 2px solid #bbb;
border-radius: 5px 5px 5px 5px;
box-shadow: 2px 2px 2px 5px #ff0000;
}

Raindra

oh yap, oh kasian atu ketinggalan @shinobi Blog tuh :P
eh bentar baru liat nih ada bang Hendro wah untung d dunia maya :D jadi curiga nih ama yang punya blog ini salu dah sob ma'afyah asal jeplak

Zona Download Gratis

@admin: ow begitu ya sob, makasih sob ane jd sedikit mengerti. he,,he,,,he,,,
oya itu code script di atas buat teks berjalan ya? ane blom coba jadi gak tau. :D

Anonim

@ Raindra : Bang hendro cuma numpang lewat doank disini.. haha :P asal jepak knpa nih?? hikz!

@ Zona Download Gratis : Ehmm.. bukan itu cuma text box shadow aja, kmrn si Cek info juga minta script teks berjalan jadi minta aja sama dia. xixi
Atau ngga disni http://se-avancee.blogspot.com/2011/03/action-marquee-berbeda.html , atau tunggu postingan berikutnya untuk marquee yg bgusan dikit :P coz ada yg request juga :)

Kerajaanhosting masa depan hosting Indonesia

masBRO, ane tanya blockquote bagus amat share donk =="
xixi

Zona Download Gratis

@admin: gan ane request cara membuat komentar admin beda dengan pengunjung, ane dah muter2 google gak ada yang cocok sama templet ane?
mungkin ente punya script yang cocok

Bisnis Investasi

Perkenalkan sob, Ini blog bru sya sob http://oke-investasi.blogspot.com/ sbg penggnti dari http://adityabisnis.blogspot.com terima kasih.

Mahesa ibnu_romli

met pagi all, maaf klo pertanyaan saya kluar dari pembahassan css, di blogspot bisa di pasang div ga yah? soalnya dulu kira2 bulan mei saya pasang dan bisa berfungsi, tapa memasuki bulan juni gak ada hasilnya gan, ini knapa yah? met pagi all, maaf klo pertanyaan saya kluar dari pembahassan css, di blogspot bisa di pasang div ga yah? soalnya dulu kira2 bulan mei saya pasang dan bisa berfungsi, tapa memasuki bulan juni gak ada hasilnya gan, ini knapa yah?

Anonim

@ Cek Info : itu bukan blackoute sob.. tp select all/drop box itu udh pernah ane posting.

@ Zona Download Gratis : disini coba http://se-avancee.blogspot.com/2011/03/komentar-author-berbeda-dengan-komentar.html

Anonim

@ Bisnis Investasi : Iyaa om salam kenal juga

@ Mahesa ibnu_romli : Ane kurang mudeng pertanyaannya? maksudnya dipasang div gmna ?? lah itu script diataskan pake div id .

NFS Reload

dari tutorial di atas, sdah kelihatan , klw ini Ownernya sudah jago Blogging.
dari Demak ikutan sundul. tinggi2

NFS Reload

Doble POST
aku dapat Ide buat akun GA juga dari sini
lanjut lagi.............wkkk...

Anonim

@ NFS Reload : hehe bisa aja masbrew.. saya juga baru belajar :) . buat GA nya selamat yh udh diapprove :D

Kerajaanhosting masa depan hosting Indonesia

cek tutorialny dolo :D
visitback kwan

Kerajaanhosting masa depan hosting Indonesia

mas, mau tanya langsung open image. klik d sini

Anonim

@ Cek Info : Kalau itu siih saya ngga tau sob.. ambil aja scriptnya, kalau ngga salah itu blognya ladida kan, trus taro di samping kotak komentar :)

Kerajaanhosting masa depan hosting Indonesia

iy blogny ladida keren BU, dan gmna cara naruhny pake float:right

ibnu99

nice info gan..

Anonim

@ Cek Info : bisaa juga pake float di elemen css keseluruhnnya, float: left/right; . untuk menyesuaikan posisinya gunakan juga margin/padding

Anonim

untuk membuat tampilan beda-2 ya di setiap halaman?

Anonim

@ Dhani : wahh makasih nih mas udh mau berkunjung & komentar :) . bukan mas maksudnya disini cuma cara untuk menuliskan kode css dipostingan.

Kerajaanhosting masa depan hosting Indonesia

gimana itu sob, ane kagak ngerti gak jadi deh xixi :D

Anonim

@ Cek Info : ngga semua problem kita bisa dipecahkan dari sebuah tutorial,, terkadang kita juga harus menemukan solusinya sendiri. seperti yang baru ente tanyakan,, kalo seperti itu sulit untuk saya mencarikan solusinya,, karena template ya template blog ente, ente yang tahu jadi ente yg harus memecahkan problemnya soalnya ngga semua script2 template itu sama . :D

liputanmadura.com

wah ilmu baru nich, mantap ilmunya gan

Unknown

mantap bro.. makin ok ja ..

catureko

thx gan for info , berguna nih,,,

Agriculture Product

mantab postingannya gan.jdi kepengen belajar CSS.mantab postingannya gan.jdi kepengen belajar CSS.

SEO

maen balik gan :D

BlogS of Hariyanto

nice info and share kawan :)

Kerajaanhosting masa depan hosting Indonesia

wah iy, sob
sory kalo sy kebanyakan nanya mulu :D

Anonim

@ liputanmadura.com : iyaa.. broo...

@ Said Arsyad : thanks broo..

@ catureko : ho oh :)

Anonim

@ Agriculture Product : belajar aja :)

@ Cek Info : gpp sobb.. lebih baik nanya2 dari pada OOT komentar ga jelas.. sering2 nanya lagi sob :D

Musa Khairul Umam

Baru tahu nih kalo Script sma CSS bisa digabungin

Anonim

@ Musa Khairul Umam : bukan script dgn css, tp html dgn css. trik ini juga yang di gunakan untuk blogazine

AcerNoval

hahaha :D

Musa Khairul Umam

Hahahaha,iya sob ane kurang teliti bacanya :D

Ladida

wah, ada yg lagi ngobrolin saya di sini (_ _")

Anonim

@ Ladida : hahaha.. iyaa itu sobat saya pengagum blog dikau sob.. hehe

NEDI ARWANDI

Numpang belajar mas, silaturahim pertama ksini...

Cek Info

kunjungan rutin kwan, jgn lupa donasi y klik aj iklan d cek info :D
dan sory bar bisa bales, malam senin jadilah ane tunggu sob :D

Bisnis Online Blog

Sip izin nyimak ini artikeln gan

mastokkenari

postingnya pas banget nih, .... lg bljr .... mksh infox..

Obat Herbal Asam Urat

waduh aku masih di riung bingung nih sob,, hehe
aku akan terus pelajari dulun deh,
hehehe

Sinto

wah Ada Bang hendro Komen disini emmmm

Dayz

keren sob :)

Dearti

hem... blog yg menarik....

Leave your comment

Thank you.