Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

8
Tgl. 11 Juni 2012

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

Ilustrasi Tampilan Halaman Blog
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.

Model Tampilan Beranda Blog Versi Mobile

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.


Katagori: ,
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 8 komentar pada artikel ini ▶
12/06/12 10.55 O

wah keren sob, saya tidak pernah terpikir untuk mengoptimalkan tampilan seluler,, :)

12/06/12 16.07 O

makasih infonya mas jadi nambah ilmu ^_^

Anonim
12/06/12 21.26 O

WAW brader.. WAW!
jarang2 ada blogger yang ngasi tips mobile blog kayak gini.

Nice post!

13/06/12 10.17 O

Kunjungan blogwalking siang kawan.. Sukses untuk blognya.. Tak lupa, mengundang juga rekan blogger Kumpul di Lounge Event Blogger "Tempat Makan Favorit" Salam Bahagia

18/06/12 19.28 O

thanks gan, mungkin suatu saat pasti ane pakai cara ini, tapi kalau sekarang masih belum bisa edit meng edit kode html, thanks gan atas kunjungan tadi sore

31/08/12 01.12 O

PEMBERITAHUAN
--------------------------

Pembaca yang terhormat, perlu diketahui bahwasanya telah dilakukan update untuk artikel ini. Dimana update yang dimaksud dapat Anda lihat dalam artikel berikut ini:

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

Sekian, terimakasih, dan salam.

07/05/14 06.45 O

Artikelnya sangat bagus dan bermanfaat, kira-kira ada atau tidak ya template untuk tampilan selular yang lain yg mungkin lebih cocok dengan tampilan web blig saya ? Blig saya www.industrimigas.com barangkali ada yang punya tamplate selular yg memiliki kemiripan dengan tampilan web saya

07/05/14 07.46 O

@Admin Industri Migas Terimakasih Sobat.

Terkait dengan template yang cocok, saya pikir itu adalah satu hal yang relatif Sob. Sehingga ketika saya katakan cocok, bisa jadi saja tidak cocok bagi Sobat, dan begitu pula sebaliknya.

Sementara itu untuk mencari atau menemukan template seperti yang Sobat maksud, saya rasa Sobat dapat melakukan penelusuran dengan memakai search engine, karena menurut sepengetahuan saya ada cukup banyak blogger yang menyediakan template sesuai dengan kreasinya masing-masing.

Btw, saya lihat sepertinya untuk tampilan seluler blog yang Sobat kelola masih memakai desain default yang disediakan oleh Blogger. :)

How To ▶
Education ▶
SEO ▶
Other Internet ▶
Programming ▶
Tutorial ▶
DP & Story ▶
Tips & Trick ▶

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog