Menambahkan Auto Read More dengan Thumbnail Tombol CSS 3 di Blogger

Menambahkan Auto Read More dengan Thumbnail Tombol CSS 3 di Blogger

Menambahkan Auto Read More dengan Thumbnail Tombol CSS 3 di Blogger. Membuat Read More dengan Thumbnail secara otomatis sangat menarik dan b... 22.40.00

Menambahkan Auto Read More dengan Thumbnail Tombol CSS 3 di Blogger. Membuat Read More dengan Thumbnail secara otomatis sangat menarik dan bagus. Anda tidak perlu menambahkan kode tambahan di setiap posting blogger yang Anda buat agar postingan anda terpotong menjadi ringkarasan posting. Menggunakan otomatis Read More di blog Anda akan membuat beban blog anda lebih cepat dengan menunjukkan beberapa pos bukan full posting di halaman homepage. Trik myblogger tricks ini akan meringkas konten dan hanya menampilkan ringkasan di Home page, Page dan Arsip Label Halaman menggunakan Automatic sederhana dalam di dalam template anda.

Sebelum Mengedit Template anda silakan untu backup.
1. Login ke Blogger akun >> Masuk ke Dashboard >> Template >> Edit HTML
2. Periksa Widget Template kotak centang di kanan atas Window HTML.
3. Tekan CTRL + F dan temukan </ head> .
4. Kemudian paste kode berikut sebelum </ head>.

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</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>

Catatan:
summary_ noimg = 430; >> Panjang karakter jika posting tidak memiliki thumbnail.
summary_img = 340; >> Panjang karakter jika ada gambar yang di posting yang akan diubah menjadi thumbnail.
null_thumb_height = 120; >> Tinggi dalam pixel dari thumbnail.
null_thumb_width = 120; >> Lebar dalam pixel dari thumbnail.

4. Cari The Menyusul kode <data:post.body/> dan ganti dengan Kode di bawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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='jump-link' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url'>Continue Reading...</a></span>
<div style='clear: both;'/>
</b:if>
</b:if>

Anda dapat mengubah kata "Read more" sesuai dengan kata Anda sendiri. Dan sekarang tambahkan beberapa kode css untuk Read More dengan tiga style dibawah ini.

Ingat, Tambahkan Style dibawah ini sebelum kode </b:skin> 

1. Blue Color Button

.jump-link {
display: block;
font-size: 12px;
font-weight: bold;
text-align:right;
}

.jump-link a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
padding: 6px 15px;
background: -moz-linear-gradient(
top,
#42aaff 0%,
#003366);
background: -webkit-gradient(
linear, left top, left bottom,
from(#42aaff),
to(#003366));
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
border: 1px solid #003366;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.5);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.5);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.5);
text-shadow:
0px -1px 0px rgba(000,000,000,0.7),
0px 1px 0px rgba(255,255,255,0.3);
}

2. Gray Color Button

.jump-link {
display: block;
font-size: 12px;
font-weight: bold;
text-align:right;
}
.jump-link a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
padding: 6px 15px;
background: -moz-linear-gradient(
top,
#ffffff 0%,
#b5b5b5);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ffffff),
to(#b5b5b5));
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 3px solid #0088ff;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 3px rgba(255,255,255,1);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 3px rgba(255,255,255,1);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 3px rgba(255,255,255,1);
text-shadow:
0px 1px 2px rgba(000,000,000,0.5),
0px 1px 2px rgba(252,254,255,0.9);
}

3. Black & Gray Button

.jump-link {
display: block;
font-size: 12px;
font-weight: bold;
text-align:right;
}
.jump-link a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
padding: 6px 15px;
background: -moz-linear-gradient(
top,
#eaeaea 0%,
#000000);
background: -webkit-gradient(
linear, left top, left bottom,
from(#eaeaea),
to(#000000));
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #a2a89f;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.4),
0px 1px 0px rgba(255,255,255,0.3);
}

[source]