Cara Membuat Tiga Kolom Widget footer di Blogger

Pernahkah Anda berpikir untuk memiliki ruang ekstra di area footer di situs Anda untuk menempatkan widget yang signifikan seperti Facebook seperti kotak, feed twitter, gadget Google Followers dan banyak lagi? Membuat footer tiga widget widgetized adalah solusi sempurna karena memungkinkan Anda menambahkan widget di situs Anda selain hanya sidebar. Sebagian besar pengembang template blogger profesional seperti Themeforest, Templateism dan banyak lagi sudah menyediakan fitur ini secara default di template mereka. Pada artikel ini, kami akan menunjukkan cara membuat footer Three Column Widgets di Blogger.

Mengapa Membuat Footer Widget?
Terkadang Anda menemukan baki samping Anda dimuat dengan berbagai widget yang tidak ingin Anda hapus karena beberapa alasan. Namun, Anda akhirnya menghapusnya agar situs Anda tetap rapi. Dengan memiliki tambahan tiga area widget di area footer pasti akan memberi Anda kelegaan dalam memindahkan widget sidebar Anda ke area widget footer, tanpa menghapusnya dari situs Anda. Inilah alasan mengapa hampir semua blog sekarang mempertimbangkan untuk memiliki area footer yang dapat diawetkan.

Bagaimana cara membuat tiga widget footer di blogger?
Untuk memasang tiga footer widget di blogger, Anda harus terlebih dahulu mendeklarasikan area widget di template blogger. Oleh karena itu, masuklah ke Blogger >> Template >> Edit HTML >> dan cari tag akhir </ body> dan tepat di atasnya paste potongan kode berikut ini:

<div id='footer-widgets-container'>
<div id='footer-widgets-containerback'>
<div class='clearfix' id='footer-widgets'>
<div class='footer-widget-box'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec1' showaddelement='yes'>
  <b:widget id='HTML15' locked='false' title='' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
</b:section>
</li>
</ul>
</div>
<div class='footer-widget-box'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec2' showaddelement='yes'>
  <b:widget id='HTML14' locked='false' title='Gallery' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
</b:section>
</li>
</ul>
</div>
<div class='footer-widget-box footer-widget-box-last'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec3' showaddelement='yes'>
  <b:widget id='HTML13' locked='false' title='About' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
</b:section>
</li>
</ul>
</div>
</div>
</div></div>
<div style='clear:both;'/>

Setelah Anda selesai dengan mendeklarasikan widget di template, hal berikutnya adalah menerapkan style sheet sehingga tidak terlihat kompatibel dengan desain Anda tetapi juga muncul dengan cara yang efisien. Jadi di template coding, cari ]]> </ b: skin> tag dan tepat di atasnya paste potongan kode berikut. Catatan: CSS ini minimal dan anda bebas mengeditnya sesuai kebutuhan anda.

#footer-widgets {
    padding: 20px 0 0 0;
}
.footer-widget-box {
    width: 300px;
    float: left;
    margin-left: 15px;
}
.footer-widget-box-last {
}
#footer-widgets .widget-container {
    color: #374142;
}
#footer-widgets h2 {
    font-family: inherit;
    text-shadow: none;
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: 4px solid #444444;
    padding-bottom: 10px;
}
#footer-widgets .widget ul {
    list-style-type: none;
    list-style: none;
    margin: 0px;
    padding: 0px;
}
#footer-widgets .widget ul li {
    padding: 0 0 9px 0;
    margin: 0 0 8px 0;
}
#footer-widgets-containerback {
    width: 980px;
    margin: auto;
}
#footer-widgets-container {
    background: #484848;
    border-top: 10px solid #66b381;
}
.footersec {
    color: #A1A6AF;
    font-size: 13px;
    line-height: 18px;
}
.footersec .widget {
    margin-bottom: 20px;
}
#footer-widgets-container { background: #484848; border-top: 10px solid #66b381; float: left; width: 100%; }
.footersec ul {
}
.footersec ul li {
}

Sekarang Anda bisa masuk ke Blogger >> Layout dan Anda akan melihat tiga area widget di bagian bawah halaman. Anda bisa menambahkan lebih banyak gadget atau bisa mengeditnya tergantung kebutuhan dan kebutuhan Anda. Selanjutnya, kunjungi blog Anda juga untuk melihat semuanya dalam live action.

Kami berharap tutorial ini akan bermanfaat bagi pengembang dan pengembang untuk memahami bagaimana hal-hal kecil ini dilakukan, karena hal-hal ini memainkan peran penting dalam menciptakan template blogger dari awal. Di MyBloggerLab, kita menggunakan dua kolom footer karena sepenuhnya bergantung pada satu kebutuhan berapa banyak ruang yang dibutuhkan untuk situsnya. Jika Anda menyukai artikel ini, bagikan dengan rekan teman dan rekan blogger Anda di Fb, Google+ atau twitter.



SUBSCRIBE TO OUR NEWSLETTER

close