Template Blogger Tag b:section

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>

Tutorial selanjutnya : Blogger Template Tag b:widget

Basic Blog Layout

Anatomi Utama Tata Letak Template Blogger

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

Basic Blog Layout

Mudah Membuat Efek Page Peel

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

<script src='http://dedehendriono.googlepages.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({width: '307px',height: '319px'}, 500);
} , function() {
$("#pageflip img").stop()
.animate({width: '50px',height: '52px'}, 220);
$(".msg_block").stop()
.animate({width: '50px',height: '50px'}, 200);
});
});
</script>

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

<div id='pageflip'>
<a href='http://ebook-buzz.blogspot.com/' target='_blank'>
<img alt='' src='http://dedehendriono.googlepages.com/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>

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).

• JQuery (JavaScript)
• Subscribe (Gambar Latar)
• PageFlip (Gambar Segitiga Hitam)

Sumber Artikel Sohtanaka.com

Tips Trik Widget

Artikel Bergaya Drop Cap

Gaya Drop Cap pada artikel sering kita jumpai pada majalah, tabloid, dan atau bacaan offline lainnya. Sebagai contoh artikel ini ukuran hurup "G"-nya dibuat lebih besar, sedang ukuran hurup berikutnya standar. Drop Cap dapat dengan mudah diterapkan pada dokumen-dokumen yang dibuat dengan software pengolah kata (AbiWord, OpenOffice, dll), lalu bagaimana kita menerapkannya pada artikel di blog? Sangatlah sederhana kode yang digunakan untuk membuat tulisan bergaya DropCap (tapi bukan berarti mudah lho bagi newbie).

Ikuti langkah dibawah ini untuk membuat artikel bergaya Drop Cap!
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke bagian "Tata Letak" dan "Edit HTML"
Langkah 3
Cari kode dibawah ini :

.post img {

Masukan kode warna biru seperti dibawah ini :

.post img {
margin: 0px;
...
...
.post dc { float:left; color: #000; font-size:60px; line-height:50px; padding-top:1px; padding-right:5px; }
...
...

Langkah 4
Simpan Template
Langkah 5
Belum selesai sampai Langkah 4, setiap kita membuat artikel maka mode yang digunakan adalah mode "Edit HTML" untuk menyisipkan kode Drop Cap seperti contoh dibawah ini (klik gambar untuk melihat lebih jelas):

<dc>G</dc>aya Drop Cap pada artikel sering kita jumpai pada majalah, tabloid, dan atau bacaan offline lainnya.

Keterangan :

• Bagi para pengguna WLW (Windows Live Writter) teknik ini tidak perlu diterapkan, karena WLW secara terintegrasi memiliki fitur Drop Cap.
• Kode pada langkah 3, parameter bisa diubah sesuai keinginan.

Tips Trik

Tampilkan Artikel Berdasarkan Kategori

Seorang teman bertanya, Bagaimana menampilkan artikel dan menyusun artikel sesuai kategori atau label pada halaman utama? Sesuai dengan pertanyaan ini Blogger Tune-Up akan mencoba membuat tips trik tersebut. Pada dasarnya trik ini pernah dibahas pada artikel "Unlimited Recent Posts" dan menggunakan dasar JavaScript yang sama, hanya mengalami sedikit penambahan kode. Sepintas hasil akhir trik kali ini mirip dengan pemenggalan artikel secara Otomatis, mirip ya bukan sama.

Screenshot di ambil dari sini

Mari dicoba pemasangannya pada blogger.
Langkah 1
Login ke Blogger (ini wajib bukan sunat)
Langkah 2
Pilih bagian "Tata Letak" melalui Dasbor
Langkah 3
Klik "Tambah Gadget" dengan posisi sesuai keinginan dan pilih "HTML/JavaScript"
Langkah 4
Masukan kode dibawah ini :

<script src="http://dedehendriono.googlepages.com/rp-revo.js"></script>
<script>
var numposts = 3;
var showpostdate = false;
var showpostsummary = true;
var numchars = 125;
</script>
<script src="http://NAMA-BLOG.blogspot.com/feeds/posts/default/-/Label?orderby=published&alt=json-in-script&callback=rp">
</script><br/>
<a href="http://NAMA-BLOG.blogspot.com/search/label/Label"><strong>Artikel Lain dari Kategori ini...</strong></a>

Langkah 5
Simpanlah "HTML/JavaScript" tersebut
Langkah 6
Preview blog

Perhatikan Langkah 4!

• var numposts = 3; : nilai 3 untuk menentukan jumlah artikel yang akan ditampilkan.
• var showpostdate = false; : parameter false untuk tidak menampilkan tanggal, bulan dan tahun artikel tersebut dibuat.
• var showpostsummary = true; : parameter true untuk menampilkan ringkasan artikel, jika parameter false ringkasan artikel tidak akan ditampilkan (hanya judul artikelnya saja).
• var numchars = 125; : nilai 125 untuk mengatur jumlah karakter yang akan ditampilkan pada ringkasan artikel dihalaman utama
• NAMA-BLOG : ubahlah sesuai dengan alamat blog yang akan ditampilkan ringkasan artikelnya
• Label : gantilah dengan kategori/label yang akan ditampilkan artikelnya pada halaman utama, ini digunakan sebagai filter sehingga artikel yang ditampilkan hanya sesuai dengan kategori yang kita inginkan/masukan pada kode tersebut. Gantilah kedua kodel "Label" tersebut". Semoga berhasil... Happy blogging :)

Tips Trik Widget

Menu Navigasi Terapung

Menu navigasi terapung adalah sebaris menu yang tidak terpengaruh oleh gerakan scrollbar baik keatas maupun kebawah, menu ini tetap diam pada tempatnya layaknya sebuah benda yang terapung diatas air. Seberapa tinggi air bertambah, benda tersebut akan tetap diatas air. Seberapa panjang suatu halaman blog, menu ini akan tetap pada tempatnya (diatas atau dibawah). Sebagai contoh Blogger Tune-Up menerapkan trik ini pada Kotretan Hendriono. Menu navigasi terapung atau dalam bahasa cingcoang-nya Float Navigation Bar (Float NavBar), sangat cocok untuk menempatkan menu-menu yang sering kita gunakan atau menempatkan suatu informasi menarik untuk para pengunjung.

Memasang menu navigasi terapung ini pada blog

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak" dan "Edit HTML"
Langkah 3
Backup template dan checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini :

]]></b:skin>

Langkah 5
Tempatkan kode dibawah ini tepat diatas kode pada Langkah 4

/********************************
* Navigasi Apung  *
*********************************/
#navigasi-apung
{
align: center;
position: fixed;
border-top: 1px solid #fff;
border-bottom: 1px solid #000;
background-color: #c0c0c0;
width: 100%;
left: 0px;
color: #000;
z-index:10000;
opacity: 0.8;
filter: alphaundefinedopacity: 80);
bottom:0;
}
#navigasi-apung:hover
{
opacity: 1;
filter: alphaundefinedopacity: 100);
}
#navigasi-apung a
{
color: #000;
font-weight:bold;
}
/********************************
* Navigasi Apung Kiri *
*********************************/
.kiri_apungmnu
{
float:left;
list-style-type:none;
padding:0;
margin:3px 0px 3px 5px;}
.kiri_apungmnu li
{
padding: 0px 0px 0px 3px;
margin-left:2px;
float:left;
color:#000;
font:normal 11px arial;
}
.kiri_apungmnu li a
{
display:block;
font:normal 11px arial;
width:auto;
float:left;
text-decoration:none;
}
.kiri_apungmnu li a:hover
{
text-decoration:none;
}
/********************************
* Navigasi Apung Kanan *
*********************************/
.kanan_apungmnu
{
float:right;
list-style-type:none;
padding:0;
margin:3px 5px 3px 0;
}
.kanan_apungmnu li
{
padding: 0 0 0 3px;
margin-left:2px;
float:left;
color:#000;
font:normal 11px arial;
}
.kanan_apungmnu li a
{
display:block;
font:normal 11px arial;
width:auto;
float:left;
text-decoration:none;
}
.kanan_apungmnu li a:hover
{
text-decoration:none;
}

Langkah 6
Cari kode dibawah ini :

<body>

Langkah 7
Tempatkan kode dibawah ini tepat dibawah kode pada Langkah 6

<div id='navigasi-apung'>
<ul class="kiri_apungmnu">         
<li><a href="/" title="Halaman Utama">Beranda</a></li>
<li>|</li>
<li><a href="/search?max-results=50" title="Daftar Isi">Daftar Isi</a></li>
<li>|</li>
<li><a href="/feeds/posts/default" title="Baca via Feed" target="_blank">Feed</a></li>
<li>|</li>
<li><a href="" title="Berlangganan Artikel">Langgan</a></li>
<li>|</li>
<li><a href="mailto:hendriono@gmail.com" title="Email Hendriono">Email</a></li>
<li>|</li>
<li><a href="http://modification-blog.blogspot.com/" title="Tentang Hendriono" target="_blank">Tentang</a></li>
</ul>
<ul class="kanan_apungmnu">
<li><a href="http://www.blogger.com/" title="Blogger Login" target="_blank">Login</a></li>
<li>|</li>
<li><a href="http://www.blogger.com/post-create.g?blogID=XXXXXX" title="Entri Baru">Entri Baru</a></li>
<li>|</li>
<li><a href="http://www.blogger.com/posts.g?blogID=XXXXXX" title="Edit Entri">Edit Entri</a></li>
<li>|</li>
<li><a href="http://www.blogger.com/blog-options-basic.g?blogID=XXXXXX" title="Pengaturan">Pengaturan</a></li>
<li>|</li>
<li><a href="http://www.blogger.com/rearrange?blogID=XXXXXX" title="Tata Letak">Tata Letak</a>
</li>
</ul>
</div>

