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”

Jefry11 Desember 2012 pukul 12.29
saya juga pengen bisa membuat template sendiri untuk blog saya namun sepertinya sulit ni..
terima kasih atas ulasannya, sangat bermanfaat..
BalasHapus
Balasan
obat tbc12 Desember 2012 pukul 12.21
hmm, aku jg pngn pake template yg desain sndiri..
tp, blm keburu ngulik. hihi

makasih infonya kakak... :D aku bookmark dlu ahh.. ^^
BalasHapus
Balasan
Lizwanaa12 Desember 2012 pukul 16.59
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
Unknown13 Desember 2012 pukul 07.23
wah.. jadi pngen jg nich bikin kreasi template sendiri, pastinya bakal lebih seru bikinnya.
BalasHapus
Balasan
amir17 Desember 2012 pukul 15.08
wiikh ,,pasti dengan tips kali ini ,,blog nya makin rame ,,mudah mudahan dekh
BalasHapus
Balasan
Harista17 Desember 2012 pukul 21.46
bakalan lebih rame ajjha nih nantinya gan ,,kreatifitas emang sangat diperlukan dalam hal seperti ini
BalasHapus
Balasan
Prakoso Bayu19 Desember 2012 pukul 20.42
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
Anonim20 Desember 2012 pukul 18.40
meski belajar banyak ni biar bisa coding, keliatanya susah
BalasHapus
Balasan
DShare 3325 Desember 2012 pukul 17.17
Nice infonya admin..
Buat template buat blog memang membutuhkan ke-kreatifan..
Tapi sulit untuk mewujudkannya..
BalasHapus
Balasan
The Jocker25 Desember 2012 pukul 18.20
pusing liatnya....harus pake bahasa begituan ya gan?tampilannya kayak gimana ya?
BalasHapus
Balasan
Ridhwan26 Desember 2012 pukul 01.04
ingin sekali memiliki template sendiri :)
BalasHapus
Balasan
Unknown26 Desember 2012 pukul 03.30
Ijin nyimak bang..maklum nih Newbis jadi g ngerti cara bikin template. pengen juga sih sebenernya bikin template sendiri.
BalasHapus
Balasan
BIOalpha Network2 Januari 2013 pukul 16.37
Wah mantab gan, artikelnya sangat membantu.
Saya jadi tertarik membuat template sendiri :D
Salam kenal, semoga makin sukses ya.
BalasHapus
Balasan
zakkysoft1810 Januari 2013 pukul 12.28
wah sangat membingungkan bagi ane..maklum masih newbie...hehehe :)
BalasHapus
Balasan
Revel12 Januari 2013 pukul 11.57
Butuh waktu yang luar biasa untuk bisa mencapai ke sana apa lagi tidak adanya dasar-dasar pemprogrraman website
BalasHapus
Balasan

Tambahkan komentar

Komentar baru tidak diizinkan.

Optimasi Blog

Laman

Membuat Template Blog Hasil Karya Sendiri

20 komentar untuk “Membuat Template Blog Hasil Karya Sendiri”