Aridhoprahasti Education Blog: Cara Mudah Design Template Blog Untuk Mobile

Langkah pertama yang agan lakukan adalah mengganti tag <body> dengan

Langkah Kedua yaitu copy code berikut tepat di bawah kode </b:skin>

<b:if cond='data:blog.isMobile'>
<style type='text/css'>

ISI TEXT CSS DESIGN ANDA DISINI

/* MEDIA QUERY */
@media (min-device-width: 100px) and (max-device-width: 2600px) {.mobile #admob{display:block;}}@media (min-device-width:100px) and (max-device-width:129px){.mobile #admob{width:114px;}.mobile img{max-width:110px !important;
}}@media (min-device-width:130px) and (max-device-width:161px){
.mobile #admob {width:144px;}.mobile img{max-width:140px !important;}}@media (min-device-width: 162px) and (max-device-width: 177px) {.mobile #admob {width:164px;}.mobile img{max-width:140px !important;}}@media (min-device-width:178px) and (max-device-width:209px) {
.mobile #admob {width:194px;}.mobile img{max-width:170px !important;}}@media (min-device-width:210px) and (max-device-width:221px) {.mobile #admob{width:206px;}.mobile img{max-width:190px !important;}}@media (min-device-width:222px) and (max-device-width:241px) {.mobile #admob{width:220px;}.mobile img{ max-width:210px !important;}}@media (min-device-width:242px) and (max-device-width:321px) {.mobile #admob{width:298px;}.mobile img{max-width:280px !important;}}@media (min-device-width:322px) and (max-device-width:361px) {.mobile img{max-width:300px !important;}}@media (min-device-width:362px) and (max-device-width:401px) {.mobile img{max-width:300px !important;}}@media (min-device-width:402px) and (max-device-width:481px) {.mobile img{max-width:300px !important;}}@media (min-device-width:482px) and (max-device-width:2500px) {
.mobile img{max-width:300px !important;}}

</style>
</b:if>

Nah, setelah itu agan bisa edit text "ISI TEXT CSS ANDA DISINI" dengan code CSS yang anda inginkan. sedikit CSS yang akan saya berikan untuk mobile CSS yaitu

1. {display:none}

Untuk menghiddenkan (menghilangkan)

