Cara Buat Footer 2 Kolom Responsive Blogger Cara Buat Footer 2 Kolom Responsive Blogger - mizipediacom mizipediacom: Cara Buat Footer 2 Kolom Responsive Blogger










KATEGORI

LIVE TV

Iklan Semua Halaman

Cara Buat Footer 2 Kolom Responsive Blogger

Jumat, 10 Maret 2017




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.
Lihat Juga