Design, Tutorial and Tips Trik Blogger | Lostsector

Cara Membuat Widget 5 Kolom di Bagian Footer Untuk Blogger

Posted: 13 May 2013 11:26 AM PDT

Tutorial kali ini sebenarnya ide awalnya berasal dari salah seorang pengunjung setia blog ini (alfizar zakky) yang meminta untuk dibuatkan tutorial tentang Bagaimana Cara Membuat Widget 5 Kolom di Bagian Footer Untuk Blogger. Dan sebagai apresiasi saya terhadap permintaan ini, maka posting ini pun tercipta.

Sekilas mengenai Widget 5 Kolom Footer

Widget ini pada umumnya sama seperti widget blogger lainnya, namun keunggulan yang dimiliki yakni terlihat lebih unik dan menarik. Untuk lebih jelasnya, bisa anda lihat pada gambar di bawah ini.

Cara Menambahkan Widget 5 Kolom Ke Blogger

Step#1. Login ke akun blogger anda. Pada dashboard, pilih Template dan Edit HTML. Copy kode di bawah ini dan tempatkan sebelum tag ]]></b:skin> atau sesudah tag <b:skin><![CDATA[.

#lsc-footer{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ffZgH9cDUkY78m-Nru1X-N3b8Ea30_XPb9F7dCbgVV-0vrQG8Uw9NXJwSAekJ0a52Woq0AzvHMOJVwnTKtOPwENko4gfQpu9eH3BJ7ly-E8nGmRb9Z8LGMkfZ3u7c-AXX3LgCDLOE5s/s150/body.gif") repeat;word-wrap: break-word;border-bottom:1px solid #000;border-top:2px solid #111;width:980px;margin:0px auto 10px auto;padding:8px;}  #lscboxes{height:210px;overflow:hidden;margin:0px;position:relative;width:948px;background:; border:0px solid #333; padding:5px 5px;}  #lscboxes ul{ margin-left: 10px; padding: 0pt; position: relative; list-style-type: none; z-index: 1;  width: 100%; }  #lscboxes ul li{ overflow: hidden; float: left; width: 180px; height: 180px; border-top:0px solid #333; margin-right:6px; padding:2px 0px 4px 0px; }  #lscboxes ul li:hover{ border-bottom:1px solid #084B8A; }  #lscboxes img{width:150px;height:100px; padding:2px; border: 1px solid #A3A3A3; border-radius:10px; -moz-border-radius:10px;  margin-top:0px;}  #lscboxes img:hover{border: 1px solid #c5c5c5; }  .lscbody img{float:left}  .lscbody {position:relative;margin:0 5px 0 5px;width:170px;height:210px;display:inline;float:left;color:#c4c4c4}  .lscbody h3{padding:5px 0;font-size:12px;font-weight:bold; font-family: verdana, sans-serif, arial; margin:0;}  .lscbody h3 a:link,.mbtbody h3 a:visited{color:rgb(134, 134, 134);}  .lscbody h3 a:hover{color:#c5c5c5}  .lscbody p{margin:0; padding:0 0;color:#cdcdcd;font:10px normal verdana, sans-serif, Arial;}  .Fadein3 img {  filter:alpha(opacity=80);  opacity: 0.8;  border:0;}  .Fadein3:hover img {  filter:alpha(opacity=100);  opacity: 1.0;  border:0;}  #Feed4 ul{margin: 20px 0; padding: 0;list-style: none;}  #Feed4 ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;margin: .2px 0;}  #Feed4 ul li:first-child {border-top: none;}  #Feed4 ul li:last-child {border-bottom: none;}  #Feed4 ul li a {padding: 5px;display: block;color: #888;text-decoration: none;}  #Feed4 ul li a:hover {color: #CCC;border: 1px solid #111;border-right: 1px solid #353535;border-bottom: 1px solid #353535;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}

Jangan simpan template dulu, tapi lanjutkan ke tahap selanjutnya.
Step#2. Salin kode HTML berikut di bagian footer atau tepat di atas tag penutup (</div>) blog-outer atau content-wrapper atau tag penutup body.

<div id='lsc-footer'>  <center>  <div id='lscboxes'>  <div style='visibility:visible;overflow:hidden;position:relative;z-index:2;left:0px;width:100%;'>  <ul>  <li>  <div class='lscbody'>  <a class='Fadein3' href='#'>  <img height='100' src='#image' alt="" title="" width='170'/>  </a>  <div class='clear'></div>  <h3><a href='#'>Title Post</a></h3>  <p>Short Descriptions</p>  </div>  </li>  <li>  <div class='lscbody'>  <a class='Fadein3' href='#'>  <img height='100' src='#image' alt="" title="" width='170'/>  </a>  <div class='clear'></div>  <h3><a href='#'>Title Post</a></h3>  <p>Short Descriptions</p>  </div>  </li>  <li>  <div class='lscbody'>  <a class='Fadein3' href='#'>  <img height='100' src='#image' alt="" title="" width='170'/>  </a>  <div class='clear'></div>  <h3><a href='#'>Title Post</a></h3>  <p>Short Descriptions</p>  </div>  </li>  <li>  <div class='lscbody'>  <a class='Fadein3' href='#'>  <img height='100' src='#image' alt="" title="" width='170'/>  </a>  <div class='clear'></div>  <h3><a href='#'>Title Post</a></h3>  <p>Short Descriptions</p>  </div>  </li>  <li>  <div class='lscbody'>  <a class='Fadein3' href='#'>  <img height='100' src='#image' alt="" title="" width='170'/>  </a>  <div class='clear'></div>  <h3><a href='#'>Title Post</a></h3>  <p>Short Descriptions</p>  </div>  </li>  </ul>  </div>  </div>  </center>  </div>

Note

Ganti # dengan URL postingan anda
Ganti Title Post dengan judul posting anda
Ganti #image dengan URL gambar anda
Ganti Short Description dengan deskripsi singkat tentang posting anda

Jangan simpan template anda dulu, namun terlebih dahulu klik "Pratinjau". Setelah anda merasa bahwa penempatan, ukuran lebar dan pengaturan lainnya sudah anda anggap tepat, baru Simpan Template Blogger anda.