Tutorial Corner

Read More digunakan untuk memenggal tulisan menjadi lebih pendek. Banyak sekali tutorial yang membahas cara membuat Read More. Kali ini saya akan membuat tutorial Read More yang otomatis, juga cara menampilkan atau menyembunyikan thumbnailnya.

Berikut cara membuat Read More Otomatis:
1. Masuk ke blogger.com
2. Pilih Rancangan > Edit HTML. STOP! Jangan dulu check 'Expand Template Widget'
3. Cari kode </head>. Untuk mempermudah, kamu bisa menggunakan kombinasi CTRL+F pada komputer. Lalu tambahkan Kode 1 tepat di atas </head>

Kode 1:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 15;
img_thumb_width = 15;</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag ="";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag ='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

4. Check 'Expand Template Widget'
5. Cari kode <data:post.body/>

secara default kodenya seperti ini:

<div class="entry"> 
<p><data:post.body/></p> 
<div style='clear: both;'/> <!-- clear for photos floats -->
 </div>

6. Ganti <p><data:post.body/></p> dengan Kode 2.

Kode 2:

<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:left'><a expr:href='data:post.url'>Read more: <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

7. Klik SIMPAT TEMPLATE
8. Selesai

Kamu juga bisa mengedit Kode 1 dan Kode 2 di atas sesuai dengan selera. Berikut penjelasannya :

Penjelasan pada Kode 1

summary_noimg = 250; Panjang tulisan yang ditampilkan ketika tidak ada gambar/thumbnail.
summary_img = 250; Panjang tulisan yang ditampilkan ketika ada gambar/thumbnail.
img_thumb_height = 15; Tinggi thumbnail, dalam px.
img_thumb_width = 15; Lebar thumbnail, dalam px.

Mungkin sebagian kamu tidak suka dengan keberadaan thumbnail, maka saya berikan tips agar Read More secara otomatis tidak memunculkan thumbnail. Silahkan ganti setting kodenya menjadi seperti ini.

1. img_thumb_height = 0;
2. img_thumb_width = 0;
3. imgtag ='<span style="float:left; padding:0px 0px 0px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

Sekian dulu tutorial membuat Read More Otomatisnya. Silahkan dicoba dan semoga berhasil.

Oh ya, tak terasa hari ini adalah penghujung tahun 2011. Maka segenap kru Tutorial Corner mengucapkan
Semoga ke di Tahun 2012 ini kamu bisa lebih baik lagi. Amien.

Sudahkah kamu membuat Resolusi di tahun baru? sebagain contoh bisa lihat di sini

Terima kasih.

Smile, juga dikenal sebagai "emoticon", adalah gambar yang digunakan untuk menyampaikan emosi dalam tulisan Anda. Smile adalah cara yang bagus untuk mencerahkan tulisan.


Teks smile dibangunn dari dua atau lebih tanda baca. Misalnya:
;-) sama dengan 
:-) sama dengan 
:-( sama dengan 
:-? sama dengan 


Secara default, WordPress otomatis merubah teks smile ke emoticon. Anda bisa mengatur agar Wordpress tidak merubah teks, yaitu:

1. Masuk ke Dashboard
2. Pilih Settings -> Writing
3. Pada bagian Formatting, unchek box "Convert emoticons like :-) and :-P to graphics on display"

Berikut adalah macam-macam Smile yang tersedia pada WordPress. Enjoy.

icon	text	text	full text	icon	full text
	:)	:-)	:smile:		:lol:
	:D	:-D	:grin:		:oops:
	:(	:-(	:sad:		:cry:
	:o	:-o	:eek:		:evil:
	8O	8-O	:shock:		:twisted:
	:?	:-?	:???:		:roll:
	8)	8-)	:cool:		:!:
	:x	:-x	:mad:		:?:
	:P	:-P	:razz:		:idea:
	:|	:-|	:neutral:		:arrow:
	;)	;-)	:wink:		:mrgreen:

Tutorial Corner merupakan blog official untuk Tutorial Teknologi, Komputer, Software, Internet, Blog, dan Bisnis.