Apakah Blogger Anda Sudah Responsive?

Rifki Andrean    6/15/2014    Blogging    Comment   

----YOU ADS---

----YOU ADS---

Responsive Sample

Apakah Blogger Anda Sudah Responsive? Itulah pertanyaan MangKompi pada pembaca artikel ini, apabila anda tidak mengetahui apa itu responsive. Responsive adalah bisa diartikan pleksibel dalam resolusi yang ditampilkan. Maksudnya apabila anda membuka blog anda melalui handphone atau mobile. Apakah tampilannya mempunyai pleksibel menuruti layar mobile?.
Contohnya seperti ini :

Blogger mangkompi.blogspot.com

Coba di percobaan dalam mobile anda. Ada pertanyaan? blogger kami sudah dilengkapi responsive.

Bagaimana caranya supaya blog anda responsive?

Blogger anda bisa dilengkapi responsive dengan code :

/* RESPONSIVE */
@media screen and (max-width:1024px) {
#outer-wrapper, #outer-wrapper2 {width:95%;}
#top-menuwrap, #top-menuwrap2{width:90%;margin:0 auto}
}
@media screen and (max-width:900px) {
.logo img{margin-top:11px;}
    #top-menuwrapper{position:static}
.dp-thumbnail {display:none}
}
@media screen and (max-width:768px) {
#top-menu ul{display:none}
 #top-menuwrapper{position:static}
#main-wrapper, #sidebar-wrapper {
float:none;display:block;width:auto;}
#main-wrapper{width:100%}
    .sticky {position:relative;width:100%;display:block !important;margin-top:-85px}
.dp-thumbnail {display:none}
}
@media only screen and (max-width: 685px) {
.logo{float:none;display:block;margin:12px auto}
#header h1{font-size:200%;line-height:1.2em;}
.dp-thumbnail {display:none}
 #top-menuwrapper{position:static}
#stickywidget {display:none}
.breadcrumbs:before {position:absolute;padding:20px 20px}
}
@media screen and (max-width:480px) {
div#search-box{width:300px}
#content-wrapper{width:90%;margin:0 auto;padding:0}
#top-menu{width:80%;text-align:center;height:auto;display:block;margin:0 auto}
#top-menu ul li{display:none}
.dp-thumbnail {display:none}
#stickywidget {display:none}
#HTML2 {display:none}
 #top-menuwrapper{position:static}
.post h2 {font-size:120%}
.share {display:none}
    .breadcrumbs:before {position:absolute;padding:20px 20px}
}
@media screen and (max-width:320px) {
div#search-box{width:200px}
 #top-menuwrapper{position:static}
.dp-thumbnail {display:none}
.stickywidget {display:none}
.breadcrumbs:before {position:absolute;padding:30px 20px}
}
@media screen and (max-width:240px) {
.breadcrumbs:before {position:absolute;padding:50px 20px}  
}

Keterangan :

@media screen and (max-width:320px)
Warna merah berguna untuk memangil supaya responsive.
Warna hijau adalah ukuran disaat ukuran tersebut ada perbedaan apa yang anda mau. Misalnya :
@media screen and (max-width:768px) {
#top-menu ul{display:none}
}
Berarti #top-menu ul dihilangkan saat ukuran 768px dengan code #top-menu ul{display:none}

Begitulah responsive dalam blogger, apabila ada yang tidak dimengerti silahkan konsultasi melalui blog komentar.

----YOU ADS---

----YOU ADS---