Troubleshooting Windows

[Windows][bsummary]

SEO

[SEO][twocolumns]

Tips & Trick

[Tips and Trick][bigposts]

Cara Membuat Template Blog Responsive

Cara membuat template blog responsive dengan cara mudah dan simple, pelajari artikel dibawah ini. Semua blogger pasti bangga bisa membuat templat blog sendiri, meskipun sederhana tetapi sesuai dengan update mesin pencarian yaitu template blog responsive.

Cara Membuat Template Blog Responsive
Sebelum memulai membuat template, kita harus memahami struktur dasar template dari blogger. Dibawah ini adalah struktur dasar template blogger yang bisa dijadikan pedoman.
Cara Membuat Template Blog Responsive 2

Dalam kode diatas ini, Anda dapat melihat bahwa tag awal dibuat dengan kode HTML. Jika anda menggunakan tag diatas, maka akan menghasilkan halaman kosong.

Setelah memahami struktur dasar template, sekarang kita akan memulai pembuatan template blog secara sederhana.

Cara mudah membuat template blog responsive sendiri

Secara umum, layout website dibagi menjadi tiga bagian, yaitu Header, Main, dan Footer. Jadi langkah pertama kita buat tag untuk header, main, dan footer terlebih dahulu. Letakan kode dibawah ini dibawah tag <   body   >

1 Header
< div id=' header ' >

< div id=' logo '>logo< / div >
< div id=' nav '>links< / div >
< /div >
2 Main
< div id= ' main ' >
< div id= ' article ' >article< / div >
< div id= ' sidebar '>sidebar< / div >
< /div >
3 Footer
< div id= ' footer ' >
< / div >

Setelah selesai membuat tag untuk desain layout, kita akan membuat CSS, letakan kode dibawah ini diabawah kode <![CDATA[
*{margin:0px;padding:0px}
#header
{
padding:20px;
overflow:auto;
}
#main
{
padding:10px;
}
#footer
{
padding:20px;
clear:both
}
#article,#sidebar

min-height:250px;margin-bottom:20px;overflow:auto
}

Sekarang kita akan membuat menu, dibagian tag dengan menambahkan tag

< div id= ' nav ' >
<  ul  >
<  li  >link< / li  >
<  li  >link< /  li  >
<  li  >link< /  li  >
....
....
< /  u l >
< /div >

CSS untuk tag nav

ul
{
list-style:none;
width:100%
}
li
{
padding:4px;
margin-bottom:5px;
background-color:#ffffcc;
text-align:center;
color:#00000
}

Selanjutnya kita buat kode CSS agar template menjadi responsive, gunakan kode dibawah ini:
CSS @media 768px
@media only screen and (min-width: 768px){

#article
{
float:left;
width:68%;
}
#sidebar
{
float:right;
width:30%;
}
#logo
{
float:left;
width:10%;
}
#nav
{
float:right;
width:80%;
}

}

CSS @media 1140px
@media only screen and (min-width: 1140px) {

#main
{
padding:20px 40px 20px 40px;
}
} 
@media only screen and (min-width: 480px){

ul
{
float:left;
}
li
{
float:left;
width:16%;
padding:4px;
margin-right:8px
}

}
Demikian cara membuat template blog responsive. Tutorial ini hanya dasar dari template, anda bisa mengembangkanya sendiri sampai mahir dan profesional.

1 comment: