Bagaimana cara menampilkan postingan blog dihalaman utama dengan tombol "Read More" otomatis dan thumbnail
Read more akan menampilkan postingan anda dihalaman Home Page berupa judul, thumbnail, dan ringkasan dari isi artikel kita, thumbnail dari gambar yang pertama kali di Upload akan muncul dihalaman utama. Setelah thumbnail dan ringkasan dari artikel anda baru setelah itu tombol Read More, ketika anda mengklik tombol read more maka anda akan di arahkan kehalaman post sebenarnya.
Ini script Read More otomatis yang akan membuat tampilan home page anda akan lebih rapi dan tidak memakan banyak place di halaman utama anda.
Menggunakan Read More omomatis pada blog anda
Langkah 1 : Login ke Blogger Dashboard => Pilih Template => Kemudian klik tombol Edit HTML
Langkah 2 : Klik dimana saja dalam area kode, tekan CTRL + F dan temukan kode dibawah ini
<data:post.body/>Note :
Setelah tekan enter, anda akan menemukan kode tersebut beberapa kali, tapi anda cuma perlu berhenti pada yang kedua atau yang ketiga, [kalau anda menemui kode tersebut tiga kali maka berhenti pada yang ketiga, akan tetapi kalau dua kali maka anda perlu berhenti pada yang kedua].
Langkah 3 : Ganti kode tersebut dengan kode ini
<b:if cond='data:blog.pageType != "static_page"'>Note : Jika anda sudah mengikuti semua langkah diatas dan belum ada perubahan, maka anda harus coba mengganti juga code <data:post.body/> pada pertemuan yang kedua, mudah-mudahan akan lebih baik
<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/>","<data:post.url/>","<data:post.title/>");</script>
<span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
Langkah 4 : cari tag berikut
</head>Langkah 5 : diatas tag </head>, tambahkan kode berikut
<script type='text/javascript'>Note :
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</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, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
#Ubah nomor dari karakter ringkasan tidak terhitung dari thumbnail, modif nilai 490 warna biru. Untuk karakter yang terhitung dengan thumbnail post, modif nilai 400
#Untuk memperbesar ukuran thumbnail, modif nilai 160 (height) dan 180 (width) yang warna merah.
Langkah 6 : tekan tombol save template untuk menyimpan perubahan
itu saja dari saya, semoga bermanfaat.
Ditulis tanggal 01 Maret 2015
1 comments:
commentsjudi sabung ayam
ReplySilahkan berkomentar sesuai dengan topik, setiap komentar akan direspons, dan mohon maaf sekali untuk komentar yang berbau P*RN*GRAFGI, *BAT, HACK, JUDI dan komentar yang mengandung link aktif tidak akan ditampilkan. Trimakasih atas pengertiannya.