0 Langkah mudah membuat spoiler di blog

Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol show. Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca blog untuk membuka atau tidak isi spoiler

Anda sudah sering lihat Spoiler di kaskus atau forum-forum untuk nyembunyikan gambar, link dan konten lainnya. Spoiler ada dua yaitu untuk forum misalnya kaskus dan satunya lagi untuk dipergunakan di blog/web. Keduanya memiliki kode yang berbeda.• Spoiler Forum misalnya KASKUS:
[spoiler=judul spoiler]isi spoiler[/spoiler]

Ganti tulisan yang berwarna hijau sesuai judul dan isi spoiler yang anda kehendaki.• Spoiler untuk blog/web:
Menyembunyikan konten tertentu dari sebuah halaman blog/website diperlukan untuk menghemat space. Ketika visitor ingin melihatnya mereka dapat dengan mudah menampilkannya. Begitupun dalam software forum semacam vBulletin, Spoiler pasti banyak digunakan.

Berikut kode yang bisa digunakan dalam membuat spoiler di blog :


<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Isi Judul di sini... </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">


isi spoiler...


</div></div></div></div> 


Sim salabim lihat hasilnya..


Info
http://piknikcoyy.blogspot.com/2010/05/membuat-spoiler-di-blog.html

0 Cara Praktis buat readmore otomatis

Membuat Readmore atau Baca Selengkapnya pada postingan blog secara otomatis. Dengan adanya readmore otomatis, kita bisa menentukan berapa ketinggian dan lebar penggalan postingan dan image yang akan muncul pada halaman pertama blog kita sehingga terlihat rapi dan menarik. Trik ini mungkin telah banyak yang mengetahui dan ada juga yang belum mengetahuinya. Bagi anda yang belum mengetahui bagaimana cara membuat readmore otomatis, bisa mengikuti tutorial berikut ini.


 cari kode </head> kemudian masukkan script di bawah ini persis dibawah kode tersebut.


<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>


KEDUA, cari kode html berikut ini :


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


ganti kode tersebut dengan kode di bawah ini :



<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Keterangan : tulisan yang berwarna merah adalah yang bisa anda ganti. 
==> Summary noimg 430 = tinggi artikel terpenggal tanpa image

==> Summar img 430 = tinggi artikel terpenggal dengan image

==> Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll...

KETIGA, klik save template


Selanjutnya anda bisa melakukan postingan dan lihat hasilnya, Readmore atau baca selengkapnya akan secara otomatis terpasang setelah anda publish postingannya.

INFO: 

http://zona-klik.blogspot.com/2009/08/cara-membuat-readmore-otomatis.html

0 Menggulung Label model scroll

Untuk membuatnya, silahkan ikuti dengan cermat langkah-langkahnya berikut ini :

1. Login ke blogger dengan ID sobat tentunya. 
2. Buatlah Label dengan menambah Gadget pada sidebar, jangan lupa beri judul. 
3. Anggap saja sobat telah membuat judul labelnya dengan nama “Kategori”. 
4. Sekarang tuju ke Edit HTML. 
5. Klik Expand Template Widgets. 
6. Cari label yang sudah sobat buat tadi, dengan CTRL+F dan ketikkan “Kategori”, maka akan muncul kode HTML yang ribet, tapi jangan pusing melihat kode HTML tersebut. 
7. Perhatikan saja tulisan yang berwarna merah dibawah ini, kode itulah yang harus disisipkan kedalam label yang sudah sobat buat.

<b:widget id='Label1' locked='false' title='Kategori' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'><div style='overflow:auto; width:ancho; height:250px;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

Jangan lupa Simpan Template.

 info

http://miscah.blogspot.com/2010/01/cara-membuat-label-dengan-fungsi-scroll.html

0 Meringkas Arsip blog menjadi scroll

Update, membuat arsip blog menjadi scroll. Trik ini sama seperti model scroll yang lain, contohnya Label Scroll dan Scrolling pada Box Comments. Kita hanya menambahkan script berikut:


<div style='overflow:auto; width:ancho; height:100px;'> 


Untuk letaknya apa udah pada tau? Kalo belum, ayo kita lihat caranya:

1. Login - Layout - Elemen halaman
2. Buat widget Arsip dengan nama Arsip Blog
3. Pilih model Hirearchy untuk model ini
4. Save
5. Masuk ke Edit HTML - cek kotak Expand Template Widget
6. Cari 'Arsip Blog'. Selengkapnya begini:

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<div style='overflow:auto; width:ancho; height:100px;'>

<div id='ArchiveList'>

<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>

<b:if cond='data:style == &quot;HIERARCHY&quot;'>

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

</b:if>

<b:if cond='data:style == &quot;FLAT&quot;'>

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

</b:if>

<b:if cond='data:style == &quot;MENU&quot;'>

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

</b:if>

</div>

</div></div>

<b:include name='quickedit'/>

1. Sebelumnya tidak ada kode merah di template Anda. Tambahkan kode itu untuk mengaktifkan scrolling-nya
2. Simpan template Anda dan lihat hasilnya

Sumber : http://www.ardi33.web.id/

1 Cara mudah menampilkan linkwithin setelah readmore

- Linkwithin bisa memperlambat akses halaman blog, secara default akan tampil di bawah setiap judul posting. Nah, jika halaman utama Anda terdiri dari 3 judul dan maka akan terjadi load linkwithin 3 kali juga. Untuk mengakalinya kita gunakan trik gadget di bawah postingan. Pada halaman utama linkwithin tidak tampil, hanya tampil setelah pembaca klik salah satu artikel kita atau klik readmore...
Bagaimana cara membuat seperti itu?
- Pada saat muncul halaman Penambahan Elemen, klik Edit Content (jangan langsung di add widget, kita hanya akan mengambil scriptnya)
- Ambil script yang tertera disitu (copy di word atau yang lainnya)
- Tambahkan kode seperti di bawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'><br/><br/><em>
Masukkan script dari Edit Konten tadi disini
</em><br/></b:if>


- Nah selanjutnyakode dari edit content yang telah ditambahi kode berwarna tersebut, letakkan di bawah <div class='post-footer-line post-footer-line-1'>
- Simpan template
- Sementara jendela penambahan widget dari linkwith in tadi di close saja dan tidak usah dilanjutakan, kita hanya mengambil scriptnya :)

Semoga bermanfaat....


Sumber Selengkapnya di www.MasDoyok.co.cc 


http://www.masdoyok.co.cc/2009/10/related-posts-thumbnails-dua-jalan.html