×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

Cara Membuat Tiga Layout Widget Dibagian Footer Blog

February 26, 2020   • Comment

Disini saya akan membagikan sebuah tutorial membuat 3 layout widget dibagian footer blog, tentunya 3 layout widget ini responsive ke semua device atau perangkat.

Memiliki 3 layout widget dibagian footer memanglah sangat menarik, karena biasanya sebuah website yang menggunakan 3 layout widget dibagian footer adalah website website besar atau forum. Namun sekarang bukan hanya website website besar atau forum yang dapat menggunakan 3 layout widget dibagian footer kini website sederhanapun dapat memilikinya.

Nah langsung aja kita ke tutorial bagaimana cara membuat tiga (3) layout widget dibagian footer blog,



Cara Membuat Tiga (3) Layout Widget Dibagian Footer Blog
Baca Juga : Cara Mendesain Tiga Layout Widget

1. Pertama, login dulu ke Blogger,
2. Pada dashboard Blogger pilih Tema ⇒ Edit HTML,
3. Kemudian, copykan kode HTML dan CSS satu paket dibawah ini, lalu letakkan tepat dibawah kode footer template blog yang kamu pakai, kurang lebih contoh kodenya seperti ini <footer..... atau <footer> dan apabila tidak ketemu juga cari kode yang seperti ini <div id='footer'>, kurang lebih kode footer template itu mirip mirip cari aja yang seperti itu,
<style type='text/css'>
#footer{background-color:rgb(36,32,56);background-image:url(https://1.bp.blogspot.com/-vVbPZqxIHsQ/W_qk1sN8DXI/AAAAAAAAEPg/rn6mDjaFqT8BHh8yuxPWAI5LJxyg3GL2wCLcBGAs/s1600/pattern.png);-webkit-box-shadow:0 1px 2px rgba(12, 12, 12, 0.59), 0 -2px 4px rgba(12, 12, 12, 0.3);box-shadow:0 1px 2px rgba(12, 12, 12, 0.59), 0 -2px 4px rgba(12, 12, 12, 0.3);color:#fff;padding:0;margin:10px 0 0}
#footer h2:after{content: '';display: inline-block;position: absolute;height: 20px;top: 0;margin: 1px 0 12px 10px;width: 100%;background: url(https://4.bp.blogspot.com/-R2WTW6O9E1o/VX7dqIGT1eI/AAAAAAAACc4/pyvQDMMLX3E/s1600/repeat-bg.png)repeat;}
.footer-sections {overflow: hidden;margin: 0 auto;padding: 50px 120px;}
.sect-left{display:inline-block;float:left;width:31.655%;margin-right:25px}.sect-left:nth-child(3){margin-right:0}
.sect-left h2{position: relative;background:none;overflow: hidden;padding: 0 0 10px 0;color: #fff;font: 700 14px "Roboto Slab",sans-serif;display: inline-block;-webkit-flex: 0 auto;-ms-flex: 0 auto;flex: 0 auto;margin: 0;text-transform: uppercase;font-size: 1rem;
font-weight: 700;white-space: nowrap;width: 100%;}
.sect-left h2 a{color:#E4E4E4}
a.murub{font-size: 14px;text-decoration:none;-webkit-transition:all .1s ease-out;-moz-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-out}
a.murub:hover{color:#fff;text-shadow:0 1px 0 #0972cd,0px 0 3px #0972cd,0px 0 5px #0972cd,0px 0 30px #0972cd,0px 3px 50px #0972cd}
.aa{background: linear-gradient(to right,rgb(36,32,56),rgb(36,32,56),rgb(36,32,56),rgb(36,32,56),#007bfd,rgb(36,32,56),rgb(36,32,56),rgb(36,32,56),rgb(36,32,56));background-size: 400% 400%;-webkit-animation: Gradient 2s ease infinite;-moz-animation: Gradient 2s ease infinite;animation: Gradient 2s cubic-bezier(0.47, 0, 0.75, 0.72) infinite;}
.footer-contact p a{color:#fff !important;}
.footer-contact p {clear: both;color: #fff;overflow: hidden;font-size: 14px;font-weight: normal;line-height: 22px;}
.footer-contact p {margin-bottom: 13px;margin-top: -5px;padding-bottom: 13px;border-bottom: 1px solid #ccc;}
.footer-contact label {color: #fff;float: left;font-size: 14px;font-weight: normal;margin-right: 20px;max-width: 80px;display: inline-block;}
.footer-contact:last-child p.web {border: medium none;margin: 0;padding: 0;}
.sasabilo{padding: 1px 4px;float:right;color: #fff;width: 50px;text-align: center;}
@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
@media only screen and (max-width:1099px){.sect-left{width:31.55%}.footer-sections{padding:30px}}
@media only screen and (max-width:979px){.sect-left{width:100%;margin-right:0;margin-bottom:20px}.sect-left:last-child{margin-bottom:0}.footer-sections{padding:30px}}
<style>
<div id='footer' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
    <div class='footer-sections row'>
      <b:section class='sect-left' id='footer-sec1' maxwidgets='3' name='Widget 1' showaddelement='yes'>
        <b:widget id='HTML991' locked='false' title='KONTAK' type='HTML' version='1'>
          <b:widget-settings>
            <b:widget-setting name='content'>Widget Kontak #1
</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2><i class='fa fa-coffee'/> <data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
        </b:widget>
       </b:section>
      <b:section class='sect-left' id='footer-sec2' maxwidgets='3' name='Widget 2' showaddelement='yes'>
        <b:widget id='HTML992' locked='false' title='Navigasi' type='HTML' version='1'>
          <b:widget-settings>
            <b:widget-setting name='content'>Widget Navigasi #2
</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2><i class='fa fa-cogs'/> <data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
        </b:widget>
      </b:section>
      <b:section class='sect-left' id='footer-sec3' maxwidgets='3' name='Widget 3' showaddelement='yes'>
        <b:widget id='HTML993' locked='false' title='Newsletter' type='HTML' version='1'>
          <b:widget-settings>
            <b:widget-setting name='content'>Widget Newsletter #3</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2><i class='fa fa-cogs'/> <data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div> 
</b:includable>
        </b:widget>
      </b:section>
  </div></div>

4. Setelah itu simpan atau save template tersebut.

Jika kamu ingin merapikan tata letak tiga layout tersebut copy dan pastekan kode CSS layout dibawah ini dan letakkan tepat diatas  kode </b:template-skin> dan agar tidak bentrok dengan widget footer bawaan template blog kamu, sebaiknya dihapus terlebih dahulu CSS maupun HTMLnya.
body#layout div#footer-sec1 {width: 27.3% !important;float: left !important;}
body#layout div#footer-sec2 {width: 27.3% !important;float: left !important;}
body#layout div#footer-sec3 {width: 27.3% !important;float: left !important;}

Akhir Kata
Sekian tutorial membuat 3layout widget dibagian footer blog yang dapat saya bagikan, jika ada kesalahan atau yang tidak dapat kamu pahami silahkan berkomentar dibawah atau langsung menghubungi admin melalui contact form yang tersedia diblog ini, Dan Semoga Bermanfaat :D.

Creativity of codes and exploiting, with code we can do something fun.
Facebook Instagram Twitter
Show Comments!
Hide comments

0 Response to "Cara Membuat Tiga Layout Widget Dibagian Footer Blog"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

© Copyright 2020 Anirock Site - All Rights Reserved Created With