Membuat Layout Posting Blog

Membuat Layout Posting Blog

Assalamu'alaikum warakhmatullahi wabarakatuh.
Sahabat Bloggers yang berbahagia, berikut akan saya sampaikan bagaimana cara kita membuat layout posting agar menarik dengan potensi CSS3 yang lebih redup dan namun menyegarkan. Ide ini milik si Gubhug Reyot dengan ide-ide cemerlangnya di http://gubhugreyot.blogspot.com. yang saya modifikasi. Terima kasih untuk mengikuti terus tulisan saya. Caranya mudah sekali, silahkan modifikasi CSS berikut ini untuk ditempatkan di atas tag ]]></b:skin>

 

pre.blue{overflow-x:scroll;overflow:auto;padding:15px 10px;background:#151b47;overflow:auto;border:1px solid #444;text-shadow:1px 1px 2px #000;}.pre{padding:5px;width:0 auto;position:relative;border:1px solid #00F;background:#156;border-radius:8px;;margin:20px 0 15px 0;}.pre pre{text-align:left;line-height:1,5em;font-family:"Arial";display:block;padding:20px 20px 20px 20px;color:#eee;margin:0;overflow:auto;background:#555;max-height:500px;box-shadow:0 0 8px #000;font-size:12px;text-shadow:1px 1px 2px #000;}.pre pre.wsn{white-space:normal;}.pre h5{font-size:14px;font-family:Arno Pro Smbd;text-transform:uppercase;text-align:center;color:#fff;font-weight:600;margin:5px 0 10px 0;padding:0;text-shadow:1px 1px 2px #000;}>/p>
Selanjutnya cara memposting dengan perintah seperti model-1 berikut ini:
<div class="pre"><h5>Letakkan judul disini</h5>
<pre>Isi Posting disini..........</pre></div>

Model-2 dengan cara memberikan tambahan tag <div> didalam tag pre diatas agar lebih menarik yaitu dengan memodifikasi tag shadow sehingga akan nampak secara keseluruhan seperti berikut ini

<div class="pre"><h5>Letakkan judul disini</h5>
<pre>
<div style="background: rgba(255,255,255,.15);font:italic normal 100%/1.4 georgia;padding: 20px 20px 10px 20px;color:#ffffff;-moz-border-radius:8px;-webkit-border-radius:8px;-webkit-box-shadow: 2px 2px 4px #8bd268;-moz-box-shadow: 2px 2px 4px #8bd268;">
<p class="MsoNormal" Style="text-align:justify;text-indent:0.5in;">---Isi posting disini--- </pre></div></div> 

Perlu diketahui bahwa template kita berbeda-beda terutama untuk template saya ini telah menggunakan mode HTML5, maka silahkan menyesuaikan terutasama pada pewarnaannnya. Untuk mencari warna dalam blog silahkan klik di sidebar sebelah kanan pada template saya untuk dibawa ke posting warna atau kilik disini atau bisa juga klik disini. Apabila Anda tertarik memasukkan perintah blocqkuote yang bukan milik Anda (tidak disediakan dalam template) ada alternatuf lain silahkan klik disini.
Apabila Anda bermaksud menambah perintah blockquote dengan hover agar tampil lebih baik, silahkan modifikasi HTML  di template Anda dengan mencari tag blockquote dengan menambah tag dibawahnya seperti berikut (ide dari sahabatku di http://www.centralartikel.com) ini, namun sebelum Anda menerapkannya saya perlu mengingatkan agar menyimpan template aslinya terlebih dulu agar jika terjadi kegagalan Anda bisa mengembalikan ke template semula. 
CSS Blockquote
CSS yang harus dicari di template Anda:
.blockquote {
background:#eeeeee;
border:3px dashed #dddddd;
padding:15px 15px
}
Tambahan tag CSS hover dengan meletakkan dibahnya tag blockquote Anda seperti berikut ini.
.blockquote:hover {
background:#fff;
border:3px dashed #000000;
padding:15px 15px
}


Demikian posting saya kali ini semoga ada manfaat dan terima kasih kepada sahabatku di gubhugreyot yang selalu tampil beda dan OK dengan ide-idenya. Akhir kata mohon maaf atas keslahan dan sampai jumpa pada posting saya lainnya...sukses dan happy blogging...!!!. 
Wassalamu';alaikum warakhmatulllohi wabarakatuh.

Bergabunglah untuk cari uang tak berbelit-belit!

Bisnis terpercaya di Joko Susilo.com dan Stop Dreaming in action Info Toko Surya62. Bisnis spektakuler Best Marketing place, Konten Islami, Bisnis click-bank, Blakblakan Marketing Online, Smart Machine System V 2.0, submit terbaik, MobiGarda-Iphone. Mari cari Uang di Internet bersama dengan klik berikut ini di Info Toko Surya62