Artikel kali ini akan membahas tentang tutorial cara memasang widget 2 kolom footer tentang kami dan media sosial counter di blog. Pastinya kalian sudah mengetahui apa itu footer? nah footer ini biasanya terletak di bagian bawah blog. Selain footer, template juga mempunyai bagian lainnya yakni header, wrapper, sidebar, dan lain sebagainya.
Cara Membuat Dua Kolom Footer About dan Media Sosial Counter Di Blog
/* footer-wrapper */ #footer-wrapper { background:#0277bd; margin:0; padding:0px 0 10px; width:100%; text-align:left; color:#fff; font-size:14px; font-weight:400; } #footer-wrapper a{ color:#fff; list-style:none } #footer-wrapper a:hover,#footer-link a:hover{ color:#fff } .footer-info { padding: 20px; width: 60%; display: block; float: left; } .footer-social { padding:20px 20px 20px 40px; width: 30%; display: block; min-height: 1px; float: left; } .icon-social{background-image:url(https://1.bp.blogspot.com/-50sYrnfMaSA/VwSB-BCmTCI/AAAAAAAAATk/_7NY8NH3o2EWPxQPFa_xA0z7H2h5y56tQ/s1600/share-button.png);background-repeat:no-repeat;display:inline-block;position:relative;width:32px;height:32px;background-position:-20px -20px;border-right:1px solid rgba(255,255,255,0.1)} .social li{height:32px;margin-bottom:10px;color:#fff;position:relative;-webkit-transition: background-color 0.2s cubic-bezier(0, 0, 0.58, 1) 0s;-moz-transition: background-color 0.2s cubic-bezier(0, 0, 0.58, 1) 0s;-o-transition: background-color 0.2s cubic-bezier(0, 0, 0.58, 1) 0s;transition: background-color 0.2s cubic-bezier(0, 0, 0.58, 1) 0s;position:relative;} .social li.facebook{background-color:#516eab} .social li.twitter{background-color:#29c5f6} .twitter .icon-social{background-position:-20px -435px} .social li.google{background-color:#eb4026} .google .icon-social{background-position:-20px -280px} .social li.youtube{background-color:#CC181E} .youtube .icon-social{background-position:-20px -385px} .social li.rss{background-color:#fd7800} .rss .icon-social{background-position:-20px -125px} .social li.soundcloud{background-color:#f50} .soundcloud .icon-social{background-position:-20px -175px} .social li.instagram{background-color:#417096} .instagram .icon-social{background-position:-20px -228px} .item-count,.social-name{padding-left:5px;position:relative;top:-12px} .social span{font-family:'Open Sans',arial,sans-serif;font-weight:700;font-size:11px;color:#fff} span.social-tombol{float:right;position:absolute;border-left:1px solid rgba(255,255,255,0.1);padding:0 14px;margin-top:8px;right:0;height:16px;line-height:15px;text-transform:uppercase} .social a:after{content:"";display:block;height:32px;position:absolute;right:0;top:0;width:100%} span.hide-count{display:none} .social li:hover{background-color:#000}
Langkah berikutnya, apabila template anda memiliki footer lain atau default dari template tersebut maka silahkan ganti dan gunakan kode html di bawah ini. Sedangkan untuk template yang belum mempunyai footer maka tambahkan kode di bawah ini tepat di bawah kode penutup content wrapper.
<footer id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'> <div class='footer-info'> <div class='footer-logo-wrap'><a href='URL BLOG ANDA'><img alt='' src='>URL Gambar/Logo Blog anda'/></a></div> <div class='footer-text-wrap'>Contoh tentang website: mediababe.net merupakan website yang saling berbagi tentang pengalaman di dunia blogging yang nantinya dimana blog ini dapat membantu dan menemukan solusi yang tepat atas masalah yang mungkin anda temui kawan - kawan. Terimakasih<br/>Contact us: <a href='mailto:email anda>contact@nama blog anda</a></div> </div> <div class='footer-social'> <div class='widget LinkList' data-version='1' id='LinkList2'> <div class='widget-content social'> <ul> <li class='facebook [678]'><a href='URL Username Facebook' rel='nofollow' target='_blank' title='facebook [678]'><span class='icon-social'></span><span class='item-count'>678</span><span class='social-name'>Fans</span><span class='social-tombol'>Like</span></a></li> <li class='instagram [320]'><a href='URL Username Instagram' rel='nofollow' target='_blank' title='instagram [320]'><span class='icon-social'></span><span class='item-count'>320</span><span class='social-name'>Followers</span><span class='social-tombol'>Follow</span></a></li> <li class='twitter [320]'><a href='URL Chanel Youtube' rel='nofollow' target='_blank' title='instagram [320]'><span class='icon-social'></span><span class='item-count'>320</span><span class='social-name'>Followers</span><span class='social-tombol'>Follow</span></a></li> <li class='youtube [320]'><a href='URL Username twitter' rel='nofollow' target='_blank' title='youtube [320]'><span class='icon-social'></span><span class='item-count'>320</span><span class='social-name'>Followers</span><span class='social-tombol'>Subscribe</span></a></li> </ul> </div> </div> </div> <div class='clear'></div> </footer>
Simpan template blog anda lalu lihat hasilnya.
Demikianlah artikel cara memasang footer about us dan footer media sosial counter di bawah postingan blog. Terimakasih