28 Juli 2012
Berikut ini adalah uraian lengkap mengenai cara mengedit template Blogger (Blogspot) untuk tampilan versi seluler. Uraian dalam artikel ini merupakan update dari artikel sebelumnya yang berjudul Panduan Cara Mengubah Tema Pada Template Untuk Tampilan Halaman Blog Versi Seluler (Blogger Mobile Themes).
Perlu diketahui bahwa teknik ini telah melalui tahap uji coba pada semua kategori template standar Blogger, sehingga dapat diterapkan dengan aman pada setiap blog yang menggunakan template standar Blogger.
PENTING…!!!
Anda dapat menggunakan dan atau melakukan modifikasi pada rangkaian kode yang digunakan dalam teknik ini, dengan ketentuan tetap mencantumkan dan atau menyertakan kode di bawah ini sebagai wujud atribusi.
<div class='desainer'>
Copyright © <a expr:href='data:blog.homepageUrl'><data:title/></a><br/>
Desain versi seluler oleh <a href='http://eltelu.blogspot.com/'><b>Semar Bingung</b></a>
</div>
Dan selanjutnya, guna melakukan kustomisasi template standar Blogger untuk tampilan versi seluler, Anda dapat mengerjakan langkah-langkah berikut ini secara berurutan.
Pertama, backup template Anda untuk mengantisipasi adanya kekeliruan dalam proses kustomisasi.
Kedua, ubahsesuaikan setelan untuk pilihan template seluler menjadi ‘Tersesuai’ (Custom).
Ketiga, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ > ‘Expand Template Widget’.
Keempat, cari kode /* Mobile atau html body.mobile { dan kemudian hapus seluruh kode CSS untuk tampilan versi seluler yang ada di bawahnya (sampai dengan kode yang terletak tepat di atas kode ]]></b:skin>). Selanjutnya gunakan kode CSS berikut ini untuk menggantikan kode CSS yang sebelumnya telah dihapus.
/*--------------------------------------------------------------
Desain Tampilan Halaman Blog (Blogger/Blogspot) Versi Seluler
Tema: White Purple
Oleh: Semar Bingung
Blog: ELTELU -:[SEMAR BINGUNG'S WEBLOG]:-
URL : http://eltelu.blogspot.com/
--------------------------------------------------------------*/
/* Mobile
----------------------------------------------- */
html body.mobile {
color: #000000;
background: #1f74bf;
height: auto; width: auto;
background-size: 210px;
min-height: 480px; min-width: 210px;
font: 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
}
.mobile .content-outer {
font-size: 100%;
}
.mobile .main-inner .date-outer,
.mobile .Attribution, .mobile .comments,
.mobile .comments-content .comment-thread,
.mobile .comments .comment-block {
padding: 4px;
}
.mobile .main-inner .section:last-child .Blog:last-child {
padding: 0px; margin: 0px;
}
.mobile .header-outer, .mobile .main-outer,
.mobile .post-outer, .mobile .footer-outer {
-moz-border-radius: 0px; -webkit-border-radius: 0px;
border-radius: 0px; -goog-ms-border-radius: 0px;
}
.mobile .content-outer,
.mobile .main-outer ,
.mobile .post-outer {
background: inherit; border: none;
box-shadow: none; margin: 0pt auto;
}
.mobile a:link, .mobile a:visited, .mobile a:hover,
.mobile-link-button a:link, .mobile-link-button a:visited {
text-decoration:none; color: rgb(138, 77, 153);
font: 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
}
/* Judul Halaman
----------------------------*/
.mobile .header-outer {
margin-bottom: 0px;
background: url('https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglDBpZc-rrZp7sU_e7YZACdXUmQ7G9DHZpmhscRBimGVT4ICXSuKMbzsXvXX4yF1WnuPtW-qeW9Fvo0eAaqxuW0dmVp1Obn76wS1MT1yMowsqDOyS6aOcxIXxOezveM2Mad_Ab0vPvF68/s800/JudulBlog.png') repeat-x scroll left bottom rgb(138, 77, 153);
text-shadow: none; padding: 2px; border: none;
}
.mobile .header-inner .header .titlewrapper,
.mobile .header-inner .header .descriptionwrapper {
margin: 0px; padding: 2px; text-align: justify;
}
.mobile .Header h1, .mobile .Header h1 a {
color: #ffffff;
font: normal bold 22px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
text-shadow: none; margin: 0px; padding: 0px;
}
.mobile .Header .description {
color: #ffffff;
font: normal bold 15px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
}
/* Menu Halaman
----------------------------*/
.mobile .tabs-inner .PageList .widget-content {
width: 100%; height: 100%;
padding: 0px; margin: 0px;
}
.mobile .tabs-inner .PageList, .mobile .tabs-inner .LinkList,
.mobile .tabs-inner .Labels {
margin: 0px; background: inherit;
border: none; box-shadow: none;
}
.mobile .tabs-inner .section {
margin: 0px;
}
.mobile .tabs-inner .widget ul {
padding-top: 4px; padding-bottom: 4px;
margin-left: 0px; margin-right: 0px;
padding-left-value: 0px; padding-right-value: 0px;
text-align: left; border: none;
border-radius: 0px; height: auto;
background: url('https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpsQ3ihdiaF0C46IRogPtJOov-Z2GlZ2PvZjOyFEBOrkdXf2DlUc5HnKTNSMr4hVJtsDJewPCX5Nooie6sf7sUpAwAwrX2L8HUHvAIhAknqKPQK7TuYBs9UTnPBhjY8rRnw9BcKbwbqYQ/s800/Menu.png') repeat-x scroll left bottom rgb(243, 244, 246);
}
.mobile .tabs-inner .widget ul li,
.mobile .tabs-inner .widget li {
border-top: none;
margin-left: 6px;
}
.mobile .tabs-inner .widget ul li:first-child,
.mobile .tabs-inner .widget li:first-child {
border-left: medium none;
margin-left: 0px;
}
.mobile .tabs-inner .widget a {
color: #000000; margin-left: 0px; padding: 0px;
font: normal bold 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
}
.mobile .tabs-inner .widget li a,
.mobile .tabs-inner .widget li a:hover,
.mobile .tabs-inner .widget li.selected a,
.mobile .tabs-inner .widget li a:visited,
.mobile .tabs-inner .widget li:first-child a {
color: #000000;
margin-right: 0px;
padding: 0px;
text-shadow: none;
text-transform: capitalize;
border: none;
background: inherit;
}
/* Judul Widget
----------------------------*/
.mobile-site-widget-title {
border-top: 1px solid rgb(59, 89, 152);
height: auto; overflow: hidden; padding-bottom: 1px;
text-align: center; width: auto;
font: normal bold 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
background: url('https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTFPGdGjgkF-SRSk8U_xk857EBd26eYOdEsULLy7tmelUSf2vy6Z_KtGnD8fCj7jcTw6nOIOn_BzULGmhKBhOT_nqp-BqiyuLVt_aa2Th4ZvyLQ6laqkXRioRbeVwYK8gokRGvtfw0Gk0/s800/JudulWidget.png') repeat-x scroll left bottom rgb(152, 173, 198);
}
/* Area Widget
----------------------------*/
.mobile-site-widget-area {
width: auto; height: auto;
padding: 2px; padding-bottom: 0px;
text-align: center; overflow: hidden;
border-top: 1px solid;
border-color: rgb(226, 200, 34);
background: rgb(239, 242, 253);
font: 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
}
.mobile .widget ul {
padding: 4px;
font: normal normal 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
}
.mobile .widget li, .mobile .BlogArchive #ArchiveList ul.flat li {
list-style: none;
}
.mobile .widget ul li:first-child, .mobile .widget #ArchiveList ul.flat li:first-child {
border-top: medium none;
}
.mobile .widget ul li, .mobile .widget #ArchiveList ul.flat li {
border-top: 1px dashed rgba(128, 128, 128, 0.5);
}
.mobile .main-inner .widget ul li, .mobile .main-inner .widget #ArchiveList ul.flat li {
border-bottom: none;
border-top: 1px dashed rgba(128, 128, 128, 0.5); text-indent: 0px; margin: 0px;
}
/* Area Posting Utama
----------------------------*/
html .main-outer {
margin: 0px;
}
html .mobile #blog-pager {
padding: 0px; margin: 0px;
background: inherit; border: none;
box-shadow: none;
}
.mobile .blog-pager {
border-bottom: none;
background: transparent none repeat scroll top center;
}
.mobile .mobile-index-comment {
text-align: right;
}
/* Area Artikel
----------------------------*/
.mobile .date-outer {
background-color: #ffffff;
border-top: solid 1px #777777;
border-bottom: solid 1px rgb(221, 221, 221);
border-left: none; border-right: none;
font: 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
border-radius: 0px 0px 0px 0px;
}
.mobile .date-header {
margin-left: 0px; margin-right: 0px;
margin-top: 0px; margin-bottom: 1px;
padding: 0px; border: none;
text-align: left; text-decoration: none;
background: inherit; border-radius: 0px;
box-shadow: none; text-transform: capitalize;
}
.mobile .main-inner h2.date-header,
.mobile .date-header span {
color: #000000; background: inherit; padding: 0px; letter-spacing: 0px;
font: normal normal 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
}
.mobile .main-inner .widget h2.date-header {
margin: 0px; right: 0px;
}
.mobile .date-posts, .mobile .main-inner h2.date-header span {
margin: 0px; padding: 0px;
}
.mobile .main-inner .widget h2.date-header,
.mobile .main-inner h2,
.mobile .main-inner h2.date-header span {
border: none;
}
.mobile .main-inner .widget h2 + div, .mobile .footer-inner .widget h2 + div {
border-top: none;
padding-top: 0px;
}
.mobile h4 {
font: normal normal 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
color: #7f4c00;
}
.mobile h3.post-title {
margin: 0px;
}
.mobile-index-title {
width: 100%;
}
.mobile-index-contents {
color: #000000; width: 100%;
}
.mobile-bingkai-judul {
background-color: rgb(239, 242, 253);
border: 1px solid #cccccc;
height: auto; margin: 0px;
overflow: hidden; padding-left: 2px; padding-right: 2px;
width: 99,99%; text-align: justify;
}
.mobile-index-title,
.mobile h3.mobile-index-title.entry-title,
.mobile h3.post-title,
.mobile h3.post-title a {
font: normal bold 15px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
}
.mobile .post-footer {
margin: 0px; padding: 0px;
color: inherit; background: inherit;
border: none;
}
#mobile-share-button {
border: 1px solid rgb(204, 204, 204);
background-color: rgb(248, 248, 248);
background-image: -moz-linear-gradient(center top , rgb(255, 255, 255), rgb(222, 222, 222));
padding: 0px 3px;
}
/* Kolom Kotak Komentar
----------------------------*/
.mobile .comments,
.mobile #comments {
border: 1px solid rgb(204, 204, 204);
background: rgb(236, 239, 245);
padding: 2px;
}
.mobile #comments a {
color: #134f5c;
}
.mobile .comments .continue {
border-top: 1px solid rgb(204, 204, 204);
}
.mobile #comments h4, .mobile #comments .comment-author a,
.mobile #comments .comment-timestamp a {
color: #303030;
}
html .mobile .comments h4 {
font: normal normal 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
padding: 0px;
}
.mobile .comments .comments-content .comment {
margin-bottom: 0px; padding-bottom: 0px;
}
.mobile .comments .comments-content .comment-content {
color: #303030;
}
.mobile .comments .comments-content .comment:first-child {
padding-top: 0px;
}
.mobile .comments-content .comment-thread,
.mobile .comments .avatar-image-container {
border: 1px solid rgb(204, 204, 204); background-color: #ffffff;
margin: 2px 0px;
}
.mobile .comments .avatar-image-container {
height: 36px;
}
.mobile .comments .comment-block {
border: 1px solid rgb(204, 204, 204); background: #fafafa;
margin-left: 44px;
}
.mobile .comment-thread.inline-thread {
border: 1px solid rgb(204, 204, 204); background: #f3f3f3;
margin-left: 8px;
}
.mobile .comment-form {
max-width: 100%;
text-align: justify;
}
/* Tombol Navigasi
----------------------------*/
html .home-link, html .blog-pager-newer-link, html .blog-pager-older-link {
height: auto;
}
.mobile #blog-pager-home-link {
width: 20px;
}
.mobile #blog-pager-newer-link {
width: 20px;
margin-left: 0px;
}
.mobile #blog-pager-older-link {
width: 20px;
margin-right: 0px;
}
.mobile #blog-pager {
border-radius: 0px 0px 0px 0px;
}
.mobile-link-button {
height: auto;
}
.mobile-navigation-area {
border-top: 1px solid rgb(204, 204, 204);
border-bottom: 1px solid rgb(204, 204, 204);
height: auto; overflow: hidden;
padding: 4px; padding-bottom: 0px;
text-align: center; width: auto;
background: url('https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo7luARJlgr1qE-eduFA66f8ex9bUshnMZhZbMIyAs9TpdULhyphenhyphenJv1onwoxYdqsnTmeWDSnv2SiweejJ291Gv6AjnqViemC0likDoeE4NJDC7VoQrWsAQGJCooTRJvI6cHqxycutpUzK04/s800/LatarNavigasi.png') repeat-x scroll left bottom rgb(255, 255, 255);
}
/* Area Footer
----------------------------*/
.mobile .footer-outer, .desainer {
color: #ffffff; border: 1px solid #4f2166;
background: #4f2166; text-align: center;
padding-top: 0px;
font: normal bold 12px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
}
.mobile .footer-fauxborder-left {
background: inherit; box-shadow: none;
border: none;
}
.mobile .footer-outer a,
.mobile .footer-outer a:visited,
.mobile .footer-outer a:hover,
.mobile .footer-outer .widget h2,
.mobile .footer-inner .widget,
.desainer a:link, .desainer a:visited,
.desainer a {
color: #ffffff;
font: normal bold 12px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
}
/* Artikel Terkait Seluler
----------------------------*/
.mobile-related-posts {
border: 1px solid #bbbb77;
height: auto; margin: 0px;
overflow: hidden; padding: 2px;
text-align: justify; width: auto;
color: #7f4c00;
}
.mobile-related-posts-area {
border: none; height: auto; margin: 0px;
overflow: hidden; padding: 0px;
text-align: justify; width: auto;
color: inherit; background: inherit;
}
Keterangan:
Apabila template yang Anda gunakan adalah template dengan kategori 'Kelembutan', maka tambahkan kode CSS berikut ini.
.mobile .main-inner .widget ul, .mobile .main-inner .widget #ArchiveList ul.flat {
margin: 0px; margin-left: -15px; margin-right: -15px;
}
Kelima, cari kode </head> dan kemudian sisipkan kode berikut ini tepat di atasnya.
<a id='atas'/>
<script type='text/javascript'>
//<![CDATA[
function artikelterkini(json) {
var numposts = 5;
document.write('<ul>');
for (var i = 0; i < numposts; i++) {
document.write('<li>');
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
document.write(posttitle);
document.write('</li>');
}
document.write('</ul>');
}
//]]>
</script>
Keterangan:
Kode tersebut digunakan untuk menampilkan artikel terkini sesuai dengan kategori dan juga daftar artikel terkait di dalam artikel. Untuk menentukan jumlah artikel yang ditampilkan, ganti angka yang terdapat dalam kode var numposts = 5; sesuai dengan yang diinginkan.
Keenam, cari kode <b:includable id='mobile-main' var='top'> dan kemudian hapus sampai dengan kode </b:includable> yang terletak beberapa baris di bawahnya. Selanjutnya gunakan kode berikut ini sebagai pengganti kode yang dihapus tersebut.
<b:includable id='mobile-main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<div class='mobile-site-widget-area'>
<a href='http://www.blogger.com/follow-blog.g?blogID=944413042420217262' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPQ6aCMnqHC7Lzkm5i_edOoGC6l40acaqTQLcERN6ysHQDeGqCMrMYSySRQs7tmwFRK1JClxygwJznWXkak0O8tTGsU5uUQuNEoqZwdNXvoSHeBkgZUNK_29OFDaMHz2QM7KiuG20blXQ/s800/Join%2520This%2520Site.png'/></a>
<a class='twitter-follow-button' data-lang='id' data-show-count='false' data-show-screen-name='false' href='https://twitter.com/semarbingung'>Ikuti @semarbingung</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fsemarbingungweblog&send=false&layout=button_count&width=85&show_faces=false&action=like&colorscheme=light&font&height=20' style='border:none; overflow:hidden; width:100px; height:20px;'/>
</div>
<b:include data='top' name='status-message'/>
<b:if cond='data:blog.pageType == "index"'>
<div class='mobile-site-widget-title'>
<span style='color: #ffffff;'><b>Artikel Terbaru</b></span>
</div>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='mobile-index-post'/>
</b:loop>
<b:else/>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='mobile-post'/>
</b:loop>
</b:if>
</div>
<b:include name='mobile-nextprev'/>
</b:includable>
Keterangan:
Ganti blogID=944413042420217262 dengan ID blog yang Anda kelola. Ganti https://twitter.com/semarbingung'>Ikuti @semarbingung dengan URL dan nama Twitter Anda. Ganti semarbingungweblog dengan nama yang dipakai dalam URL Facebook Fan Page yang Anda kelola.
Ketujuh, cari kode <b:widget id='PageList dan kemudian hapus tepat mulai kode yang ada di bawahnya sampai dengan kode </b:includable>. Selanjutnya gunakan kode berikut ini sebagai pengganti kode yang dihapus tersebut.
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:mobile'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:loop>
</ul>
<b:else/>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>
</ul>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
Kedelapan, cari kode <b:includable id='mobile-index-post' var='post'> dan kemudian hapus sampai dengan kode </b:includable> yang terletak beberapa baris di bawahnya. Selanjutnya gunakan kode berikut ini sebagai pengganti kode yang dihapus tersebut.
<b:includable id='mobile-index-post' var='post'>
<div class='mobile-date-outer date-outer'>
<div class='mobile-post-outer'>
<a expr:href='data:post.url'>
<h3 class='mobile-index-title entry-title'>
<div class='mobile-bingkai-judul'>
<b><data:post.title/></b>
</div>
</h3>
</a>
<div class='mobile-index-comment'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments == 0'>
<a expr:href='data:post.url'>0 komentar</a>
</b:if>
<b:if cond='data:post.numComments != 0'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</div>
</div>
</div>
</b:includable>
Kesembilan, cari kode <b:includable id='mobile-post' var='post'> dan kemudian hapus sampai dengan kode </b:includable> yang terletak beberapa baris di bawahnya. Selanjutnya gunakan kode berikut ini sebagai pengganti kode yang dihapus tersebut.
<b:includable id='mobile-post' var='post'>
<div class='date-outer'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<div class='date-posts'>
<div class='post-outer'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<div style='text-align: justify;'>
<h3 class='post-title entry-title'>
<div class='mobile-bingkai-judul'><b>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.url'><data:post.title/></a>
</b:if>
<b:else/>
<a expr:href='data:post.url'><data:post.title/></a>
</b:if>
</b:if>
</b>
</div>
</h3>
</div>
</b:if>
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<data:post.body/>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn'>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<data:post.author/>
</a>
</span>
<b:else/>
<span class='fn'><data:post.author/></span>
</b:if>
</b:if>
</span>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span>
</div>
<div class='post-footer-line post-footer-line-2'>
<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=83&action=like&font=arial&colorscheme=dark"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin: 0px; width:83px; height:21px;'/>
<a class='twitter-share-button' data-count='none' data-lang='id' href='https://twitter.com/share'>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</b:if>
<b:if cond='data:top.showMobileShare'>
<div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
<a href='javascript:void(0);'><data:shareMsg/></a>
</div>
</b:if>
<b:if cond='data:top.showDummy'>
<div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
</b:if>
</div>
</div>
</div>
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div class='mobile-related-posts' style='background-color: rgb(255, 251, 226);'>
<h4><b>Baca Pula Artikel Terkait:</b></h4>
<div class='mobile-related-posts' style='background-color: #ffffff; color: #444444;'>
<b:loop values='data:post.labels' var='label'>
<b><data:label.name/></b>
<div class='mobile-related-posts-area'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=artikelterkini&orderby=published"' type='text/javascript'/>
</div>
<b:if cond='data:label.isLast != "true"'><br/></b:if>
</b:loop>
</div>
</div>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</div>
</div>
</div>
</b:includable>
Kesepuluh, cari kode <b:includable id='mobile-nextprev'> dan kemudian hapus sampai dengan kode </b:includable> yang terletak beberapa baris di bawahnya. Selanjutnya gunakan kode berikut ini sebagai pengganti kode yang dihapus tersebut.
<b:includable id='mobile-nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='mobile-site-widget-title'>
<span style='color: #ffffff;'><b>Mobile Blog</b></span>
</div>
<div class='mobile-site-widget-area' id='kategori-artikel-terkini' style='text-align: justify;'>
<script src='http://eltelu.blogspot.com/feeds/posts/default/-/Mobile%20Blog?orderby=published&alt=json-in-script&callback=artikelterkini' type='text/javascript'/>
</div>
<div class='mobile-site-widget-title'>
<span style='color: #ffffff;'><b>Blogging</b></span>
</div>
<div class='mobile-site-widget-area' id='kategori-artikel-terkini' style='text-align: justify;'>
<script src='http://eltelu.blogspot.com/feeds/posts/default/-/Blogging?orderby=published&alt=json-in-script&callback=artikelterkini' type='text/javascript'/>
</div>
</b:if>
<div class='mobile-site-widget-title'>
<span style='color: #ffffff;'><b>Sponsor</b></span>
</div>
<div class='mobile-site-widget-area'>
<br/>
----- ruang iklan -----
<br/><br/>
</div>
<b:if cond='data:blog.pageType == "item"'>
<div class='mobile-navigation-area'>
<b:if cond='data:newerPageUrl'>
<div class='mobile-link-button' id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img alt='Baru' border='0' height='20px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjq9zt02j4D9wqzvZ_Uo6KgleCmkhnijxJXgdIkaP2AjiCTads92XxMWzfGTN1TxflEJZcTa36SXoiEhCp-CH1ZRxF9kLnfwXd3QzY_ImJjS-izbdr2zzHpF7MYApb9fN9nlIRnpowxOw/s800/Previous.png' width='15px'/></a>
</div>
</b:if>
<b:if cond='data:olderPageUrl'>
<div class='mobile-link-button' id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img alt='Lama' border='0' height='20px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHpmzsVtN6CdJiAjkgAz0KG7qO8JASxoUSwSEjKW-xFlCK2NfMBtz9EPkPrMEeBaylE8pfRIeVWuc9OLfBnZ1sx7gtI4Q4e4ap_wd62459UDkhluSP6Qx_jjoB627_r80pXv4EMeGguEM/s800/Next.png' width='15px'/></a>
</div>
</b:if>
<div class='mobile-link-button' id='blog-pager-home-link'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img alt='Beranda' border='0' height='20px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS4Z8s0-XyKyEHyiS0t1eKrExKmarZk_yohdOdyuPDZK8Q8yPunJFz495S8qyEac24bMb_P0TXqrAdVUbtctB4IaIlBKr5CfGDIjtzsyAil3SE9Pv6i3LN4Aav4En0LKsYjOn6rFtCeVM/s800/Home.png' width='20px'/></a>
</div>
</div>
</b:if>
<div class='mobile-site-widget-area'>
<b><a href='#atas'>Kembali ke Atas</a> | <a expr:href='data:desktopLinkUrl'>Lihat Versi Web</a></b>
</div>
<div class='desainer'>
Copyright © <a expr:href='data:blog.homepageUrl'><data:title/></a><br/>
Desain versi seluler oleh <a href='http://eltelu.blogspot.com/'><b>Semar Bingung</b></a>
</div>
</div>
<div class='clear'/>
</b:includable>
Keterangan:
Dari rangkaian kode di atas, perhatikan bagian berikut ini.
<b:if cond='data:blog.pageType != "static_page"'>
<div class='mobile-site-widget-title'>
<span style='color: #ffffff;'><b>Mobile Blog</b></span>
</div>
<div class='mobile-site-widget-area' id='kategori-artikel-terkini' style='text-align: justify;'>
<script src='http://eltelu.blogspot.com/feeds/posts/default/-/Mobile%20Blog?orderby=published&alt=json-in-script&callback=artikelterkini' type='text/javascript'/>
</div>
<div class='mobile-site-widget-title'>
<span style='color: #ffffff;'><b>Blogging</b></span>
</div>
<div class='mobile-site-widget-area' id='kategori-artikel-terkini' style='text-align: justify;'>
<script src='http://eltelu.blogspot.com/feeds/posts/default/-/Blogging?orderby=published&alt=json-in-script&callback=artikelterkini' type='text/javascript'/>
</div>
-------------------------------------------------------------
Di sini Anda dapat menambahkan daftar artikel terkini
sesuai dengan label atau kategori yang akan ditampilkan.
Caranya yaitu dengan menyalin kode di atas secara berulang,
kemudian lakukan penyesuaian judul, URL, dan kategori seperti
petunjuk yang terdapat pada catatan di bawah.
-------------------------------------------------------------
</b:if>
Catatan:
--------
Ubah 'Mobile Blog' dan 'Blogging' sesuai dengan judul
yang akan digunakan dalam daftar artikel terkini.
Ganti 'http://eltelu.blogspot.com' dengan URL blog yang Anda kelola.
Ubah 'Mobile%20Blog' dan 'Blogging' sesuai dengan kategori
yang akan ditampilkan dalam daftar artikel terkini.
Kesebelas, simpan template.
Apabila Anda mengerjakan semua langkah-langkah di atas secara runtut, maka dapat dipastikan bahwa desain tampilan blog versi seluler yang Anda kelola akan berubah sesuai dengan harapan (dalam hal ini seperti yang tampak pada gambar sebelumnya).
Namun demikian walaupun teknik tersebut telah saya uji coba pada semua kategori template standar Blogger, bukan tidak mungkin bila masih terdapat bug dalam teknik tersebut. Sehingga apabila Anda mengalami kesulitan dalam mengimplementasikan teknik tersebut, maka tak perlu ragu untuk bertanya karena saya akan dengan senang hati membantu memberikan solusi atas kesulitan yang Anda alami.
Semoga berguna dan bermanfaat.
Salam.
Ragam Tumbuhan 
Unik & Langka 
Aneka Buah 
Produk Sederhana 
Karya Seni 
Tempat Wisata 
Ragam Kegiatan 
Aneka Bunga 
Hewan & Serangga
Terdapat 46 komentar pada artikel ini ▶
selamat pagi sobat... terimakasih banyak atas tutorialnya mengenai desain template seluler yang sangat bermanfaat bagi kami
kahadiran saya disini ada yang ingin saya tanyakan gimana cara membuat footer 3 colom di template web standard blogger, dan saya minta judul widget nya rata tengah
terimakasih di tunggu tutorialnya
sekali lagi saya ucapkan Terimakasih
Salam hormat senior,bagi newbie kaya ane info seperti ini ingsaallah sangat bermanfaat buat belajar,biar ga makmum terus,hehetapi ya pada dasarnya emang harus makmum terus terus karena pasti ada yang lebih pintar meski kita dan sepintar apapun itu,hehe
@ndolemSobat, sebagai jawaban untuk pertanyaan pertama coba ubahsesuaikan template yang digunakan.
Caranya: pada Dasbor Blogger klik menu Template > Ubahsesuaikan > Tata Letak > Tata letak kaki. Nah, kemudian pilih model footer yang akan dipakai dan kemudian klik tombol Terapkan ke Blog yang terdapat di pojok kanan-atas.
Sedangkan jawaban untuk pertanyaan yang kedua, Sobat dapat melihat contohnya pada artikel yang berjudul Cara Membuat Bingkai Dan Mengubah Warna Latar Pada Judul Serta Area Widget, dimana di sana kita dapat menambahkan kode CSS text-align: center; untuk mengatur perataan judul widget.
@annash mobilepcHe hee, betul sekali Sobat. Ibaratnya "di atas langit masih ada langit".
Tapi saya rasa berlebihan jika Sobat menganggap saya senior, karena saya sendiri juga masih dalam tahap belajar dan terus belajar.
Jadi, anggap saja kita saling belajar dan berbagi ilmu dan pengetahuan untuk memperluas wawasan kita bersama.
Oh ya, tidak lupa salam balik dari saya. :)
@eltelu sudah saya coba sob tapi judul widget tidak rata tengah, setelah saya membaca artikel "Cara Membuat Bingkai Dan Mengubah Warna Latar Pada Judul Serta Area Widget" yang berubah hanya widget samping
terimakasih
@ndolemJadi gini, bisa jadi yang Sobat maksud adalah bagian yang menampilkan tanggal di atas artikel.
Nah, kalau untuk bagian itu, caranya memang berbeda, karena bagian yang dikustomisasi (diberi bingkai) adalah h2.date-header.
@rian ciungSobat, perlu diingat bahwa setiap template memiliki karakteristik yang berbeda, sehingga untuk mengedit tampilan versi mobile pun caranya tidk sama.
Lain halnya dengan template standar Blogger, semua kategori template yang disediakan oleh Blogger memiliki karakteristik yang sama sehingga teknik yang digunakan untuk mengedit tampilan versi seluler pun serupa.
Sekian dan semoga dapat membantu. :)
sob ane pake template standar yang perjalanan tapi ga ada kode <b:widget id='PageList jadi ga bisa ngerjain yang langkah 7,solusinya gimana ne sob.hehe
maaf ane comen lagi sob,karena ane ga nemu kode langkah yang ke tujuh akhirnya ane buat aja sendiri kode kaya gini trus bawahnya ane kasi lagi pastean kode milik sobat diatas,kalau ada waktu tolong di cek apakah template versi mobile ane dah bener semua.makasih,,,,:
@annash mobilepcSobat, apabila tidak menemukan kode <b:widget id='PageList, maka sebenarnya langkah tersebut dapat dilewati.
Kode <b:widget id='PageList tidak ditemukan karena widget menu halaman belum diaktifkan, sehingga dalam template pun widget tersebut tidak ada.
Atau bila tidak ingin melewati langkah yang ketujuh, maka silakan buka artikel dengan judul Cara Menambahkan Sub Menu (Pull Down Menu) Pada Tab Menu Horizontal Standar Blogger untuk melihat cara mengaktifkan menu halaman (dalam hal ini terdapat pada langkah yang pertama.
@annash mobilepcTadi kedua blog Sobat sudah saya cek, tapi saya tidak mendapati Sobat menerapkan teknik tersebut.
Jadi yang Sobat maksud blog yang mana ya?
wih, keren sob. ini salah satu artikel saya cari nih sob. ane pahamin yak sob :D
@Yufex ChaznodaSilakan Sob... Diimplementasikan juga boleh kok. :)
Gini sob dulunya ane pakai template yang bukan bawaan blogger,trus gara-gara banyak kode yang ga ada akhirnya ane pakai template blogger.trus ane praktekin semua tutor dari sobat,dan ane cek tampilannya mirip punya sobat tapi ga selengkap itu,yang jadi masalah adalah template yang versi webnya,ane bingung ngupreknya,akhirnya ane frustasi n tak ganti lagi templatenya dengan yang dulu.
jadi kalau bisa kedepannya saya minta tolong sobat juga share tutor yang untuk versi web n yang lengkap juga tutornya seperti yang versi seluler.trimakasih,maaf jika merepotkan,maklum newbie. :D salam
@annash mobilepcOwww begitu ya Sob.
Jadi gini saja, Sobat tak perlu ragu dan sungkan untuk mengajukan pertanyaan apabila mengalami kesulitan dalam melakukan editing template (baik versi seluler maupun versi web).
Karena dengan senang hati saya akan membantu mengatasi kesulitan yang Sobat hadapi.
Namun tentu saja Sobat juga harus bersabar karena tidak sedikit pertanyaan yang diajukan ke saya, sehingga saya harus membalas dan membuatkan uraian artikelnya satu per satu.
Sementara itu waktu saya pun sangat terbatas, dan tentu saja saya harus melakukan uji coba terlebih dahulu pada teknik yang saya uraikan sebelum akhirnya saya terbitkan.
Dan mengenai tutorial versi web, dengan senang hati saya juga akan mengusahakannya.
Sekian dan salam. :)
@AYAHE MELA
baik hati juga ni admin nya..
mampir ke blog baru saya gan
http://apianshare.blogspot.com
Mas Admin Sebenarnya saya sudah melakukan cara di atas menggunakan 3 template yg berbeda. tapi tetap saja tidak bisa...
tolong mas admin kasih tau template yg bisa di gunakan...
mampirnya ke http://islanku.blogspot.com
@Agung CreationsSobat, seperti yang telah saya uraikan dalam artikel di atas, bahwasanya teknik tersebut hanya dapat diterapkan pada template standar (bawaan) yang disediakan oleh Blogger saja. Sehingga tentu saja tidak dapat diterapkan pada template yang Sobat gunakan karena template yang Sobat pakai merupakan kustom template dari pihak ketiga.
Sekian dan semoga dapat membantu. :)
Gan AYAHE MELA, Bisakah anda ngeditin templeat blog dan templeat seluler saya sama seperti blog agan, klo bisa chat aja sya di account fb sya http://www.facebook.com/adam.almahjub
@ayib adam al - mahjubJadi begini ya Sobat, kebetulan tadi saya kan sudah melihat template yang Sobat gunakan. Nah, setelah saya cek ternyata template yang Sobat gunakan adalah template Custom (template dari pihak ketiga, sehingga kalaupun dapat dilakukan kustomisasi untuk tampilan seluler seperti yang digunakan pada blog ini, maka prosesnya lebih rumit bila dibandingkan dengan kustomisasi untuk template standar Blogger.
Namun apabila template yang Sobat gunakan adalah template standar (bawaan) Blogger, maka Sobat pun dapat melakukan kustomisasi sendiri dengan mengacu pada panduan yang saya terbitkan dalam artikel berikut ini:
Cara Mengedit Template Untuk Mengubah Tema Tampilan Blog Versi Seluler
MOBILE TEMPLATE - Customize Blogger Mobile Templates
[UPDATE] Perbaikan Dan Pembenahan Bug Pada Kode CSS Untuk Template Blog Versi Seluler
Sekian dan semoga dapat membantu.
artikel yang bagus.. tksh sob sharenya..!!!
cm terlalu rumit sehingga pas saya simpan template Kesalahan saat mengurai XML, baris 1765, kolom 3: The element type "b:section" must be terminated by the matching end-tag "".
bisa dipersingkat lagi sob tutorialnya?? heehe..
Gan koq template mobile saya jadi begini ya http://dadanfalsmania.blogspot.com/?m=1 coba dibuka,, kira2 apanya yg salah atau yg kurang gan??
@Bang DadanHal tersebut disebabkan karena Sobat mengerjakan teknik yang salah (tidak sesuai dengan petunjuk) dalam hal pembuatan bilah menu navigasi di atas header.
Hal ini terbukti dari penempatan kode [div class='bilah-menu-atas' id='bilahmenuatas'] yang terdapat di bawah [/body].
Padahal sesuai dengan keterangan yang saya sertakan dalam artikel yang menguraikan tentang hal tersebut, dalam hal ini adalah keterangan untuk langkah keempat artikel dengan judul Cara Membuat Pull Down Menu Dengan Ujung Sudut Melengkung Atau Rounded Corners Tab, sudah saya ingatkan bahwa rangkaian kode untuk bagian tersebut diletakkan tepat di bawah [body dan bukan di bawah [/body].
Jadi, silakan benahi dulu penempatan kode yang Sobat masukkan dalam template sesuai dengan petunjuk agar hasil yang didapatkan sesuai dengan yang seharusnya.
Sekian dan semoga dapat membantu. :)
@Bang DadanSebenarnya walau tampak terlalu rumit, namun jika Sobat mengerjakan setiap langkah secara urut dan cermat maka saya dapat memastikan bahwa teknik tersebut dapat diimplementasikan dengan baik.
Kemudian bila muncul pesan kesalahan seperti itu, maka dapat diartikan bahwa ada bagian 'section' yang tidak tertutup dengan benar. Hal ini bisa saja disebabkan karena penutup untuk tag atau bagian tersebut tanpa sengaja ikut terhapus ketika Sobat melakukan editing template.
Jadi, pastikan bahwa Sobat mengerjakan setiap langkah secara cermat.
Dan apakah tutorial dalam artikel ini bisa dipersingkat? Jawabannya tentu saja bisa. Namun jika tutorial dipersingkat, saya khawatir akan terjadi kesulitan dalam mengimplementasikannya karena dengan dipersingkatnya tutorial berarti penjelasan untuk masing-masing langkah pengerjaan menjadi tidak lengkap atau detail.
Sekian, semoga dapat membantu, dan semoga dapat dipahami. :)
numpang tanya mas. bagaimana kalo di template saya tidak terdapat <b:widget id='PageList
tolong mas bantuannya
Wah kalo ditimpa pasti bikin berat gan.. defaultnya kan ada tinggal diubah atau ditambah sedikit mungkin??
@Adris IrawanApabila bagian yang Sobat maksud tidak ditemukan, maka langkah ketujuh dapat dilewati dan kemudian langsung lanjutkan pada langkah berikutnya.
Namun yang perlu diingat adalah bahwa teknik yang diuraikan dalam artikel ini hanya dapat diterapkan secara aman pada template standar Blogger.
Sekian dan semoga dapat membantu.:)
@Suhendri hendrikMenurut saya sebenarnya tidak begitu berpengaruh terhada kecepatan loading kok.
Coba saja Sobat buktikan dengan cara membuka blog ini memakai Opera Mini.
Maka Sobat akan mendapati bahwa loading atau penayangan halaman tetap normal seperti halnya bila menggunakan tampilan mobile versi standar. :)
ternyata blogspot emang keren (y)
@SunuYap... lebih kurang begitulah. :)
The widget with id "Blog1" cannot contain element: "#text". A widget can only contain b:includable elements.
maaf gan ni hasilnya,kira2 apa yg salah ya,, mohon penjelasannya,kirim ke widiyanto.joko25@gmail.com..nuwun
wah ini yang selama ini ane cari, taip liatin kode-kodenya yang begitu banyak kira-kira ngaruh gak ama, loading blog.?
untuk sementara ane CTRL+D dulu
kalau lain kali dibutuhkan bisa langsung meluncur.
mau tanya nih, kenapa ya, waktu saya mau pasang kode iklan di ----- ruang iklan ----- muncul keterangana
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: Element type "script" must be followed by either attribute specifications, ">" or "/>".
Error 500
atau
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The reference to entity "i" must end with the ';' delimiter.
Error 500
bisa di bantu bang?
makasih sebelumnya
@JOKO WIDIYANTOSobat, hal tersebut bisa jadi disebabkan karena adanya tag penutup yang ikut terhapus dan bisa jadi pula disebabkan karena tautan sumber atas kode yang Sobat saling belum dihilangkan.
Jadi, pastikan tautan sumber atas rangkaian kode yang Sobat salin telah dihilangkan. Dan pastikan pula bahwa tidak ada tag penutup yang ikut terhapus.
Semoga dapat membantu.
@kumpulankoleksi2013Wahhh, sayang sekali Sobat tidak mencantumkan script yang dipasang. Yang jelas bila pesan kesalahan (error-nya) adalah seperti itu, maka dapat dipastikan bahwa ada tag tertenti yang tidak tertutup dengan benar.
Nice share.
kucoba yang tulisan laen sob.
Satu2 dulu
salam sukses
mas kok di template saya tdk ada kode seperti ini html body.mobile { ?
saya bingung mas nd saya ingin agar blog saya tampilan nya elegan pada versi seluer,kira"gmn ya cara nya ?,trima kasih..
@D'han AiluaTerimakasih dan salam sukses balik, Sob.
Silakan bila ingin mencoba menerapkan uraian teknik dalam artikel yang saya terbitkan. :)
@Reza AbiyaksaSobat, perlu diketahui bahwasanya teknik tersebut di atas hanya dapat diterapkan pada penggunaan template standar Blogger. Sehingga dengan demikian tentu saja tidak dapat diterapkan pada template yang Sobat gunakan, karena kebetulan Sobat menggunakan template dari pihak ketiga.
Sekian dan semoga dapat membantu. :)
Maaf Om Saya Tidak Ngerti pAs Langkah ke 5 sampai seterusnya
#mohon petunjuk
Makasih Salam Gara Blog'z
@Dicha dwiCoba dipelajari secara lebih cermat dulu, Sob. Dan kalau bisa lakukan percobaan pada sebuah blog uji coba terlebih dulu.
Asalkan Sobat menggunakan template standar, maka teknik tersebut pasti dapat diterapkan.
@Vitalia Dwii AmandaPada prinsipnya, segala jenis template itu dapat dijadikan responsive, Sob. Hanya saja dalam pengerjaannya memerlukan CSS yang berbeda sesuai dengan template yang digunakan.
Jadi bila Sobat menanyakan apakah template yang Sobat gunakan sekarang ini bisa dibuat menjadi responsive atau tidak, maka jawabannya adalah bisa.
Gan gimana cara ngilangin sidebar blog di tampilan mobile? tolog gan ajarin langhah-langkahnya
@Arif SubrotoGunakan saja display:none; untuk CSS bagian yang dimaksud Sob.
Waduh gan kayaknya gak bisa deh soalnya ane bukan template bawaan blogspot ya, ane dari luar templatenye...
Tapi thanks gan infonya..
@Deden Ikhsan maulana Oke, sama-sama Sobat. Tutorial ini memang sengaja hanya diperuntukkan pada template standar yang telah disediakan oleh Blogger. :)