Cara Membuat Auto Readmore Keren Di Blog Anda

Cara Membuat Auto Read More Keren Di Blog Anda
Kali ini saya akan berbagi tentang cara membuat auto readmore yang pernah saya coba sendiri di blog saya.

Auto readmore merupakan penggalan diskripsi dari artikel kita yang tertampil di setiap postingan baru di halaman Home blog kita. Auto readmore disini dilengkapi dengan thumbnail atau gambar.


Salah satu fungsi auto readmore adalah dapat mempercepat loading blog, karena adanya penggalan kalimat di artikel sehingga blog kita tidak menampilkan artikel secara keseluruhan.

Selain itu, dengan adanya autoread more maka dapat mempercantik blog sobat dengan tampilan thumbnail sehingga terkesan rapi.

Nah, bagaimana cara membuat auto readmore ini, simak caranya dibawah ini.


1. Silahkan sobat masuk ke blogger, kemudian klik template , klik Edit HTML 
2. Jangan lupa backup templete dahulu.
3. Silahkan sobat letakkan kode dibawah ini diatas kode </head>, cari menggunakan Ctrl+F


<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>


4. Cari kode <data:post.body/>  silahkan sobat hapus kode tersebut dan ganti dengan kode di bawah ini

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE &#8594; </a></span>
</b:if>
 <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></b:if>


Sobat bisa mencoba dengan menyesuaikan auto read more sesuai kehendak dengan mengatur kode berikut :

var thumbnail_mode = "float";  Menentukan apakah letak thumbnail berada di kiri (float) atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (ubah banyaknya karakter yang ingin sobat tampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (ubah berapa banyak karakter yang akan ditampilkan di postingan dengan gambar / thumbnail)
img_thumb_height = 120; (merupakan tinggi thumbnail dalam ukuran pixel)
img_thumb_width = 120; (merupakan lebar thumbnail dalam ukuran pixel)

5. Kemudian silahkan sobat tambahkan kode CSS dibawah ini di atas kode ]]></b:skin agar bertambah menarik penampilan auto read more nya:

.rmlink a {
    background: none repeat scroll 0 0
#E37F52;
    border-radius: 4px;
    color: #FFFFFF !important;
    font-size: 10pt;
    font-weight: 700;
    line-height: 1;
    padding: 1px 3px 1px;
    text-transform: uppercase;
}


Ubah kode #E37F52 sesuai dengan selera sobat, lihat kode warna html  untuk membantu mencari warna kesukaan.

Itulah tutorial cara membuat auto readmore pada blog kesayangan anda, selamat mencoba semoga bermanfaat.

.

0 Komentar untuk "Cara Membuat Auto Readmore Keren Di Blog Anda"

Terima kasih sudah berkunjung, silahkan meninggalkan komentar yang sopan, Copy paste harap disertai link sumber.