Membuat Read More Otomatis




Distributor Pulsa Electrik Termurah

Cara Membuat Read More Otomatis - Seperti janji minggu lalu ya sob,Pelajaran Blog kali ini akan mengulas dan mengutak atik 'seputar blogger template' yang kita gunakan saat ini.

Betul gan,ini kaitannya 'membuat read more atau tulisan baca selengkapnya' versi kedua.

Beberapa waktu lalu telah diposting cara membuat read more/baca selengkapnya.. secara manual,namun kendalanya bagi blog yang terlanjur sudah memiliki banyak artikel tentu akan banyak makan waktu dan tenaga untuk mengedit satu persatu.

Nah,dengan kombinasi javascript read more yang akan kita ciptakan ini akan tampil otomatis meskipun kita tidak mengeditnya kembali.

Yup,membuat read more/baca selengkapnya otomatis pada blogger adalah tema kita kali ini.

Lalu bagaimana jika saya telah menggunakan read more secara manual?

Tidak perlu cemas gan,karena tinggal ganti kodenya dan jreng!!! :D

Langkah Cara Membuat Read More Otomatis :


Ada dua(2) pilihan membuat readmore otomatis / auto read more pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan tulisan.

Untuk pertama kali,seperti biasa ya gan pilih Dashboard,lalu Tata Letak dan Contreng tulisan Expand Widget Template

Selanjutnya,cari kode </head>,setelah ketemu tepat diATASnya letakkan kode javascript berikut:



<script type='text/javascript'>

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 150;

summary_img = 150;

img_thumb_height = 100;

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>



Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>



Setelah itu untuk Cara 1.Read More Button Otomatis menggunakan gambar,hapus kode tersebut dan gantilah dengan kode berikut:



<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 style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></a></span>

<b:else/>

<data:post.body/>

</b:if>



Sedangkan untuk Cara 2.Read More Button Otomatis hanya berupa text,hapus kode <data:post.body/> atau <p><data:post.body/></p>

tersebut dan gantilah dengan kode berikut:



<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 style='float:right'><a expr:href='data:post.url'>Read More..</a></span>

<b:else/>

<data:post.body/>

</b:if>



Lalu simpan templates dan lihat hasilnya.

Untuk yang terlanjur menggunakan read more secara manual seperti di sini,tinggal hapus kode:



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

<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>

</b:if>


Dan gantilah dengan kode sesuai pilihan sobat diatas,bisa menggunakan cara 1 maupun cara 2.Semoga berhasil dan selamat ngutak-atik template ya .

Anda mencari Distibutor PULSA & KUOTA termurah ? disini tempatnya: Klik Disini.
Telusur Reload

http://bit.ly/dropshiplapaktelusur
Dapatkan artikel terbaru Telusur Tutorial via RSS. Masukkan alamat email anda di bawah ini lalu tekan subcribe:
Komentari



Bookmark and Share

Responses

1 Respones to "Membuat Read More Otomatis"

Software Download Full said...

makasi boz untuk tutorialnya ....


21 August 2012 at 00:26 Reply

Post a Comment

 
© 2012 Segawe Cyber - All Rights Reserved
Design by Mas Farid - Powered by Blogger
Return to top of page Copyright © 2012 | Juscinth Grey Template design by Segawe Cyber Team