Belajar cara membuat template Blogspot sendiri (5)

Kalau sobat sudah membaca bagian 1, bagian 2, bagian 3, bagian 4 dan sudah memahaminya, pasti bagian ini menjadi bagian yang menyenangkan, yaitu bagian membuat kolom baru. Pada dasarnya banyak cara atau teknik untuk membuat kolom baru ini, saya kasih salah satu contoh yang biasa saya gunakan dalam membuat template kolom baru.

Hal pertama yang dilakukan adalah melihat ukuran atau width dari template yang sobat akan buat, jika ingin menambahkan kolom baru maka ukuran widhtnya di sesuaikan., biasanya ukuran outer-wraper yang di rubah kemudian main-wrapper, dan sidebar-wrapper, serta footer-wrapper. Saya kasih contoh dengan menggunakan code template minima :

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Dapat dilihat pada code tersebut untuk ukuran outer-wrapper:660px, main-wrapper:410px, dan sidebar-wrapper:220px. Kalau sobat perhatikan jumlah width main dan sidebar adalah 630px, di mana sisa 30px adalah untuk margin dan padding atau istilah sederhananya adalah jarak pembatas antara masing container.

Tampilan layout :

Nah, sekarang kita ingin membuat kolom baru sidebar jadi 2 kolom di bawah kolom sidebar utama, atau lihat contohnya seperti ini :

Yang perlu di lakukan adalah merubah width outer-wrapper, main-wrapper, dan biasanya untuk width header-wrapper serta footer-wrapper mengikuti ukuran width outer wrapper, kalau sobat sudah paham di bagian 3, dan bagian 4 tentu sangat mudah membuat layout seperti contoh gambar di atas. Jika sobat sudah merubah outer-wrappernya dengan yang di kehendaki, tinggal membagi sisanya untuk main-wrapper dan sidebar-wrapper saya kasih contoh dengan mengubah outer-wrapper : 920px, main-wrapper: 500px, dan sidebar-wraaper: 400px, nah sekarang bagaimana memunculkan 2 kolom sidebar di bawah sidebar utama?

Konsep dasar bagi sobat yang serius ingin belajar membuat template sendiri yatu sobat akan banyak mengubah kode di section 2 ( bagian CSS) dan section 3 (bagian HTML), kalau sobat sudah mengubah ukuran-ukuran di atas, tinggal menambahkan kode di bawah ini di section 2 :

#left-sidebar-wrapper {
width: 180px;
float: left;
text-align: justified;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#right-sidebar-wrapper {
width: 180px;
float: right;
text-align: justified;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Kode di atas untuk membentuk container baru yang namanya left-sidebar-wrapper dan right-sidebar-wrapper, nah sekarang kita ke bagian section 3 yaitu untuk memunculkan container baru ini di browser harus perlu di tulis di section 3 yaitu di bagian

perhatikan tag penutupnya dan section classnya atau simple kodenya adalah seperti ini :

<div id="'sidebar-wrapper'">

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

</b:section>

</div>

Masukkan kode ini di dalam container sidebar :

<div id="'left-sidebar-wrapper'">

<b:section class="'sidebar'" id="'leftsidebar'">

</b:section>

</div>

<div id="'right-sidebar-wrapper'">

<b:section class="'sidebar'" id="'rightsidebar'">

</b:section>

</div>

Sehingga kodenya akan seperti ini jika di masukkan ke dalam container sidebar :

<div id="'sidebar-wrapper'">

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

</b:section>

<div id="'left-sidebar-wrapper'">

<b:section class="'sidebar'" id="'leftsidebar'">

</b:section>

</div>

<div id="'right-sidebar-wrapper'">

<b:section class="'sidebar'" id="'rightsidebar'">

</b:section>

</div>

</div>

Perhatikan masing section classnya semuanya sidebar, yang berarti tamplilan maupun widget yang di dalam container baru tersebut mengkuti aturan class sidebar yang di tandai dengan dot [.] con : .sidebar {....} jika sobat ingin memodifikasi tampilan cointainer baru silahkan buat class tersendiri con : .left-sidebar {.....} kemudian ubah section class dengan class yang sobat buat ,contoh : <b:section class='left-sidebar' id='leftsidebar'>

Kalau sobat pahami tutorial ini dari bagian 1 sampai 4 tentunya bagian ini merupakan bagian yang tidak membingungkan. Semoga ilmu ini bermanfaat buat sobat blogger yang ingin merancang template sendiri. Ok sobat selamat mengikuti dan pahami dengan seksama, jangan terburu-buru membacanya. Semoga berhasil!!!

Read More - Belajar cara membuat template Blogspot sendiri (5)

Belajar cara membuat template Blogspot sendiri (4)

