~Syalalalaa: Membuat Template Blog sendiri Dengan Notepad

Jumat, 20 April 2012

Hai Sobat! Sudah lama saya tak berjumpa lagi, udah jarang ngepost lagi, dan otak-atik blog lagi nih :D . Untuk itu, saya mohon maaf dikarenakan kemarin saya lagi ulangan tengah semester :) . Pada saat ulangan telah usai saya menyempatkan diri membeli pulsa modem, saya browsing dan menemukan satu blog yang templatenya keren.. saya menanyakan ke Admin blog tentang templatenya, dan ternyata dia membuatnya sendiri dengan Notepad dan sedikit gambar yang dibuat dari Corel Draw. Sayangnya Admin blog tersebut mungkin tidak mau membocorkan cara untuk membuat template, tapi saya Mencoba membuat template tersebut secara online di Tataletak blog. Beberapa elemen saya ubah dan ubah, Beberapa kode saya tulis, dan beberapa kode juga saya hapus, beberapa waktu kemudian saya menemukan caranya.. :P Check it out ;)

Hal yang harus diperhatikan dalam mendesain template blog ada lah anda harus memahami "Tag HTML" dan juga beberapa kode CSS untuk membuat Blog menarik.

Langsung Unduh ?
Unduh Sekarang
Lihat Dulu

Alat dan Bahan:
Notepad
Pemikiran Logika yang matang
Teh and Cemilan(buat sambilan)
Sudah siap? Ayo kita mulai :P

1. Gunakan Imajinasi kalian

Cobalah untuk membuka pikiran kalian tentang "Seperti apa nanti tata-letak blog saya akan terlihat?". Kemudian tuangkan semua gambaran abstrak kalian itu pada selembar kertas yang nantinya menjadi dasar dari sebuah template. Dalam langkah ini, saya berpesan "Jangan takut untuk mencoba hal baru atau kalian akan membosankan".

Gambarnya unik ya? Justru saya suka gambar seperti itu.

2. Perjelas Gambar Abstak kalian

Gunakan scanner atau foto untuk merubah gambar abstak kalian menjadi digital, lalu trace atau gambar ulang pada software Grafis. (penggunaan software teknik seperti CAD boleh-boleh saja jika kalian ingin kesusahan sendiri).

Perhatikan gambar diatas, terlihat rumit bukan ? namun jika diperhatikan, template diatas hanya memiliki 3 posisi penting, yaitu kepala, posting, dan widget, serta 1 posisi tidak terlalu penting, yaitu kaki (Footer). Kalian bisa bayangkan kurang lebih seperti gambar dibawah.

3. Merangkai Kode Sederhana

Setelah kalian mendapatkan gambarannya, kalian bisa tarik kesimpulan bahwa template diatas membutuhkan 4 tag untuk tata-letak utama serta 2 tag untuk sampul. Sampul pertama berfungsi membungkus ke-2 tag Post dan Widget, dan sampul kedua berfungsi membungkus seluruh tag tersebut agar berada diposisi tengah atau pinggir layar browser.

Berikut adalah kodenya beserta teks Dumi



<html>

<head>

 <style>

 /* Letakkan CSS DISINI */

 </style>

</head>

<body>

<div id='sampul'>

 <div class='kepala'>

  <h1>Gugure KokkuriChan</h1>

  <p>[sehantu yang memiliki rasa pada seorang anak kecil]</p>

 </div>

 <div class='pembungkus'>

  <div id='posting'>

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, augue id maximus dignissim, orci nisl viverra diam, quis ultrices nulla velit sit amet odio. Cras convallis porta quam, a ultricies arcu vulputate quis. Proin ullamcorper suscipit magna, ut sagittis risus feugiat non. Integer rutrum ultrices dui, nec aliquam elit ullamcorper ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In placerat tincidunt sapien sit amet mollis. Donec ipsum enim, euismod at vulputate eu, varius at magna. Donec quis accumsan erat.



   Donec at posuere felis. Integer eleifend pulvinar ipsum quis ornare. In tempor faucibus erat, vel sollicitudin sem euismod bibendum. Proin viverra aliquet est, sed tincidunt ante varius id. Sed non dui turpis. Nunc urna nisi, posuere vel lacinia sit amet, varius vel neque. Aenean vel ex in sem sollicitudin porttitor quis id leo. Mauris lobortis mauris eros, ac eleifend leo facilisis in. Proin dictum, magna at interdum venenatis, ante leo gravida elit, id volutpat arcu felis a sem. Aliquam posuere iaculis tellus non fermentum. Sed et mauris vitae sem efficitur fermentum. Sed eget diam a leo gravida interdum. Vestibulum tempor fermentum sapien. Aenean sit amet enim aliquet dui pulvinar facilisis.

  </div>

  <div id='widget'>

   <h2>JudulWidget</h2>

   <div class='widget-content'>

   iaculis tellus non fermentum. Sed et mauris vitae sem efficitur fermentum. Sed eget diam a leo gravida interdum. Vestibulum tempor fermentum sapien. Aenean sit amet enim aliquet dui pulvinar facilisis.

   </div>

  </div>

  <div class='clear'></div>

 </div>

 <div id='kaki'>

  Proin viverra aliquet est, sed tincidunt ante varius id. Sed non dui turpis. Nunc urna nisi, posuere vel lacinia sit amet, varius vel neque. Aenean vel ex in sem sollicitudin porttitor quis id leo. Mauris lobortis mauris eros, ac eleifend leo facilisis in. Proin dictum, magna at interdum venenatis, ante leo gravida elit, id volutpat arcu felis a sem. Aliquam posuere iaculis tellus non fermentum. Sed et mauris vitae sem efficitur fermentum. Sed eget diam a leo gravida interdum. Vestibulum tempor fermentum sapien. Aenean sit amet enim aliquet dui pulvinar facilisis.

 </div>

