Cara Menciptakan Widget Footer Sajian Responsive Ala Viral Go

Pada artikel kali ini saya ingin membahas perihal model atau bentuk style pada footer menu. Setiap template niscaya nya masing - masing memiliki model atau style yang berbeda - beda. Pernah kah teman melihat footer hidangan dari template Viral Go? Nah.. pada kesempatan kali ini saya ingin menyebarkan tutorial Cara Membuat Widget Footer Menu Responsive Ala Viral Go.

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

Cara Membuat Widget Footer Menu Responsive Ala Viral Go

Peratama silahkan teman copy instruksi css di bawah ini kemudian letakan instruksi tersebut di atas instruksi </style> pastikan juga sebelum nya di hapus terlebih dahulu instruksi 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 teman hapus ssmua instruksi footer hidangan html yang ada di template sobat. Lalu ganti dengan instruksi footer hidangan 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, teman sanggup merubah ukuran pada css di atas. Tapi pastikan semua instruksi css yang menyakut footer pada css sebelum nya sudah kalian hapus semua. Biar tidak bentrok dengan css yang baru.

Bila teman sedikit mengerti perihal koding pastinya sangat gampang untuk teman lakukan cara menambah/mengurangi atau merubah tampilan warna biar sanggup sesuai dengan template sobat.

Mungkin selanjut nya saya akan menyebarkan cara menciptakan tampilan footer hidangan yang lain nya dari aneka macam template.

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

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