Menyempurnakan Desain Dan Tag Meta Semar Bingung Blogger Template Versi 1 - Belajar Tahap #8

Bagi Anda yang sebelum ini aktif mengikuti step by step turorial perancangan dan pembuatan template mulai dari 0 (nol) sampai dengan jadi, maka perlu Anda ketahui bahwa uraian dalam artikel ini merupakan ulasan tahap akhir untuk perancangan dan pembuatan Semar Bingung Blogger Template Versi 1. Dimana pada tahap ini kita akan membahas beberapa hal terkait dengan template uji coba sebelumnya yaitu tentang penyempurnaan desain dan tag meta yang tertanam dalam template.

Namun demikian bagi Anda yang baru saja menemukan dan membaca artikel ini, maka ada baiknya bila Anda buka dan pelajari terlebih dulu beberapa tahap tutorial pembuatan template sebelumnya yang dapat Anda temukan dalam katagori Themes. Hal ini disebabkan karena ulasan yang terdapat pada masing-masing tahap merupakan ulasan yang saling berhubungan dan berkelanjutan, sehingga tidak dapat dipisahkan antara yang satu dengan yang lainnya.

Kemudian untuk mempersingkat pembahasan sekaligus melanjutkan ulasan yang saya uraikan dalam artikel sebelumnya, maka berikut di bawah ini merupakan beberapa hal yang perlu Anda lakukan untuk menyempurnakan template uji coba yang telah Anda buat. Oleh sebab itu buka terlebih dulu template uji coba Anda baru kemudian kerjakan beberapa hal di bawah ini secara urut dan runtut.

Pertama, HTML.

Seperti yang telah saya sampaikan pada ulasan tahap sebelumnya (dalam hal ini adalah ulasan tahap 7) bahwa perancangan dan pembuatan template sampai dengan tahap tersebut baru dilakukan pada versi desktop saja. Sedangkan untuk template versi seluler belum tersentuh sama sekali. Sehingga guna menyempurnakan HTML untuk desain tampilan versi seluler, dapat Anda lakukan dengan cara sebagai berikut:

Cari rangkaian kode seperti contoh yang saya cuplik di bawah ini.

<b:includable id='mobile-index-post' var='post'>
  <!-- di sini terdapat rangkaian kode standar template -->
</b:includable>

Dan kemudian apabila rangkaian kode seperti contoh tersebut sudah ketemu, gantilah seluruhnya dengan rangkaian kode di bawah ini.

<b:includable id='mobile-index-post' var='post'>
  <table class='tabel-index'>
    <tbody>
      <tr>
        <td class='tabel-index-kiri'>
          <b:if cond='data:post.thumbnailUrl'>
            <div class='gambar-index'>
              <img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' expr:title='data:post.title'/>
              <br/>
            </div>
            <b:else/>
            <div class='gambar-index'>
              <img expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw7A50e0EsSeKGypkTz5HqRyKXL0n38JEpjvnykpo-afjGM_z2zcX-j11zE_JMB0H7DrYUAPHvNvjuabAbHljkcClAQaxy-T_SS_GJHdJfR9uAJhNJJQm7X2_SyfLual6PARTXOd0njWY/s144/No%2520Image.jpg'/>
              <br/>
            </div>
          </b:if>
        </td>
        <td class='tabel-index-tengah'>
          <a expr:name='data:post.id'/>
          <h3 class='judul-index'>
            <a expr:href='data:post.url'>
              <data:post.title/>
            </a>
          </h3>
          <b:if cond='data:post.snippet'>
            <span class='ringkasan-index'>
              <data:post.snippet/>
            </span>
          </b:if>
          <b:if cond='data:post.numComments == 0'>
            <span class='komentar-index'>
              0 komentar
            </span>
            <b:else/>
            <b:if cond='data:post.numComments == 1'>
              <span class='komentar-index'>
                1 komentar
              </span>
              <b:else/>
              <span class='komentar-index'>
                <data:post.numComments/> komentar
              </span>
            </b:if>
          </b:if>
        </td>
        <td class='tabel-index-kanan'>
          <a class='lingkaran' expr:href='data:post.url'>
            <img alt='&gt;' class='panah' height='22' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmwwqXzOmHClUWO8kmEuAggVPTwLci_b6RL654wN0T_T3xtMCURFiwQkC1vQHh084eTN_GBp3vC6G7BOynlv5ZB1JNF1XyYIngp95pZedDsrm-sGRMZ8ZpKRA6iBd0_OiXpBnqjVuhe-M/s800/Panah.png' title='Baca Selengkapnya' width='15'/>
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</b:includable>

Kedua, Bilah Menu.

Agar bilah menu yang tampil pada blog versi seluler sama dengan bilah menu yang ditampilkan pada versi desktop, maka carilah widget PageList1 dan kemudian gantilah seluruh rangkaian kode untuk bagian tersebut dengan rangkaian kode di bawah ini.

<b:widget id='PageList1' locked='true' title='Pages' type='PageList'>
  <b:includable id='main'>
    <b:if cond='data:title'><h2><data:title/></h2></b:if>
    <div class='widget-content'>
        <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:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>

Ketiga, CSS.

Guna menyempurnakan tampilan halaman versi seluler, maka tambahkan CSS di bawah ini di dalam area skin template.

.mobile .description{
  margin:10px 10px 0 0px;
}
.mobile .post{
  padding:0px;
  margin:0px;
}
.mobile h3.post-title{
  font-size:15px;
  margin-bottom:20px;
}
.mobile .ringkasan-index,
.mobile .tabel-index-kanan{
  display:none;
}

Selanjutnya ganti kode <body> dengan kode di bawah ini agar nantinya dapat membaca class .mobile pada tampilan khusus untuk versi seluler.

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Keempat, Tag Meta.

Untuk menyempurnakan tag meta template sesuai dengan tag meta standar yang terpasang pada template default Blogger, maka tambahkan rangkaian kode berikut ini tepat di bawah <head>.

<b:if cond='data:blog.isMobile'>
  <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
  <meta content='width=1100' name='viewport'/>
</b:if>

Selanjutnya tambahkan rangkaian kode berikut ini tepat di atas </head>.

<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:include data='blog' name='google-analytics'/>

Dan kemudian tambahkan pula rangkaian kode berikut ini tepat di atas <header>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
  <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
    <meta expr:content='data:blog.title' itemprop='name'/>
    <b:if cond='data:blog.metaDescription'>
      <meta expr:content='data:blog.metaDescription' itemprop='description'/>
    </b:if>
  </div>
</b:if>

Kelima, simpan template.

Lakukan pengecekan pada tampilan blog versi seluler uji coba Anda dengan cara menambahkan ?m=1 di belakang URL. Dalam hal ini sebagai contoh misalnya adalah http://uji-eltelu-7.blogspot.com/?m=1 yang tampilannya dapat Anda lihat dengan cara membuka tautan ini.

Namun demikian apabila Anda mengalami kendala dalam penerapan beberapa tahapan di atas, maka silakan sampaikan kendala atau kesulitan yang Anda alami dengan cara mengeposkan komentar dalam artikel ini.

Untuk selanjutnya  perlu Anda ketahui bahwa hasil dari perancangan dan pembuatan template ini kedepannya masih dapat dikembangkan lagi. Oleh sebab itulah pada judul artikel ini saya mencantumkan “Semar Bingung Blogger Template Versi 1” sebagai sebutan untuk template tersebut karena kedepannya saya masih berencana melanjutkan tutorial ini ke tahapan yang berikutnya, yaitu tahapan untuk merancang dan membuat Semar Bingung Blogger Template Versi yang Ke-2.