apa sih kode yang di gunakan blog mas sugeng untuk mengedit tampilan blog versi mobilenya ? saya akan memberikan scrip yang digunakan mas sugeng untuk mengubah tampilan versi mobilenya tapi jangan kaget kalo scrip yang di gunakan bukan berasal dari area skin tapi di luarnya karena blog mas sugeng tidak benar benar full responsife ,karena dia menggunakan 2 template yang berbeda dalam 1 blog
nah ini dia scrip yang digunakan mas sugeng untuk membuat template fenomenalnya itu
<!-- CUSTOM CSS MOBILE TEMPLATE -->
<b:if cond='data:blog.isMobile'>
<style type='text/css'>
/* VIEWPORT */
@viewport, @-wekit-viewport, @-moz-viewport, @-ms-viewport, @-o-viewport {
width:device-width;
max-zoom:2;
min-zoom:0.5
}
.mobile #sidebar, .mobile #sidebar .widget-content,.mobile #header-wrapper,.mobile #footer-wrapper,.mobile .comments,.mobile #leaderboard .widget-content,.widget-posting .widget-content,.mobile .mobsearch,.mobile .mobads,.mobile #blog-pager,.mobile .post,.mobile .breadcrumbs,.mobile #mobilemenu,.mobile #sosnet,.mobile .comments .comment-block,.mobile .comments h3 {
padding:10px !important
}
.mobile #sidebar,.mobile #posting,.mobile #header,.mobile #kotak-posting,.mobile #widget-posting-kiri,.mobile #widget-posting-kanan,.mobile #kotak-sidebar,.mobile #kotak-sidebar-kiri,.mobile #kotak-sidebar-kanan,.mobile #kotak-sidebar-bawah {
float:none !important;
margin:0 0 0 0 !important;
width:auto !important;
max-width:100% !important
}
.mobile pre,.mobile blockquote {
background-image:none;
padding:8px 8px 8px 8px
}
.mobile img,.mobile iframe {
max-width:100%
}
/* WRAPPER */
body.mobile {
}
.mobile #wrapper {
margin:0 auto 0 !important;
width:auto !important;
max-width:800px !important;
font-size:13px;
padding:0px !important;
}
/* HEADER */
.mobile #header {
height:auto !important;
}
.mobile #header h1.title,.mobile #header p.title {
font-size:22px
}
.mobile #header img {
width:auto;
}
/* NAVIGASI */
.mobile #mobilemenu {
background:#106FE4;
color:#fff;
text-align:center;
width:auto;
overflow:hidden;
margin:0;
}
.mobile #mobilemenu span a {
color:#fff;
padding:0;
margin:0
}
.mobile #mobilemenu span a:hover {
text-decoration:underline
}
/* POST */
.mobile #content-wrapper {
padding:0 0;
}
.mobile #posting {
padding:10px 0 0 0
}
.mobile .mobile-date-outer,.mobile .date-outer {
margin:0;padding:0
}
.mobile .post {
position:relative;
min-height:55px;
}
.mobile h2.mobile-post-title {
font-size:16px;
font-weight:bold;
margin:0 0 5px 60px;
padding:0
}
.mobile h3.mobile-post-title {
font-size:16px;
font-weight:bold;
margin:0 0 10px;
padding:0
}
.mobile .mobilethumb {
position:absolute;
top:10px;
left:10px;
margin:0
}
.mobile .mobilethumb img {
display:block;
width:50px
}
.mobile-index-contents {
padding-left:60px
}
.mobile #blog-pager {
}
.mobile .item-post-footer {
margin:5px 0 0;
padding:6px 0;
border-top:1px solid #fff
}
.mobile pre,.mobile blockquote {
margin:0 0 13px 0 !important
}
.mobile pre,.mobile blockquote {
background-image:none;
padding:10px 10px 10px 10px
}
.mobile .post, .mobile #blog-pager,.mobile .breadcrumbs {
margin:0 10px 10px
}
.mobile .post-body img {
height:auto;
}
.mobile .form-wrapper,.mobile .comments .avatar-image-container,.mobile #top-nav {
display:none !important
}
.mobile #related-post {
text-align:left;
margin:8px 0;
padding:0
}
.mobile #related-post ul {
list-style-type:none;
margin:0 0 0 0 !important
}
.mobile #related-post ul li {
padding:3px;
border-bottom:1px solid #ededed
}
.mobile #related-post ul li:last-child {
border-bottom:none !important
}
.mobile #related-post h3 {
color:#333;
font-weight:bold;
padding:0 0 6px 0;
margin:0;
font-size:15px
}
/* KOMENTAR */
.comments .comment-block, .comments .comments-content .comment-replies, .comments .comment-replybox-single {
margin-left:0px !important;
}
.mobile #sosnet {
background:#fafafa;
border-bottom:1px solid #ededed;
clear:both;
overflow:hidden;
margin:0;
text-align:center;
padding:6px
}
.mobile .mobsearch {
background:#fafafa;
margin:0;
border-top:1px solid #ededed;
text-align:center;
}
.mobile #footer-wrapper .footer-kiri,.mobile #footer-wrapper .footer-kanan {
float:none !important;
text-align:center
}
.mobile #banner-header, .mobile .share-buttons {
display:none
}
</style>
</b:if>
<!-- CSS CUSTOM MOBILE TEMPLATE END -->
nah itulah scrip yang digunakan mas sugeng untuk blog versi mobilenya , karena di dunia ini tidak ada blog yang sempurna tetapi tidak sedikit orang mencari kesempurnaanitu , jadi harapdi maklumi
Artikel keren lainnya:
Belum ada tanggapan untuk "CUSTOM CSS MOBILE TEMPLATE yang digunakan dalam blog mas sugeng"
Posting Komentar