Menambahkan Widget Footer di Blog

Assalamu'alaikum, selamat sore bagi pembaca setia Download Ilmu - RizkyYNWA.blogspot.com, setelah lama tidak update tentang tutorial blog, kali ini Download Ilmu kembali hadir dengan post tutorial blogger, tutorial blogger kali ini berjudul Menambahkan Widget Footer di Blog. 


Sebenarnya footer adalah widget yang sudah tersedia jika anda menggunakan template asli bawaan blogger, tetapi jika anda menggunakan template yang anda buat sendiri ataupun template dari luar blogger mungkin belum memiliki fitur widget footernya. Bagi anda yang belm tahu caranya silahkan simak tutorial berikut ini.

  1. Login dengan akun Blogger sobat Disini
  2. Klik tab Template
  3. Klik edit html
  4. jangan lupa centang expand template widget
  5. Cari Kode  ]]></b:skin> 
CTRL+F / F3
  6. Copy Paste Code Di Bawah ini :D di Atas Kode Tadi ]]></b:skin> 

/* Start HTML http://seallinfo.blogspot.com/ */#lower-wrapper{ -moz-box-shadow:0 0 7px rgba(0,0,0,0.5); background:#fff; margin:10px auto 0;  padding:5px 0px 0px 0px; width:1000px;  border:1px solid #dbe1e6}#lowerbar-wrapper{ color:#333;  float:left;  margin:0px auto auto;   padding-bottom:20px;  width:332px;  text-align:justify;  font-size:100%;  line-height:1.6em;  word-wrap:break-word; /* fix for long text breaking sidebar float in IE */ overflow:hidden; /* fix for long non-text content breaking IE sidebar float */}.lowerbar{margin:0; padding:0}.lowerbar .widget{ border-right:1px solid #bbb;border-bottom:1px solid #bbb; background-color:#fff;margin-bottom:10px}.lowerbar .widget-content{padding:5px 5px 5px 15px}.lowerbar h2{background:none repeat scroll 0 0 #1C262F;color:#FFF;text-align:center; padding:4px 10px; margin:0; font-size:8.5pt; font-weight:bold; text-transform:uppercase}.main .Blog{border-bottom-width:0}.lowerbar ul{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;list-style-type:none}.lowerbar li{margin:0px 0px 2px 0px;padding:0px 0px 1px 20px;border-bottom:1px dashed #dbe1e6;background:url(http://1.bp.blogspot.com/-PzPP314ZtGE/TgX2iGxUcKI/AAAAAAAAEio/-xqTO1ZeCKo/s1600/bullet-point-image-1.png) no-repeat left}.lowerbar a{color:#333;font-size: 12px; font-family:arial;text-decoration:none;text-decoration:none}.lowerbar a:hover{color:#A61111; text-decoration:none}.lowerbar a:visited{color:green; text-decoration:none} /* End HTML http://seallinfo.blogspot.com/ */


7. Cari KodeCari kode  </body> . Cara Mencarinya sama dengan cara Nomer4 Tadi :D \
8. Copy Paste Kode Di Bawah ini di atas  kode tadi  </body> 


<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
8. Kllik pratinjau untuk melihat apakah kode tidak error, setelah tidak ada yang error klik save template.
 
Nah begitulah cara untuk menambah widget footer di blog. sekian, wassalamu'alaikum
 
 

CONVERSATION

3 komentar:

Silahkan berkomentar sesuai kesan anda, tetapi jangan tinggalkan norma-norma kesopanan. Syukron