</div>

</body>

</html>

Salin kedalam notepad dan simpanlah data tersebut dengan ekstensi .html , (contohnya Project.html)

Buka data tersebut dengan browser, kemudian berikan CSS pembentuk tata-letak sederhana, letakkan diatas tulisan </style>. Fungsinya agar tulisan-tulisan tersebut tersusun secara kasar seperti gambaran diatas.
Berikut adalah CSSnya:



div#sampul {

 margin: auto; /* sebagai penengah posisi horiontal si-Sampul yang membungkus seluruh elemen*/

 width: 980px;

}

.kepala {

 height: 200px;

 background: lightgreen;

 text-align: center;

}

.pembungkus {

 margin: 10px 0;

}

#posting {

 float: left;

 width: 650px;

 background: lightblue;

}

#widget {

 float: right;

 width: 310px;

 background: lightpink;

}

div#kaki {

 background: lightgreen;

}

/* Jangan lupa untuk memberikan properti tag default seperti a, a:hover, body, i, atau apalah  */

body{

 margin:0;

 padding:0;

}

a{

 color:orange;

}

a:hover{

 color:green;

}

clear{

 clear:both; /* Pembersih atau perata Float, perhatikan css Posting dan Widget */

}

Pratinjaulah hasil yang telah kalian buat hingga kurang lebih mirip seperti ini :

4. Rubah ke XML

Ingat, ekstensi template blog kalian adalah XML, jadi kalian harus menyesuaikan dengan merubah HTML menjadi XML. Temukan kode berikut :



<html>

<head>

<!-- Masukkan Javascript, CSS, META, atau apalah itu disini -->

<style>

/* Masukkan CSS disini */



</style>

</head>



<body>

<div id='sampul'>

......

kemudian rubah menjadi



<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html expr:dir='data:blog.languageDirection' 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>

<b:include data='blog' name='all-head-content'/>

<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[



/* Insert CSS Here */



]]></b:skin>

</head>

Ingat, Jangan lupakan CSS nya.

5. Rubah menjadi Blogger Tag

Kalian diharuskan untuk merubah Static Content dengan Dinamic Content yang telah disediakan oleh Blogger.
Untuk lebih lengkapnya, silahkan pergi ke Link http://support.google.com/blogger/bin/answer.py?hl=en&answer=46888. Tujuannya agar kalian dapat lebih leluasa dalam mengedit dan mengatur dalam "Tata Letak". Selain itu, Dynamic Content juga berfungsi supaya post yang kalian publikasi bisa muncul di blog kalian. Jika template tidak diberikan Blogger Tag, maka template akan Static, maksudnya ketika anda melakukan pengeditan pada template, post, ataupun widget anda, maka semua tidak akan berubah.

a. Tambahkan element Judul Blog.

Ganti kode yang berwarna biru dengan kode berikut :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

 <b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>

</b:section>

b. Tambahkan element Post.

Ganti kode yang berwarna hijau diatas dengan kode berikut :

<b:section class='main' id='main' showaddelement='no'>

 <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>

c. Tambahkan element Widget.

Ganti kode yang berwarna kuning dengan kode dibawah ini :

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

 <b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>

 <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

 <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>

</b:section>

d. Tambahkan element Footer.

Ganti kode yang berwarna ungu dengan kode dibawah ini :
<b:section class='footer' id='footer' preferred='yes'/>

sehingga akan terlihat seperti:



<div id='sampul'>



 <div class='kepala'>

  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

  <b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>

  </b:section>

 </div>

 <div class='pembungkus'>

  <div id='posting'>

   <b:section class='main' id='main' showaddelement='no'>

   <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

   </b:section>

  </div>

  <div id='widget'>

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

   <b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>

   <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

   <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>

   </b:section>

  </div>

  <div class='clear'></div>

 </div>

 <div id='kaki'>

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

 </div>

