BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

Membuat kata-kata bijak menjadi lebih berkesan dengan “ Alert Message “

Tentang membuat tulisan  “ Alert Message “ ini pernah saya publis di blog ini, tertanggal 26 oktober 2007.

Tujuan membuat “ alert message “ ini sendiri sebenarnya sangat simple.  Yakni memberikan ruang dan bingkai yang sangat khusus, terutama untuk  kata-kata mutiara, kata peringatan atau kata-kata  yang teristimewa dan indah menurut kita. – yang  biasanya kata-kata tersebut sering di wakili oleh sebuah block queto, huruf miring dan tebal, atau di beri garis bawah.

Namun dengan gaya tulisan “ alert message “ ini, kata-kata indah itu  akan semakin eklusif.

“ Ketika satu pintu kebahagiaan tertutup, pintu yang lain dibukakan. Tetapi acap kali kita terpaku terlalu lama pada pintu yang tertutup sehingga tidak melihat pintu lain yang dibukakan bagi kita “.

Oceh :

Ada dua cara yang bisa kita lakukan untuk membuat tulisan “ Alert Message “ ini.

Pertamaxxx :

Menyimpan coding Css –nya ke dalam blog.

Tentutakan dulu sebuah icon atau gambar yang akan di letakan pada bagian kiri pada tulisan “ alert message " .

contohnya saya pake gambar ini.

light

Kemudian masukan kode Css ini  ( bisa di simpan di atas tag 
]]></b:skin> )

 

.alert {  
background:#fff url(http://lh3.ggpht.com/jaloee/SJh1AWYBxtI/AAAAAAAACWc/0TdjofpRUBU/light.png) center no-repeat;  
background-position: 15px 50%; /* posisi gmabar */  
text-align: left;  
padding: 5px 20px 5px 75px; /* jarak gambar dan tulisan */  
border-top: 2px solid #ffd324;  
border-bottom: 2px solid #ffd324;  
}

* tulisan berwarna merah merupakan url gambar.

skin

 

Setelah itu buat tulisan-nya  ke dalam editor blog, mesti dalam  format Html seperti ini.

<p class= "alert"> DI SINILAH KITA MENULISKAN KATA-KATA MUTIARA ATAU PESAN </p>

hasilnya seperti gam ini.

gam 04

Keduaxxxx :

Cara ke dua  : Kalau  kita malas membuat dan menyimpan kode Css -nya, kita bisa langsung membuat -nya ke dalam editor blogspot- Html.

seperti ini.

    

<p style="background:#fff url(http://lh4.ggpht.com/jaloee/SGjtZsChf7I/AAAAAAAACEk/N_HAnR0jplA/8.gif) center no-repeat;background-position:15px 50%;text-align:left;padding:5px 20px 5px 50px;border-top:2px solid #ffd324;border-bottom:2px solid #ffd324;"> Cinta membuat kita bergairah dalam hidup ..</p>

hasilnya :

gam 05

 

Page views this post: reader

24 komentar:

Bani Risset said...

Betul kang .. emang jadi lebih... gimana gituu..

cool deh..

Subagya said...

waaah yang keduaaax nigh, coba ilmunya akang jaloee ah
thanks kang ilmunya

Loedin said...

kira-kira ide tersebut dibuat untuk ditaruh dimana, ya??

Firdaus Ariefatosa said...

kaopattxx..

cakeeepp.. css-an ahhh... nuhun kang.. buat bahan blockquote bagus juga kayanya nih..

Benny Andhika said...

emang disini ternyata tempat belajar..
thank broo.. gud info.

Kristina Dian Safitry said...

aku pesan satu kata bijak dong bang sebelum kukasih bingkai. yang spesial untukku ya,he..he..

inicuma said...

wah bisa pesen kata bijak ya, 1 ya kang jaloe, pls dech, hehehehe

Syamsul Alam said...

Keren.... Say pingin banget cari yang macam gini, dan ketemu hari ini.. Ini pasti hari keberuntungan saya. Blog yang super keren di sini.

http://alampintar.blogspot.com/

Juga pingin jadi sebagus ini, mohon bimbingannya ya.....

Jaloee said...

to Ktistina atau Oeoes..

wakakkakak... wah banyak sih kata2 bijaknya.. pingin ttg Kehidupan, Cinta, atau pekerjaaan.. hahahahha

Ade Sanusi said...

Coba lagi Ah.....

Maksih buanyak nih Mas.... jadi nambah banyak deh Ilmu Bloggernya.....

Anonymous said...

Posisi alert message ini ada disebelah mana bos..? Kalo gue mau nempatin alert message ini di sisi kanan artikel seperti pada artikel "Membuat artikel menjadi 2 kolom", gue mesti nambah code css gimana..?

Jaloee said...

@ Zlam

kalau di gabungin jadi seperti inilah

<div style="width: 45%; float: left;">Tulisan Kolom Pertamaxxx</div>

<div style="width: 45%; float: right;"><p class= "alert"> DI SINILAH KITA MENULISKAN KATA-KATA MUTIARA ATAU PESAN </p></div>

<div style="clear: both;"></div>

Anonymous said...

Trims...kang...bagus juga...ntar coba di blogku....Iya td malam dah pulang,..OL-nya di ktr

Anonymous said...

he..he..makacih..infonya..

Anonymous said...

asiik, ada yg baru, baru liat trus langsung praktek dah kang jaloe
MAKASIH, MATUR NUHUN...
Yup !

slamet sugiarto said...

Gw udah coba n berhasil. Cuma gue mau kasih border di sebelah kiri Messages Alertnya. Gimana ya bos...gue udh coba tapi gak nongol bordernya...?

Gue pake code yang dikasih di koment ini, dan gue pasang di tempat postingan...

Anonymous said...

lapor...elmunya sukses disebar ke warga saia...
pa RW dah rembuk sama warga, bakal di copy trus disebar ke dusun sebelah sekalian ajang pencari massa katanya..halah..
matur nuhun suhu...

Yup !

Admin said...

oke lansung praktekin aja

Anonymous said...

Thankz KK...
Ntar mampir, yach...

Anonymous said...

Wowwww....
Tambah ilmu lagi nih
THANXXX

Anonymous said...

Btw cuman bisa untuk satu postingan aja ya?
caranya untuk tampilkan di tiap postingan?

Kanker payudara said...

waahh waahh mesti dicoba niihh tutornya..makasih udah mau shre gan..

HIV AIDS said...

gan tampilan blognya bagus bnget..salam kenal juga gan..

Jantung Koroner said...

mesti coba pasang juga niihh..makasih ilmunya gan..

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