Panduan Cara Mengubah Tema Pada Template Untuk Tampilan Halaman Blog Versi Seluler (Blogger Mobile Themes)

Menanggapi banyaknya permintaan dan pertanyaan terkait dengan cara mengubah tema tampilan halaman blog versi seluler, maka saya memutuskan untuk menerbitkan artikel tentang panduan cara mengedit template blog untuk membuat dan atau mengubah tema halaman versi seluler (mobile) ini, dengan harapan akan mempermudah proses kustomisasi template, sehingga dapat dilakukan optimasi untuk halaman blog versi seluler seperti halnya optimasi yang dapat dilakukan pada halaman blog versi web. Dimana panduan ini akan saya susun dengan uraian yang sedetail mungkin sehingga walaupun Anda belum menguasai dan memahami teknik kustimisasi template, dapat mengerjakannya dengan mudah dan tidak mengalami kesulitan dalam penerapannya.

Oke, langsung pada pokok pembahasan, untuk mengedit template dan kemudian mengubah tema halaman blog versi seluler, maka persiapkan waktu Anda beberapa jam ke depan dan kemudian kerjakan langkah-langkah di bawah ini secara berurutan.

Pertama, backup template Anda guna mengantisipasi adanya kekeliruan dalam proses kustomisasi.

Kedua, ubahsesuaikan setelan template seluler yang akan digunakan. Caranya silakan klik di sini untuk membuka artikel dengan judul Optimasi Blog Dengan Memanfaatkan Fitur Mobile, kemudian pada langkah yang keempat pilih template seluler ‘Tersesuai’ (Custom).

Ketiga, buka editor  template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ > ‘Expand Template Widget’.

Keempat, ubah model menu pada halaman versi seluler. Caranya silakan klik di sini untuk membuka artikel dengan judul Cara Membuat Menu Mendatar Rata Tengah Untuk Halaman Blog Selular (Tampilan Mobile), dan kerjakan langkah yang ketiga saja.

Kelima, ubah model bidang posting halaman beranda tampilan versi seluler. Caranya silakan klik di sini untuk membuka artikel dengan judul Mengubah Model Bidang Posting Halaman Beranda Tampilan Selular (Blogspot Versi Mobile), dan kerjakan sampai langkah yang kedua.

Keenam, cari kode <div class='post hentry uncustomized-post-template' dan kemudian hapus rangkaian kode yang ada di bawahnya sampai dengan kode </b:if>, seperti yang tampak pada contoh berikut ini.

<div class='post hentry uncustomized-post-template'>
          <a expr:name='data:post.id'/>  <-- hapus dari sini

            -------- kode --------

          </b:if>  <-- hapus sampai sini

          <div class='post-header'>

Kemudian di bagian kode yang dihapus tersebut, sisipkan rangkaian kode di bawah ini.

<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' style='font-size: 71%;'><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>

Ketujuh, cari kode <b:includable id='mobile-nextprev'> dan kemudian hapus rangkaian kode yang ada di bawahnya sampai dengan kode yang ada di atasnya </b:includable>, seperti yang tampak pada contoh berikut ini.

<b:includable id='mobile-nextprev'>
  <div class='blog-pager' id='blog-pager'>  <-- hapus dari sini

  ----- kode -----

  <div class='clear'/>  <-- hapus sampai sini
</b:includable>

Selanjutnya pada bagian kode yang dihapus tersebut, sisipkan rangkaian kode di bawah ini.

<div class='blog-pager' id='blog-pager'>
   <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='Posting Lebih 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 + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img alt='Posting 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>

    <div class='mobile-site-widget-title'>
      <span style='color: #000000;'><b>Site Widget</b></span>
    </div>

    <div class='mobile-site-widget-area' style='text-align=center;'>

    ----- CUSTOM WIDGET -----

    </div>

    <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'>
      Desain versi seluler oleh <a href='http://eltelu.blogspot.com/'><b>Semar Bingung</b></a>
      <br/>Dimodifikasi oleh <a href='URL Blog Anda'><b>Nama Blog Anda</b></a>
    </div>
   </div>
  <div class='clear'/>

