Belajar Mandiri Membuat Tema Template Blog Bersama Semar Bingung - Tahap #7

Artikel ini merupakan bagian yang tak terpisahkan dari beberapa artikel lainnya pada katagori Themes yang mengulas tentang step by step merancang dan membuat template sendiri mulai dari 0 (nol) sampai dengan jadi.  Sehingga bagi Anda yang baru menemukan artikel ini dan belum pernah membaca serta mempelajari ulasan yang terdapat dalam rangkaian artikel lainnya, maka sangat disarankan bagi Anda untuk mempelajarinya tahap demi tahap mulai dari tahap 1, tahap 2, tahap 3, tahap 4, tahap 5, dan tahap 6, baru kemudian melanjutkannya pada tahap 7, yaitu seperti yang diulas pada artikel ini.

Namun demikian bagi Anda yang sebelum ini telah mempelajari dan atau bahkan telah menerapkan beberapa tutorial yang terdapat pada beberapa artikel tersebut di atas, maka sekarang Anda dapat melanjutkan perancangan dan pembuatan template yang telah Anda lakukan sebelumnya dengan cara mengerjakan langkah-langkah berikut ini secara urut dan runtut. Akan tetapi karena di sini nanti ada beberapa tahapan yang mesti Anda kerjakan sekaligus, maka guna mempersingkat pembahasan ada baiknya bila langsung menuju pada langkah-langkah pengerjaan untuk masing-masing bagian. Sehingga untuk mengerjakan hal tersebut bukalah terlebih dulu template uji coba yang telah Anda buat sebelumnya, baru kemudian kerjakan beberapa tahapan di bawah ini.

Pertama, membuat sidebar.

Perlu diketahui walaupun rancangan template yang saat ini sedang Anda buat menggunakan model linear, bukan berarti tidak memiliki sidebar didalamnya. Sehingga agar nantinya Anda dapat menambahkan serta memasang widget (misal: widget entri populer) pada sidebar atau bagian laman yang umumnya terletak di sisi sebelah kiri – kanan posting, maka sisipkan rangkaian kode berikut ini diantara <aside> dan </aside>.

<b:section class='sidebar' id='sidebar' showaddelement='yes'>
</b:section>

Sehingga akhirnya menjadi seperti rangkaian kode di bawah ini.

<aside>
  <b:section class='sidebar' id='sidebar' showaddelement='yes'>
  </b:section>
</aside>

Kedua, memasang tanggal penerbitan.

Informasi tentang tanggal penerbitan sebuah artikel cukup penting bagi pembaca. Terutama apabila artikel yang dimaksud digunakan sebagai bahan rujukan, maka tanggal penerbitan sangatlah diperlukan karena tanggal penerbitan sebuah artikel umumnya juga akan dicantumkan pada daftar rujukan. Oleh sebab itu guna menampilkan tanggal penerbitan pada tiap postingan, carilah terlebih dulu kode <b:includable id='post' var='post'> yang terdapat dalam template Anda. Baru kemudian setelah kode tersebut Anda temukan, maka lihatlah beberapa baris di bawahnya untuk menemukan kode <a expr:name='data:post.id'/>. Dan apabila kode yang kedua tersebut juga telah Anda temukan, maka sisipkan rangkaian kode berikut ini tepat di bawahnya.

<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'><span> | <data:post.dateHeader/></span></h2>
</b:if>

Ketiga, memasang menu navigasi.

Guna memberikan kemudahan bagi pembaca untuk menelusuri artikel yang diterbitkan pada sebuah blog, maka diperlukan adanya navigasi yang jelas. Sehingga untuk menampilkan navigasi pada rancangan template yang Anda buat, carilah terlebih dulu kode <b:include name='mobile-main'/> yang terdapat dalam template Anda. Baru kemudian setelah kode tersebut Anda temukan, maka lihatlah satu baris di atasnya untuk menemukan kode <b:else/>. Dan apabila kode yang kedua tersebut juga telah Anda temukan, maka sisipkan kode <b:include name='nextprev'/> tepat di atasnya, sehingga akhirnya rangkaian kode untuk bagian tersebut akan menjadi seperti di bawah ini.

  <b:include name='nextprev'/>
<b:else/>
  <b:include name='mobile-main'/>
</b:if>

Keempat, melengkapi footer laman.

Footer dapat dikatakan sebagai salah satu bagian yang hampir tak terpisahkan dari sebuah laman. Pada bagian ini umumnya dipakai untuk menempatkan link credit dan atau adakalanya juga digunakan untuk menempatkan menu navigasi yang lainnya. Oleh sebab itu untuk melengkapi bagian footer maka hapuslah terlebih dulu rangkaian kode di bawah ini.

<macro:include id='pref' name='sections'>
</macro:include>

Dan hapus juga rangkaian kode di bawah ini.

<macro:includable id='sections' var='col'>
  <b:section mexpr:id='data:col.idPrefix + &quot;-1&quot;' preferred='yes' showaddelement='yes'/>
</macro:includable>

Baru kemudian sisipkan rangkaian kode berikut ini di antara <footer> dan </footer>.

