Mau tau cara buat yang seperti ini, silahkan klik disini

widget by Kianhome
Postingan k'ian kali ini ingin membahas mengenai format CSS code yang secara lazim sangat dikenal oleh bloggerista (Julukan untuk pecinta blogger). Sejauh ini kita mengenal beberapa pola Code yang membangun sebuah blog, dan salah satunya adalah CSS code. Sesuai dengan judul diatas k'ian akan membahas mengenai "Cara menempatkkan 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 sesederhana mungkin. Daripada kita kelamaan k'ian akan langsung mulai mengenai tutorialnya.
  • Pertama kali yang harus kamu perhatikan adalah letak dari gambar yang akan kamu pasang, 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 kamu sudah menentukan letaknya, selanjutnya adalah tinggal kamu copy kode dibawah ini..dan pilih lokasi penempatannya..
<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 pengaturannya :
<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>(Sudah sepatutnya seorang hamba mensyukuri anugerah berupa kenikmatan hidup yang telah diberikan oleh sang Penciptanya..)</p> </div> </div>
Didalam Elemen Halaman / Sidebar
  1. Klik menu "rancangan", kemudian pilih "Elemen Halaman"..
  2. Jika sudah pilih "Add Gadget",--> pilih "HTML/Javascript"..
  3. Letakkan kode yang sudah kamu copy tadi didalamnya..
Dari contoh kode diatas berikut ini adalah hasil jadinya :

(Sudah sepatutnya seorang hamba mensyukuri anugerah berupa kenikmatan hidup yang telah diberikan oleh sang Penciptanya..)


Untuk contoh yang lain bisa kamu lihat disini..

Share to :

Related Post :


About the Author :

K'ian is a designer, web tutorial design, and blogging enthusiasts. Tutorial blog debut the first time when entering college, when I get to know the world wide internet and so much more. Now I work at one of the state trading company, a job that would conflict with the world of blogging and web design. Today remains a serious manage blog " Kolam Blogging Tips | Kianhome ".

3 Response to "Cara menempatkan Text didalam gambar"

  1. kalo emang mau ada tulisan kek gito di gambar, buat css sederhana di template, terus jadiin caption pada setiap gambar pd postingan, xixixixi...mantap!!!
    keep posting... ...Replay

     

  2. Kian Coi Said,

    @Beben :Pastinya sob, yang aq buat kl ini hanya bentuk sederhananya saja dengan contoh satuan...kl mau dijadiin caption itu langkah yang bagus, tinggal merubah bentuk tutorialnya saja.. thank's da comment sob...!!! ...Replay

     

  3. Sob, minta infonya tentang cara bagaimana memasang foto/gambar di antara dukumen yang akan diposting di blog. thx ...Replay

     

Post a Comment

Blog ini menganut sistem "Dofollow", Silahkan Tinggal komentar, saran, kritik disini.. apapun itu jangan SPAM ok..


Berita Terkini

Friend Follower's

Tips Health

Techno

Hot Nasional

Celebrity

My Blog List

Recent Comment

© Copyright 2011 | Dikelola sepenuhnya oleh : Kiancoi
KianHome Member of PlanetBlog | SitusBersih | Support on Mozilla Firefox and Google Crome Browser
Home | Posts RSS | Comments RSS | Sexy Blog |