Cara Menciptakan Widget Footer Sajian Responsive Ala Viral Go

Cara Membuat Widget Footer Menu 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 sahabat melihat footer sajian 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 sajian ini terlihat sederhana yang dimana terdapat icon medsos di dalam nya. Untuk pola sahabat sanggup melihat pada gambar di atas atau sanggup kunjungi Template Viral Go. Bila sahabat ingin mencoba atau mengganti footer sajian yang sudah ada dan menggantikan dengan tampilan footer sajian ala template viral go sahabat sanggup ikuti langkah - langkah sebagai berikut.

Peratama silahkan sahabat copy arahan css di bawah ini kemudian letakan arahan tersebut di atas arahan </style> pastikan juga sebelum nya di hapus terlebih dahulu arahan 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 arahan footer sajian html yang ada di template sobat. Lalu ganti dengan arahan footer sajian 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 arahan css yang menyakut footer pada css sebelum nya sudah kalian hapus semua. Biar tidak bentrok dengan css yang baru.

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

Mungkin selanjut nya saya akan menyebarkan cara menciptakan tampilan footer sajian yang lain nya dari banyak sekali 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!