Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

4
Tgl. 31 Mei 2014

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

Tampilan Blog Dengan Desain Linear

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://lh4.googleusercontent.com/-eRDsEdCfSQw/UQmcgxiL9aI/AAAAAAAABHs/JaKhiAtPP04/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://lh4.googleusercontent.com/-Y6OQ9gcuVD0/Uy8WGC3kRZI/AAAAAAAACuY/_ihQWRU4B2Y/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.

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 4 komentar pada artikel ini ▶
17/06/14 07.38 O

saya sudah ikuti petunjut cara buat templatenya dari pertama sampai ke tahap 8 ini mas semuanya alhamdulillah lancar dan mudah di ikuti. tapi mulai dari penjelasan di tahap #8 ini pada bagian KEDUA, BILAH MENU dan KETIGA, CSS untuk penempatan scriptnya saya menemukan kendala mas kalau boleh kasi petunjuk gambar atau scriptnya dong mas seperti yang sudah sudah. hanya pada 2 hal tersebut di atas itu saja yg saya belum paham. semoga mas semar mau membantu terimakasih banyak atas jawabannya nanti. salam nubi mau belajar ^_^

17/06/14 14.02 O

@Pemulung Guamah Uraian tersebut sebenarnya sudah sangat jelas dan mudah untuk dikerjakan Sob. Namun demikian apabila ternyata Sobat masih mengalami kendala atau kesulitan dalam penerapannya, maka sebagai referensi yang dapat mempermudah Sobat dalam mengerjakannya silakan download saja XML template yang sudah jadi pada artikel ini: silakan klik di sini untuk membuka artikel yang saya maksud.

Dengan begitu harapan saya Sobat nanti dapat membandingkan temmplate yang telah Sobat kerjakan tahap demi tahap dengan template yang sudah jadi tersebut. Dan dengan begitu pula Sobat nanti dapat mengetahui secara lebih detail penempatan masing-masing kode yang mesti disisipkan ke dalam template.

22/07/14 20.24 O

Mantap mas, tutorialnya.
Sudah ga sabaran untuk melanjutkan yang ke V2 nya

04/08/14 00.28 O

@Erwan Setiawan Harap sabar Sob, sebab tahap yang berikutnya masih dalam proses penyusunan dan juga masih menunggu waktu yang tepat untuk menerbitkannya. :)

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