Image Menyatu Dengan Artikel

Bagaimana Cara Membuat Image Menyatu Dengan Artikel ?

A rtikel cara membuat Image Menyatu Dengan Artikel ? Dapatkan info bagaimana agar Image Menyatu Dengan Artikel di blog bahrul ulum dot com yang dipublikasikan khusus untuk anda.

Mungkin ada beberapa diantara kita pemakai themes wordpress , yang mempunyai kendala untuk bagaimana cara agarimage atau gambar yang ada di postingan terlihat menyatu dan enak dilihat. Postingan ini sengaja saya publish , tersebab pengalaman saya dalam mengedit themes website “Bisnis Aluminium kaca” milik saya.

Pada themes yang saya pakai, ketika saya upload image kedalam postingan, dan di publish, saya melihat image yang ada di dalam postingan tersebut terlihat terpisah jauh dari artikel nya. Dan tampilan border image nya pun biasa-biasa saja, serta text caption nya pun terlihat ada di kiri. lihat pada gambar dibawah ini:

Menghilangkan Ruang Kosong Sebelah Image

Akhirnya saya memutuskan merombak total themes tersebut dan jadilah sekarang hasil buatan saya yang di modifikasi sedemikian rupa.

Dan untuk cara menghilangkan ruang kosong disebelah image pada postingan artikel, saya melakukan penambahan kode-kode .

Tapi sebelumnya saya memastikan, pada saat mengupload gambar, saya memilih opsi Alignment Left.

Dan ini tahapan cara membuat tampilan image pada web saya agar terlihat bagus dan menyatu :

1. Cara Menambahkan border pada image/gambar postingan

Tambahkan kode berikut ini pada style.css themes kita :

.wp-caption{
margin:0 10px;padding:9px 5px 5px;
background:#FFF;
border:1px solid #ebf2f5;
border-bottom:1px solid #CCCCCC;
text-align:center;}

2. Cara Membuat tulisan Text image/gambar menjadi center/ditengah

Tambahkan kode berikut ini pada style.css themes kita :

.wp-caption-text{
margin:5px auto auto auto;
padding:5px 0 0;
font:0.92em Arial, Helvetica, sans-serif;color:#656c71;}

3. Cara Menghilangkan Ruang Kosong di sebelah Image

Tambahkan kode berikut ini pada style.css themes kita :

.left, .alignleft{float:left;}
.right, .alignright{float:right;}
.aligncenter{margin:0 auto;display:block;}

Catatan : Penambahan kode pada style.css bisa ditempatkan dimana saja, terserah anda. Boleh diatas,dibawah, atau ditengah. Asalkan jangan menggangu  kode-kode lain.

Cara tersebut berhasil saya lakukan pada themes yang saya gunakan. Jika anda mengalami kendala , silahkan tulis pertanyaan di kolom komentar. Jangan lupa sertakan themes yang dipakai.

Semoga bermanfaat
Salam
Bahrul Ulum

Tagline :

• membuat tulisan di samping gambar di wordpress


• mengatur gambar php


• membuat berita bergambar di blog


• membuat border image css


• membuat gambar berada ditengah wordpress


• membuat background image text


• membuat gambar pada samping blog


• membuat posting berita dan beserta gambar dengan php


• membuat tampilan artikel php yang menarik


• membuat tombol dengan gambar di php


• membuat gambar dibawah tulisan css


• postingan terakhir wordpress image tidak terlihat


• menampilkan artikel dengan foto dengan php


• menyatu di dalam terpisah dalam


• menghilangkan padding di bawah gambar di posting blogger


• menghilangkan border image pada wordpress


• mengatur gambar PHP ke tengah


• menambahkan layout pada artikel tulisan


• menampilkan gambar sesuai dengan berita di php


• menampilkan gambar di artikel dengan php


• menampilkan artikel dengan php


• membuat background gambar pada php


• membuat artikel dengan php bergambar


• memasang gambar di tengah background blogger


• cara membuat berita yang memiliki gambar dengan php


• cara edit foto agar kelihatan menyatu


• cara centering tulisan di posting blog


• cara buat border dengan beckground dengan gambar


• cara bikin image to text


• cara agar gambar ke samping kode html


• buat artikel dengan php


• bagaimana supaya gambar ada di samping text


• attachment foto pada posting berita php


• cara membuat border image blogger


• cara membuat foto di samping tulisan di blogspot


• kode html menaruh gambar disebelah tulisan


• html text di samping gambar blog


• halaman web tidak menyatu dengan background


• cara tampilkan foto di samping pada wordpres


• cara pasang adsends di gambar


• cara menampilkan gambar didalam tulisan


• cara membuat upload foto dengan php


• cara membuat tulisan berada disamping gambar pada wordpress


• cara membuat text berada di tengah pada web


• agar postingan gambar blog centered