Contoh:
(Menghilangkan #header-wrapper, #sidebar-wrapper)
.mobile #header-wrapper, .mobile #sidebar-wrapper {display:none}

2. {max-width:600px}

Membuat lebar maximum 600px sesuai dengan mobile

Contoh:

(Membuat post hentry lebar maximum 600px)

.mobile .post {max-width:600px}

Saya juga pernah membuat mobile versinya ProGrey Hack4rt Template dengan kode CSS mobile:

<b:if cond='data:blog.isMobile'>
<style type='text/css'>

/* CSS CUSTOM MOBILE TEMPLATE */
.mobile #kepala-kiri, .mobile #stSegmentFrame, .mobile #stwrapper, .profile-link, .mobile #aside, .mobile #menu-wrap, .footer-inner, .mobile #top-ad, .mobile #footer-inner, .socialshare, .mobile #comments{
display:none !important;
}
.mobile #header-wrapper{
margin:0 auto !important;
width:auto !important;
border:medium none !important;
max-width:600px !important;
}
.mobile #content{
margin:0 auto !important;
width:auto !important;
border:medium none !important;
max-width:600px !important;
font-size:13px !important;
}
.mobile .navcontainer{
margin:0 auto !important;
width:auto !important;
border:medium none !important;
max-width:600px !important;
font-size:13px !important;
}
.mobile #container{
margin:0 auto !important;
width:auto !important;
border:medium none !important;
max-width:600px !important;
font-size:13px !important;
}
.mobile .title-meta {
max-width:600px;
}
.mobile .post-footer {
max-width:600px;
}
..mobile #comment-post-message {
max-width:600px;
}
.mobile #comments{
margin:0 auto !important;
width:auto !important;
border:medium none !important;
max-width:600px !important;
font-size:13px !important;
}
.mobile #header {
height:auto !important;
width:auto !important;
max-width:100%;
}
.mobile #posting, .mobile #sidebar {
margin:0 auto !important;
float:none !important;
width:auto !important;
max-width:100% !important;
}
.mobile #kotak-posting {
padding:6px !important;
border-right:medium none !important;
}
.mobile #kotak-sidebar {
margin:6px !important;
}
.mobile #kotak-sidebar-kanan, .mobile #kotak-sidebar-kiri, .mobile #kotak-sidebar-bawah {
width:auto !important;
float:none !important;
margin:0 6px 6px 6px !important;
}
.mobile #kepala-kanan h1.title {
text-align:left;
padding:0px !important;
}
.mobile #kepala-kanan .description {
text-align:left;
padding:3px 0px 0px 6px !important;
}
.mobile .mobile-post-outer { margin:0; padding:0 0 8px; border-bottom: 1px solid #ccc;
}
.mobile .mobilethumb img {
margin:0 !important;
}
.mobile .mobilethumb {
-moz-box-shadow:1px 1px 5px rgba(1,1,1,.1);
-webkit-box-shadow:1px 1px 5px rgba(1,1,1,.1);
box-shadow:1px 1px 5px rgba(1,1,1,.1);
float:left;
margin:3px 6px 6px 0px;
padding:3px;
border:1px solid #ddd;
}
.mobile .post { margin:0; padding:0;
}
.mobile h3.post-title, .mobile h3.mobile-index-title { color:#00a3ff; font-size:15px; margin:10px 0 4px;
}
.mobile h3.post-title:hover, .mobile h3.mobile-index-title:hover {
color:#ff0912;
}
.mobile .post-body { font-size:13px;
}
.mobile .post-footer { font-size:12px; margin:6px 0; padding:6px 0; border-top:1px dotted #ddd; border-bottom:1px solid #ddd;
}
.mobile #sidebar .item-thumbnail {
display:none !important;
}
.profile-img { border:1px solid #ddd; padding:3px;
}
.profile-datablock {text-align:center;
}
.mobile blockquote {
margin:0 0 13px 6px !important;
padding:6px !important;
border-left: 3px solid #ddd;
text-align:left;
font-style:italic;
border-top:1px solid #ddd;
border-right:1px solid #ddd;
border-bottom:1px solid #ddd;
}
.mobile img {
float:none !important;
display:block;
width:auto !important;
max-width:50% !important;
margin:0 auto 12px !important;
}
.mobile #mobilemenu {
color:#fff;
text-align:center;
width:auto;
max-width:100%; background:#00a3ff;
border-top:1px solid #fff;
border-bottom:2px solid #ff3300;
overflow:hidden;
margin:0;
padding:6px;
font-size:14px;
}
.mobile #mobilemenu span a {
color:#333;
padding:0;
margin:0;
}
.mobile #mobilemenu span a:hover {
color:#2b801c;
}
.mobile #blog-pager {
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
margin:6px 0 0;
padding:3px 6px;
border:1px solid #ddd;
}
.mobile #admob {
display:none;
max-width:100%;
overflow:hidden;
}

/* MEDIA QUERY */
@media (min-device-width: 100px) and (max-device-width: 2600px) {.mobile #admob{display:block;}}@media (min-device-width:100px) and (max-device-width:129px){.mobile #admob{width:114px;}.mobile img{max-width:110px !important;
}}@media (min-device-width:130px) and (max-device-width:161px){
.mobile #admob {width:144px;}.mobile img{max-width:140px !important;}}@media (min-device-width: 162px) and (max-device-width: 177px) {.mobile #admob {width:164px;}.mobile img{max-width:140px !important;}}@media (min-device-width:178px) and (max-device-width:209px) {
.mobile #admob {width:194px;}.mobile img{max-width:170px !important;}}@media (min-device-width:210px) and (max-device-width:221px) {.mobile #admob{width:206px;}.mobile img{max-width:190px !important;}}@media (min-device-width:222px) and (max-device-width:241px) {.mobile #admob{width:220px;}.mobile img{ max-width:210px !important;}}@media (min-device-width:242px) and (max-device-width:321px) {.mobile #admob{width:298px;}.mobile img{max-width:280px !important;}}@media (min-device-width:322px) and (max-device-width:361px) {.mobile img{max-width:300px !important;}}@media (min-device-width:362px) and (max-device-width:401px) {.mobile img{max-width:300px !important;}}@media (min-device-width:402px) and (max-device-width:481px) {.mobile img{max-width:300px !important;}}@media (min-device-width:482px) and (max-device-width:2500px) {
.mobile img{max-width:300px !important;}}

</style>
</b:if>