Membuat Template Blog Hasil Karya Sendiri

Pada posting sebelumnya, kita telah mengetahui tentang dasar penyusunan template di Blogger.com. Sekarang tinggal tergantung pada kreativitas masing-masing dalam menambahkan beberapa selector atau elemen HTML5 agar blog dapat ditampilkan pada layar peramban. Toturial berikut dapat diterapkan dengan cara yang berbeda pada tiap blog & tentu saja tergantung pada pengelola blog yang bersangkutan. Untuk pembuatan blog dari awal mungkin tidak akan menemukan masalah yang berarti, namun jika dilakukan pada blog yang telah memiliki posting, pembaharuan template kemungkinan besar akan meninggalkan residu dari pengkodean template sebelumnya. Adapun agar template kembali segar, maka dibutuhkan sedikit trik untuk melakukan reset template, yakni — dengan cara — pergi ke dashboard Blogger.com, kemudian “terapkan” salah satu template dasar.

Sebagai langkah pertama, silakan simpan (copy & paste) beberapa widget yang mungkin akan kita tampilkan dalam blog — seperti navbar, header, dan main (Posting Blog) — pada “Edit HTML”. Kemudian bersihkan semua kode, sehingga area “Edit HTML” menjadi kosong dan masukkan HTML (Hypertext Markup Language) berikut.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
  <!--[if lte IE 8]> <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> <![endif]-->
  <!--[if gte IE 9]> <meta content='IE=9' http-equiv='X-UA-Compatible'/> <![endif]-->
  <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=960' name='viewport'/>
  </b:if>
  <b:include data='blog' name='all-head-content'/>
  <title>
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
      <data:blog.title/>
    <b:else/>
      <data:blog.pageName/> | <data:blog.title/>
    </b:if>
  </title>
 <b:skin><![CDATA[/*
--------------------------------------------------------------
Blogger Template Style
Name:  
URL:  
Designer: 
-------------------------------------------------------------- */

/* =Reset
----------------------------------------------- */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}a:hover,a:active{outline: none}table{border-collapse:collapse;border-spacing:0}input,select{vertical-align:middle}
  ]]></b:skin>
  </head>
  <body expr:class='"loading" + data:blog.mobileClass'>
  </body>
</html>

Kedua, tambahkan satu-persatu kode widget dalam tubuh HTML (<body>). Misalnya:

  <body expr:class='"loading" + data:blog.mobileClass'>
  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/>
</b:section>

  <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>

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

Ketiga, memberikan beberapa selector atau elemen pada HTML5 untuk mengapit kode widget. Semakin sederhana struktur pengkodean, maka akan semakin mudah dalam melakukan kustomisasi. Selector id berarti kustomasi hanya dilakukan pada id yang bersangkutan & tidak ada perulangan, karena sifatnya yang unik (satu id sama dengan satu elemen). Sedangkan class dapat digunakan secara berulang-ulang pada karakter pengkodean yang sama (satu class sama dengan beberapa elemen).

  <body expr:class='"loading" + data:blog.mobileClass'>
  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

<div id='content'>

  <header id='header-content'>
    <div class='head-wrap'>
      <div class='header-group'>
  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/>
</b:section>
      </div><!-- .header-group -->
    </div><!-- .head-wrap -->
  </header><!-- #header-content -->

  <div id='main-wrapper'>
    <div id='main-content'>
  <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
    </div><!-- #main-content -->
    <aside id='sidebar-content'>
  <b:section class='sidebar' id='sidebar' preferred='yes'/>
    </aside><!-- #sidebar-content -->
    <div style='clear:both;'></div> <!-- Mungkin lebih baik menggunakan <div class='clear'></div> yang diatur dengan CSS -->
  </div><!-- #main-wrapper -->

  <footer id='footer-content'>
    <div class='foot-wrap'>
      <div id='content-info'>
        <p>&amp;copy; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl' title='Beranda'><data:blog.title/></a>. All Right Reserved. <a class='to-top' href='#content' title='Return to top'>Top</a>&#8593; <br/>Powered by <a href='http://www.blogger.com'>Blogger.com</a></p>
      </div><!-- #content-info -->
    </div><!-- .foot-wrap -->
  </footer><!-- #footer-content -->

</div><!-- #content -->
  </body>

