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 sajian dari template Viral Go? Nah.. pada kesempatan kali ini saya ingin mengembangkan 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.
Cara Membuat Widget Footer Menu Responsive Ala Viral Go
Peratama silahkan sahabat copy isyarat css di bawah ini kemudian letakan isyarat tersebut di atas isyarat </style> pastikan juga sebelum nya di hapus terlebih dahulu isyarat 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 isyarat footer sajian html yang ada di template sobat. Lalu ganti dengan isyarat 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'><ul> <li><a href='https://www.facebook.com/naminakiky/' rel="nofollow noopener" target="_blank" title='Follow our Facebook'><i class="fa fa-facebook"></i>Facebook</a></li> <li><a href='#' rel="nofollow noopener" target="_blank" title='Follow our Twitter'><i class="fa fa-twitter "></i>Twitter</a></li> <li><a href='https://plus.google.com/107823238194800930250' rel="nofollow noopener" target="_blank" title='Follow our Google+'><i class="fa fa-google-plus"></i>Google +</a></li> <li><a href='#' rel="nofollow noopener" target="_blank" title='Follow our Instagram'><i class="fa fa-instagram"></i>Instagram</a></li> <li><a href='#' rel="nofollow noopener" target="_blank" title='Follow our Pinterest'><i class="fa fa-pinterest"></i>Pinterest</a></li> </ul></b:widget-setting> </b:widget-settings> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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 © <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 isyarat 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 biar sanggup sesuai dengan template sobat.
Mungkin selanjut nya saya akan mengembangkan cara menciptakan tampilan footer sajian 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!