Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

8
Tgl. 27 Mei 2014

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

Tampilan Blog Dengan Desain Linear

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.

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 ▶
28/05/14, 12.42 O

wah udah sampai bagian ke 7.. lanjutkan mas :D

28/05/14, 13.30 O

@MAz Mawan Iya Sob. Setelah ini tinggal beberapa tahap lagi yang perlu dikerjakan.

29/05/14, 17.30 O

post yang sangat bermanfaat. saya sudah ikuti step stepnya dan sekarang saya bisa buat template dengan kreasi sendiri dari awal.

30/05/14, 00.57 O

@jona rendra Terimakasih Sob. Akan tetapi karena ini belum selesai sampai dengan tahap akhir, maka bisa jadi Sobat masih harus mengikuti postingan selanjutnya untuk menyelesaikan dan menyempurnakan template yang Sobat buat.

15/06/14, 22.48 O

sobat eltelu dari penerapan di atas saya punya masalah di bagian sidebar yang tidak muncul di template

untuk itu mohon dengan detail untuk buat artikel dengan cara membuat sidebar

di bagian langkah ini

sekian dan salam bloger

16/06/14, 00.14 O

@sncmulty Sobat, apabila langkah yang pertama telah dikerjakan dengan benar, maka saya dapat memastikan bahwa sidebar secara otomatis akan terpasang pada template. Hanya saja karena dalam tutorial ini teknik yang dipakai adalah teknik linear, maka untuk sementara sidebar yang terpasang akan terletak di bawah blog posting. Sehingga untuk melakukan pengecekan terhadap fungsionalitas sidebar yang terpasang, ada baiknya bila Sobat coba tambahkan widget tertentu, misalnya widget entri populer. Semoga dapat membantu dan tidak lupa juga saya sampaikan salam. :)

20/06/14, 23.32 O

trimakasih atas pencerahanya sobat

sobat apakah letak tanggal posting nya berada di sebelah kanan judul posting?

dan bila saya amati dari segi tangal penerbitan yang bila saya punya judul postingan yang panjang tampilanya bentrok mas

mohon pantinjau untuk bagian tanggal posting

maaf mas banyak tanya

21/06/14, 07.49 O

@sncmulty Sebenarnya letak kode untuk menampilkan tanggal posting berada di bagian atas judul, Sob. Hanya saja agar terkesan tidak terdapat bidang kosong di sisi tanggal, maka bagian tersebut sengaja saya beri setelan CSS float: right; yang akhirnya memposisikan tanggal sejajar dengan judul pada bagian sebelah kanan.

Dengan cara seperti itu konsekwensinya memang apabila judul posting cukup panjang maka baris pertama dari judul secara otomatis akan terpotong dan kemudian berpindah ke baris berikutnya.

Akan tetapi walaupun begitu saya pikir masih ada jarak beberapa piksel yang dapat dipakai untuk membedakan judul dengan tanggal.

Namun demikian perlu diingat bahwa penempatan tanggal bukanlah harga mati. Sehingga apabila penempatan tanggal posting pada bagian tersebut kiranya kurang cocok, maka silakan dilakukan modifikasi sesuai dengan yang Sobat kehendaki sehingga nantinya desain akhir yang dihasilkan juga sesuai dengan yang Sobat inginkan.

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