Bagian berikutnya dalam belajar membuat template sendiri, sebelumnya silahkan dibaca dan diingat-ingat kembali bagian 1, bagian 2, dan bagian 3. Jika sobat blogger sudah menguasai bagian-bagian tersebut mudah-mudahan sobat blogger bisa mengikuti bagian yang ini, yang penting prinsip trial and error serta bisa karena biasa maksudnya adalah jika sobat terbiasa mengutak-atik kode HTML-an maka sobat akan lebih terlatih dan berpengalaman dalam membuat template sendiri.

Sekarang saatnya membahas ke section 3 dimana saya sudah jelaskan di bagian 2, silahkan sobat baca kembali, karena butuh pemahaman di section 3 ini. Seperti yang saya sudah jelaskan di bagian 2 bahwa section 3 ini berisi informasi data-data blog sobat serta mengatur container yang di bentuk oleh section 2. Saya akan membagi beberapa kode di section 3 ini, tapi ada baiknya sobat lihat kode utuhnya (tanpa expandable widget):

<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks'
style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='header-wrapper'>
<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='subagya Test (Header)' type='Header'/>
</b:section>
</div>
<div id='content-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main'
showaddelement='no'>
<b:widget id='Blog1' locked='true'
title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar'
preferred='yes'>
<b:widget id='Profile1' locked='false'
title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false'
title='Blog Archive' type='BlogArchive'/>
<b:widget id='Label1' locked='false'
title='Labels' type='Label'/>
</b:section>
</div>
<!-- spacer for skins that want sidebar
and main to be the same height-->
<div class='clear'>&#160;</div>
</div> <!-- end content-wrapper -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false'
title='Catatan kaki' type='Text'/>
</b:section>
</div>
</div></div> <!-- end outer-wrapper -->
</body>

Kode template blogger umumnya seperti ini, yang perlu sobat perhatikan adalah penempatan containernya, di mana kalau terlihat di code tersebut pembacaannya di mulai dari HEADER, MAIN, SIDEBAR, FOOTER . Container tersebut bisa sobat ubah-ubah posisinya tapi ingat tentunya tidak akan sesuai dengan prinsip SEO (begitu katanya, yang saya pernah baca) atau bakal berantakan tampilannya, kalau sobat merubah-rubah posisinya.

Nah sekarang saya bagi ke dalam beberapa bagian agar mudah di mengerti

# HEADER

<div id='header-wrapper'>
<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='Subagya Test (Header)' type='Header'/>
</b:section>
</div>

Kode ini berisi mengenai container header yang di bentuk di section 2 atau bagian CSS, saya akan coba urai kode tersebut agar sobat bisa paham.

<div id='header-wrapper'>
<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='Subagya Test (Header)' type='Header'/>
</b:section>
</div>

Tulisan yang tercetak tebal adalah container header yang membungkus (wrap) section header dan widgetnya. Seperti yang saya sudah jelaskan di bagian 3 bahwa id untuk di CSS adalah dengan tanda #(slash) dan class . (dot atau titik) dan di bentuk di section 2.
Kemudian saya urai lagi bagian header ini :

<div id='header-wrapper'>
<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='Subagya Test (Header)' type='Header'/>
</b:section>
</div>

Bagian yang tercetak tebal ini menjelaskan bahwa section header terdapat widget di dalamnya yaitu header1 dengan title Bloglogy . Bisa di lihat kodenya widgetnya seperti ini :

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

# MAIN

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

Pada prinsipnya sama dengan bagian header silahkan sobat pahami dengan seksama.

# SIDEBAR

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar'
preferred='yes'>
<b:widget id='Profile1' locked='false'
title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false'
title='Blog Archive' type='BlogArchive'/>
<b:widget id='Label1' locked='false'
title='Labels' type='Label'/>
</b:section>
</div>

Prinsip pembacaannya sama dengan header dan main, hanya yang berbeda adalah bagian ini umumnya bisa Add Page Element pada tampilan Edit Layout, tetapi pada bagian Header dan Main bisa juga untuk menambahkan Add Page Elements hanya dengan mengganti showaddelement='no'> menjadi showaddelement='yes'>

# FOOTER

<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false'
title='Catatan Kaki' type='Text'/>
</b:section>
</div>

Tidak jauh berbeda dengan bagian-bagian lainnya pada pembacaan kode footer ini.

Bagaimana? Mudah-mudahan sobat blogger bisa mengikuti dan memahaminya

Read More - Belajar cara membuat template Blogspot sendiri (4)

Belajar cara membuat template Blogspot sendiri (3)

