Langsung saja simak dibawah ini langkah demi langkah buat kolom footer untuk membangun template blog menjadi keren.
Cara Membuat Kolom di Template Blog
Untuk cara membuatnya silahkan ikuti langkah-langkah sebagai berikut:
1.Buka dan Login ke blogger
2. Pilih Tema > Edit HTML.
3. Jika sudah, Cari arahan ]]></b:skin> (Gunakan CTRL + F untuk lebih gampang pencarian).
4. Kemudian tambahkan semua arahan di bawah ini diatas atau sebelum arahan ]]></b:skin>
#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}
clear:both;
}
.footer-column {
padding: 10px;
}
5. Jika sudah lalu cari salah satu arahan berikut, (Gunakan CTRL + F kembali untuk pencarian). Cari salah satu arahan saja.
<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>
atau
<div id='footer'>
<b:section class='footer' id='footer' showaddelement='yes'/></div>
6. Jika ketemu kodenya, tambahkan arahan dibawah atau sehabis arahan <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' />
<div id='footer-column-divide'>
<div id='footer1' style='width: 50%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 50%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>
7. Jika sudah Klik Preview atau Pratinjau,jika tidak muncul eror silahkan simpan tema .
Dan sesuai banyaknya permasalahan yang nantinya juga perkara akan menjadi sebuah ke indahan jikalau mengubah dan membenahinya dengan benar juga teliti.
Berikut ini aku akan memperlihatkan juga cara menciptakan Footer 3 Kolom di tema Blogger.
Kita eksklusif saja ya sob, silahkan ikuti langkah-langkahnya berikut ini:
1. Seperti biasa Login ke blogger.
2. Klik Template > Edit HTML.
3. Cari code ]]></b:skin> gunakan Ctrl+f untuk memper cepat pencarian.
4. Copy paste arahan di bawah ini lalu letakkan di atas arahan ]]></b:skin> #footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}
5. Selanjutnya cari code <div id='footer'> atau id='footer'.
6. Lalu copy lagi code di bawah ini letakkan sempurna di bawah code <div id='footer'> atau id='footer' tadi. <div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#ffae00' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding:
10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>
7. Jika sudah simpulan simpan dan lihat hasilnya.
Bagaimana ? emang agak rumit sebenarnya,jika usang dan usang melihat sebuah arahan kode web maupun basis html css dasar akan menciptakan anda menjadi paham perihal isi isi di dalamnya.
Cukup hingga disini cara menciptakan kolom template blogger dengan cara aku agar pembaca sanggup lebih paham dan menikmati akibatnya .selamat mencoba agar berhasil.
Tidak ada komentar:
Posting Komentar