Cara Membuat Widget Footer Menu Responsive Ala Viral Go

Pada artikel kali ini saya ingin membahas tentang model atau bentuk style pada footer menu. Setiap template pasti nya masing - masing mempunyai model atau style yang berbeda - beda. Pernah kah sobat melihat footer menu dari template Viral Go? Nah.. pada kesempatan kali ini saya ingin berbagi tutorial Cara Membuat Widget Footer Menu Responsive Ala Viral Go.

Model widget footer menu ini terlihat sederhana yang dimana terdapat icon medsos di dalam nya. Untuk contoh sobat bisa melihat pada gambar di atas atau bisa kunjungi Template Viral Go. Bila sobat ingin mencoba atau mengganti footer menu yang sudah ada dan menggantikan dengan tampilan footer menu ala template viral go sobat bisa ikuti langkah - langkah sebagai berikut.

Cara Membuat Widget Footer Menu Responsive Ala Viral Go

Peratama silahkan sobat copy kode css di bawah ini lalu letakan kode tersebut di atas kode </style> pastikan juga sebelum nya di hapus terlebih dahulu kode css footer yang sudah ada di template kalian.

/* Footer Wrapper */
.row{margin:auto}
#footer{background:#fff;color:#999;margin:20px 0 0 0;border-top:1px solid rgba(0,0,0,0.05)}
#footer a{color:#999}
#footer a:hover{color:#000}
#footer .footer-menu{background:#181818;text-align:center}
#footer .footer-menu li{display:inline-block;margin-bottom:0;padding-bottom:0;text-align:left}
#footer .footer-menu li a{background:rgba(255,255,255,.1);margin:0 10px;color:#fff;font-size:12px;display:block;padding:10px 20px;border-radius:3px;text-transform:uppercase}
#footer .footer-menu li a:hover{background:#f80538;border-color:rgba(255,255,255,0);color:#fff}
#footer .footer-menu-widget i{margin:0 5px 0 0}
#footer .copyright{padding:10px 0 30px 0;font-size:14px;text-align:center;color:rgba(255,255,255,.6)}
#footer .copyright a{color:rgba(255,255,255,.6)}
#footer .copyright a:hover{color:rgba(255,255,255,1)}
#footer .container.bottomx{background:#282828;color:rgba(255,255,255,.6);width:100%}
#footer #HTML91{padding:30px 0}

Lalu selanjut nya silahkan sobat hapus ssmua kode footer menu html yang ada di template sobat. Lalu ganti dengan kode footer menu di bawah ini.

<footer class='footer' id='footer' itemscope='itemscope' itemtype='https://schema.org/WPFooter'>
<div class='container bottomx'>
<div class='row'>
<div class='footer-menu'>
<b:section class='footer-menu-widget' id='footer-menu-widget' maxwidgets='1' name='Footer Menu' showaddelements='no'>
  <b:widget id='HTML91' locked='true' title='' type='HTML' version='1'>
    <b:widget-settings>
      <b:widget-setting name='content'>&lt;ul&gt;
    &lt;li&gt;&lt;a href=&#39;https://www.facebook.com/naminakiky/&#39; rel=&quot;nofollow noopener&quot; target=&quot;_blank&quot; title=&#39;Follow our Facebook&#39;&gt;&lt;i class=&quot;fa fa-facebook&quot;&gt;&lt;/i&gt;Facebook&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&#39;#&#39; rel=&quot;nofollow noopener&quot; target=&quot;_blank&quot; title=&#39;Follow our Twitter&#39;&gt;&lt;i class=&quot;fa fa-twitter &quot;&gt;&lt;/i&gt;Twitter&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&#39;https://plus.google.com/107823238194800930250&#39; rel=&quot;nofollow noopener&quot; target=&quot;_blank&quot; title=&#39;Follow our Google+&#39;&gt;&lt;i class=&quot;fa fa-google-plus&quot;&gt;&lt;/i&gt;Google +&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&#39;#&#39; rel=&quot;nofollow noopener&quot; target=&quot;_blank&quot; title=&#39;Follow our Instagram&#39;&gt;&lt;i class=&quot;fa fa-instagram&quot;&gt;&lt;/i&gt;Instagram&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&#39;#&#39; rel=&quot;nofollow noopener&quot; target=&quot;_blank&quot; title=&#39;Follow our Pinterest&#39;&gt;&lt;i class=&quot;fa fa-pinterest&quot;&gt;&lt;/i&gt;Pinterest&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</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 class='title'><data:title/></h2>
                  </b:if>
                  <div class='widget-content'>
                    <data:content/>
                  </div>
       </b:includable>
  </b:widget>
</b:section> 
</div>
<p class='copyright'>Copyright &#169; <span id='current-year'/> <a expr:href='data:blog.homepageUrl' itemprop='creator' itemscope='itemscope' itemtype='http://schema.org/Person'><span itemprop='name'><data:blog.title/></span></a> All Right Reserved.</p>
</div>
</div>
</footer>

Dan selanjut nya save template kalian.

Bila dari segi ukuran ada yang tidak sesuai dengan template sobat, sobat bisa merubah ukuran pada css di atas. Tapi pastikan semua kode css yang menyakut footer pada css sebelum nya sudah kalian hapus semua. Biar tidak bentrok dengan css yang baru.

Bila sobat sedikit mengerti tentang koding pastinya sangat mudah untuk sobat lakukan cara menambah/mengurangi atau merubah tampilan warna agar bisa sesuai dengan template sobat.

Mungkin selanjut nya saya akan berbagi cara membuat tampilan footer menu yang lain nya dari berbagai template.

Warning! Sebelum sobat melakukan tutorial ini, harap lalukan backup terlebih dahulu untuk menjaga dari hal yang tidak kita ingin kan.

Mungkin itu saja yang bisa saya bagikan pada kesempatan kali ini. Semoga artikel ini bisa bermanfaat buat sobat yang sedang mencari Cara Membuat Widget Footer Menu Responsive Ala Viral Go. Selamat mencoba!

Share this post