Cara Membuat Read More Otomatis di Blogger

>

Jangan Lewatkan Artikel Yang Berkaitan Dengan Cara Membuat Read More Otomatis di Blogger dibawah ini:

• Cara Mengatur Ukuran Lebar 'Widget' Template Blogger Cara Singkat,Cepat dan Efektif Mengatur Ukuran Lebar 'Konten Utama / Postingan' Blogger Template Jika sobat menginginkan ukuran template dapat sobat utak-atik sendiri dengan cara singkat,tak ad ... lihat selengkapnya
• cara Memasang Iklan Disamping postingan Cara Memasang Iklan Disamping postingan - Nah, Bagi Sahabat Sekedarbiasa Yang ingin Memasang Iklan Di samping postingan(Bisa kanan maupun kiri),Nih aku kasih tutorialnya... Langsung saja yah ikut ... lihat selengkapnya
• Cara membuat textarea dengan tombol "select all"Klik Demo untuk Melihat Contohnya.. Nih Langkah"nya 1. Login ke blogger dengan ID anda. 2. Klik Rancangan. 3. KLik tab Edit HTML. 4. Cari kode </head> 5. Copy dan paste kode dibawah ini tepa ... lihat selengkapnya
• Cara Membuat Thumbnail Related Post di Bawah Posting Nah,untuk bentuk fisiknya,sobat bisa lihat di SINI. Langkah dan Cara Membuat / Memasang Related Post Bergambar (Thumbnail Related Post) 1. Pertama, masuk ke akun Blogger sobat, buka tab ... lihat selengkapnya
• membuat sitemap kerenLangsung ke TKP ya gan...(lagi males)hehe klik DEMO untuk melihat contohnya nih langkah-langkahnya: 1. Masuk ke Blogger 2. Pilih Posting - posting baru 3.Masukan judul Posting misalnya SITEMAP BL ... lihat selengkapnya

بسم الله الرحمن الرحيم

Read More Otomatis pada Template Blogger

Seperti janji minggu lalu ya sob,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.



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.
Untuk demonya sobat bisa liat di SINI.

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 tanpa jQuery pada Blogger dengan Bahasa Javascript

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

(1)

(2)

(3)

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,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.....good luck//!!!

Sumber

Bila anda merasa artikel diatas bagus dan bermanfaat, anda bisa gunakan URL atau HTML dibawah ini. Silahkan anda dipasang dihalaman web atau blog anda untuk menuju kehalaman ini :

URL:

HTML Link:

Forum Link:

Widget by BloggerTipAndTrick

sobat boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Read More Otomatis di Blogger ini sangat bermanfaat bagi teman-teman sobat, namun jangan lupa untuk meletakkan link Cara Membuat Read More Otomatis di Blogger sebagai sumbernya. Trims ...mencuri itu tidak baik...hargailah karya anak bangsa