</div>

Simpanlah proyek kalian dan rubah ekstensi menjadi .xml kemudian upload. (Disarankan untuk membackup template terlebih dahulu. atau bisa dengan membuat blog dummy)
Atau kalian bisa langsung copy dan paste kedalam "edit html" pada blogger.

Jika anda telah merubah beberapa widget melalui centangan Expand Widget sebelum mengikuti langkah-langkah artikel ini, ada kemungkinan tag didalam widget tersebut sama. Dan itu pengaruh juga pada tag Judul posting, Judul Entri, Judul Blog, isi dari Widget tersebut.
Ada baiknya anda Restore ke template Default bawaan blogger yang orsinil lalu buatlah template baru seperti ini. Gunanya untuk mereset seluruh tag widget ke semula.

Berikut adalah kode Penuhnya beserta tambahan CSS:



<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html expr:dir='data:blog.languageDirection' 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>

<b:include data='blog' name='all-head-content'/>

<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[

body {

margin: 0;

padding: 0;

background: #323232;

color: #bbb;

}

a {

color: #abcdef;

text-decoration: none;

}

a:hover {

color: #DFE5FF;

}

div#sampul {

margin: auto;

width: 980px;

}/* ---------------------

     Kepala / Header

    --------------------- */

.kepala {

text-align: center;

padding: 50px 0 70px;

}

.kepala .titlewrapper h1.title a, .kepala .titlewrapper h1.title {

font-size: 55px;

color: white;

text-decoration: none;

margin:0;

}

.kepala .descriptionwrapper p {

color: white;

text-decoration: none;

margin:0;

}/* ---------------------

     Posting

    --------------------- */

.pembungkus {

margin: 10px 0;

padding: 10px;

background: #3c3c3c;

}

#posting {

float: left;

width: 640px;

}

#posting .widget.Blog .blog-posts.hfeed {

background: #1f1f1f;

padding: 10px;

}

#posting .main.section h2.date-header {

font-size: 12px;

margin: 0;

float: right;

position: relative;

top: -10px;

}

#posting .main.section h3.post-title.entry-title {

font-size: 30px;

margin: 10px 0;

color: #abcdef;

}

#posting .main.section .post-footer {

background: #3C3C3C;

padding: 10px;

margin: 15px -10px;

font: 12px calibri !important;

}

#posting .main.section .post-labels a {

display: inline-block;

background: #222;

padding: 3px 10px;

border-radius: 3px;

}



/* ----KOMENTAR---- */

.comments {

clear: both;

margin-top: 10px;

margin-bottom: 0;

font: 14px calibri;

}

.comments .comments-content .comment-thread ol {

list-style-type: none;

padding: 0;

border-top: 1px solid #111;

border-bottom: 1px solid #444;

}

.comments .comments-content .comment-thread ol li ol{

border-bottom:0;

}

.comments .comments-content .comment {

border-top: 1px solid #444;

border-bottom: 1px solid #111 !important;

padding: 10px !important;

margin: 0 !important;

}

.comments .comments-content .datetime {

margin: 0;

float: right;

}

.comments .comments-content .datetime a {

color: #444;

}



/* ----Blog PAGER---- */

#blog-pager a {

display: inline-block;

padding: 5px 10px;

background: #4D90F0;

color: #FFFFFF;

font: 12px calibri;

}

.post-feeds {

font: 12px calibri;

box-shadow: 0 -1px #555, 0 -2px #222;

padding: 15px 10px 5px;

}

/* ---------------------

     Widget

    --------------------- */

#widget {

float: right;

width: 310px;

color: #CDCDCD;

}

#widget .widget {

background: #6d6d6d;

margin-bottom: 15px;

padding: 0 0 10px;

}

#widget h2 {

margin: 0;

font-size: 20px;

padding: 10px;

}

#widget .widget .widget-content {

background: #1f1f1f;

padding: 10px;

}

#widget .widget .widget-content ul {

margin: 0 5px;

padding: 0;

}

#widget .widget .widget-content ul li {

margin: 0;

}



div#kaki {

background: lightgreen;

}

.clear{clear:both;}



]]></b:skin>

</head>



<body>

<div id='sampul'>

 <div class='kepala'>

  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

   <b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>

  </b:section>

 </div>



 <div class='pembungkus'>

  <div id='posting'>

   <b:section class='main' id='main' showaddelement='no'>

    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

   </b:section>

  </div>

  <div id='widget'>

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

    <b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>

    <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

    <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>

   </b:section>

  </div>

  <div class='clear'></div>

 </div>



 <div id='kaki'>

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

 </div>

</div>

</body>

</html>

~Syalalalaa

Membuat Template Blog sendiri Dengan Notepad