Kedelapan, cari kode /* Mobile dan kemudian hapus semua rangkaian kode yang ada di bawahnya sampai dengan kode yang terdapat di atas ]]></b:skin>, untuk selanjutnya ganti dengan rangkaian kode di bawah ini. Dalam hal ini diasumsikan bahwa Anda masih menggunakan template standar Blogger, sehingga apabila sebelumnya telah dilakukan kustomisasi atau perubahan pada template yang Anda gunakan, maka Anda dapat melihat contoh kode standar template sesuai dengan template yang saat ini Anda gunakan sebagai acuan untuk menentukan kode yang semestinya dihapus.

/*--------------------------------------------------------------
Kustomisasi Desain Halaman Blogspot Seluler
Oleh: Semar Bingung
Blog: http://eltelu.blogspot.com/
--------------------------------------------------------------*/ 

html body.mobile {
  background-size: 210px;
  height: auto; width: auto;
  min-height: 480px; min-width: 210px;
}

.mobile .body-fauxcolumn-outer {
  background: transparent none repeat scroll top left;
}

.mobile .content-outer {
  font-size: 100%;
}

.mobile a:link, .mobile a:visited,
.mobile-link-button a:link, .mobile-link-button a:visited {
  text-decoration:none; color: rgb(17, 85, 204);
}

html .mobile .header-outer {
  margin-bottom: 0px; background: #001b26;
  text-shadow: none; padding: 2px; border: none;
}

html .mobile .header-inner .header .titlewrapper, 
html .mobile .header-inner .header .descriptionwrapper {
  margin: 0px; padding: 0px; text-align: justify;
}

html .mobile .Header h1 {
  font-size: 220%;   text-shadow: none;
  margin: 0px;  padding: 0px;
}

html .mobile .Header h1 a {
  color: #ffffff;
}

.mobile .tabs-inner .PageList .widget-content {
  width: 100%; height: 100%;
  padding: 0px; margin: 0px; 
}

.mobile .tabs-inner .widget ul {
  padding-top: 5px; padding-bottom: 5px;
  padding-left-value: 2px; padding-right-value: 2px;
  text-align: left; border: 1px solid #001b26;
  border-radius: 0px; background: #001b26; 
}

.mobile .tabs-inner .widget a {
  color: #ffe599;
}

.mobile-site-widget-title {
  background: #cccccc;
  border-top: 1px solid rgb(59, 89, 152);
  height: auto; overflow: hidden;
  padding: 4px; padding-bottom: 0px;
  text-align: center; width: auto;
}

.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(255, 251, 226);
}

.mobile-navigation-area {
  background: rgb(216, 223, 234);
  border-top: 1px solid #444444;
  border-bottom: 1px solid #444444;
  height: auto; overflow: hidden;
  padding: 4px; padding-bottom: 0px;
  text-align: center; width: auto;
}

html .main-outer {
  margin: 0px;
}

html .mobile .main-inner .date-outer,
html .mobile .Attribution, .mobile .comments,
.mobile .comments-content .comment-thread,
.mobile .comments .comment-block {
  padding: 2px;
}

.mobile-index-title {
  width: 100%;
}

html #blog-pager {
  padding: 0px; margin: 0px;
}

html .mobile .mobile-date-outer{
  background-color: #ffffff;
}

html .mobile .blog-pager {
  border-bottom: none;
  background: transparent none repeat scroll top center;
  margin-bottom: 0px; margin-top: 0px;
}

.mobile .date-outer {
  background-color: #ffffff;
  border-top: solid 1px #777777;
}

.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-bingkai-judul {
  background-color: rgb(236, 239, 245);
  border: 1px solid #cccccc;
  height: auto; margin: 0px;
  overflow: hidden; padding: 2px;
  width: 99,99%; text-align: justify;
}

