Paparan blog untuk mobile secara automatik

Semasa melawat blog rakan-rakan menggunakan Galaxy Tab, Sop dapati terdapat blog yang secara automatik memamparkan versi 'mobile'. Fungsi ini telah ada pada WordPress dengan memasang plugin tetapi untuk blogger belum ada. Sop cuba cari dari tutorial mana-mana blogger yang boleh membantu tetapi tidak dijumpai. Sop juga cuba hubungi pemilik blog yang Sop dapati memamparkan blog mobile secara automatik tetapi pemilik tersebut sendiri tidak tahu bagaimana tetapi ada membuat beberapa setting template. Adalah dimaklumkan bahawa template yang digunakan ialah template asal blogger melalui template manager blogger.

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!
Previous
Next Post »