May 2009 ~ Belajar Blog

Sunday, May 31, 2009

Template Blogger Tag b:section

Posted by dav On 10:00 PM

Setelah belajar tutorial sebelumnya Anatomi Utama Tata Letak Template Blogger, maka sekarang kita melanjutkan ke tutorial yang lumayan lebih menyentuh kebagian dalam dari template blogger. Section yang pernah di pelajari sebelumnya yaitu wilayah paling luar dari halaman website kita. Maksud wilayah terluar adalah bagian yang membatasi satu bagian dengan bagian lain dan setiap bagian tersebut haruslah unik (harus berbeda satu dengan yang lainnya). Jangan sampai ada section yang sama hal ini akan mengakibatkan kesalahan (error) pada template blogger tersebut.

Satu section dapat berisi widget, tetapi tidak dapat berisi section lain atau kode lain. Seandainya kita ingin memasukan suatu kode diantara atau disekitar widget tertentu diantara suatu section, maka kita harus membagi section tersebut menjadi dua atau lebih section-section baru.(Langsung pusing...)

Tag <b:section> dapat diikuti atribut seperti tabel dibawah ini.

Atribut	Diperlukan?	Keterangan
id	Diperlukan	Suatu nama yang unik, bisa berupa huruf atau nomor. Sebuah ID sebagai suatu server yang unik untuk sebuah section.
class	Tambahan	Biasanya berupa kelas 'navbar', 'header', 'utama', 'sidebar', dan'footer'. Jika kita beralih template nanti, nama ini membantu Blogger menentukan cara terbaik untuk mentransfer isi (content) artikel kita. Namun, kita dapat menggunakan nama yang berbeda, jika kita menginginkannya.
maxwidgets	Tambahan	Jumlah maksimum widget yang diterima/diaktifkan pada section ini. Jika kita tidak membatasinya, maka tidak ada satupun.
showaddelement	Tambahan	Dapat 'yes' atau 'no' dengan 'yes' sebagai standar. Ini menentukan apakah tab Elemen Halaman akan menampilkan link 'Add a Page Element (Versi Indonesia : Tambah Gadget)' di section (bagian) ini. Lihat gambar
growth	Tambahan	Dapat 'horizontal' atau 'vertical,' dengan 'vertical' sebagai standar. Ini menentukan apakah widget dalam (section) bagian ini disusun secara berdampingan (side-by-side) atau berurutan (stacked). Lihat gambar

Contoh penerapan section didalam template :

<b:section id='header' class='header' maxwidgets="1"  showaddelement="no">
<b:widget id="header" type='HeaderView'  locked="yes"/>
</b:section>

Gambar Tambah Gadget dan Pengaturan Growth

Tutorial selanjutnya : Blogger Template Tag b:widget

Anatomi Utama Tata Letak Template Blogger

Posted by dav On 9:57 AM

Tutorial kali ini Blogger Tune-Up akan mencoba membongkar Tata Letak (Layout) Template Blogger, dengan harapan mampu memberikan gambaran kepada para blogger bahwa membuat atau memodifikasi Template Blogger adalah bukan hal yang menyulitkan. Untuk memulai belajar, kita hanya perlu memahami sedikit (dulu) pengetahuan mengenai koding HTML (HyperTeks Markup Language) dan koding CSS (Cascading Style Sheet), tapi jangan kuatir kedepannya Blogger Tune-Up akan mencoba menyuguhkan tutorial HTML, XHTML, CSS dan bahasa Web Design lainnya lebih mendalam.

Sebelum kita memulai proses penelusuran Tata Letak (Layout) Template Blogger alangkah lebih baiknya persiapkan dulu peralatan pendukung supaya kita selalu bersemangat dan tidak mudah jenuh, diantaranya :

Komputer lengkap dan koneksi internet
Cemilan ringan
Minuman berenergi
Khusus laki-laki yang suka rokok jangan sampai kehabisan

Pada dasarnya Template Blogger hanya terdiri dari 2 (dua) bagian utama yaitu Head dan Body.
Head berisi tentang informasi website, kata kunci, dan beberapa pengaturan utama halaman website (misal; warna dasar, jenis hurup, posisi, dan lain-lain) bahkan bisa lebih kompleks dari ini semua. (Bingungkan....) Bagian Head merupakan pintu gerbang mesin pencari dalam memberikan informasi umum kepada calon pengunjung dan berpengaruh secara keseluruhan terhadap penampilan website. Bagian head dibuka dengan Tag <head> dan ditutup dengan Tag </head>, kode yang terletak di antara Tag tersebut merupakan bagian dari head. Pada umumnya head terdiri dari dua bagian yaitu kode Meta dan kode CSS. (Tambah bingung lagi...)
Body berisi hal-hal yang akan kita sampaikan kepada pengunjung (visitor) dapat berupa artikel, gambar, iklan dan hal-hal lain yang merupakan tujuan utama (isi) dari pemilik website. (Mulai pusing...) Bagian body dibuka dengan Tag <body> dan ditutup dengan Tag </body>, kode yang terletak di antara Tag tersebut merupakan bagian dari body.

