Read More Blogger AIO | OBLO™

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.


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.