[UPDATE] Mengubah Model Bidang Posting Halaman Beranda Blog Tampilan Versi Mobile

Bagaimana caranya agar artikel yang diterbitkan hanya ditampilkan judul dan jumlah komentarnya saja apabila dibuka dengan menggunakan perangkat seluler atau dibuka dalam tampilan versi mobile? Kurang lebih seperti inilah maksud dari pertanyaan yang diajukan oleh Sobat Blogger kepada saya dalam artikel ‘Tanya Jawab’ beberapa hari yang lalu.

Pada artikel sebelumnya yang berjudul “Mengubah Model Bidang Posting Halaman Beranda Tampilan Selular (Blogspot Versi Mobile)”, saya telah menguraikan sebuah teknik yang dapat digunakan untuk mengubah tampilan halaman Blogspot versi seluler. Dimana salah satu maksud dan tujuan dari penerapan teknik tersebut adalah untuk melakukan optimalisasi pada tampilan mobile, karena menurut pengalaman saya ketika membuka halaman blog dengan menggunakan perangkat seluler, penayangan halaman masih terasa cukup lama. Hal ini disebabkan karena fitur tampilan halaman beranda versi mobile yang diberikan oleh Blogger menampilkan cuplikan berupa gambar dan juga cuplikan artikel yang diterbitkan.

Dengan pertimbangan untuk melakukan optimalisasi, saya pun berinisiatif melakukan perubahan pada model bidang posting halaman beranda untuk tampilan versi seluler, dalam hal ini adalah dengan cara menghilangkan cuplikan gambar yang semestinya ditampilkan. Sehingga akhirnya model bidang posting halaman beranda pada tampilan seluler hanya menampilkan judul, cuplikan artikel, dan jumlah komentar seperti yang tampak pada gambar di bawah ini.

Namun ternyata pada kenyataannya teknik tersebut menjadi kurang efektif ketika saya menambahkan daftar artikel terkini (recent post) sesuai dengan label pada tampilan blog versi seluler, karena akhirnya halaman menjadi terlalu panjang. Sehingga saya pun kembali melakukan perubahan model bidang posting halaman beranda tampilan versi seluler, dalam hal ini dengan meniadakan cuplikan konten artikel dan juga tombol ‘Baca selengkapnya’ seperti yang tampak pada gambar pertama. Dengan demikian akhirnya tampilan halaman pun menjadi lebih ringkas, apabila dibandingkan dengan tampilan sebelumnya seperti yang tampak pada gambar yang kedua.

Nah, menanggapi pertanyaan Sobat Blogger seperti yang telah saya sampaikan di atas, maka berikut ini adalah uraian cara yang digunakan untuk mengubah model bidang posting halaman beranda blog versi seluler agar hanya menampilkan judul dan jumlah komentar yang ada. Dimana sebenarnya teknik yang digunakan adalah serupa dengan teknik yang sebelumnya.

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

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

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

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

Keempat, cari kode ]]></b:skin> dan kemudian sisipkan rangkaian kode berikut ini tepat di atasnya.

/* 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;

}

Kelima, simpan template Anda.

Perlu diperhatikan bahwa untuk kode yang terdapat pada langkah keempat sebenarnya adalah serupa dengan kode yang digunakan dalam teknik sebelumnya. Perbedaannya adalah jika dalam teknik sebelumnya terdapat kode CSS yang digunakan untuk mengatur setelan tombol ‘Baca selengkapnya’, sedangkan dalam teknik ini kode CSS yang digunakan untuk mengatur setelan tombol ‘Baca selengkapnya’ ditiadakan karena memang pada kenyataannya tombol tersebut tidak turut ditampilkan di halaman beranda versi seluler. Sehingga apabila menerapkan teknik ini, maka ada baiknya Anda juga membuka dan mempelajari artikel sebelumnya yang berjudul “Mengubah Model Bidang Posting Halaman Beranda Tampilan Selular (Blogspot Versi Mobile)” sebagai referensi.

Semoga berguna serta bermanfaat, dan selamat mencoba.

Salam.