.mobile-baca-selengkapnya {
  padding-top: 4px; text-align: right;
}

.mobile-baca-selengkapnya a {
  display: inline-block; margin: 0;
  padding: 4px 4px; border: 1px solid #cccccc;
  text-align: center; text-decoration: none;
  background: rgb(236, 239, 245);
  font: 13px/18px arial;
}

.mobile .comments {
  border: 1px solid rgb(204, 204, 204);
  background-color: rgb(236, 239, 245);
}

.mobile .comments .comments-content .comment {
  margin-bottom: 0px; padding-bottom: 0px;
}

.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;
}

.mobile .comments .avatar-image-container {
  height: 36px;
}

.mobile .comments .comment-block {
  border: 1px solid rgb(204, 204, 204); background-color: #fafafa;
}

html .home-link, html .blog-pager-newer-link, html .blog-pager-older-link {
  height: auto;
}

html #blog-pager-newer-link {
  margin-left: 0px;
}

html #blog-pager-older-link {
  margin-right: 0px;
}

.mobile-link-button {
  background-color: inherit; height: auto;
}

.mobile-index-contents {
  color: #000000; width: 100%;
}

html .mobile .comment-form {
  max-width: 100%;
}

.mobile .comment-form {
  text-align: justify;
}

.desainer {
  color: #ffffff; border: 1px solid #444444;
  background: #444444;  text-align: center;
  padding-top: 2px;
}

.desainer a:link, .desainer a:visited {
  color: #ffffff;
}

.mobile .footer-outer {
  color:$(footer.text.color); border: 1px solid #444444;
  background: #444444; 
}

.mobile .footer-outer a, 
.mobile .footer-outer a:visited,
.mobile .footer-outer a:hover,
.mobile .footer-outer .widget h2 {
  color: #ffffff;
}

Kesembilan, cari kode </head> kemudian sisipkan kode <a id='atas'/> tepat di atasnya.

Kesepuluh, simpan template Anda.

Sehingga akhirnya apabila blog Anda dibuka dengan menggunakan perangkat seluler, tampilan halaman akan berubah dari tampilan halaman blog versi standar Blogger menjadi tampilan halaman seluler seperti yang tampak pada gambar di bawah ini.

Sebagai catatan, apabila Anda ingin menambahkan widget tertentu seperti yang tampak pada gambar di atas, maka Anda dapat menyisipkan script dari widget yang dimaksud ke bagian yang ditandai dengan kata ----- CUSTOM WIDGET ----- (dalam hal ini terdapat pada langkah yang ketujuh). Kemudian apabila ingin memasang tombol follow Blogger, Twitter, dan Facebook serta menambahkan daftar artikel terkait untuk halaman blog versi seluler seperti dalam blog ini, maka silakan terapkan teknik yang terdapat dalam artikel dengan judul Memasang Widget Blogger Follow Button Pada Blogspot Versi Mobile dan Membuat Daftar Artikel Terkait Pada Template Seluler Blogspot.

Dan karena saya yakin Anda adalah seorang Blogger yang baik, maka saya percaya bahwa Anda akan tetap mencantumkan, menyertakan, dan atau tidak menghapus maupun mengubah kode Desain versi seluler oleh <a href='http://eltelu.blogspot.com/'><b>Semar Bingung</b></a> yang terdapat  dalam <div class='desainer'>, sebagai wujud penghargaan Anda terhadap usaha, jerih payah, dan hasil karya orang lain, apabila menggunakan, memodifikasi, dan atau menerapkan teknik yang diuraikan dalam artikel ini. Sehingga apabila Anda hendak mencantumkan blog Anda, silakan ganti kata ‘URL Blog Anda’ dan ‘Nama Blog Anda’ yang terdapat pada kode <br/>Dimodifikasi oleh <a href='URL Blog Anda'><b>Nama Blog Anda</b></a> sesuai dengan URL dan nama blog yang Anda kelola.

Sekian, terimakasih, semoga berguna dan bermanfaat, serta selamat mencoba.

Salam.