Mengubah Model Bidang Posting Halaman Beranda Tampilan Selular (Blogspot Versi Mobile)

Pernahkah Anda berpikir untuk melakukan optimalisasi pada halaman blog versi selular yang Anda kelola? Nah, bisa jadi sebenarnya pertanyaan ini seringkali terlintas di pikiran Anda, namun karena mungkin Anda terkendala dengan cara apa yang dapat dilakukan atau digunakan untuk mengimplementasikannnya, akhirnya Anda pun berhenti di tempat tanpa tahu apa yang harus diperbuat. Dan sepertinya hal tersebut juga sesuai dengan kenyataan yang ada, karena menurut sepengetahuan saya tidak sedikit diantara kita yang hanya terfokus dalam melakukan optimalisasi pada halaman blog versi web saja. Ini pun juga terbukti dari pengalaman saya ketika membuka berbagai halaman blog dengan menggunakan perangkat selular, seringkali saya mendapati bahwa tidak dilakukan optimalisasi sama sekali untuk halaman blog versi selular tersebut.

Seperti halnya halaman blog versi web, optimalisasi untuk halaman blog versi selular pun sebenarnya perlu kita lakukan mengingat tidak semua pengunjung membuka halaman blog yang kita kelola dengan menggunakan komputer, atau dalam hal ini adalah membuka halaman blog dengan menggunakan perangkat selular. Oleh sebab itulah optimalisasi halaman blog versi selular pun perlu kita lakukan karena seperti yang kita tahu bahwasanya sekarang ini perkembangan perangkat selular sangatlah pesat, dan penggunaannya pun sudah sangat luas. Sehingga dengan dilakukannya optimalisasi untuk halaman blog versi selular, maka akan memudahkan pengguna perangkat selular dalam membuka halaman blog yang kita kelola.

Salah satu hal yang terkadang menjadi momok bagi pengguna perangkat selular ketika mengakses halaman blog dengan menggunakan perangkat selular yang dimilikinya adalah loading atau penayangan halaman yang terlalu lama, apalagi jika blog yang dibuka tidak mengaktifkan fitur halaman mobile. Namun demikian tidak jarang pula saya mendapati suatu blog yang telah mengaktifkan fitur mobile, akan tetapi loading atau penayangan blog tersebut masih cukup lama ketika saya membukanya dengan menggunakan perangkat selular yang saya miliki. Hal ini disebabkan karena fitur tampilan mobile yang diberikan oleh Blogger menampilkan cuplikan berupa gambar, sehingga penayangan halaman beranda masih terasa cukup lama.

Atas dasar tersebut akhirnya saya mencoba melakukan modifikasi model bidang posting untuk halaman beranda (yang secara default menampilkan cuplikasi gambar), sehingga akhirnya model bidang posting untuk halaman beranda hanya menampilkan data dalam bentuk teks dengan tambahan tombol ‘Read More’ di bawahnya. Dan ternyata cara ini cukup efektif karena loading halaman akan menjadi lebih cepat karena tidak perlu lagi menayangkan gambar yang ada di dalamnya. Disamping itu tampilan beranda pun akan terkesan lebih profesional, karena beranda dapat ditampilkan seperti halnya tampilan bidang posting untuk halaman versi web.

Lantas bagaimana caranya mengubah model bidang posting untuk beranda blog versi selular? Seperti biasa, karena hal ini menyangkut kustomisasi template, maka backup dulu template yang Anda gunakan, dan kemudian apabila template sudah dibackup langkah berikutnya buka editor template dengan mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ > ‘Expand Template Widget’, dan selanjutnya kerjakan langkah-langkah di bawah ini secara berurutan.

Pertama, cari kode <b:includable id='mobile-index-post' var='post'> dan kemudian hapus rangkaian kode di bawahnya sampai dengan kode yang terletak di atas </b:includable>, seperti yang tampak pada contoh di bawah ini.

