Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Image on Center of Position-Cara Buat Gambar Center (di Tengah)

Membuat gambar pada posisi tengah memang lebih sedikit digunakan blogger dari pada posisi gambar di kiri dan kanan (using float-left, float-right). Sedikit kode yang berbeda diperlukan untuk membuat gambar berposisi seperti itu (tengah). Posisi ini lebih sering dikenal dengan sebutan "center of position". Tidak banyak kode CSS yang kita butuhkan dan kode ini bisa digunakan secara langsung dalam tag img atau dengan menggunakan kode CSS yang kita simpan di template blog. Satu contoh di bawah ini adalah kode html yang berfungsi untuk membuat center gambar dan digunakan secara langsung di tag img:
<img style="display: block; margin: 0 auto; text-align: center; width: 300px; height: 219px;" src="http://1.bp.blogspot.com/_550XeJhg_o8/TJ4GCd1zFnI/AAAAAAAAApc/UFMMwG8Q3ok/s320/Pantai-1.jpg" />
Kode di atas adalah kode html pembuat posisi center dengan bentuk yang paling dasar. Jika sampeyan banya menggunakan posting dalam bentuk gambar akan jauh lebih baik seandainya kode dibuat dalam bentuk kode CSS sehingga bisa dimanfaatkan setiap kali posting. Kode CSS ini disimpan di template blog kemudian beri tanda dalam bentuk "class" seperti misalnya img.imgcenter sehingga ketika gambar diterbitkan maka ditambahkan sebuah "class" dalam "tag img" dan berbentuk seperti berikut : img class="imgcenter". Penggunaan kode CSS juga akan membuat ruang posting menjadi lebih praktis (tidak berjejalan dengan kode html). Sampeyan dapat juga menambahkan beberapa kode CSS yang lain dalam "class tersebut" hingga gambar yang dipostingkan akan tampillebih cantik. Kode baru seperti border, border-radius, drop-shadow (box-shadow), CSS3 transition dan transformation serta hover pasti akan membuat bentuk gambar lebih menarik saat ditonton.


Di bawah ini adalah satu contoh penggunaan kode HTML untuk membuat posisi gambar ditengah (center) yang dilengkapi dengan beberapa kode CSS untuk memperindah tampilan gambar.

Example - Image on Center of Position




Beberapa kode CSS untuk membuat gambar "center" dengan berbagai variasi tambahan kode CSS telah aku sediakan berikut demonya. Sampeyan bisa melihat dan menggunakan kode-kode tersebut untuk membuat tampilan gambar posting yang cantik. Silahkan buka link DEMO di bawah ini:




Kode CSS dan xHTML

<style type="text/css">
.imgcenter {
display: block;
margin: 0px auto;
text-align: center;
width: 400px;
height: 300px;
}
</style>

<img class="imgcenter" src="http://..../..../images.jpg" />
Fungsi margin pada kode CSS di atas selain untuk membuat "center of position", juga berfungsi untuk mengatur jarak dengan elemen di atas dan bawahnya. Sampeyan bisa mengganti 0 auto dengan yang lain seperti misalnya 10px auto (jarak dengan elemen di atas dan bawahnya 10px) atau bentuk yang lain seperti 2em auto (jarak dengan elemen di atas dan bawahnya 2em --> 1em=18px). Apabila margin-top dan margin-bottom (jarak atas dan bawah) ingin dibuat dalam ukuran berbeda, maka bisa menambahkan kode baru seperti di bawah ini :
<style type="text/css">
.imgcenter {
display: block;
margin: 0px auto;
text-align: center;
width: 400px;
height: 300px;
margin-top: 0;
margin-bottom: 20px;

}
</style>
Dengan penambahan margin baru seperti di atas, maka jarak dengan element di atasnya sebesar 0px sedang dengan elemen di bawahnya 20px. Satu hal yang amat penting diperhatikan, mungkin pada beberapa kasus dibutuhkan tambahan kode clear: both. Penggunaan kode ini harus kita lakukan saat di atas gambar ada elemen lain yang menggunakan kode float-left atau float-right. Silahkan segera buka DEMO yang telah disertai juga beberapa contoh penggunaan kode CSS pelengkap "fungsi center" berikut penggunaan clear: both;. Simpan kode CSS di template sampeyan (di atas kode ]]></b:skin>). Jangan lupa saat menyimpan kode untuk membuang tag "style" yang berupa <style type="text/css"> dan </style>.



Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :








» Happy Blogging - gubhugreyot «


11 komentar:

  1. Trima kasih tutorialnya, minta ijin mengkopynya ....

    BalasHapus
  2. Gan si anak ndeso Sorobayan, Sanden Bantul Jogya minta izinnya untuk reposting di http://website-download.blogspot.com/2012/08/tutorialhow-to-create-image-post-on.html

    website saya : http://yusufzulkarnain.blogspot.com

    BalasHapus
  3. ngebantu banget buat ngerjakan tugas TIK bikin web dari HTML

    BalasHapus
  4. wah.... bagus nih artikelnya..... makasih atas pengetahuannya...

    BalasHapus
  5. membantu banget nih
    bingung dari kemarin

    BalasHapus
  6. mau jalan-jalan? cari tiket pesawat promo yang murah? klik http://www.mmbcsudirman.com/

    BalasHapus
  7. thanks mas dah berhasil salam kenal

    BalasHapus
  8. keren nih blognya..
    thanks tipsnya gan

    BalasHapus
  9. kalo menurut ane, untuk center img cukup dengan
    {display:block; margin:0 auto;} tanpa perlu ditambah {text-align:center;} atau cukup dengan {text-align:center;} tanpa perlu menambah {display:block; margin:0 auto;}

    BalasHapus

 
GR | Edited by | gubhug reyot