Read More Blogger AIO


Read More Blogger AIO. Untuk memperindah halaman depan atau index page pada blog, orang cenderung menggunakan fasilitas readmore. Untuk platform sekelas wordpress fasilitas ini sudah tertanam otomatis di dashboard pada saat kita posting artikel, namun untuk platform blogger perlu memasukannya secara manual. Beberapa webmaster blogger bereksperimen untuk menemukan temuan baru dalam menggunakan fasilitas read more ini.

Fasilitas readmore dari berbagai sumber.


1. Readmore untuk clasic template
2. Readmore untuk template blogger baru
3. Readmore dengan menggunakan javascript
4. Readmore secara automatis + thumbnail

Readmore untuk clasic template


Saya menemukan ini di web mas isnaini.

Pertama-tama menuju pada edit template, setelah itu tambahkan code dibawah ini diantara <style> dan </style>

<MainOrArchivePage>
span.readmore {display:none;}
</MainOrArchivePage>
<ItemPage>
span.readmore {display:inline;}
</ItemPage>


Code diatas di gunakan untuk menambahkan span readmore pada CSS. Selanjutnya untuk mengeluarkan link baca selengkapnya yang sudah akan kita buat cari code < $BlogItemBody$> dan letakkan code ini dibawah code tersebut.

<mainorarchivepage><br />
<a href="<$BlogItemPermalinkURL$>">Read More..</a>
</mainorarchivepage>


Setelah menyimpan template langkah terakhir adalah ketika kita menulis artikel, biasakan menggunakan edit html. Saat menulis letakkan code <span class="readmore">
di didepan tulisan yang akan kita sembunyikan ditutup dengan </span>

Contoh:
Cara membuat read more pada blogger template clasic. <span class="readmore"> Postingan yang ingin disembunyikan. </span>

Readmore untuk template blogger baru


Dahulu saya menggunakan readmore jenis ini, karena saya menggunakan template blogger jenis baru.

Seperti membuat readmore pada template clasic, kita harus menuju ke edit html dan centang expand widget. Letakkan code ini di bawah ]]></b:skin>

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


Selanjutnya cari code <p><data:post.body/></p> dan letakkan code berikut ini tepat dibawahnya dan save template.

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More..</a>
</b:if>


Bila langkah diatas tidak bisa bekerja anda bisa coba cara yang ini ( hal ini disebapkan karakteristik tiap template berbeda ). Cari code <div class='post-header-line-1'/> <div class='post-body'> dan letakkan code berikut ini dibawahnya

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>


Dibawahnya kita akan menemukan code <p><data:post.body/></p> dan tambahkan code ini dibawahnya

<a expr:href='data:post.url'>Readmore..</a>
</b:if>


Untuk langkah pemotongan artikel dilakukan secara manual seperti pada readmore classic bedanya untuk pemotongannya span code yang digunakan adalah <span class="fullpost">. dan ditutup dengan </span>

Readmore dengan menggunakan javascript


Kali ini akan sedikit melibatkan Javascripts, banyak blogger kurang memahami tentang penggunaan javascripts tapi bisa menggunakannya. Langsung saja ini adalah file javascripts yang bisa anda masukkan langsung ke blogger atau meloadnya ke hosting anda.

function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}

function showFullPost(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i ) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "readmore")
spans[i].style.display = 'none';
}
}

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i ) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}


function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i ) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i ) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}


Letakkan code ditersebut di atas code </head>, bila anda menggunakan file hosting maka code akan seperti ini

<script type='text/javascript' src='http://alamathostinganda.com/Readmore.js' />

Cara ini cukup susah, dalam artian anda harus teliti dalam merubah template. Kalau anda salah template akan menjadi kacau, untuk amannya save template sebelum mengeditnya.

<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);'>[ /-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" data:post.id "\");"' href='javascript:void(0);'>[ /-] Ringkasan saja...</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>


Code yang ditebalkan adalah code tambahan yang harus anda masukkan untuk mengaktivkan readmore dengan menggunakan javascripts dan save template. Selanjutnya langkah pemotongan sama dengan readmore sebelumnya yang harus dilakukan secara manual. Letakkan code <span id="fullpost"> di depan artikel yang akan di sembunyikan dan diakhiri dengan </span>.

Readmore secara automatis + thumbnail


Cara ini berbeda dari yang sebelumnya karena menggunakan sistem otomatis dengan menghitung jumlah character dari artikel yang akan di tampilkan. Selain bisa di gunakan secara otomatis readmore dengan jenis ini juga bisa menampilkan thumb dari image pertama.

Read more
Tertarik? langsung saja menuju edit html dan letakkan code berikut sebelum tag </head> dan save template

<!-- Read more 2 -->
<script type='text/javascript'>
//<![CDATA[
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; margin:0px 10px 5px 0px; padding:0; border-right:2px solid #ccc; border-bottom:2px solid #ccc;"><img src="' img[0].src '" width="' img_thumb_width 'px" height="' img_thumb_height 'px"/></span>';
summ = summary_img;
}

var summary = imgtag '<span>' removeHtmlTag(div.innerHTML,summ) '</span>';
div.innerHTML = summary;
}
//]]>
</script>

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 500;
summary_img = 400;
img_thumb_height = 125;
img_thumb_width = 120;
</script>
<!-- Read more 2 end -->


Jangan beranjak dari edit html tapi centang pada expand widget, cari code <data:post.body/> ganti code tersebut dengan code berikut ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</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>


Save template. Untuk penyesuaian anda dapat menggunakan panduan berikut ini.

var thumbnail_mode = "float"; ( menentukan posisi thumnail )
summary_noimg = 250; ( Jumlah character bila tidak menggunakan thumbnail )
summary_img = 250; ( Jumlah character bila tidak menggunakan thumbnail )
img_thumb_height = 120; ( Tinggi thumbnail )
img_thumb_width = 120; ( Lebar thumbnail )

Demikian sedikit ulasan tentang beberapa jenis readmore.

15 Comments for Read More Blogger AIO:

Anggy write.. 13 Juli, 2009 Delete

artikel ini udah aku praktekin lo

Denny write.. 13 Juli, 2009 Delete

iya ini tutorial aslinya udah pada lama. cuman saya menulisnya kembali secara keseluruhan, itu sebapnya di pada judul ada AIO ( All in One )

sekedar rangkuman saja, biar saya tidak terlalu bingung bila ada yang tanya mengenai masalah ini :)

Desti write.. 13 Juli, 2009 Delete

Hayy...
numpang baca ya...

cebong ipiet write.. 14 Juli, 2009 Delete

OIA... kirain AIO jenis readmore baru xiixixiix

Iklan Gratis write.. 14 Juli, 2009 Delete

wew....
top banget nih...
bisa langsung diunduh ga nih...
kayanya perlu deh...
tak unduh dulu yah...
capa tau nanti ane butuh...

thx banget ya...
salam kenal :D...
Stop
Dreaming Start Action

Tutorial Blog write.. 14 Juli, 2009 Delete

nice info friend..thanks

triyanto write.. 16 Juli, 2009 Delete

untuk wordpress gimana ya mas biar bisa otomatis kepotong misal 2 paragrap

nyegik write.. 19 Juli, 2009 Delete

wow keren buanget nih.....komplit sekali readmorenya kang, thanks ya ilmunya, aku ijin simpan dulu

akane write.. 19 Juli, 2009 Delete

wekz..
keren nhe..
tapi yang Readmore secara automatis + thumbnail
aku pengen dech pake ntu..
tapi blog ku udah readmorenya...
males gonta-ganti age..
tp thx gud info...
^^

Azzaam write.. 01 Agustus, 2009 Delete

Nah, begini nih tutorial yang lengkap banget, hehe...

laron write.. 29 Maret, 2010 Delete

Susahnya bikin Read More......dari bertaon-taon kaga berhasail juga,huff....fff

Padly Rahman write.. 26 April, 2010 Delete

Sudah menjadi Kodrat binatang(ehhh maaf...! manusia Maksudnya) mencari yang terbaik... di antara AIO yang mana ya Kang?

Denny write.. 26 April, 2010 Delete

Seperti aku bilang, kita harus pandai2 memilah2 apa yang harus di tempatkan di blog, antara lain widget ataupun scripts2. Usahakan apa yang ada di blog itu menunjang dan membantu visitor, syukur2 kalau dari fasilitas yang ada bisa menjadi suatu keindahan design.

jadi intinya lihat dulu design blog, tema dan banyaknya widget yang telah digunakan. untuk yang paling ringan bisa menggunakan readmore default yang sudah di update oleh blogger

Padly Rahman write.. 26 April, 2010 Delete

@Denny... Sekali lagi Hatur Tararengkyu Kang, Banyak sekali pengetahuan yang aku dapat dari blog ini....Tengkyu.

Egy write.. 17 Maret, 2011 Delete

permisii
please mampir ke rumah sederhane ayee
gysoft-download.blogspot.com

Posting Komentar

Spam is not Good for your Body :)

 
© Blogger Tutorial | Powered by Blogger | Valid X/HTML (Home Page)
Framework: Choen Design: Denny
Back To Top