Saturday

Membuat Empat Kolom Partner Responsive di footer

Partners di dunia blogging sangat perlu untuk meningkatkan kualitas blog anda dan akan tampak lebih profesional bila anda memiliki partners. Anda bisa mendapatkan partners anda dengan car tukar link atau semacamnya. Untuk itu saya akan sedikit menjelaskan cara membuat 4 kolom partner di footer.


Membuat Empat Kolom Partner Responsive di footer
Membuat Empat Kolom Partner Responsive di footer
kenapa saya membuat 4 kolom partner ini di bagian paling bawah ?
karena di 4 kolom ini tempat widget berbentuk gambar milik partner anda. 
trus apa masalahnya kalau di taruh di bagian atas ?
masalahnya kalau di taruh di bagian yang lain sebenarnya tidak apa apa namun berpengaruh pada kecepatan loading blog anda karena akan di load gambar gambar dari widget partner anda
contohnya seperti di bawah ini :
Membuat Empat Kolom Partner Responsive di footer
Membuat Empat Kolom Partner Responsive di footer
jadi langsung saja ikutin caranya di bawah ini :
  • pertama buka template > Edit HTML
  • taruh CSS di bawah ini di atas ]]></b:skin>
    /* patner */
    #patner {background:#0073c9;overflow:hidden;margin:0 auto;padding:15px;}
    #patner .lefts {float:left;width:25%;}
    #patner .kiri {float:left;width:25%;}
    #patner .centers {float:right;width:25%;}
    #patner .rights {float:right;width:25%;}
    #patner img{max-height: 50px;height:50px;vertical-align:center;}
    #patner .lefts .widget, #patner .kiri .widget, #patner .centers .widget,#patner .rights .widget {margin:0 10 5px 0;}
    #patner h2 {display:none;}
    @media only screen and (max-width:640px){
    #patner {padding:10px;}
    #patner .lefts, #patner .centers, #patner .kiri, #patner .rights {float:left;width:50%;max-width:50%}
    #patner .lefts .widget, #patner .kiri .widget, #patner .centers .widget, #patner .rights .widget{margin:5px 0 10px 0;}}
    @media only screen and (max-width:480px){
    #patner {padding:8px;}}
    yang berwarna merah sesuaikan dengan template anda
    • selanjutnya menaruh HTML nya di bagian paling bawah atau di atas </body> atau di atas link credit
    <aside id='patner' >
    <b:section class='lefts section' id='lefts' preferred='yes'>
    </b:section>
    <b:section class='lefts section' id='kiri' preferred='yes'>
    </b:section>
    <b:section class='centers section' id='centers' preferred='yes'>
    </b:section>
    <b:section class='rights section' id='rights' preferred='yes'>
    </b:section>
    </aside>
    <div class='clear'/>
    • terakhir simpan template 
    untuk melihat hasilnya anda bisa menaruh widget dari blog ini dengan cara :
    • tata letak/layout > tambahkan gadget > HTML/Javascript
    • kemudian Copy HTML di bawah in dan paste kan di kolom gadget
    <a href="http://kulkuly.blogspot.com"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl1uvpb47lg3gFps2ZpcwM9qkk5umwYMEC7CCRgafbkQFBv3J7nclwY1fCG8GMBElkxXKzB-fZKSsI86wqB8cS6YTDXZSHAoXG-aEBo269xk9t7SjPDlsgd8vVFpN3CKrVvUQi-Fy-A9k/s1600/kulkulay3.pngo.png' style='max-width:100%;width:100%;height:auto;' alt='kulkuly Blog'/></a>
    • kemudian SIMPAN 

    Artikel Terkait

    Membuat Empat Kolom Partner Responsive di footer
    4/ 5
    Oleh

    Berlangganan

    Suka dengan artikel di atas? Silakan berlangganan gratis via email

    -berkomentarlah dengan baik sesuai topik
    -menaruh link aktif dianggap spam