Created (c) by Princexells Seyka (Princelling Saki)

Cara Buat dan Pasang Read More Otomatis




Tampaknya semakin lama para blogger akan semakin nyaman untuk melakukan posting. Setelah beberapa waktu lalu blogger meluncurkan read more baru yang penggunakannya juga semakin mudah, kini beberapa read more yang lebih canggih sudah bisa dimanfaatkan tanpa perlu ketikkan <!–more–>. Hanya dengan menambahkan sedikit javascript plus modifikasi di kode HTML, maka semua posting yang kita terbitkan secara otomatis akan tampil dengan read more terpasang . Ya …, tanpa perlu lagi untuk memikirkan dimana kita harus memotong teks sebagai read more. Caranya? Mudah ! Yo, ikuti Panduan dan Tutorial BloGGeR berikut ini.

Javascript Auto Read More (BloGGeR - BlogSPOT) :





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

</script>
<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; 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>



  1. Login ke BloGGeR

  2. KLIK link Design/Rancangan.

  3. KLIK link Edit HTML :


  4. BackUp Template : KLIK link Download Template Lengkap. Lanjutkan dengan menyimpan file template-nya di folder PC.

  5. Tetap di Edit HTML : KLIK Expand Templae Widget, kemudian lanjutkan cari kode ]]></b:skin>.


  6. Letakkan Javascript tepat di bawahnya.

  7. Setelah javascript diletakkan pada posisi yang benar, Cari kode <data:post.body/>

  8. Ganti <data:post.body/> dengan Kode HTML-1.

  9. KLIK Simpan template kemudian lihat hasilnya dengan membuka bkog.



Kode HTML-1



<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' style='text-decoration:none;'><img src='http://i32.tinypic.com/2hzo0te/gubhugreyot/images/bgAutoRM.jpg' style='margin:8px 10px 0;border:2px solid #444;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;-goog-ms-border-radius:6px;'/><span style='font-weight:bolder;color:blue;text-decoration:blink;font-size:22px;margin-top:-5px;'> * </span> <span style='font-family:Arial Narrow;margin-top:-15px;'><data:post.title/></span></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>



Apabila terjadi kegagalan fungsi read more ini, coba benahi pada kode HTML sampeyan. Mungkin beberapa kode harus di hapus. Coba perhatikan kode HTML-2 di bawah ini dan hapus kode HTML blog sampeyan yang berwarna biru.


Kode HTML-2


<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;’/>


Catatan/Keterangan :



  1. Kode ini digunakan untuk merubah ukuran tampilan gambar :

    img_thumb_height = 100; ♣ tinggi gambar/image.


    img_thumb_width = 100; ♣ lebar gambar/image.

  2. summary_noimg = 300;

    summary_img = 300;

    Ukuran luas read more (tinggi).


Artikel Terkait Lainnya :

DAFTAR ISI BLOG
TRICK BLOG


Diposting oleh
Label: ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)
 

© Copyright JASA PEMBUATAN WEBSITE 2010 -2011 | Design by Andra Ghotic's Center | Published by Andra Templates | Powered by .