Setelah bagian 1, dan bagian 2 saya lanjutkan ke bagian 3, dimana bagian ini saya mencoba menjelaskan cara memodifikasi tampilan template yang sobat blogger buat. Pada bagian ini kita fokus ke section 2, yaitu section ini terdapat code CSS di dalamnya. Saya akan bantu sobat blogger mengenal sedikit kode CSS seperti width, font, border, background, color, margin dan padding.

Menurut pengamatan saya, pola penulisan kode CSS pada section 2 biasanya seperti berikut:

selector{property:value}

Keterangan :

• selector = pembentuk suatu elemen HTML
• { } = sebagai tag penutup dari property dan value
• property = memberikan suatu atribut untuk merubah selector
• value = memberikan nilai untuk property
  

contoh:

body (background:#ffffff)

artinya : untuk element body (bagian 1) mempunyai background (latar belakang) berwarna putih (#ffffff) ini semua berlaku global atau keseluruhan.

Cara menyatakan untuk setiap elemen yang berbeda diperlukan id selector dan class selector

• untuk id selector dimulai dengan tanda # (slash)
• untuk class selector di mulai dengan tanda . (dot atau titik)
  

Contoh untuk id selector:

#sidebar-wrapper (width: 220px;background-color:#ffffff)

artinya element id sidebar mempunyai lebar 220px dan backgroundnya warna putih. Nilai ini berlaku hanya untuk element id sidebar

Contoh untuk class selector, di mana satu element bisa di style berbeda-beda :

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar ol {
list-style-type: decimal;
margin:0 0 0 25px;
padding:0 0 0 0;
}


Di section 2 inilah sobat blogger bisa menambahkan selector serta merubah property dan value masing-masing container atau tag.

Sekarang masuk ke bagian masing-masing container :

Header:

• #header-wrapper - container yang berisi title blog dan descriptionnya.
• #header - container yang berada dalam header-wrapper.
• #header h1 - mengkontrol container header dan memberikan nilai dari tampilan title blog.
• #header h1 a - mengkontrol nilai title blog ketika sebagai link teks.
• #header .description - memberikan properties untuk description blog.
• #header a img - mengkontrol properties image (gambar) di dalam container
  

Main:

• #main-wrapper - container yang berisi umumnya : post, comments, date header, dan widget yang berada di dalamnya.
• #main - container yang berada dalam main wrapper.
• h2.date-header - mengatur nilai untuk tanggal postingan.
• .post - mengatur nilai untuk postingan.
• .post h3 - mengatur nilai judul postingan.
• .post-body p - mengatur isi content di post.
• .post ul - menagatur nilai unordered list (daftar yang tidak ada bernomor).
• .post ol - mengatur nilai ordered list (daftar yang bernomor).
• .post li - mengatur nilai daftar tersendiri dari unordered list atau ordered list.
  

Sidebar :

• #sidebar-wrapper - container yang berisi umumnya sidebar (memblock).
• .sidebar h2 - mengatur propeties title sidebar.
• .sidebar .widget - mengatur properties dari widget sidebar.
• .sidebar ul - mengatur nilai dari unordered list
  

Comments :

• comments - mengatur container comments.
• #comments a - mengatur nilai link teks di dalam container comments.
• #comments h4 - mengatur nilai title header comments.
• #comments ul - mengatur nilai dari unordered list yang berada dalam comment container.
• .comment-author - mengatur nilai comments author.
• .comment-body p - mengatur nilai body isi komentar.
• .deleted-comment - mengatur nilai ketika delete comments
  

Footer :

• #footer-wrapper - mengatur element footer container.
• #footer - container yang berada dalam footer-wrapper.
• #footer h2 - mengatur properties dari footer title/header.
• #footer .widget - mengatur footer widget properties.
• .footer a - mengatur nilai link teks di footes.
• .footer ul - mengatur nilai dari unordered list yang berada dalam footer
  

Perlu di sampaikan pembagian container ini belum terlalu lengkap tergantung keinginan sobat blogger dalam menambahkan style dalam template. Sebagai referansi variasi, silahkan sobat blogger melihat / mencontek kode template dari free template / template gratisan yang beredar bebas di internet

NB : untuk belajar CSS silahkan klik di sini!!

Read More - Belajar cara membuat template Blogspot sendiri (3)

Belajar cara membuat template Blogspot sendiri (2)

Jreng... jreng...
setelah bagian 1, sekarang masuk ke bagian kedua, saya akan mengulas sedikit tentang bagian struktur template dari bahasa pemograman atau kalau sobat blogger masuk bagian "Edit HTML", di sanalah kode ini biasanya bisa dilihat, yang saya contohkan pada Template Minima.

Menurut pengamatan saya, biasanya template dibagi menjadi 3 section. Bagian-bagian tersebut antara lain:

Section 1.
Merupakan keterangan kode pengenalan template dan berisi informasi-informasi umum tentang template tersebut di dalamnya, biasanya peletakan metatag ditaruh di bagian ini.
Umumnya di bagian section 1, yaitu:

<?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>

Section 2.
Bagian ini menyimpan kode CSS untuk membentuk keindahan blog, bagian ini bisa kita modifikasi dan kita tambahkan. Pada bagian ini kita memerlukan pemahaman tentang dasar-dasar kode CSS sederhana, juga padding dan margin.
Umumnya Section 2 bentuk kodenya seperti ini:

<b:skin><![CDATA[/*
body {...}
#header-wrapper {...}
#header-inner {...}
#header {...}
#outer-wrapper {...}
#main-wrapper {...}
#sidebar-wrapper {...}
h2 {...}
h2.date-header {...}
.post {...}
#comments h4 {...}
.sidebar {...}
#footer {...}
]]></b:skin>

Section 3.
Pada bagian ini biasanya berfungsi untuk memanggil data-data pada blog kita, seperti isi postingan, komentar, juga menentukan data yang mana yang mau ditampilkan terlebih dahulu. Kalau urutan standar biasanya dimulai dari header, main, sidebar dan footer. Kemudian bagian ini dipercatik oleh section 2 (kontrol CSS) sehingga menampilkan tampilan yang unik dan serasi pada browser.

Umumnya kode Section 3 seperti ini:

</head>

<body>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

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

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
</div>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>

</div> <!-- end content-wrapper -->

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

</div></div> <!-- end outer-wrapper -->
</body>
</html>

Catatan: biasanya pengaturan untuk mempercantik pada section 2 dan sedikit pada section 3.

Semua section tersebut menjadi satu kesatuan yang bisa kita lihat. Jangan ragu untuk belajar dan menggunakan prinsip Try dan Error, coba dan lihat hasilnya...

Read More - Belajar cara membuat template Blogspot sendiri (2)

Belajar cara membuat template Blogspot sendiri (1)

Sebelum saya melanjutkan postingan ini, pertama-tama saya mohon maaf, bukannya saya sok pintar dalam hal mendesain template atau ahli web design, saya hanya ingin berbagi ilmu kepada seluruh sobat blogger yang tentunya masih dalam tahap mengenal apa itu template blogger dan juga sebagai catatan kecil saya, soalnya saya juga suka lupa-lupa ingat he he he... (seperti judul lagu ya?) Tutorial ini saya buat berdasarkan pengalaman saya belajar membuat template blogspot, saya menggunakan prinsip Try and Error jadi, banyak membaca dan mempraktekkan kemudian belajar dari kesalahan (error). Tutorial ini juga saya persembahkan buat para Blogger yang suka memodifikasi template Blogspot-nya.

Tutorial ini akan saya bagi dalam beberapa tahap, tentunya dengan menggunakan bahasa yang ringan dan mudah dimengerti. Di sini saya akan menggunakan contoh template minima untuk dimodifikasi dan menurut saya sangat sederhana, berikut struktur layout dari template:

1. body : suatu gambaran area yang mencakup seluruh template.
2. outer-wrapper : suatu area yang umumnya terdapat bagian header, content dan footer.
3. header-wrapper : blok area yang biasanya terletak di bagian atas yang berisi judul dan atau deskripsi dari blog kita, bagian ini bisa dimodifikasi sesuai kebutuhan dan selera para sobat blogger.
4. content-wrapper : blok area yang terletak di tengah-tengah template yang berisi main-wrapper dan sidebar-wrapper.
5. footer-wrapper : blok area yang biasanya terletak di bagian bawah yang biasanya berisi catatan mengenai copyright, pembuat template atau bisa juga berisi widget.
6. main-wrapper : blok area yang biasanya berisi post, date post, post footer, comment block dan bisa juga untuk menambahkan bagian add elements jika kita inginkan.
7. sidebar-wrapper : blok area yang biasanya berisi widget-widget, sidebar ini juga bisa kita modifikasi kita tambahkan. Pada contoh tutorial ini saya menggunakan template minima 2 kolom, yaitu 1 kolom main dan 1 kolom sidebar, kebutuhan kolom ini disesuaikan dengan desain dan keinginan Anda.
   

Saya rasa untuk sementara cukup sekian dulu ulasan tentang struktur layout template. Kalau ada deskripsi yang salah saya definisikan, mohon koreksinya karena saya juga masih dalam tahap belajar. Semoga tutorial Belajar cara membuat template Blogspot sendiri bagian 1 ini bermanfaat bagi sobat blogger. Amiin...

Read More - Belajar cara membuat template Blogspot sendiri (1)