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
(Menghilangkan #header-wrapper, #sidebar-wrapper)
.mobile #header-wrapper, .mobile #sidebar-wrapper {display:none}
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>
0 komentar :
Speak up your mind
Budayakan Komen Setelah Membaca
Tell us what you're thinking... !