Masuk akun blogger, Template, Edit HTML. Selanjut nya Klik satu kali saja dalam kode lalu klik lagi CRTL+F cari kode ini: .
@media only screen and (max-width:768px){
.header, .banner468 {
float:none;
max-width:100%;
}
.header {
margin:0 0 12px;
}
}
@media only screen and (max-width:640px){
.tinynav {
display: inline-block;
}
#menu {
display:none;
}
}
@media only screen and (max-width:480px){
#header-wrapper {
padding:17px 10px 12px;
}
.header, .banner468 {
text-align:center;
}
#content-wrapper, .banner728, .banner728-bottom {
padding:0 10px;
}
#post-wrapper, #sidebar-wrapper {
width:100%;
max-width:100%;
float:none;
margin:12px 0 12px 0;
}
.post-container {
margin:0 0 0 0;
}
#nav ul#menu {
margin:0px 0px 0px 10px;
}
#search-form {
margin:0 10px 0 0;
}
#footer-wrapper {
padding:12px 10px;
text-align:center;
}
.footer-left, .footer-right {
float:none;
}
.tinynav {
margin:3px 0 3px 10px;
}
.comment .comment-thread.inline-thread .comment {
margin: 0 0 0 0 !important;
}
.related-post {
padding:8px;
}
.comments .comments-content {
padding:0 8px !important;
}
.comments .comments-content .comment-thread ol {
margin:8px 0 !important;
}
}
@media screen and (max-width:320px){
.img-thumbnail {
width:70px;
height:70px;
margin:0 6px 3px 0;
}
.img-thumbnail img {
width:70px;
height:70px;
}
#search-form input#search-box[type="text"] {
width:80px;
}
}
Ganti kode berikut dengan kode CSS berikut dengan Kode ini:
@media only screen and (max-width:768px){
.header, .banner468 {
float:none;
max-width:100%;
}
.header {
margin:0 0 12px;
}
}
@media only screen and (max-width:640px){
.tinynav {
display: inline-block;
}
#menu {
display:none;
}
#post-wrapper, .post-container, #sidebar-wrapper{
width:100%;
max-width:100%;
float:none;
margin:12px 0 12px 0;
}
}
@media only screen and (max-width:480px){
#header-wrapper {
padding:17px 10px 12px;
}
.header, .banner468 {
text-align:center;
}
#content-wrapper, .banner728, .banner728-bottom {
padding:0 10px;
}
#post-wrapper, #sidebar-wrapper {
width:100%;
max-width:100%;
float:none;
margin:12px 0 12px 0;
}
.post-container {
margin:0 0 0 0;
}
#nav ul#menu {
margin:0px 0px 0px 10px;
}
#search-form {
margin:0 10px 0 0;
}
#footer-wrapper {
padding:12px 10px;
text-align:center;
}
.footer-left, .footer-right {
float:none;
}
.tinynav {
margin:3px 0 3px 10px;
}
.comment .comment-thread.inline-thread .comment {
margin: 0 0 0 0 !important;
}
.related-post {
padding:8px;
}
.comments .comments-content {
padding:0 8px !important;
}
.comments .comments-content .comment-thread ol {
margin:8px 0 !important;
}
}
@media screen and (max-width:320px){
.img-thumbnail {
width:70px;
height:70px;
margin:0 6px 3px 0;
}
.img-thumbnail img {
width:70px;
height:70px;
}
#search-form input#search-box[type="text"] {
width:80px;
}
}Simpan template dan selesai.
Alasan saya menyuru anda merubah adalah karna wrok responsive template Magz citizen tidak bekerja baik pada resolusi 640. Jadi kalo menurut anda target member blog anda tidak ada yang menggunakan 640 ya tidak masalah untuk tidak memperbaiki nya,
Tapi menurut saya kita gak akan perna tau member blog kita itu datang dari ukuran resolusi apa. jadi baik ya sebagai penyedia konten kita harus terus menyediakan fasilitas sekicil apapun demi menunjang kenyamanan bersama.
sekian dan trimakasi
0 Response to "Perbaikan RESPONSIVE MAGZ CITIZEN"
Posting Komentar
Catatan:
Menulis Tag <code>
<i rel="code">Tulis kode yang sudah diparse di sini</i>, atau
[code]Tulis kode yang sudah diparse di sini[/code]
Menulis Tag <pre>
<i rel="pre">Tulis kode yang sudah diparse di sini</i>, atau
[pre]Tulis kode yang sudah diparse di sini[/pre]
Menulis Catatan (Blockquote)
<b rel="quote">Tulis catatan di sini</b>, atau
[quote]Tulis catatan di sini[/quote], atau
[blockquote]Tulis catatan di sini[/blockquote]
Memasukan Gambar
<i rel="image">Tulis URL gambar di sini</i>, atau
[img]Tulis URL gambar di sini[/img]
Memasukan Video Youtube
<i rel="youtube">Tulis URL Video Youtube di sini</i>, atau
[youtube]Tulis URL Video Youtube di sini[/youtube]
Penting:
Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.
NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!