Mar 25, 2009

Menu Buka Tutup Di Label Dan Arkib


Tutorial ini untuk Cik Amoi. Penulis menamakannya menu buka tutup di label / arkib atau lebih dikenali sebagai peek a boo view on label / archive. Setiap kali anda memilih label atau arkib blog, ia hanya memaparkan tajuk topik tetapi keseluruhan isi topik masih boleh dibaca dengan menggunakan arahan [+/-]. Menarik bukan??


1. Login ke Blogspot.

2. Pilih Layout - Edit HTML (Tanda kotak Expand Widget).

3. Download Full Template sebelum mengedit blog.

4. Cari </head>, letakkan kod ini di atasnya.

<script src='http://ladyqistina.googlepages.com/hackosphere.js' type='text/javascript'/>
5. Seterusnya cari <b:includable id='main' var='top'>, tambahkan kod yang berwarna merah.

<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>
<td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a>
</td>
<td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td>
</tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>

<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>

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

</b:if>

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>


5. Save template.

Selamat mencuba. Semoga sukses.

Via :Muncet

15 Comment

ciK aMoi Wed Mar 25, 12:20:00 AM

huhu. thnkx sebab buat tutorial tu. rasa2 aku tetap bingung pk posting aku ilang bila letak coding merah tu.~x(

ciK aMoi Wed Mar 25, 12:38:00 AM

aku tetap tak dpt buat:(

coding betul but aku rasa silap paste~x(

Eriyza Wed Mar 25, 09:34:00 AM

Cik Amoi : Maseh gagal wat eh?? Sy rasa ada bbrp kemungkinan. Antaranya tesilap meletakkan kod, template x serasi dgn kod atau template dirip dr wp. Cuba wat satu blog test dan masukkan benda ni. :)

ciK aMoi Wed Mar 25, 02:07:00 PM

rasa2 template tak serasi dengan kode. sebab template minima dapat lak buat:-t

Eriyza Wed Mar 25, 03:35:00 PM

Cik Amoi : Sy dah agak. Hehehe!!! :D

ciK aMoi Wed Mar 25, 04:03:00 PM

code yg kaler hitam tu tak sama dgn code coding html saya tu. haha.

Eriyza Wed Mar 25, 10:26:00 PM

Cik Amoi : Takpalah, len kali kalo tuko template baru guna naa.

hz wan Thu Apr 30, 11:36:00 AM

hai...sy tak dapat wat menu buka tutup ini...sy dah cari code tu dgn guna ctrl f...tp tak jumpa...sy jg dah byk tukar template....tp tetap tak jumpa....

Eriyza Thu Apr 30, 01:22:00 PM

Hzwan : Sy takleh view blog kamu. Kamu dah tanda kotak Expand widget??

hz wan Thu Apr 30, 01:39:00 PM

sy dah leh wat...sy tak tanda kotak expand widget..tu yg tak jumpa...huhuh.thanks ye...lg satu sy tak bg org tegok blog sy wat sementra waktu...

Eriyza Thu Apr 30, 02:03:00 PM

Hz wan : Tahniah. Sesama. :)

H.R PuTeRa YuSoFF Sat May 23, 01:00:00 PM

HUHU.. SETELAH MENCUBA BERKALI2.. BOLEH JGK

Eriyza Sat May 23, 01:16:00 PM

H.R Putera Yusoff : Tahniah cikgu Jai. :)

[a.m.o.i] ™ Wed Jun 03, 09:09:00 PM

akhirnya amoi dah dpt buat dh. pasni amoi nak buat tutorial pasall ni lak.

Eriyza Fri Jun 05, 11:50:00 PM

[a.m.o.i] ™ : Tahniah Amoi. :)

Post a Comment

Gunakan tatabahasa yang betul sewaktu menulis komentar agar mudah difahami oleh penulis. Terima kasih. :-)

Sila ambil perhatian perkara² berikut :-

1. Tinggalkan nama dan url blog atau laman web anda.
2. HTML tag seperti <b>, <i>, <a> boleh digunakan.
3. Sila berhemah di dalam berbahasa.