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.

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.

 

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.

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 :

 

del.icio.us tags: Tutorial Blogger Blogspot, Alert Message

Page views this post: reader