Membuat Kolom Widget Di Artikel Postingan Blog

Membuat Kolom Widget Di Artikel Postingan Blog - Secara tidak sengaja, saya menemukan ide lagi untuk membuat artikel tentang membuat kolom widget di artikel postingan blog. Ide ini saya dapatkan setelah membuat artikel tentang Membuat warna background dg bingkai border blog dan untuk contohnya seperti pada gambar berikut ini

Sedangkan untuk contoh tampilan kolom widget di artikel blog, seperti contoh berikut ini;

Panduan Template Blog

Nama Admin : Ana Sriwahyuni
Alamat : Probolinggo
Pekerjaan Utama : Perawat
Pekerjaan Sampingan : Blogger
Status : Menikah

Dan untuk kode kolom widget di artikel blog adalah seperti berikut ini;


<style type='text/css'>
#kolom-sample {background-color:#333;border:4px solid #ddd;width:350px;float:center;word-wrap:break-word;overflow:hidden;margin:2px;padding:0;}
#kolom-sample h2 {background-color:#333;background-image:-webkit-linear-gradient(top,#333,#3c3c3c); background-image:-moz-linear-gradient(top,#333,#3c3c3c);background-image:-ms-linear-gradient(top,#333,#3c3c3c);background-image:-o-linear-gradient(top,#333,#3c3c3c);background-image:linear-gradient(top,#333,#3c3c3c);border:none;border-top:1px solid #444;border-bottom:1px solid #222;font:12px arial,verdana,trebuchet ms;font-weight:600;text-align:left;font-style:normal;line-height:1.3em;color:#f2f2f2;text-shadow:1px 1px 1px #222;margin:0;padding:5px;}
#kolom-sample .widget {margin:0;}
#kolom-sample .widget-content {margin:0;padding:5px;}
#kolom-sample ul {list-style-type:none;color:#ddd;margin:0;padding:0}
#kolom-sample ul li {background:url(http://lh6.ggpht.com/_7Y9pl24WpQY/SuHhL1fZSMI/AAAAAAAAB_w/engBWuVJmlo/link_arrow_thumb%5B1%5D.png) no-repeat 0px 5px;margin:0px 0px 5px;
padding:0 0 5px 15px}
#kolom-sample ul li a:hover {margin:0px 0px 5px;padding:0px}
.koloman a:link {color:#41ADB8;text-decoration:none}
.koloman a:visited {color:#41ADB8;text-decoration:none}
.koloman a:hover {color:#B41ADB8;text-decoration:underline}
</style>
<div id='kolom-sample'>
<div class='koloman section' id='koloman'>
<h2>Panduan Template Blog</h2>
<ul>
<li>Nama Admin : Ana Sriwahyuni</li>
<li>Alamat : Probolinggo</li>
<li>Pekerjaan Utama : Perawat</li>
<li>Pekerjaan Sampingan : Blogger</li>
<li>Status : Menikah</li>
</ul>
</div>
</div>

Dan untuk memasang kolom widget di artikel blog, cukup menambahkan kode diatas diantara artikel blog pada modus penulisan HTML bukan Compose.

Dengan adanya kolom widget di artikel blog, setidaknya akan membuat artikel blog anda lebih berwarna dan unik. Okey, terimakasih. Jika ada yang belum mengerti silahkan tinggalkan komentar anda untuk artikel ini, Membuat Kolom Widget Di Artikel Postingan Blog