<b:includable id='mobile-index-post' var='post'>
  <div class='mobile-date-outer date-outer'>   <-- hapus dari sini

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

  </div>   <-- hapus sampai sini
</b:includable>

Kedua, salin kode di bawah ini dan kemudian sisipkan pada bagian kode yang telah dihapus tadi.

<div class='mobile-date-outer date-outer'>
    <b:if cond='data:post.dateHeader'>
      <div class='date-header'>
        <span><data:post.dateHeader/></span>
      </div>
    </b:if>

    <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-contents'>
        <div class='post-body'>
          <div align='justify'>
            <b:if cond='data:post.snippet'><data:post.snippet/></b:if>
          </div>
        </div>
      </div>

      <div style='clear: both;'/>

      <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 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>

          <div style='border-bottom: 1px solid #0000ff; width: 99,99%;'/>
          <div class='mobile-baca-selengkapnya'>
             <a expr:href='data:post.url'><data:post.jumpText/></a>
          </div>

        </b:if>
      </div>

    </div>
  </div>

Sehingga rangkaian kode menjadi seperti rangkaian kode di bawah ini.

<b:includable id='mobile-index-post' var='post'>
  <div class='mobile-date-outer date-outer'>
    <b:if cond='data:post.dateHeader'>
      <div class='date-header'>
        <span><data:post.dateHeader/></span>
      </div>
    </b:if>

    <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-contents'>
        <div class='post-body'>
          <div align='justify'>
            <b:if cond='data:post.snippet'><data:post.snippet/></b:if>
          </div>
        </div>
      </div>

      <div style='clear: both;'/>

      <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 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>

          <div style='border-bottom: 1px solid #0000ff; width: 99,99%;'/>
          <div class='mobile-baca-selengkapnya'>
             <a expr:href='data:post.url'><data:post.jumpText/></a>
          </div>

        </b:if>
      </div>

    </div>
  </div>
</b:includable>

Ketiga, salin kode berikut ini dan kemudian sisipkan tepat di atas kode ]]></b:skin>.

/* Bidang Posting Tampilan Beranda Versi Selular
------------------------------------------------------------- */

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

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

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

.mobile-bingkai-judul {
  background-color: #fff2cc; 
  border: 1px solid #0000ff;
  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 {
  background: #cfe2f3;
  border: 1px solid #3d85c6;
  display: inline-block; 
  margin: 0; padding: 4px 4px;
}

Keempat, Simpan template Anda.

Selanjutnya apabila template telah disimpan dan kemudian blog tersebut dibuka dengan menggunakan perangkat selular, maka tampilan bidang posting untuk halaman beranda versi selular, kurang lebih adalah seperti yang tampak pada gambar di bawah ini.

Namun demikian perlu saya tekankan sekali lagi agar sebelum menerapkan teknik ini pada blog yang Anda kelola, lakukan backup terlebih dulu pada template yang digunakan agar apabila terjadi kesalahan dalam penerapan, maka kondisi blog dapat dikembalikan ke kondisi semula dengan memanfaatkan backup template yang ada. Dan sebagai catatan, apabila Anda ingin menyesuaikan warna latar dan garis yang digunakan, maka ubah kode warna (kode yang berwarna merah) yang terdapat pada beberapa kode di bawah ini dengan kode warna yang sesuai.

background: #ffffff; digunakan untuk menentukan warna latar bidang posting, background-color: #fff2cc; dan border: 1px solid #0000ff; digunakan untuk menentukan warna latar dan warna bingkai pada judul artikel, background: #cfe2f3; dan border: 1px solid #3d85c6; digunakan untuk menentukan warna latar dan warna bingkai tombol ‘Baca Selengkapnya’, dan <div style='border-bottom: 1px solid #0000ff; width: 99,99%;'/> digunakan untuk menentukan warna garis yang terdapat di bawah cuplikan artikel.

Semoga berguna serta bermanfaat, dan selamat mencoba.

Salam.