Home > Tips Blogger > Cara Membuat Read More Otomatis Di Blogspot
Cara Membuat Read More Otomatis Di Blogspot
by Unknown
Cara membuat auto read more ini aku referensi dari blognya Oom. Berhubung untuk menerapkan ilmunya aku tulis lagi cara membuat Readmore otomatis ini dengan tujuan memperfaseh dan memperluas berbagi informasi sesama blogger, khususnya cara membuat auto read more ini. Cara membuat auto read more kali ini agak ruet disbanding membuat read more sebelumnya. Membuat auto read more kali ini memang dibilang lebih praktis karena apa, jika read more terdahulu harus menggunakan cara manual untuk memasang fungsi auto read more tersebut ke setiap posting.
Tidak kalah menariknya fungsi auto read more kali ini mampu menampilkan gambar pertama dalam sebuah poting atau thumnil. Fungsi auto read more ini bisa dibilang lebih mirip dengan artikel terbaru dengan thumbnail.
Kelebihan yang lain dari fungsi auto read more kali ini yaitu kita bisa mengatur berapa banyak karakter yang akan ditampilkan. Ada karakter yang bisa ditampilkan jika ada sebuah gambar dalam postingan yang anda buat. Dan adapula yang tanpa menampilkan gambar. Memang cara membuat read more otomatis kali ini agak rumit tapi ada sisi positifnya juga yaitu kita tidak perlu lagi membuat fungsi read more pada setiap posting .
Ok. Langsung aja caranya di bawah ini.
Masuk ke menu Dasboard blogspot terus > Layout/Tampilan> Edit HTML
Beri tanda centang pada "Expand widget template"Jika sudah Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> .
copy paste script auto read more barikut ini:
<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>
Selanjutnya cari kode berikut ini
<data:post.body/>
Jika sudah ketemu, maka ganti kode <data:post.body/> dengan semua kode dibawah 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 == "item"'><data:post.body/></b:if>
Setelah selesai tekan save template.
Keterangan tentang cara membuat auto read more:
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).
Dengan keterangan di atas anda dapat merubah script Membuat Read more Otomatis sesuka hati.
Selamat bereksperimen…
Related Post
Category Article Tips Blogger
8 Responses to “Fan2be”
Popular Posts
Blog Archive
-
►
2013
(10)
- ► Jul 28 - Aug 4 (1)
- ► Jul 21 - Jul 28 (1)
- ► Jul 14 - Jul 21 (1)
- ► Mar 10 - Mar 17 (1)
- ► Feb 17 - Feb 24 (1)
- ► Feb 10 - Feb 17 (1)
- ► Jan 20 - Jan 27 (1)
- ► Jan 13 - Jan 20 (3)
-
►
2012
(21)
- ► Dec 30 - Jan 6 (2)
- ► Dec 23 - Dec 30 (2)
- ► Dec 16 - Dec 23 (1)
- ► Dec 9 - Dec 16 (2)
- ► Nov 25 - Dec 2 (2)
- ► Nov 11 - Nov 18 (1)
- ► Oct 21 - Oct 28 (1)
- ► Sep 2 - Sep 9 (2)
- ► Apr 8 - Apr 15 (2)
- ► Mar 18 - Mar 25 (3)
- ► Mar 4 - Mar 11 (2)
- ► Feb 26 - Mar 4 (1)
-
►
2011
(72)
- ► Dec 18 - Dec 25 (1)
- ► Oct 30 - Nov 6 (2)
- ► Oct 16 - Oct 23 (1)
- ► Aug 28 - Sep 4 (1)
- ► Jul 3 - Jul 10 (2)
- ► Jun 12 - Jun 19 (2)
- ► Jun 5 - Jun 12 (1)
- ► May 29 - Jun 5 (7)
- ► May 22 - May 29 (1)
- ► May 15 - May 22 (4)
- ► May 8 - May 15 (2)
- ► May 1 - May 8 (4)
- ► Apr 24 - May 1 (2)
- ► Apr 17 - Apr 24 (3)
- ► Apr 10 - Apr 17 (1)
- ► Apr 3 - Apr 10 (1)
- ► Mar 13 - Mar 20 (1)
- ► Mar 6 - Mar 13 (1)
- ► Feb 20 - Feb 27 (2)
- ► Feb 13 - Feb 20 (2)
- ► Feb 6 - Feb 13 (3)
- ► Jan 30 - Feb 6 (6)
- ► Jan 23 - Jan 30 (12)
- ► Jan 16 - Jan 23 (5)
- ► Jan 9 - Jan 16 (1)
- ► Jan 2 - Jan 9 (4)
-
▼
2010
(102)
- ► Dec 26 - Jan 2 (2)
- ► Dec 19 - Dec 26 (7)
- ► Dec 12 - Dec 19 (8)
- ► Dec 5 - Dec 12 (26)
- ► Nov 28 - Dec 5 (17)
- ► Aug 8 - Aug 15 (1)
- ► Jul 18 - Jul 25 (1)
- ► Jun 27 - Jul 4 (1)
- ► Jun 13 - Jun 20 (6)
- ► Jun 6 - Jun 13 (7)
- ► May 23 - May 30 (1)
- ► Apr 11 - Apr 18 (3)
- ► Apr 4 - Apr 11 (1)
-
▼
Mar 28 - Apr 4
(12)
- NegeriAds.com Solusi Berpromosi - Solusi Bisnis Anda
- Download Video Tutorial SEO | 741MB
- Software SEO Gratis - Free SEO Tools -Trellian SEO...
- Jadwal Rilis Ubuntu 10.04 Code Name Lucid Lynx
- Tampilan Terbaru Ubuntu 10.04 Lts
- Download Gratis Adobe Flash Cs4 Full Dari IDWS
- Download Gratis Adobe Dreamweaver Cs4 Full
- Download Gratis Adobe Photoshop Cs4 Full dari IDWS
- Cara Membuat Read More Otomatis Di Blogspot
- Cara Membuat Daftar Isi Di Widget Blogspot
- Free Download | Download Gratis Microsof Office Pr...
- Download gratis antivirus BitDefender Total Securi...
- ► Mar 14 - Mar 21 (1)
- ► Feb 28 - Mar 7 (2)
- ► Feb 14 - Feb 21 (4)
- ► Jan 31 - Feb 7 (1)
- ► Jan 24 - Jan 31 (1)
-
►
2009
(60)
- ► Dec 6 - Dec 13 (3)
- ► Nov 1 - Nov 8 (3)
- ► Jun 7 - Jun 14 (2)
- ► May 10 - May 17 (2)
- ► May 3 - May 10 (1)
- ► Apr 5 - Apr 12 (30)
- ► Mar 29 - Apr 5 (10)
- ► Mar 22 - Mar 29 (4)
- ► Mar 15 - Mar 22 (1)
- ► Feb 22 - Mar 1 (2)
- ► Feb 1 - Feb 8 (1)
- ► Jan 18 - Jan 25 (1)
-
►
2008
(6)
- ► Dec 21 - Dec 28 (2)
- ► Dec 7 - Dec 14 (1)
- ► Oct 26 - Nov 2 (1)
- ► Oct 19 - Oct 26 (1)
- ► Sep 14 - Sep 21 (1)
tq ya sob atas pencerahannya................^_^
thanks sob infonya.
jokam-biz.blogsot.com
thanks bang, tipsnya
mantap bro...
infonya berguna banget buat yang baru belajar keq gue gitu..
makasih atas info jenius ini saya orang baru yang sedang belajar buat blog .. doakan semoga cepat bisa mkasih
Tips auto read more nya sudah saya praktekan .. dan hasilnya .. mantap!! thanks untuk infonya.
terima kasih bagi ilmunya...
thx boss ..
akhirnya blog aku bisaaaa :)))
follow akuu :)
http://yuqayuq.blogspot.com