xZee Blog



keren.. ini cara membuat gambar otomatis berada ditengah halaman posting

Plsy Store Street Fight
Zen Sama
xZee Blog
CSS Tutorial
pada posting kali ini Admin xZee Blog akan membahas tentang cara untuk membuat gambar otomatis berada ditengah halaman posting Blog. 
sebagai contoh seperti template Cute Tab ini yang sudah saya terapkan.

jadi disini selain membuat tampilan tampak lebih rapi, gambar juga dilihat lebih nyaman.

cara ini menggunakan css dan untuk css nya sendiri sudah saya siapkan jadi kamu tidak perlu khawatir harus menulis kode css alias hanya perlu memasang css yang sudah saya siapkan.

contoh sederhana perhatikan gambar berikut ini.





nah gambar diatas berada ditengah halaman kan?

baik berikut adalah css yang akan mengubah gambar di posting Blog kamu berada di tengah halaman.





cara pemasangan atau memasang

1. Kunjungi halaman edit template WBID kamu. 2. buka atau edit bagian Post 3. untuk meletakkan kode css nya contoh seperti berikut. <div class="anu"><wb:post_title></div> <div class="anu anu">contoh, 09 09 1899</div> <div class="posting"> <!--letakan disini--> <style> /* dibuat oleh Zen Sama xZee Blog */ img { /* semua gambar berukuran 70% layar */ width: 70%!important; /* yang membuat berada ditengah */ margin: 0.2rem 15%!important; /* anti bocor */ padding: 0!important; border-top: 3px solid black!important; border-bottom: 3px solid black!important; /* memberi efek bayangan */ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.9); /* memberi efek lengkung */ border-top-radius: 1em; } </style> <!-- pastikan Peletakan kode nya ada tepat pada atas atau bawahnya tag template WB content dibawah ini --> <wb:post_content> </div> 4. setelah itu tinggal simpan template post nya dan lihat hasil... jika kamu nyaman dengan tampilan gambar yang saya terapkan pada css singkat diatas dan ingin mengubah semua gambar menjadi seperti itu, maka letakan kode <style> css diatas pada bagian Header atau footer template Blog kamu. Catatan: kode diatas akan merubah semua gambar yang ada pada Blog kamu menjadi berada ditengah, bila diletakan pada header atau footer template.

mengembalikan normal

bila tidak nyaman dengan gambar yang rapi ditengah tinggal hapus kode diatas dan gambar pada Blog kamu akan kembali normal. sekian posting ini, bila ada yang belum paham cara untuk anu.. silakan beri komentar dibawah. ✌
Share This Post

Post Detail


Posted By: Zen Sama
Posted On: 09 Nov 2017 05:08
Category: Blog dan WebWapBlog.IDBelajar HTML dan CSS


Leave a Comment

Ramadhan GF
09 Nov 2017 06:11
Wah keren gan. Tema mobile blog ini juga keren
Ramadhan GF
09 Nov 2017 06:12
Wah keren gan. Tema mobile blog ini juga keren
Zen Sama
09 Nov 2017 09:24
template masih beta, belum jadi sepenuhnya.
sebenarnya semua model templatenya ini 😓 mobile, high-end dan desktop.

Please Login first for post a comment

Bookmark
Category
Please switch off your AdBlock and refresh this page :)