Cara Menciptakan Widget Footer Sajian Responsive Ala Viral Go

Pada artikel kali ini saya ingin membahas wacana model atau bentuk style pada footer menu. Setiap template niscaya nya masing - masing memiliki model atau style yang berbeda - beda. Pernah kah sahabat 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 referensi sahabat sanggup melihat pada gambar di atas atau sanggup kunjungi Template Viral Go. Bila sahabat ingin mencoba atau mengganti footer hidangan yang sudah ada dan menggantikan dengan tampilan footer hidangan ala template viral go sahabat sanggup ikuti langkah - langkah sebagai berikut.

Cara Membuat Widget Footer Menu Responsive Ala Viral Go

Peratama silahkan sahabat 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 sahabat 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, sahabat 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 sahabat sedikit mengerti wacana koding pastinya sangat gampang untuk sahabat lakukan cara menambah/mengurangi atau merubah tampilan warna semoga 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 sahabat 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 sahabat yang sedang mencari Cara Membuat Widget Footer Menu Responsive Ala Viral Go. Selamat mencoba!

Bagikan Artikel ini