Cara membuat "read more" pada blogger (2)

Lanjutan dari postingan sebelumnya mengenai Cara membuat "read more pada blogger yang berisi tentang cara membuat read more dengan bantuan Jump break milik bloggernya sendiri. Membuat read more kali ini adalah dengan cara yang biasa disebut hack CSS atau mengutak atik kode CSS yang ada di bagian Edit HTML pada bagian layout pengaturan blog. Cara ini saya dapat setelah berkunjung dari 2 blog ternama yaitu blognya mas Isnaini dan blognya bang o-om.

Pasang read more manual
Ini adalah cara yang saya dapat dari blognya mas Isnaini, berikut langkahnya:

• Login ke blogger, pilih blog yang ingin kamu pasang dengan model read more ini.
• Masuk ke bagian layout - Edit HTML.
• Centang kotak kecil "expand widget templates".
• Masukkan kode berikut diatas kode </head> atau tepat dibawah kode ]]></b:skin>

Contoh :

]]></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 kode <p><data:post.body/></p>, lalu tambahkan kode berikut ini dibawahnya.
  

Contoh :

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

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

Kata Read more dapat kamu ganti dengan kata selengkapnya, bersambung, dan lain2.

• Simpan hasil editan tersebut, lalu beralih ke bagian posting.
• Pada mode Edit HTML, ketik kode <span class="fullpost"> Isi yang disembunyikan </span>.
• Lihat contoh pada gambar berikut

Pasang read more Otomatis
Pemasangan read more versi yang satu ini sangat praktis, tidak perlu menuliskan kode-kode lagi dan juga tidak perlu repot-repot menentukan bagian mana yang harus di potong. Penasaran? Silahkan ikuti petunjuk yang saya ambil dari bang o-om berikut ini.

Oh ya, jika sebelumnya kamu menggunakan cara pertama atau kedua, kode-kode tersebut harus di kembalikan terlebih dahulu. Caranya adalah dengan menghapus kode-kode yang ada pada cara sebelumnya.

Untuk membuat fungsi read more otomatis seperti ini langkah-langkahnya adalah:

• Masuk ke bagian layout - Edit HTML.
• Centang kotak kecil "expand widget templates".
• Masukkan kode berikut diatas kode </head>.
  

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</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>

• Masih pada halaman "Edit HTML", temukan kode <data:post.body/>.
• GANTI kode <data:post.body/> tersebut dengan kode berikut.

<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>

var thumbnail_mode = "float";
(kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)

summary_noimg = 250;
(Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)

summary_img = 250;
(Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)

img_thumb_height = 120;
(Thumbnail 'tinggi dalam piksel)

img_thumb_width = 120;
(Thumbnail 'lebar dalam piksel)

Silahkan coba dan lihat hasilnya.

Sekedar tambahan tentang cara penghapusan kode yang lama sebelum mengganti yang baru.

Dalam contoh yang diberikan oleh o-om lakukan langkah berikut
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

Yang berwarna merah harus dihapus.


Sedang dalam template saya

<div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
        <style>#fullpost{display:inline;}</style>
        <p><data:post.body/></p>
    
<b:else/>
        <style>#fullpost{display:none;}</style>
        <p><data:post.body/></p>
        <span id='showlink'>
          <a expr:href='data:post.url'>Read more...</a>
        </span>
        <script type='text/javascript'>
          checkFull(&quot;post-&quot; + &quot;<data:post.id/>&quot;);

<div style='clear: both;'/> <!-- clear for photos floats -->

Karena setiap template berbeda-beda, silahkan dipelajari dan disesuaikan patokannya.

Related Post:

Enter your email address to get the newest article here: Delivered by FeedBurner