Cara Membuat ReadMore Otomatis Menggunakan Icon
Kali ini saya akan membahas blog tutorial tentang cara
memberi readmore otomatis.
Mungkin anda bisa memberi read more otomatis pada blog anda dengan tipe readmore yang menggunakan gambar/icon.
Mungkin anda bisa memberi read more otomatis pada blog anda dengan tipe readmore yang menggunakan gambar/icon.
Demonya ada di blog ini saya menggunakan tipe readmore (e) dan seperti ini contohnya :
Langsung saja di praktekan seperti langkah” dibawah ini.
Berikut langkahnya :
1. Log in blogger.com
2. Dasbor > tata letak > edit HTML
3. Centang Expand Template Widget
4. Cari kode </head>
, (agar proses
berjalan cepat cari dengan menggunakan Ctrl + F dan akan muncul kolom pencarian
di sisi kiri bawah layar anda).
5. Copy kode di bawah ini,dan letakkan tepat di atas 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 Galaxy Abdul Malik
********************************************/
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>
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 Galaxy Abdul Malik
********************************************/
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>
CATATAN :
summary_noimg = 250; adalah jumlah karakter/huruf yang akan di tampilkan pada posting yang tidak bergambar.
summary_img = 250; adalah jumlah karakter/huruf yang akan ditampilkan pada posting bergambar.
img_thumb_height = 120; adalah ukuran tinggi gambar yang akan ditampilkan pada postingan.
img_thumb_width = 120; adalah ukuran lebar gambar yang akan ditampilkan pada postingan.
6. Lalu cari kode <data:post.body/>
, (bila
terdapat kode tersebut lebih dari 1, misalnya pada template anda mempunyai 2
kode <data:post.body/> silahkan anda ganti
kedua kode tersebut dengan kode yang telah disiapkan di bawah dan begitupun seterusnya).
7. Ganti kode tersebut dengan kode di bawah ini (pilih salah satu dari pilihan di bawah) :
a. Readmore otomatis dengan gambar :
<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:right'><a expr:href='data:post.url'><img src='http://lh6.ggpht.com/_Kwwy9VyLMKw/S3qDYQZCiRI/AAAAAAAACxA/aXY0neVNzh0/but_readmore.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<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:right'><a expr:href='data:post.url'><img src='http://lh6.ggpht.com/_Kwwy9VyLMKw/S3qDYQZCiRI/AAAAAAAACxA/aXY0neVNzh0/but_readmore.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
b. Read more otomatis dengan gambar :
<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:right'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoZe9T-mSpqPJkbSB4ZJ4pTWFll6wIc5B6PB_Jrj2ye7wJOo8EdSDlIYwD1sdQSNTo2bNU80un5uZUTAa6sFY3dwgj4CkhG2yqWVIO2Sv2b5L8vsGoG_jKwaEEh0n6VhTA7TsjmyPvyl4/s1600/readmore.gif'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
c. Read more otomatis dengan gambar :
<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:right'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoZe9T-mSpqPJkbSB4ZJ4pTWFll6wIc5B6PB_Jrj2ye7wJOo8EdSDlIYwD1sdQSNTo2bNU80un5uZUTAa6sFY3dwgj4CkhG2yqWVIO2Sv2b5L8vsGoG_jKwaEEh0n6VhTA7TsjmyPvyl4/s1600/readmore.gif'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<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:right'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoZe9T-mSpqPJkbSB4ZJ4pTWFll6wIc5B6PB_Jrj2ye7wJOo8EdSDlIYwD1sdQSNTo2bNU80un5uZUTAa6sFY3dwgj4CkhG2yqWVIO2Sv2b5L8vsGoG_jKwaEEh0n6VhTA7TsjmyPvyl4/s1600/readmore.gif'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
d. Read more otomatis dengan gambar :
<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:right'><a expr:href='data:post.url'><img src='http://3.bp.blogspot.com/-N4-Utfk6JWc/TWfg7_UuoxI/AAAAAAAAAFs/JsiB7iEpefw/s1600/icon_readmore.gif'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
e. Read more otomatis dengan gambar :
<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:right'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGDFikhua4RGtLphOG6sH2OTN3pajfbrjH3Yjxy_uqrzTWOXA-hEdWfaCe0oc7iQYfswsyajHdD9PHqxUWHjCXDA2FCAxzCr_A5bvVNwWORxQ2Fp4wEqRnVyE1HIlnm2ubAsLPPgdDDa8/s320/a1ifte.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<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:right'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGDFikhua4RGtLphOG6sH2OTN3pajfbrjH3Yjxy_uqrzTWOXA-hEdWfaCe0oc7iQYfswsyajHdD9PHqxUWHjCXDA2FCAxzCr_A5bvVNwWORxQ2Fp4wEqRnVyE1HIlnm2ubAsLPPgdDDa8/s320/a1ifte.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
f. Read more otomatis dengan gambar :
<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:right'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbx5ZLu6RpTUMi3CsSoVFEnGO3U-nTNdJPHh46uYfB6kIFlwlKiVCM01_CLhdBoNizDlXdJbrPsJnbh6cg5z16GeU1E4lKHajQlDVF6x32H0kFlpFCOx6Eia_buNPztcZ4HkCWpAiKOwQ/s320/read-more_icon.gif'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<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:right'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbx5ZLu6RpTUMi3CsSoVFEnGO3U-nTNdJPHh46uYfB6kIFlwlKiVCM01_CLhdBoNizDlXdJbrPsJnbh6cg5z16GeU1E4lKHajQlDVF6x32H0kFlpFCOx6Eia_buNPztcZ4HkCWpAiKOwQ/s320/read-more_icon.gif'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
g. Read more otomatis dengan gambar :
<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:right'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQrFhmAmKi_Ed1TfIZbDLEaCToiMKKsd_AfVUvXqH8XeUAh2hKKC_okdE-aGOF9BlWGlU0ek8dvYn4Wd1F7DEKoBRwH0SCLpwcQfd3OSTQvEGLRY4kVGW3W-ZwH4tp87Uw10knOjeeWm4/s1600/readmore.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
h. Read more otomatis dengan gambar :
<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:right'><a expr:href='data:post.url'><img src='http://lh4.ggpht.com/_OzNnI7Y03Iw/S3jOUc9SkkI/AAAAAAAAA94/oKajALH-z-c/1-mini-allblogtools.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
i. Read more otomatis dengan gambar :
<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:right'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGF79Vmbr2SXz0o1kF7SdWHJCMRDzgOLqAWpk8U2NkgfrH6hirNg_w6W07kP44V7FtumPCe4Z_tnCanhiQaemrYElskR4quz4tmRXgMg5PpyIOid35PV91PvQRyMtB5KI2cETPAKq69mA/s1600/redmore.gif'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
8 Simpan template.
SELAMAT MENCOBA READ MORE OTOMATIS INI. SEMOGA BERHASIL!
Makasih sob...
BalasHapusInfo yang sangat berguna
iya, sama" :D
BalasHapusmantab, postingan nya keren
BalasHapussalam blogger sob, artikel bermanfaat nih
BalasHapusSaya coba terapkan gan, trims ya. Ditunggu kunjungannya...
BalasHapushehehe.
BalasHapusmakasih gan,