Dibawah ini bagian dasar template blogger

<?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 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>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
<!-- SKIN CONTENTS -->
]]></b:skin>
</head>
<body>
<!-- BODY CONTENTS -->
</body>
</html>

Perhatikan Tag yang di highlight berwarna biru, itu merupakan bagian yang biasanya dimodifikasi/dibuat oleh para pembuat (desainer) template. Anggaplah diluar bagian yang berwarna biru adalah hal wajib yang tidak bisa ditawar untuk dimodifikasi. Untuk SKIN CONTENTS akan dibawah terpisah dalam tutorial CSS, sedangkan yang akan kita bahas jauh adalah bagian BODY CONTENTS. BODY CONTENTS berisi Section dan Widget.

Section adalah wilayah paling luar dari halaman website kita, seperti sidebar, footer, dan lain sebagainya.
Dekalarasi Section (Section Declaration)

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

Widget adalah elemen halaman individu seperti gambar, blogroll, atau elemen lain dari sebuah bagian elemen halaman. Kita dapat memasukan berbagai kode HTML disekitar section dari template.
Deklarasi Widget (Widget Declaration)

<b:widget id="header" type='HeaderView'  locked="yes"/>
<b:widget id="myList" type='ListView' locked="no"  title="My Favorite Things"/>

Demikianlah sekilas mukadimah tutorial Tata Letak Template Blogger. Mudah-mudahan mulai pusing... :)
Tutorial selanjutnya : Template Blogger Tag b:section

Mudah Membuat Efek Page Peel

Posted by dav On 3:37 AM

Menyediakan ruangan khusus iklan (ads space) sepertinya sudah menjadi sebuah kewajiban bagi seorang blogger. Hal ini dilakukan seorang blogger untuk memberi kesempatan pihak lain memasang iklan diblog kita. Berbagai jenis iklan pun sering kita lihat, mulai dari jenis static image (gambar diam), dinamic image (gambar bergerak), banner rotator, dan masih banyak lagi cara para blogger dalam hal pemasangan iklan.

Kali ini Blogger Tune-Up akan mencoba membuat space iklan dengan Page Peel Effect (Page Flip) dengan teknik sederhana dan mudah. Page Peel Effect adalah space iklan yang sangat menarik, iklan akan tampil jika pengunjung mengarahkan mouse-nya pada sebuah gambar dan kemudian gambar tersebut akan bergerak membesar layaknya kita membuka halaman buku, dalam seketika gambar terbuka. Jika pengunjung meng-klik gambar tersebut maka pengunjung akan diarahkan pada halaman tertentu. Bergitulah kurang lebih Page Peel Effect (Page Flip), sebagai contoh Blogger Tune-Up telah memasangnya pada Blog Kotretan Hendriono.

Screenshot dari Kotretan Hendriono

Langkah pemasangan Page Peel Effect (Page Flip)
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini

<b:skin><![CDATA[

Langkah 5
Letakan (copy paste) kode dibawah ini tepat diatas kode pada langkah 4

Langkah 6
Cari kode dibawah ini

]]></b:skin>

Langkah 7
Letakan (copy paste) kode dibawah ini tepat diatas kode pada langkah 6

#pageflip {
position: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(http://dedehendriono.googlepages.com/subscribe.png) no-repeat right top;
text-indent: -9999px;
}

Langkah 8
Cari kode dibawah ini

<body>

Langkah 9
Letakan (copy paste) kode dibawah ini tepat dibawah kode pada langkah 8

Langkah 10
Preview Blog untuk melihat hasilnya...

Langkah Modifikasi (Penyesuaian)

Perhatikan Langkah 9! Ubahlah link (warna biru) dengan link yang akan kita arahkan.

Elemen Page Peel Effect (Page Flip)

Perhatian! Simpanlah elemen berikut pada web hosting anda, Blogger Tune-Up tidak menjamin elemen tersebut selalu ada (klik kanan Save As).

Sumber Artikel Sohtanaka.com

Belajar Blog

Sunday, May 31, 2009

Template Blogger Tag b:section

Saturday, May 30, 2009

Anatomi Utama Tata Letak Template Blogger

Thursday, May 28, 2009

Mudah Membuat Efek Page Peel

SITE SEARCH

Popular Posts

Category

Blog Archive