Keempat, simpan HTML template hasil modifikasi tersebut. Pada tampilan sederhana, hasil yang ditunjukkan oleh pengkodean di atas adalah menggunakan satu kolom & memanfaatkan seluruh lebar halaman peramban. Oleh karena kita belum melakukan konfigurasi pada CSS (Cascading Style Sheets) dalam markah <head>. Contoh CSS berikut menggunakan fixed layout dengan lebar konten 960px sesuai dengan <meta content='width=960' name='viewport'/>.

 <b:skin><![CDATA[/*
--------------------------------------------------------------
Blogger Template Style
Name:  
URL:  
Designer: 
-------------------------------------------------------------- */

/* =Reset
----------------------------------------------- */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}a:hover,a:active{outline: none}table{border-collapse:collapse;border-spacing:0}input,select{vertical-align:middle}

/* =Layout
----------------------------------------------- */
#content {
margin: 0 auto;
width: 960px;
}
#header-content,
#main-wrapper,
#footer-content {
width: 100%;
}
#main-content,
#sidebar-content {
display: inline;
position: relative;
}
#main-content {
float: left; /* Tentukan letak main-content di sebelah kanan (right) atau kiri */
width: 640px;
}
#sidebar-content {
float: left;
width: 320px;
}
.header .widget,
.main .widget,
.sidebar .widget {
margin-left: 15px;
margin-right: 15px;
word-wrap: break-word;
}

/* =Global
----------------------------------------------- */
body,
button,
input,
select,
textarea {
color: #000;
font: .9375em/1.6em 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body {
background: #fff;
text-align: left;
width: 100%;
}
body:before, body:after {
content: '';
display: table;
}
body:after {
clear: both;
}

/* Mungkin lebih baik menggunakan CSS berikut dibandingkan dengan <div style="clear:both;"></div> */
.clear {
clear: both;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
width: 0;
}

… dan seterusnya …
  ]]></b:skin>

Kelima, pratinjau hasilnya & apabila telah sesuai dengan kriteria tampilan blog yang kita inginkan “simpan” template.

Dengan 5 (lima) langkah di atas, kita telah dapat membuat template blog hasil karya sendiri, meskipun dalam menyelesaikan beberapa tahapan tersebut membutuhkan pemahaman yang lebih tentang CSS dan HTML. Bukan sebatas itu saja, bahkan lebih spesifik akan meliputi berbagai aspek yang dibutuhkan oleh sebuah situs web atau blog agar mendekati aksesibilitas di sisi pengguna. Kata paling sederhana mungkin mengandung makna mudah dibaca serta keterbacaan. Oh, iya! Hampir lupa, untuk pemanfaatan selector class yang digunakan pada beberapa elemen belum ada pada posting di atas. Daripada lupa akan dicontohkan melalui penambahan 3 (tiga) kolom pada footer berikut.

HTML

  <footer id='footer-content'>
    <div class='foot-wrap'>
      <div id='sidebar-footer'>
        <aside class='supplementary'>
  <b:section class='sidebar' id='sidebar2' preferred='yes'/>
  </aside>
        <aside class='supplementary'>
  <b:section class='sidebar' id='sidebar3' preferred='yes'/>
  </aside>
        <aside class='supplementary'>
  <b:section class='sidebar' id='sidebar4' preferred='yes'/>
  </aside>
        <div class='clear'></div>
      </div><!-- #sidebar-footer -->
      <div id='content-info'>
        <p>&amp;copy; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl' title='Beranda'><data:blog.title/></a>. All Right Reserved. <a class='to-top' href='#content' title='Return to top'>Top</a>&#8593;<br/> Powered by <a href='http://www.blogger.com'>Blogger.com</a></p>
      </div><!-- #content-info -->
    </div><!-- .foot-wrap -->
  </footer><!-- #footer-content -->

CSS

.supplementary {
display: inline;
float: left;
position: relative;
width: 320px;
}

Catatan: Untuk kode yang berwarna orange, konfigurasi CSS widget dalam section class='sidebar' sama dengan pengkodean sebelumnya (.sidebar .widget).

Sederhana bukan? Jika sebuah elemen memiliki karakteristik yang sama, alangkah lebih baik apabila digabungkan dengan pengkodean elemen lain. Hal tersebut dimaksudkan agar pengkodean lebih mudah dikustomisasi & dengan harapan — mungkin — akan lebih semantik.

