Posting Terbaru
recent

Apakah Blogger Anda Sudah Responsive?

Apakah Blogger Anda Sudah Responsive?
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.
Rifki Andrean

Rifki Andrean

Posting Komentar
Diberdayakan oleh Blogger.