Cara Buat Footer 2 Kolom Responsive Blogger




Cara Buat Footer  2 Kolom Responsive  Blogger

Cara Buat Footer  2 Kolom Responsive  Blogger
Bagi anda yang ingin membuat kolom footer di Tempalte Blog anda bisa membaca penjelasan saya pada hari ini. Untuk penjelasan Footer merupakan salah satu bagian dari blog yang letak nya pada bagian bawah postingan .
Footer di bawah ini saya ambil dari mas yadi, mungkin anda sudah mengenal masyadi.

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

Cara Membuat Footer Keren 2 Kolom Responsive di Template Blog

Foote ini adalah footer yang sudah responsive dan keren lagi, dan footer ini selain responsive footernya juga valid html , css3 dan tentunya juga fast loading bisa menyesuaikan di layar computer.

Cara Menambahkan Footer 2 Kolom di Template Blog 

  1. Masuk dulu ke akun blogger Anda , selanjtnya anda bisa masuk pada halaman Editor Template
  2. Kemudian anda cari code ]]></b:skin> atau </style> agar mempermudah pencarian anda tekan CTRL+ F.
  3. Dan langsung anda Copy Css di bawah ini diatas kode merah.
    #footernya-masyadi{width:100%;background:#111 url(http://3.bp.blogspot.com/-XH2hBNMtXBA/U6_EpW3r0gI/AAAAAAAAAJk/mQFHapyZWj8/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}
    }
    
  4. Jika pada Template anda sudah mempunyai kolom footer , anda bisa menghapus footer yang lama. Tetapi jika anda belum mempunyai footer di blog anda , maka anda pasang html ini diatas kode </body>.
    <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> 
    
  5. Selanjutnya anda save template/ simpan dan lihat hasilnya.
Mungkin sampai disi dulu penjelasan nya pada hari ini mengenai cara menambahkan footer 2 kolom di template blog. jika anda tertarik dengan footer milik saya , maka silahkan anda ikuti langkaha-langkah yanmg di atas tadi nya. semoga bermanfaat untuk anda..selamat mencoba.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect