Buat Template Anda Lebih Responsive

Buat Template Anda Lebih Responsive - Ketika kita berbicara tampilan blog dalam sebuah ponsel atau tablet, maka kita harus merancang template agar sesuai pada kebanyakan model Browsing. Hal ini karena tampilan blog sangat menentukan akan kenyamanan pengunjung berselancar pada blog kita ketika mereka menggunakan ponsel atau tablet. Jadi, kita tidak dapat menghindari kebutuhan untuk menciptakan pengalaman berselancar yang indah bagi pengunung. Jika ini tidak dilakukan maka, kemungkinan besar blog anda akan jenuh untuk dikunjungi orang.

Ketika saya mengatakan bahwa Anda harus memiliki template responsif untuk blogger, itu berarti bahwa template harus disesuaikan dengan berbagai mode browsing dan kebanyakan dari semua itu harus menyediakan jumlah yang setara dengan kenyamanan dan kemudahan untuk semua bentuk template browsing. Solusi yang paling tepat adalah menyesuaikan ukuran template secara otomatis untuk ukuran ponsel atau tablet. Semua ini agar penjelajahan dunia maya lebih menarik dan dapat menmapilkan pengalaman baru dari apa yang disuguhkan.

Sekarang mari kita sesuaikan ukuran template untuk ponsel dan tablet. Ikuti langkah berikut ini.
Log in ke blogger
Klik Template
Masukkan kode berikut di atas kode ]]></b:skin>

@media screen and (max-width:1230px){#header{float:none;  max-width:none;  text-align:center}
#header-inner{margin-bottom:0px}
#header h1{margin-right:0px}
#header p.description{margin:0}
#header-right{position:relative;  right:0;  text-align:center;  margin:0 !important}
.header-right-inner{margin:0 30px ! important}
.main-nav-top{clear:both; float:none}
.main-nav-main{margin:10px 0 0 0}
#nav-search{float:none;  margin:0}
}
@media screen and (max-width:960px){.sidebar-wrapper{position:relative; top:auto;  right:auto;  clear:both;  left:auto;  width:auto;  margin:0 -15px;  background:none}
.subscribe_outer{margin:0 -20px}
.main-wrapper{margin-right:0;  width:100%;  min-height:0px}
.ct-wrapper{padding:0 15px}
#content{padding:5px;  clear:both;  border-radius:0}
.sidebar-wrapper .sidebar{margin:15px}
.sidebar-wrapper .widget{border:none;  margin:0px auto 10px auto;  padding:10px 20px}
}
@media screen and (max-width:768px){.header-wrapper{margin-right:0;  min-height:0;  width:100%}
#header{text-align:center;  width:100%; max-width:none}
#header-inner{margin:30px 0 0}
#header h1{font-size:35px}
.main-nav-top, .main-nav-main,
.main-nav-top ul, .main-nav-main ul{text-align:center}
.related-post{width:auto}
#comment-editor{margin:10px}
.footer{margin:15px;  width:auto}
.footer-credits .attribution{display:none}
}
@media screen and (max-width:500px){#header img{width:100%}
}
@media screen and (max-width:420px){#header h1{font-size:30px;  margin:10px}
.main-nav-main ul li{margin:4px 10px; float:none}
.comments .comments-content .datetime{display:block;  float:none}
.comments .comments-content .comment-header{height:70px}
}
@media screen and (max-width:320px){.ct-wrapper{padding:0}
.footer .footer-inner{padding:45px 10px 10px 10px}
.comments .comments-content .comment-replies{margin-left:0}
}

Selanjutnya klik Simpan Template
Selesai dan lihat hasilnya
Selamat mencoba dan sukses selalu

Source Code: Pro Hacker Tools

"keep spirits and do the best"