Cara Membuat Footer Dua Kolom di Blog

Cara Membuat Footer Keren 2 Kolom Responsive di Template Blog



Cara Membuat dan Menambahkan Footer Keren 2 Kolom Responsive di Template Blog - Footer merupakan salah satu bagian dari blog yang letak nya di bagian bawah , mengapa kok letaknya dibawah , kenapa gak diatas , di tengah atau di samping ? sesuai namanya kita udah tahu kalau footer itu pasti letaknya dibawah [ footer artinya kaki ] .

  Nah , bagi sahabat blogger yang ingin menambahkan footer sendiri di template blog anda , saya punya tutorialnya nih untuk sahabat blogger yang suka coding , footer ini bukan footer sembarangan lho : karena footer ini telah saya design responsive , sehingga footer ini dapat menyesesuaikan layar komputer . selain responsive footernya juga valid html , css3 dan tentunya juga fast loading ( wes pokoe jos pakde :)  )

  Nantinya footer yang akan saya buat bentuknya kurang lebih seperti pada gambar dibawah ini :

Cara Membuat Footer Keren 2 Kolom Responsive di Template Blog

Gimana sih Cara Menambahkan Footer 2 Kolom Sendiri di Template Blog ?

Masuk dulu ke akun blogger sobat , kemudian masuk pada halaman editor template
Copy Css berikut diatas kode  ]]></b:skin> atau </style>
#footernya-masyadi{width:100%;background:#111 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj39T55NJPKnDZh7vDzl2sITRf7EnFlSga6n8623OSKcmVATkSFMBzOfYO_Ch9xO22pFSwU0Jn8CDlqZBGlANR_gQec36wuj6yheWrUtxqcsd7ubwcI_Nrzb0NthAZJouMG67Yq9-w64yc/s1600/footer.jpg) repeat-x top;margin:0 auto;text-align:left;border-top:7px solid #1658A0;overflow:hidden}
#footernya-masyadi a{color:#9c9c9c}
#footer-inners{overflow:hidden;padding:10px 20px}
.footer .widget{padding:0 1px}
.footer .widget-content{padding:0}
.footer li{list-style:none;border-bottom:1px dotted #666;padding:3px 0}
.footer h4{font-size:150%;font-weight:400;color:#fff;font-family:Oswald,Arial,Sans-serif;text-transform:uppercase;padding-bottom:10px}
#footer-left{width:34.5%;float:left;overflow:hidden}
#footer-right{float:right;width:64.5%;overflow:hidden}
@media only screen and (max-width:700px){
.footer{width:100%!important;float:none!important}
}
Jika di template sobat udah ada footernya , maka hapuslah footer yang lama , namun jika sobat belom mempunyai footer di blog sobat , pasang html ini diatas kode </body> { intinya sobat harus bisa menyesuaikan dengan template sobat }
<div class='clear'/>
<footer id='footernya-masyadi'>
<b:section class='footer' id='footer-left' showaddelement='yes'/>
<b:section class='footer' id='footer-right' showaddelement='yes'/>
</footer>
Silahkan save template sobat dan lihat hasilnya
Jika sobat pandai dalam hal design , silahkan modifikasi footer tersebut menjadi lebih bagus lagi . Untuk memodifikasinya sobat bisa memasukan css dan htmlnya , lebih bagus lagi kalau di bumbui dengan java script hehhehe . ok sekian dulu tutorial cara membuat footer yang keren seperti blognya mas yadi ini , jika sobat tertarik dengan footer milik saya , silahkan praktekan cara diatas

http://www.masyadi.com/2014/08/cara-membuat-footer-keren-2-kolom-responsive.html

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: