Paparan blog untuk mobile secara automatik
Oleh kerana berminat dengan fungsi tersebut, Sop cuba mendapatkan script yang digunakan dengan menggunakan "view source". Beberapa kajian dibuat dengan script yang digunakan dan akhirnya template Sop berjaya menggunakan script tersebut. Fungsi paparan yang selama ini Sop cari akhirnya berjaya dijumpai.
Fungsi paparan mobile ini akan berfungsi apabila pelawat melawat blog menggunakan pelayar internet mobile seperti smartphone, iPad dan Galaxy Tab. Paparan mobile hanya akan memamparkan basic template seperti entry, tab menu, header dan komen. Oleh itu, laman blog dapat dipapar dengan cepat dan ringan. Di ruangan footer akan diberikan menu untuk pelawat memilih sama anda ingin melawat blog secara mode penuh.
Untuk membuat fungsi paparan mobile ini, sila ikuti tutorial berikut:
1. Cari ]]></b:skin> dan paste kod di bawah sebelum ]]></b:skin> :
/* Mobile - www.gnesop.com
----------------------------------------------- */
*+html body.mobile .main-inner .column-center-inner {
margin-top: 0;
}
.mobile .main-inner {
padding-top: 0;
}
.mobile .main-inner .widget {
padding: 0 0 15px;
}
.mobile .main-inner .widget h2 + div,
.mobile .footer-inner .widget h2 + div {
border-top: none;
padding-top: 0;
}
.mobile .footer-inner .widget h2 {
padding: 0.5em 0;
border-bottom: none;
}
.mobile .main-inner .widget .widget-content {
margin: 0;
padding: 7px 0 0;
}
.mobile .main-inner .widget ul,
.mobile .main-inner .widget #ArchiveList ul.flat {
margin: 0 -15px 0;
}
.mobile .main-inner .widget h2.date-header {
right: 0;
}
.mobile .date-header span {
padding: 0.4em 0;
}
.mobile .date-outer:first-child {
margin-bottom: 0;
border: 1px solid #dc9522;
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-goog-ms-border-top-left-radius: 0;
-goog-ms-border-top-right-radius: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.mobile .date-outer {
border-color: #dc9522;
border-width: 0 1px 1px;
}
.mobile .date-outer:last-child {
margin-bottom: 0;
}
.mobile .main-inner {
padding: 20px 10px;
}
.mobile .header-inner .section {
margin: 0;
}
.mobile .post-outer, .mobile .inline-ad {
padding: 5px 0;
}
.mobile .tabs-inner .section {
margin: 0 10px;
}
.mobile .main-inner .section {
margin: 0;
}
.mobile .main-inner .widget h2 {
margin: 0;
padding: 0;
}
.mobile .main-inner .widget h2.date-header span {
padding: 0;
}
.mobile .main-inner .widget .widget-content {
margin: 0;
padding: 7px 0 0;
}
.mobile .main-inner .column-center-inner,
.mobile .main-inner .column-left-inner,
.mobile .main-inner .column-right-inner {
padding: 0;
}
.mobile .main-inner .column-left-inner,
.mobile .main-inner .column-right-inner {
background: transparent none repeat 0 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-goog-ms-box-shadow: none;
box-shadow: none;
}
.mobile .date-posts {
margin: 0;
padding: 0;
}
.mobile .footer-fauxborder-left {
margin: 0;
}
.mobile .main-inner .section:last-child .Blog:last-child {
margin-bottom: 0;
}
.mobile-index-contents {
color: #664600;
}
.mobile .mobile-link-button {
background: #fff4dd url(http://www.blogblog.com/1kt/awesomeinc/tabs_gradient_groovy.png) repeat-x scroll 0 -100px;
}
.mobile-link-button a:link, .mobile-link-button a:visited {
color: #5d4000;
}
2. Cari <head> dan paste kod di bawah selepas <head> :
<script type="text/javascript">(function(){function b(a){var c=a.split("?");switch(c.length){case 1:return a+"?m=1";case 2:if(c[1].search("(^|&)m=")>=0)return null;return a+"&m=1";default:return null}}var d;var e=navigator.userAgent;d=e.indexOf("Mobile")!=-1&&e.indexOf("WebKit")!=-1&&e.indexOf("iPad")==-1?true:false;if(d){var f=b(window.location.href);f&&window.location.replace(f)};})();
</script>
Kod di atas perlu dibuat "Encode HTML". Anda boleh "Encoder" kod si atas melalui laman web di sini.
Setelah selesai, simpan template anda. Selesai
Semoga berjaya!
EmoticonEmoticon