<div id='credit'>
  <a rel='nofollow' href='#'><img alt='' height='34' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw7A50e0EsSeKGypkTz5HqRyKXL0n38JEpjvnykpo-afjGM_z2zcX-j11zE_JMB0H7DrYUAPHvNvjuabAbHljkcClAQaxy-T_SS_GJHdJfR9uAJhNJJQm7X2_SyfLual6PARTXOd0njWY/s144/No%2520Image.jpg' title='Eltelu' width='34'/></a>
  <span><a href='#navbar' style='float:right;'>Ke Atas [ &#8593; ]</a></span>
  <span>
    &#169; <a rel='nofollow' href='#'>Blog Anda</a><br/>
    Supported by <a rel='nofollow' href='https://plus.google.com/104792963386245109966' target='_blank'>Semar Bingung</a>
    - Powered by <a rel='nofollow' href='http://www.blogger.com/' target='_blank'>Blogger</a>
  </span>
</div>

Kelima, memasang CSS.

Dalam hal desain, CSS itu ibaratnya seperti baju yang dapat dipakai oleh seseorang untuk memperindah serta mempercantik penampilan. Sehingga pemakaian CSS dalam template sangat diperlukan karena bila tidak begitu maka laman blog akan tampil berantakan dan terkesan acak-acakan. Bayangkan saja apa jadinya bila seseorang tidak mengenakan baju atau pakaian sama sekali, sementara itu dia dilihat oleh banyak orang. Akan sangat malu dan memalukan bukan? Begitu pula dengan blog Anda, karena nantinya juga dilihat oleh banyak orang maka template yang dipakai tentu saja juga harus ditata dan didesain sedemikian rupa dengan memanfaatkan CSS agar tampilannya tampak cantik dan indah.  Sehingga untuk memperindah dan mempercantik tampilan dari template yang Anda buat, dapat dilakukan dengan menambahkan CSS berikut ini tepat diantara <![CDATA[ dan ]]>.

html, body, ul, dir, nav, aside, hgroup, header, footer, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0px;padding:0px;border:0px none;outline:0px none;background:transparent;}
a:link {text-decoration:none;color: blue;}a:visited {color: rgb(72,14,182);} a:hover {color: darkblue;}
html, body{background:#f1f1f1;}
body{
  font-family:arial,sans-serif;
  font-size:14px;
  color:#444;
  line-height:1.3;
  display:block;
  width:100%;
  max-width:740px;
  margin:0px auto;
  word-wrap:break-word;
}
header,#header,#tab,#main,#sidebar,aside,footer{
  background:#fff;
}
#header{
  padding:5px;
}
#tab h2{
  display:none;
}
#tab{
  padding:0px 5px 10px 5px;
}
#tab ul{
  padding:5px;
  background:#fbfbfb;
  border:1px solid #e8e8e8;
}
#tab li{
  list-style:none;
  display:inline-block;
  margin-right:10px;
}
#tab li:last-child{
  margin-right:0px;
}
#main {
  padding:0px 5px;
  overflow:hidden;
}
.tabel-index{
  width:100%;
  padding:5px;
  margin: 0px 0px 10px 0px;
  border:solid 1px #eee;
}
.tabel-index-kiri{
  width:80px;
}
.tabel-index-kiri img{
  width:72px;
  height:72px;
}
.tabel-index-tengah{
  text-align:justify;
}
.judul-index{
  margin-bottom:10px;
  font-size:15px;
}
.komentar-index{
  float:right;
}
.tabel-index-kanan{
  width:50px;
}
.lingkaran{
  float:right;
  height:40px;
  width:40px;
  border-radius:50%;
  background: rgb(165, 165, 165);
}
.lingkaran:hover{
  background: rgb(118, 118, 118);
}
.panah{
  margin-top:9px;
  margin-left:15px;
  font-size:26px;
  color:#ffffff;
}
#sidebar{
  padding:0px 5px;
  overflow:hidden;
}
.sidebar .widget{
  border:1px solid #eee;
  margin-bottom:10px;
}
.sidebar .widget h2{
  background:#fbfbfb;
  border-bottom:1px solid #eee;
  padding:5px;
  font-size:15px;
}
.sidebar .widget-content{
  padding:5px;
  text-align:justify;
}
.sidebar .widget-content li{
  list-style:none;
}
.list-label-widget-content li{
  display:inline-block;
  margin-right:10px;
}
footer{
  padding:0px 5px;
}
#credit{
  padding:0px 0px 5px 0px;
}
#credit img{
  float:left;
  margin-right:5px;
}
.post-title{
  margin-bottom:20px;
}
.popling{
  display:inline-block;
  float:right;
  overflow:hidden;
  margin-left:10px;
  margin-top:10px;
}
.date-header{
  float:right;
  font-size:15px;
}
.entry-title{
  font-size:15px;
}

Kemudian tambahkan pula rangkaian di bawah ini tepat di atas </head>.

<b:if cond='data:blog.pageType != &quot;index&quot;'>
  <style type='text/css'>
    .blog-posts{
      margin:0px 0px 10px 0px;
      padding:5px;
      border:1px solid #eee;
      overflow:hidden;
    }
  </style>
</b:if>   

Keenam, lakukan pratinjau dan kemudian simpan template.

Apabila dalam mengerjakan langkah-langkah tersebut di atas tidak ada kekeliruan, maka hasil yang diperoleh lebih kurang adalah seperti yang dapat Anda lihat pada blog demo ini. Namun demikian karena pada blog demo tersebut tidak menyediakan laman statis, maka bila Anda ingin mengetahui hasil yang didapat pada blog dengan laman statis, silakan klik di sini untuk melihatnya.

Selanjutnya perlu diketahui bahwa sampai dengan tahap ini kita belum menyentuh rancangan versi mobile sama sekali. Rancangan versi mobile akan kita bahas pada ulasan yang berikutnya, dan apabila Anda mengalami kendala dalam menerapkan langkah-langkah tersebut di atas, maka dapat Anda sampaikan dengan cara mengeposkan komentar dalam artikel ini.