Selasa, 07 Mei 2013

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

Membuat Kolom Widget Di Artikel Postingan Blog

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

Membuat Kolom Widget Di Artikel Postingan Blog Rating: 4.5 Diposkan Oleh: Ana Sriwahyuni

2 komentar:

  1. Mudah juga Mbak, tinggal salin kodenya saja hehe :)

    Thks Mbak tutornya :)

    BalasHapus
  2. makasih mbak kode nya, lsg dipake :D

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia