. blogger BIOL .: 2009

Gambar lebar 1000 untuk blog r10 - 28 mei 2009

Dropdown Label / Kategori

Jadikan menu dropdown label seperti dropdown archive

1). Cari kode dibawah ini:

<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

2). Setelah menemuinya, gantikan seluruh kode diatas dengan kode dibawah ini:

<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Pilihan Label/Kategori</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

Warna merah "Pilihan Label/Kategori" boleh diganti dengan ayat kretif anda sendiri.

Animated / Flash Label

Tambah kode ini kedalam teplate anda & save :

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

creadit to Blogger Buster

Memasang Page View

Page View ni sangat berguna untuk melihat sejauh mana entri kita dapat memikat pembaca kamu.

Sebagai tambahan Page View tidak berfungsi pada main page, ianya hanya akan berfungsi pada single page sama seperti Wordpress. Satu kelemahannya yang aku perasan, ianya hanya tidak ada widget pada sidebar seperti Wordpress yang digelar popular page. Tapi masih boleh diterima kan?

Memasang Page View

01. Pilih Template > Edit Html (tick Expand Widget Templates).

02. Cari kod ini :

<p>
<data:post.body/>
</p>

03. Tambahkan kod ini di bawahnya :

<b:if cond='data:blog.pageType == "item"'>
<div id='hit-counter'>
<a href='http://dilarangmelarang.com/' rel='follow'>
<script src='http://blogspot.6te.net/pageviews.php' type='text/javascript'/> </a>
</div>
</b:if>

04. Pilih Save

Membuat Breadcrumbs Trail

Untuk rujukan aku jek! kekeekek! Kalau korang nak follow pon boleh aje.. Tiap kali korang klik mana2 Entri/Tajuk, ada pasan tak benda nih? (lihat gambo)

Benda tu ada kat atas Topik entri kita tu. Tanpa membuang masa aku teruskan jek jalannye.

1) Gi kat Edit HTML -> Tick Expand Widget Templates

2) Cari code nie -> <b:includable id='main' var='top'> Dan tambahkan code berwarna merah dibawah nie di atasnya.

<b:includable id='breadcrumbs' var='post'>

<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
You are here:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> >
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:if cond='data:post.title'>
> <b><data:post.title/></b>
</b:if>
</b:if>
</span>
</p>
</b:if>

</b:includable>

3) Kemudian cari pulak code ini --> <b:if cond='data:post.dateHeader'>
dan tambahkan code <b:include data='post' name='breadcrumbs'/> di atasnya.

4) Last sekali, tambahkan Code CSSnya dan letakkan code merah bawah nie sebelum ]]></b:skin>

.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

5) Savekan dan lihat hasilnya

Rujukan:

img-beloon-template - Tryer

Menampilkan dan Menyembunyikan Widget Tertentu

Langkah 1
Login ke Blogger

Langkah 2
Masuk ke bagian "Tata Letak - Edit HTML"

Langkah 3
Jangan lupa checklist "Expand Template Widget"

Langkah 4
Lihat contoh berikut :

Dibawah ini kode awal sebelum di tambahkan kode tertentu

<b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<b:if cond='data:codeSnippet != ""'>

...
...

</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

Dan perhatikan kode berwarna biru, itulah kode penambahan

<b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:title != ""'>
<b:if cond='data:codeSnippet != ""'>

...
...

</b:if>
<b:include name='quickedit'/>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>

Langkah 5
Simpanlah template

Keterangan :

Kode tambahan untuk menampilkan dan menyembunyikan widget/sidebar bisa diterapkan disemua widget/sidebar.
Kode data:blog.homepageUrl adalah untuk menunjukan alamat blog.
Kode data:blog.url adalah untuk mengunci/menunjukan alamat tertentu.
Sedangkan tanda == digunakan sebagai pemeriksa, sehingga jika diterjemahkan kurang lebih seperti ini; jika data:blog.homepageUrl sama dengan data:blog.url maka widget/sidebar akan ditampilkan, jika tidak widget/sidebar akan disembunyikan.

Judul blog berjalan?

1. Login ke blogger kemudian ke menu Layout ---> Edit HTML

2. Cari kode/script

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

3. Ganti kode diatas dengan

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

<script language='JavaScript'>
var txt="<data:blog.pageTitle/>";
var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>

Catatan
text yang berwarna merah diatas adalah merupakan kecepatan pergerakanya jika kamu tambah angkanya maka pergerakanya akan lambat dan jika mengurangi angka maka pergerakanya akan semakin cepat

Dropdown pada Label

Contoh tampil menu dropdown label:

Ikuti tutorial dibawah ini untuk membuat dropdown label:
Langkah pertama, masuk pada tab template -> Edit Html -> jangan lupa beri tanda cek pada 'Expand Template Widget' -> kemudian cari kode dibawah ini:

Tips : Agar mudah dalam pencarian sebaiknya cari kode (<data:label.count/>)

<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

Jika sudah ketemu ganti seluruh kode diatas dengan kode dibawah ini:

<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Select a label</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

Warna merah <option>Select a label<option> boleh diganti dengan ayat sendiri.

Cara buat "Readmore" pada Blogger

Untuk membuat readmore ikuti langkah dibawah ini :

Langkah Pertama:
Buka Template - Edit HTML - Berikan tanda centang pada "Expand widget template"

Langkah Kedua:
Cari kode dibawah ini:

<div class='post-header-line-1'/>
<div class='post-body'>

Jika sudah jumpa kode diatas, Copy-Paste kode dibawah ini kemudian letakan kode tersebut dibawah kode diatas.

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

Kemudian dibawah kode diatas kita akan menemukan kode:

<p><data:post.body/></p>

Lakukan Copy-Paste kode dibawah ini dibawah code diatas

<a expr:href='data:post.url'>Readmore Â»Â»</a>
</b:if>

Tips: Kode Readmore diatas boleh diganti dengan ayat sendiri (contoh "Baca Selanjutnya", "Baca berikutnya", "Selengkapnya")

Kode selengkapnya jika dilihat akan tampak sebagai berikut:

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore Â»Â»</a>
</b:if>
<div style='clear: both;'/>

Langkah Ketiga
Save

Langkah Keempat
Setelah kode diatas disimpan kita kembali dan masuk ke tab Pengaturan -> Format -> cari "Post Template" Kemudian pada kotak masukan kode dibawah ini

<div class="fullpost">
</div>

Langkah Kelima
Cara penggunaan readmore pada halaman posting. Ketika kita melakukan posting pertama kali kita akan melihat kode:

text anda

<div class="fullpost">

text anda

</div>

Memaparkan judul posting tanpa isi (halaman) posting

Pertama :

Buka Template -> Edit HTML -> Jangan lupa lakukan backup template :) -> kemudian beri tanda cek pada 'Expand Widget Templates'

Kedua :

Lihat kode dibawah ini:


<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:include data='post' name='post'/>

Kemudian cari kode warna merah diatas, jika sudah ketemu ganti kode warna merah diatas dengan kode dibawah 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>

Ketiga :
Save

. blogger BIOL .