√ Cara Menciptakan Read More Otomatis Di Halaman Depan Blog

Kali ini aku akan share wacana cara menciptakan Readmore otomatis di halaman depan blog.
Sebenarnya cara ini sudah diterapkan dalam banyak modifikasi template blog.

Tips ini untuk Anda yang memakai template bawaan blogger (default blogger templates), menyerupai template simple, yang belum menampilkan ringkasan posting di halaman depan alias tampilannya sama dengan single post/single page.
Umumnya, template blog kini sudah otomatis memakai auto read more atau menampilkan ringkasan posting di halaman depan blog.

Kode Auto Read More Terbaru

Untuk menciptakan auto read more atau menampilkan judul, gambar, dan snippet (kutipan bab awal posting) cukup dengan memakai instruksi terbaru berikut ini, sudah seo friendly.

1. Simpan instruksi berikut ini di atas kode ]]></b:skin>

.thumbnail-post {555555th:100px !important; height:100px !important;float:left;margin:0px 10px 0px 0px;}

2. Hapus dan ganti kode <data:post.body/> yang kedua dengan instruksi berikut ini:

<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.firstImageUrl'> <a expr:href='data:post.url'><img class='thumbnail-post'expr:alt='data:post.title' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a> <b:else/> <a expr:href='data:post.url'><img class='thumbnail-post'expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4pnBSbL7d4A0WAE9XtRCAKkmI1IttcNjppO8RHZAklM5r5IPix3DdMpkouabbNpe2cO4ihBKNAeT2nPMKkyzkgcAt3lh5HzzNKuODred0xW0COnyRWiJTkDe3quKAoLHxglw5p4Qn2XdO/s220-Ic42/noimage.png'/></a> </b:if> <div class='post-snippet'> <data:post.snippet/> </div> </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>

3. Selesai!

Save tempate Anda.

_______________________________________________________________________Auto Readmore Pake JavaScript & Tanpa JS

Ada dua cara membuat Auto Read More di Halaman Depan Blog, yaitu Menggunakan JavaScript dan Tanpa JavaScript (JS).

#Kelebihan memakai JS yaitu kita dapat mengatur ukuran foto dan panjang-pendek ringkasan tulisan. Kekurangannya: "sedikit" mengganggu kecepatan loading blog.
#Kelebihan Auto Readmore Tanpa JS yaitu loading blog tetap kenceng (fast loading) atau tidak mengganggu loading time blog.
Kekurangannya: ukuran gambar thumbnail distandar ke 72x72 pixel dan panjang-pendek ringkasan goresan pena gak dapat diubah. Kalaupun mau diubah, tetap... akhirnya..... memakai j4vascript juga!

Membuat Auto Read More di Halaman Depan Blog #1 (JavaScript)

1. Klik "Template" > "Edit HTML"
2. Cari (CTRL+F) kode <data:post.body/>.

Jika ada lebih dari dua <data:post.body/>, pilih yang kedua. Jika gagal, pilih yang ketiga atau pertama dst. Coba saja satu-satu sampai berhasil.

3. Replace atau ganti kode <data:post.body/> tersebut dengan instruksi di bawah ini:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/j4vascript'>createSummaryAndThumb("summary<data:post.id/>");</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>

4. Cari kode </head> dan COPAS instruksi berikut ini tepat di atas nya..

<script type='text/j4vascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/j4vascript'>
//<![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 = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

5. SAVE Template!

1. Anda dapat mengganti ukuran gambar/thumbnail dengan mengubah angka 120 menjadi lebih kecil atau lebih besar.2. Anda juga dapat mengubah jumlah/panjang huruf dengan mengganti angka 490 (jika postingnya tanpa foto) dan angka 400 (jika postingnya ada foto).

_____________________________________________________________________

Membuat Auto Read More di Halaman Depan Blog #2 (Tanpa JavaScript)

Cara kedua ini tanpa skrip, hanya memakai CSS/HTML sehingga disebut "Fast Loading Auto Readmore", meski cuma beda dikit sama yang JS.

1. Template > Edit HTML
2. Copy & Paste instruksi berikut ini di atas kode ]]</b:skin>

.thumbnail-post {width:140px;height:80px;float:left;margin:0px 10px 0px 0px;padding-right:15px}

3. Ganti kode <data:post.body/> dengan instruksi berikut ini:

<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.firstImageUrl'> <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a> <b:else/> <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4pnBSbL7d4A0WAE9XtRCAKkmI1IttcNjppO8RHZAklM5r5IPix3DdMpkouabbNpe2cO4ihBKNAeT2nPMKkyzkgcAt3lh5HzzNKuODred0xW0COnyRWiJTkDe3quKAoLHxglw5p4Qn2XdO/s220-Ic42/noimage.png'/></a> </b:if> <div class='post-snippet'> <data:post.snippet/> </div>
<div class='rm-button-wrap'> <a class='button' expr:href='data:post.url'>Read More</a> </div> </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>

#Jika ada dua instruksi <data:post.body/> di template blog Anda, ganti instruksi yang kedua.
#Ukuran gambar thumbnail (140px/80px) dapat diubah menjadi lebih besar atau kecil
#Kode warna Orange yaitu URL Gambar Thumbail Default. Bisa diganti dengan gambar sendiri.
#Kode yang warna biru yaitu teks Read More yang dapat diubah menjadi Baca Selengkapnya atau dapat juga dihapus saja jikalau tidak ingin ada goresan pena Readmore.

√ Cara Menciptakan Read More Otomatis Di Halaman Depan Blog

0 Response to "√ Cara Menciptakan Read More Otomatis Di Halaman Depan Blog"

Posting Komentar

√ Cara Menciptakan Read More Otomatis Di Halaman Depan Blog

Baca juga:

0 Response to "√ Cara Menciptakan Read More Otomatis Di Halaman Depan Blog"

Posting Komentar