Bagaimana Cara Membuat Postingan dengan Tampilan Berbeda? Ini Cara Gue. Ya kembali lagi saya men-share tutorial blog. Tutorial ini mungkin adalah yang pas saat para pengunjung merasa bingung melihat postingan-postingan blog ini yang tampilannya selalu berbeda-beda. Postingan semacam yang dimaksud dapat kalian lihat pada blog yang menerapkan konsep Blogazine. Sudah cukup banyak yang men-share tutorial semacam ini, tapi kali ini adalah cara gue.
Baca juga artikel seperti gambar di atas:
Jika Anda berniat untuk mencobanya silahkan ikuti langkah-langkah berikut ini.
Langkah 1: Setidaknya kita membutuhkan 2 tab dalam jendela browser. Tab satu buka Entri Baru Anda dan pilih mode HTML, bukan Compose. Sedangkan tab yang satunya lagi buka situs Real-time HTML Editor dan bersihkan/hapus dulu tulisan-tulisan yang ada disitu untuk memulai baru.
Langkah 2: Siapkan juga tulisan postingan Anda. Jika sudah, ayo kita mulai. Kita bermain di tab Real-time HTML Editor.
Langkah 3: Pisahkan dan masukkan setiap paragraf tulisan Anda kedalam tag <p>, sehingga menjadi seperti ini: <p>...tulisan paragraf...</p>.
Contoh:
<p>disini paragraf satu... disini paragraf satu...</p>
<p>disini paragraf dua... disini paragraf dua...</p>
<p>disini paragraf dan seterusnya... tulisan sesuka Anda...</p>
Langkah 4: Buat kode CSSnya. Samakan tag yang ada di HTMLnya. Jika menggunakan tag <p>, maka CSSnya seperti ini: p{...}
Contoh:
<style type="text/css">
p {font-family:Arial;font-size:15px;...}
</style>
Jadi kalau digabung semua, jadinya seperti ini:
<p>disini paragraf satu... disini paragraf satu...</p>
<p>disini paragraf dua... disini paragraf dua...</p>
<p>disini paragraf dan seterusnya... tulisan sesuka Anda...</p>
<style type="text/css">
p {font-family:Arial;font-size:15px;...}
</style>
Langkah 5: Lanjutan, Perhatikan!
<div class="tulisan">
<img src="url gambar"/>
<p>disini paragraf satu... disini paragraf satu...</p>
<p>disini paragraf dua... disini paragraf dua...</p>
<p>disini paragraf dan seterusnya... tulisan sesuka Anda...</p>
</div>
<style type="text/css">
body {background:#aaa;} /*atur sendiri warna background blognya*/
.sidebar,#sidebar-wrapper {display:none;} /*untuk menyembunyikan sidebarnya*/
#post-wrapper,.post {margin:0 auto;float:none;width:100%;} /*atur sendiri ukuran widthnya*/
.tulisan {background:#f00;width:400px;border:4px solid #000;}
.tulisan img {border:10px solid #fff;width:100px;...}
.tulisan p {font-family:Arial;font-size:15px;...}
</style>
Karena tag <img> dan <p> berada dalam <div class="tulisan">, maka CSSnya menjadi seperti ini: .tulisan img{...} dan .tulisan p{...}.
Ya untuk selanjutnya, Anda boleh edit sendiri sesuka Anda.
Langkah 6: Setelah Anda selesai edit-editan, maka semua kodenya di-copy paste ke Entri Baru Anda tadi. Note: Pastikan Anda tidak meng-klik lagi mode Compose, biarkan saja tetap pada mode HTML. Kalau ingin publish ya silahkan klik tombol Perbarui tersebut.
***
Contoh lain. Perhatikan saja.
Semoga bermanfaat dan ini adalah tutorial sederhanya.
