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.
Pada dasarnya banyak sekali cara membuat footer di blog pada internet, mulai dari membuat footer 3 kolom, footer 1 kolom dan juga membuat menu di dalam footer yang dimana biasanya pada footer tersebut diletakan menu about us, contact us, privacy polict, disclaimer dan yang lainya. Footer juga bisa kita gunakan untuk meletakan credit link dimana jika anda seorang webmaster atau designer web pastinya kalian akan memberikan sebuah tanda untuk produknya yakni meletakan sebuah link yang berisikan url si pembuat.
Namun berbeda dengan hal itu, kali ini saya akan memberikan tips cara membuat about us dan counter social media di footer seperti gambar pada berikut ini.
Kira-kira desain footer tentang kami dan sosial media counter pada footer wrappernya akan seperti gambar diatas. footer diatas sudah didesain dengan jumlah kolom hanya 2 dimana kita bisa meletakan tentang website di bagian kiri dan counter media sosial di sebelah kanan.
Jika anda berminat memasang footer 2 kolom di blogspot anda maka ikuti langkah cara pembuatanya pada berikut ini.
Cara Membuat Dua Kolom Footer About dan Media Sosial Counter Di Blog
Langkah pertama, silahkan anda login dan masuk ke dashboard blogger anda. Kemudian pilihlah menu Tata Letak > Edit HTML.
Silahkan anda salin kode css pada berikut ini tepat diatas kode </style> atau ]]></b:skin>.
/* 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
