Hai sahabat Hack4rt, sekian lama saya Noval Bintang tidak mengepost dengan tangan saya sendiri (tidak copas) di blog Hack4rt.us yang baru beberapa minggu ini. Tutorial malam ini yaitu bagaimana cara untuk memodifikasi template untuk sesuai dengan mobile. Nah, tutorial ini berawal dari source code template Super Faster V.3 yang dibuat oleh Mas Sugeng yang sudah tersesuai dengan versi mobile. Oke, langsung aja ke tutorialnya.
Kita main di EDIT HTML yaaa di Template. Ingat Itu! hehe
Langkah pertama yang agan lakukan adalah mengganti tag <body> dengan
<body expr:class='"loading" + data:blog.mobileClass'>
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}
<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>
Terimakasih telah membaca artikel Cara Design Template Blog Untuk Mobile. Anda bisa bookmark halaman ini dengan URL http://hack4rt-blog.blogspot.com/2013/02/cara-design-template-blog-untuk-mobile.html. Jika ingin copy paste artikel ini, jangan lupa untuk mencantumkan link sumber.
