Selamat datang ke BelajarBlogs...
Home » , » Tutorial Cara letakkan Text didalam gambar

Tutorial Cara letakkan Text didalam gambar


Postingan kali ini ingin membahas mengenai format CSS code. Sejauh ini kita mengenal beberapa pola Code yang membangun sebuah blog, dan salah satunya adalah CSS code. Sesuai dengan tajuk diatas akan membahas mengenai " Cara meletakkan text didalam gambar ", dan tentunya kita menggunakan kode CSS didalamnya.

Seperti yang kita ketahui bahwa CSS adalah kode yang bekerja sangat baik jika disimpan dengan langkah yang sederhana mungkin.
  • Pertama kali yang harus kamu perhatikan adalah letak dari gambar yang akan andapasang, misalnya didalam sebuah postingan atau kamu ingin menempatkannya didalam elemen halaman. Hal ini cukup penting mengingat langkah awal yang akan kita pilih, sesuai dengan kondisi yang kita inginkan juga tentunya.
  • Jika anda sudah menentukan letaknya, selanjutnya adalah tinggal kamu copy kode dibawah ini..dan pilih lokasi untuk meletakkanya..
<div style="position: relative; background:url(&quot;isi dengan URL gambar kamu&quot;) repeat scroll 0% 0% transparent ; width:(isi dengan ukuran yang kamu inginkan,misalnya "400")px; height:(isi dengan ukuran yang kamu inginkan,misalnya "400")px;"> <div style="position: absolute; bottom: 0pt; left: 0.5em; width: 400px; font-weight: bold; color:(pilih kode warna yang kamu sukai);"> <p>(isi dengan sebuah text yang kamu inginkan)</p> </div> </div>

Berikut adalah contoh pemasangan gambar dan format untuk mengaturkanya :

<div style="position: relative; background: url(&quot;http://i235.photobucket.com/albums/ee172/aibo_aibo31/090513114945_14.jpg&quot;) repeat scroll 0% 0% transparent; width: 500px; height: 400px;"> <div style="position: absolute; bottom: 0pt; left: 0.5em; width: 400px; font-weight: bold; color: #ffffff"> <p>(Kita hendaklah bersyukur dengan apa yang kita ada)</p> </div> </div>

Didalam Elemen Halaman / Sidebar
  1. Klik menu "Design"
  2. Jika sudah pilih "Add Gadget",--> pilih "HTML/Javascript"..
  3. Letakkan kode yang sudah anda copy tadi didalamnya..
Dari contoh kode diatas berikut ini adalah hasil jadinya :

(Kita hendaklah bersyukur dengan apa yang kita ada)


Sampai disini sahaja. Semoga anda berjaya melakukanya.

0 comments:

Blogger Tricks And TipsComment here