20 komentar untuk “Membuat Template Blog Hasil Karya Sendiri”

  1. saya juga pengen bisa membuat template sendiri untuk blog saya namun sepertinya sulit ni..
    terima kasih atas ulasannya, sangat bermanfaat..

    BalasHapus
  2. hmm, aku jg pngn pake template yg desain sndiri..
    tp, blm keburu ngulik. hihi

    makasih infonya kakak... :D aku bookmark dlu ahh.. ^^

    BalasHapus
  3. ini yang saya tunggu,hehe..
    kebetulan bgt sekarang gi coba-coba bikin template, tpi cuma modifikasi template bawaan blogger, plus aplikasi gratisan dari alleycode.
    oot dari struktur template.
    Nanya ya, saya coba cuma nampilin judul post saat label d klik, pake kode ini ;

    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType != "item"'>
    <a expr:href='data:post.url'>
    <data:post.title/></a><br/><br/>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>

    yang jadi masalah, halaman seperti about me, TOS, dan privacy policy jadi ga bisa di buka, kira-kira ada solusi ga? di bantu ya..,prok,prok,prok,hehe..

    BalasHapus
    Balasan
    1. @Liz Wana — Maaf, 12-12-12 ternyata hari padam listrik di tempat saya. Terima kasih sudah mengingatkan untuk dua posting sejenis yang belum diperbaharui (Klik Label yang Tampil Judul Posting Saja dan modifikasinya). Posting tersebut diterbitkan sebelum pihak pengembang Blogger™ menambahkan fitur halaman statis, sehingga akan mengakibatkan posting pada halaman statis itu tidak bisa terbuka. COba ganti markup sebelumnya dengan kode berikut:

      <b:if cond='data:blog.homepageUrl != data:blog.url'>
      <b:if cond='data:blog.pageType == "static_page"'>
      <b:include data='post' name='post'/>
      <b:else/>
      <b:if cond='data:blog.pageType != "item"'>
      <a expr:href='data:post.url'>
      <data:post.title/>
      </a>
      <b:else/>
      <b:include data='post' name='post'/>
      </b:if>
      </b:if>
      <b:else/>
      <b:include data='post' name='post'/>
      </b:if>

      Artinya: Selain halaman beranda, halaman statis, dan halaman posting, maka tampilkan judul posting saja.

      Hapus
    2. sip, sukses, hehe..
      tapi ada masalah baru, masalah percaya diri, hehe..
      simpan sambil nunggu saat yang tepat aj deh,
      thank's ya..

      Hapus
  4. wah.. jadi pngen jg nich bikin kreasi template sendiri, pastinya bakal lebih seru bikinnya.

    BalasHapus
  5. wiikh ,,pasti dengan tips kali ini ,,blog nya makin rame ,,mudah mudahan dekh

    BalasHapus
  6. bakalan lebih rame ajjha nih nantinya gan ,,kreatifitas emang sangat diperlukan dalam hal seperti ini

    BalasHapus
  7. Saya kira bikin template blog itu susah, ternyata emang :D
    apalagi kalo ga serius n pengen instan.

    kalo ga salah bisa kan pake software artisteer ya kalo ga salah
    CMIIW

    BalasHapus
    Balasan
    1. Betul, bahkan perangkat lunak gratisan lain yang sejenis juga bisa digunakan. Lumayan untuk menghemat waktu coding. Tetapi kalau terbiasa manual, umumnya pengaturan tata letak relatif mudah. Yah, tinggal melengkapi kustomisasi pengkodean lain agar tampilannya sesuai dan menarik yang agak rumit.

      Hapus
  8. meski belajar banyak ni biar bisa coding, keliatanya susah

    BalasHapus
  9. Nice infonya admin..
    Buat template buat blog memang membutuhkan ke-kreatifan..
    Tapi sulit untuk mewujudkannya..

    BalasHapus
  10. pusing liatnya....harus pake bahasa begituan ya gan?tampilannya kayak gimana ya?

    BalasHapus
    Balasan
    1. Contoh tampilannya seperti blog ini. Posting di atas sekedar dasar pembentukkan, bukan merupakan template jadi, sehingga masih banyak struktur pengkodean yang perlu dikustomisasi. Apabila sering berhubungan dengan CSS atau HTML, mungkin akan lebih gampang. :)

      Hapus
  11. ingin sekali memiliki template sendiri :)

    BalasHapus
  12. Ijin nyimak bang..maklum nih Newbis jadi g ngerti cara bikin template. pengen juga sih sebenernya bikin template sendiri.

    BalasHapus
  13. Wah mantab gan, artikelnya sangat membantu.
    Saya jadi tertarik membuat template sendiri :D
    Salam kenal, semoga makin sukses ya.

    BalasHapus
  14. wah sangat membingungkan bagi ane..maklum masih newbie...hehehe :)

    BalasHapus
  15. Butuh waktu yang luar biasa untuk bisa mencapai ke sana apa lagi tidak adanya dasar-dasar pemprogrraman website

    BalasHapus
    Balasan
    1. Yah, itupun jika kita ingin membuat template sendiri. Apabila sekedar menyunting template orang lain berarti bukan karya sendiri, tetapi karya orang lain dan tetap harus mencantumkan pranala asli dari template tersebut.

      Hapus