Cara Mengedit Template Untuk Mengubah Tema Tampilan Blog Versi Seluler

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 &#169; <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/AVvXsEhMsBgI_9hUH4WOuESr_YCZ3M5h6-ePHtmkNyvPjNAOQTYZ96L3acGLzjNJU_awUV0RfpALmjLJQr_u5QoZfOJrY458b6qvjom-ByOBDRyhA-S74It9oHUdJ9033hI3o35fzoh4IXnBbBU/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/AVvXsEhQiLfNx17pbf7cVCpZeFL4UE9NT4Gbc4AJP0KH2wqNCoQFObEOpVhmgbdNT9FdNQiASHHzGrYWV0X0RMNa8cMvLfJcQlISmhsVzY0BQnuklOvhStip_hdSn7dNtXDqPBUEw1StBPnNOgo/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/AVvXsEj9tLrl8KlHDvLJETqk1OlniJAg3uvfXvLpy2NiAAVVkRhTWkYbb6QItyzKn0EH95sVxiPGiJhKzu9Wbqqo6HBheQIXBd4ilh0N-6JEpEuja_5YTiSEifthGVh12FZubH3a3A5E4xyji9Y/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/AVvXsEgMh1nV5gkg0eBE7uXpZTvsFu45MvYanQkD4CTLeP3XjhX3OuQGBJmcPHicpkUeA7xXC2bqbuSLWku98N-a7X0LRpSe0Hrl2JDkFALgY-3ucPE5dt86dPB7dNijxhBuiJbfBLVcwHyOkdo/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/AVvXsEjG36RXT3XKYNw1e2YiPKpv_N25zHgNcYKyQEEzrQLiOP3xTlWFQdpXzDjNQsWjyodqNeOW-nqo8n8ZKHUZEgj2vTLzN96N1r4ICCmZElgPCnefTAAKwSzUg6E7h-QRHuvnv0t-1LFkm1Q/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=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fsemarbingungweblog&amp;send=false&amp;layout=button_count&amp;width=85&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;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 == &quot;index&quot;'>

        <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 != &quot;static_page&quot;'>

          <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='&quot;post-body-&quot; + 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 != &quot;item&quot;'>

                  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

                    <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 == &quot;item&quot;'>

                <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=83&amp;action=like&amp;font=arial&amp;colorscheme=dark&quot;' 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=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</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 == &quot;static_page&quot;'>

          <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 == &quot;item&quot;'>

          <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='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=artikelterkini&amp;orderby=published&quot;' type='text/javascript'/>

                   </div>

                 <b:if cond='data:label.isLast != &quot;true&quot;'><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 != &quot;static_page&quot;'>

      <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&amp;alt=json-in-script&amp;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&amp;alt=json-in-script&amp;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 == &quot;item&quot;'>

      <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 + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img alt='Baru' border='0' height='20px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiulMNTvDDJQ1Y094WJfA7x-AwyqmyHR1-BHieKhHHeMcWyKpjEBncps0q9zIYRWFm80j7IylNFQns5dyNVGUqx5ZgWsoJMXL1a40NloFt91Wa06HCuyFQ3q05MoshJaQ_AuFBfecDFRqc/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 + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img alt='Lama' border='0' height='20px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBQ90rUqooN3eeY2qeoDNq5VE74p5oxgEzDuWNvpLIloFOu_kRbnDaaVJa2f8g3JI9R4Vu70aCQuQl-e_3GbQAwKdocmHjXhoBYMG_nwhoU60WrFtNdnLjmpJP6rKj3YW_dKDsdnOtxFk/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/AVvXsEhnSGGSzdu9H6FjPihhhTFlFE6a1uRWDVYq1pvo_XpH7T_BfCSPR8IEFU74VG4nxb9dhktd7GIw1M44H4AG1fCYmNKzw7SSoMcDV1TLexcK25M7se6intPc4QrRKhwAav3XT3-6N-H4gx0/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 &#169; <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 != &quot;static_page&quot;'>

  <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&amp;alt=json-in-script&amp;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&amp;alt=json-in-script&amp;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.

Ditulis oleh Mas Rozi, Sabtu, 23 Maret 2013 - Rating: 4.5

Judul : Cara Mengedit Template Untuk Mengubah Tema Tampilan Blog Versi Seluler
Deskripsi : Berikut ini adalah uraian lengkap mengenai cara mengedit template Blogger (Blogspot) untuk tampilan versi seluler. Uraian dalam artikel i...

Bagikan ke

Facebook Google+ Twitter