Postingan super-peek-a-boo

Elu bisa manjangin post dari mode summarry ke full post, bikin collapse juga bisa, dan kalo elu nggak punya post summary di pos-an elu, maka link "Read More..." dan "Collapse" enggak muncul juga,pokoknya asyik deh....

Kayak lu bisa lihat di pos ini, dimulai cuman summary doang, terus diembel-embeli link 'Read more...'. Kalo lu ngeklik link itu maka akan terhampar full post. Sekarang coba lihat dipalign bawah disitu ada link 'Summary only...', yang meng-collapse pos kembali ke bentuk summary.

Hack ini pertamakali dibikin sama Ramani di Hackosphere. Cuman ditambahin dikit biar bisa di collaps-kan.

Caranya begini nih :

Langkah 0:
Back-up template lu seblum lu utak-atik lebih lanjut!

Langkah 1:
Tambahin kode javascript berikut di bagian head template lu. Tarok tepat diatas tag </head>.


<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' />


Langkah 2:

Cari includable yang bernama 'post' di template elu, dan ubah tepat seperti koding dibawah (kode yang berwarna merah yang harus ditambahin):


<b:includable id='post' var='post'>
<div class='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>

<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Summary only...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
.... rest of template code ....

Sekarang, save template elu !

Langkah 3:
Di bagian tab Settings - Formatting ,lihat dibagian paling bawah dan masukin post-template berikut ini :

Type your summary here.
<span id="fullpost">
Type the rest of your post here.
</span>


nah sekarang tiap post baru yang elu bikin akan berbentuk fullpost-span secara default. Jika postingan elu pendek, lu tinggal ndelete tag <span>
dari postingan eluh. ostingan elu bakal tampil penuh, dannggak ada link "Read more..." atau "Summary only".

Bagaimana cara kerjanya (skip bagian ini jika elu gak suka yang rumit-rumit).
Perubahan yang elu buat membikin setiap post-body terdiri setidaknya 3 span: fullpost-span that yang udah lu masukin di post-template, sebuah span untuk link 'Read more', dan sebuah span untuk link 'Summary only'. Karena mungkin ada span yag lain di postingan elu, maka setiap masing-masing 3 span punya id unik ('fullpost', 'showlink' dan 'hidelink' secara berurutan).
Pas elu buka blog elu di halaman utama, maka postingan elu bakal tampil kayak gini:


* Summary ditampilin (selalu)

* Full text disembunyiin (pertama div, lalu diset ke display:none)

* Read more terlihat (div kedua)

* Summary only disembunyiin(div ketiga, diset ke display:none)


Poatingan elu selalu punya id khusus, dan jika id akan nglewatin fungsi javascript showFull dan hideFull berurutan. Funsi tersebut menggunakan metode getElementsByTagName buat nanganin span itu, dan kemudian men-toggle cara mereka ditampilin.sebuah fungsi ketiga, checkFull, mmeriksa apakah sapn Fullpost itu ada. Jika nggada, kedua link itu bakal disembunyikan.

Bikin Widget Installer sekali klik

Pasti banyak pembaca yang penasaran, bagaimana sih bikin widget-installer sekali klik ? Ok, mari kita mulai, pertama-tama lu harus ngerti dulu cara kerjanya, jadi ntar lu gampang bikin punya lu sendiri. Perhatian: copy-paste doang kaga bakal bisa coy !

Langkah 1: Bikin sebuah Widget
Kalo lu pingin bikin sebuah Widget Installer, elu harus bikin satu widget itu sendiri dulu. Satu widget-installer sekali klik yang bisa diinstal harus berisi semua code yang diperlukan. Jadi kalo misalkan lu punya kode javascript yang mesti diinstal, coba elu tarok di dalem widget dulu. Ok, sekarang buat lucu-lucuan dulu, mari kita bikin Widget kata-kata mutiara acak ( trims Annie). Buka template Blog elu, tambahin elemen HTML/Javascript yang dibutuhkan, ganti judulnya misalkan dengan "Kata Mutiara", dan tambahin javascript dibawah ini buat isinya :

<script language="JavaScript">//store the quotations in arrays
quotes = new Array(6);
quotes[0] = "Sing temping pentike.";
quotes[1] = "Sugih tanpo bondho, menang tanpo ngasorake, nglurug tanpo bala, mangan tanpo mbayar.";
quotes[2] = "Kapal keruk taline kenceng.";
quotes[3] = "Jaka gledek bawa anjing, elu geblek anjing.";
quotes[4] = "Paling enak si orang bujang,badannya tinggi burungnya panjang.";
quotes[5] = "Pacaran jangan berlebihan,asal jangan lebih dari hubungan badan saja.";
//calculate a random index
index = Math.floor(Math.random() * quotes.length);
//display the quotation
document.write("\n");
document.write(quotes[index]);
//done </script>

