Test Block Top

The Blog...
Articles, Tips & Trick and Other Interesting Information...

15 Februari 2010

Auto Readmore Blogspot

Membuat Read More Otomatis Blogspot



Kalau biasanya membuat readmore di blogspot pada paragraf pertama posting anda wajib mengetikkan kode ini => <span class="fullpost"> pada tab edit HTML, namun sekarang ada trik (Readmore Otomatis) yang memudahkan anda membuat readmore tanpa harus mengetikkan kode di atas.

Jika ingin memakai cara lama (dengan mengetikkan kode di atas => <span class="fullpost">), maka hal berikut ini yang harus anda lakukan. Pertama login ke akun blogger anda, navigasikan ke tab 'Layout' (Tata Letak) klik 'Edit HTML', kemudian cari kode berikut ini ]]></b:skin>. Copy dan pastekan kode berikut di bawah kode ]]></b:skin>:

[css collapse="false"]
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
[/css]

Kemudian cari lagi kode ini <p><data:post.body/></p> dan tambahkan kode berikut di bawahnya:

[xml collapse="false"]
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More.. (Ganti Read More.. dengan kata terserah anda contoh 'Selengkapnya')</a>
</b:if>
[/xml]

Agar paragraf postingan baru anda pada halaman utama blogspot terpotong maka ketika membuat posting navigasikan ke mode 'Edit HTML'. Ketikkan kode <span class="fullpost"> sebelum kata / kalimat depan yang ingin anda potong, dan tulis kode </span> setelah akhir kalimat yang ingin anda potong.

Cara ini bisa anda pakai untuk membuat read more, namun ada cara satu lagi yang lebih praktis. Cara ini secara otomatis akan membuat readmore untuk anda, berikut tahapan yang harus anda lakukan: Login ke blogger anda => 'LayOut' (Tata Letak) => klik pada bagian 'Edit HTML'. Temukan kode berikut <data:post.body/> (agar lebih mudah gunakan shortcut keyboard dengan mengetikkan 'Ctrl + F, kemudian pastekan kode tersebut). Ganti kode <data:post.body/> dengan kode di bawah ini:

[xml]
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'/>
<script type='text/javascript'>
var blogID = "780351826145379977"
function retriveSummaryPost<data:post.id/>(json){document.getElementById("summary<data:post.id/>").innerHTML
= json.entry.summary.$t + "..."}

function createSummaryPost<data:post.id/>(POSTID){ var script =
document.createElement("script");
script.src = "http://www.blogger.com/feeds/"+blogID+"/posts/summary/"+POSTID+"?alt=json-in-script&amp;callback=retriveSummaryPost<data:post.id/>";
script.type = "text/javascript"; document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);

}
</script>
<script type='text/javascript'>
createSummaryPost<data:post.id/>("<data:post.id/>");
</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Selengkapnya</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div id='post_body'><data:post.body/></div>
</b:if>
[/xml]

Ganti var blogID = "780351826145379977", jika tidak tahu dimana mencari BlogID anda login dulu ke blogger => arahkan ke bagian posting => lihat pada address bar. Contoh "http://www.blogger.com/posts.g?blogID=XXXXXXXXXXX". XXXXXXXXXXX adalah BlogID anda.

Selesai... Sekarang setiap kali anda posting maka secara otomatis pada halaman utama cuplikan posting anda akan terpotong.

http://www.bloggertipandtrick.net/how-to-add-auto-read-more-feature-with/

2 komentar:

Loncat ke Atas ↑