Langkah 8
Simpan Template dan Preview

Keterangan :

• Lihat Langkah 5! Ubah parameter baris 10 dan baris 17 sesuai dengan selera. bottom:0; untuk menempatkan menu pada bagian bawah, ubah menjadi top:0; untuk menempatkannya pada bagian atas.
• Lihat Langkah 6! Tempatkan kode pada Langkah 7 dibawah kode <body> atau diatas kode </body>, jika ditempatkan dibawah kode <body> maka menu akan di-load dan ditampilkan lebih dulu dari bagian lain, jika di tempatkan diatas kode </body> maka menu akan di-load dan ditampilkan terakhir setelah seluruh bagian blog ditampilkan sempurna.
• Lihat Langkah 7! Ubahkah alamat link dan parameter lain sesuai dengan keinginan atau kebutuhan. Untuk menu Dasbor (Login, Entri Baru, Edit Entri, Pengaturan, dan Tata Letak) lihat pada artikel ini.

Selamat mencoba...! Happy blogging :)

Bloghack Tips Trik

Pemenggalan Artikel Otomatis (Automatic Readmore)

Beberapa saat yang lalu, Blogger Tune-Up pernah membahas blogger hack tentang Readmore 1, Readmore 2 dan Readmore 3. Pada blogger hack terdahulu proses pemenggalan artikel dilakukan secara manual dengan memasukan kode-kode pemenggalan yang disisipkan langsung pada artikel.

Kali ini kita akan mencoba satu teknik blogger hack yaitu pemenggalan artikel otomatis (Automatic Radmore), tanpa perlu menyisipkan kode-kode pemenggalan pada artikel secara langsung. Semua diatur secara otomatis, kita hanya perlu mengatur beberapa parameter sesuai dengan keinginan kita. Bahkan jika kita menyertakan gambar (image) pada artikel kita, maka gambar dapat diatur tampil pada halaman utama dalam ukuran kecil (thumbnail). Sebagai contoh Blogger Tune-Up telah mengintegrasikannya pada blog Kotretan Hendriono.

Integrasi Pemenggalan Otomatis (Automatic Readmore)

Langkah 1
Login ke Blogger
Langkah 2
Pilih "Tata Letak - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Sebelum melakukan modifikasi pada template, Backup Template terlebih dahulu
Langkah 5
Cari kode dibawah ini :

</head>

Langkah 6
Masukan kode dibawah ini tepat diatas kode pada Langkah 5 :

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 160;
summary_img = 130;
img_thumb_height = 65;
img_thumb_width = 65;
</script>
<script src='http://hensblog.googlecode.com/files/selengkapnya.js' type='text/javascript'/>

Langkah 7
Cari kode dibawah ini :

<data:post.body/>

Langkah 8
Masukan kode dibawah ini dengan hati-hati, menggatikan kode pada Langkah 7.

<div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id' style='text-align: justify;'>
<p><data:post.body/></p>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a expr:href='data:post.url'>[Selengkapnya] - <data:post.title/></a>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p><data:post.body/></p>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->

Langkah 9
Simpanlah Template dan Preview

Keterangan :

• Bagi blogger yang sudah terlanjur memasang Readmore (pemenggalan artikel) manual maka harus sedikit kerja keras menghapus kode-kode pemenggalan yang sudah disisipkan pada artikel yang sudah diterbitkan (publish). Jika malas biarkan saja, tetapi cepat-cepat buat artikel baru sejumlah artikel yang ditampilkan dihalaman utama.

Perhatikan Langkah 6!

• summary_noimg = 160; > nilai 160 menunjukan jumlah karakter artikel yang akan ditampilkan pada halaman utama (pada mode terpenggal), jika artikel tidak mengandung gambar
• summary_img = 130; > nilai 130 menunjukan jumlah karakter artikel yang akan ditampilkan pada halaman utama (pada mode terpenggal), jika artikel mengandung gambar. Dan karakter akan diletakan pada sebelah kanan gambar.
• img_thumb_height = 65; > nilai 65 digunakan untuk mengatur ukuran tinggi gambar yang akan tampil di halaman utama pada mode terpenggal
• img_thumb_width = 65; > nilai 65 digunakan untuk mengatur ukuran lebar gambar yang akan tampil di halaman utama pada mode terpenggal

Perhatikan Langkah 8

• Ubahlah kata [Selengkapnya] sesuai keinginan anda.
• Hapus kode - <data:post.title/> setelah kode [Selengkapnya] jika kita tidak ingin menampilkan judul artikel

Semoga berhasil... Happy blogging :) [Tinggalkan pesan jika mengalami kesulitan atau kegagalan pemasangan]

Bloghack Tips Trik