Kode diatas adalah script javascript . Jangan cemas, gampang dimengerti kok. Kode itu membikin struktur data yang disebut sebagai array, dengan enem elemen yang terdiri dari angka 0 sampe 5. Kemudian kode itu menjumlahkan sebuah angka acak dari 0 ke 5, dan menampilan array-element dengan index itu. pokoknya ini hanyalah javascript yang biasa ajah. Save widget itu, dan lihatlah hasilnya. Setiap kali elu me-reload halaman elu, sebuah kata-kata mutiara baru bakal tampil.

Langkah 2: Mengetahui bagaimanakah sebuah widgets bisa ditambahin di Blogger
Nah, sekarang elu sudah bikin widget lu sendiri, sekarang elu musti belajar bagaimana caranya nambahin widget ke blogger. Itu semua diterangin komplit di halaman Blogger Help . Elu tinggal bikin sebuah FORM. Form yaitu sebuah elemen HTML, dan bisa mempunyai input boxes, radio-buttons, check-boxes, buttons, dan lain-lainnya.

Langkah 3: Bikin sebuah tombol Install Widget
Sekarang kita bakalan bikin tombol instal kita sendiri dengan menggunakan sebuah form. Form elu harus kelihatan seperti ini :

<form method="post" action="http://beta.blogger.com/add-widget">
<input name="widget.title" style="display:none" value="Kata Mutiara"/>
<textarea name="widget.content" style="display:none;">
&lt;script language="JavaScript"&gt;
//store the quotations in arrays
quotes = new Array(6);
quotes[0] = "Sing temping pentike.";
quotes[1] = "Sugih tanpo bondho, menang tanpo ngasorake, nglurug tanpo bala, mangan tanpo mbayar.";
quotes[2] = "Kapal keruk taline kenceng.";
quotes[3] = "Jaka gledek bawa anjing, elu geblek anjing.";
quotes[4] = "Paling enak si orang bujang,badannya tinggi burungnya panjang.";
quotes[5] = "Pacaran jangan berlebihan,asal jangan lebih dari hubungan badan saja.";
//calculate a random index
index = Math.floor(Math.random() * quotes.length);
//display the quotation
document.write("\n");
document.write(quotes[index]);
//done
&lt;/script&gt;
</textarea>
<input type="submit" name="go" value="Tempelin widget ini di blog lu"/>
</form>

Mari kita lihat form ini dulu. Sebagaimana biasanya HTM, tag-pembuka dan tag-penutup . Isi dari form harus elu kirim ke url http://beta.blogger.com/add-widget. Informasi ini udah ditambahin di tag-pembuka form. Form itu harus terdiri dari 3 elemen: judul widget , isi widget ,dan sebuah tombol buat ngirim form ke Blogger. Judul widget sudah diset dengan menggunakan sebuah Input Field di form. Nama dari input field harus diset menjadi "widget.title", jadi Blogger tahu bahwa itu adalah sebuah judul widget . Value dari field boleh elu isi sesuka ati elu. Value itu bakal ditampilkan di blog elu sebagai judul widget.

Di contoh berikut gua ngeset sebagai "Kata Mutiara", tapi bisa juga elu bikin sebagai "Pemikiran Pilosopis". isi dari widget ini adalah kode javascript dari langkah 1. Kita tarok javascript ini kedalem textarea-field. Textarea punya tag-pembuka dan tag-penutup. Tarok javascript diantara dua tags itu. Didalam form ini, kita harus yakin kalo javascript itu bakal diperlakukan sebagai text, dan bukan sebagai javascript. Untuk itu, gantilah semua < dengan < dan ganti semua > dengan >. Nama dari textarea lu set ke "widget.content" jadi Blogger tahu bahwa field ini memuat isi widget . Style dari title input dan textarea elu set jadi display:none, jadi yang baca gak bakal ngeliat itu (tapi jangan cemas ding, wong sama saja ini).

Akhirnya, ada input button, value ditampilkan sebagai text tombol. Jika elu sudah ngopi form ini dan narok di akhir kode widget yang sudah ada di sidebar elu, elu bakal dapet sebuah tombol di bagian bawah widget, dan kalo ada yang ngeklik tombol itu maka otomatis akan menginstal ke blog pengunjung.

Selamat Datang !

Disini kita akan membahas bagaimana membikin atau meng-hack blogger setelah beralih ke versi baru. Salin gbelajar adalah senjata paling bagus buat maju !