Search here

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

Memuat...
English
Bru masuk angin!

Arsip...

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

Tutorial BlogDETIK: Tips Menata Gambar di Postingan BlogDETIK

Sebaik apapun artikel atau posting, apabila tampilannya tidak ditata dengan baik tentu akan membuat pengunjung malas untuk berlama-lama menikmati suguhan posting yang sudah dibuat dengan begitu serius dan bahkan menghabiskan banyak waktu dan tenaga. Banyak blogger yang masih dalam tahap awal terjun di dunia blog mengalami kesulitan untuk melakukan penataan sekaligus merubah ukuran gambar yang akan ditampilkan. Kenyataan seperti ini tidak dapat dipungkiri karena pemahaman tentang kode HTMl tidak bisa dilakukan tanpa tuntunan dari blogger yang sudah cukup matang di dunia blog, terutama yang mendalami tentang desain sebuah blog. Bagaimana supaya dapat secara cepat mengatasi permasalahan tampilan gambar di postingan? Bukan sesuatu yang sulit karena kode html yang digunakan sekedar untuk sedikit mempengaruhi penataan dan penampilan gambar tidaklah banyak dan rumit. Hanya beberapa kode sederhana kita tambahkan pada file gambar, maka jadilah sebuah tampilan posting yang sedap dipandang sekaligus enak untuk dinikmati.

Cara menambah kode HTML pada file gambar di mode posting html :

  • Edit Post : Masuk terlebih dahulu di halaman Edit Post.
  • Upload Gambar : Lakukan upload gambar.
  • Posting Mode HTML : Atur posting dalam mode HTML (ada 2 pilihan mode Visual dan HTML).
  • Posisi Gambar di bagian KIRI : Apabila gambar ditempatkan pada bagian sebelah kiri halaman posting, gunakan tambahan kode sebagai berikut :
    style="float:left;margin:0 15px 5px 0px;"
    Sehingga jika file gambarnya seperti ini :
    <img class="alignleft size-full wp-image-33" style="float:left;margin:0 15px 5px 0px;" src="http://gubhugreyot.blogdetik.com/files/2010/05/bola-dan-kekuasaan.jpg" alt="" width="150" height="267" />
    , maka bentuknya kemudian berubah menjadi :
    <img class="alignleft size-full wp-image-33" src="http://gubhugreyot.blogdetik.com/files/2010/05/bola-dan-kekuasaan.jpg" style="float:left;margin:0 20px 10px 0;" alt="" width="150" height="267" />
  • Posisi Gambar di bagian KANAN : Apabila gambar ditempatkan pada bagian sebelah Kanan halaman posting, gunakan tambahan kode sebagai berikut :
    style="float:right;margin:0 0 10px 20px;"
    Sehingga jika file gambarnya seperti ini :
    <img class="alignleft size-full wp-image-33" style="border:4px solid #777" src="http://gubhugreyot.blogdetik.com/files/2010/05/bola-dan-kekuasaan.jpg" alt="" width="150" height="267" />
    , maka bentuknya kemudian berubah menjadi :
    <img class="alignright size-full wp-image-33" src="http://gubhugreyot.blogdetik.com/files/2010/05/bola-dan-kekuasaan.jpg" style="float:right;margin:0 0 10px 20px;" alt="" width="150" height="267" />
  • Keterangan : Lihat Gambar di bawah ini :



    Keterangan :
    - Kotak Bagian tengah adalah Gambar atau Photo.
    - Margin Atas (Top), Margin Kanan (Right), Margin Bawah (Bottom) dan Margin Kiri (Left) adalah jarak antara gambar dengan segala sesuatu di sekitar gambar, yang bisa berupa gambar lain atau teks.
    - margin: (A)px (B)px (C)px (D)px; , A=margin-top, B=margin-right, C=margin-bottom dan D=margin-left.
    Silahkan ganti nilai margin untuk memperoleh penataan gambar yang terbaik.

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

Update » Rebo LEGI, Maret, 28, 2012

» Happy Blogging - gubhugreyot «

3 komentar:

  1. Gimana cara menata gambar lebih dari satu gambar bergerak dari kiri berkesinambungan... saya mencoba selalu gagal meskipun kode htmlnya sudah rubah "left or right" gambar lainnya turun kebawah..mohon saran. thks.

    http://towermonopole.co.cc

    BalasHapus
  2. BAGUS ABIS AJARIN CARA BIKIN ITU TU YANGA APABILA COURSOR NYA DI DEKAT KAN CATEGORIS GAMBAR NYA BISA TERANG.....THANKS YA

    BalasHapus
  3. Tampilan blognya keren dan sangar gan, ini sudah seperti blogger profesional.

    BalasHapus

 
GR | Edited by | gubhug reyot