Cara Membuat Tombol ReadMore Pada Blog

Fahri's Blog -  Trik Membuat Tulisan ReadMore Otomatis di Blog - Readmore?? apa itu?? Readmore adalah salah satu teknik dalam blog untuk menghemat tempat pada homepage blog anda. Contohnya, anda punya 10 artikel sampai 400 kata. Bayangkan jika semua artikel anda tersebut, masuk di homepage/halaman depan anda semuanya tanpa dipotong. 

Tentu akan memakan banyak tempat bukan?? Nah, fungsi dari readmore ini membuat tulisan artikel anda hanya tampak sebagian, sedangkan selebihnya akan diarahkan ke link artikel anda dengan anchor bermacam-macam seperti "Lanjutkan membaca...", "Silahkan membaca..", dll. 

Sebenarnya membuat "ReadMore" tidak sulit dan fungsi dari readmore ini juga bisa membuat blog kita lebih SEO Friendly. Nah,berikut saya beritahu cara membuatnya.

Cara memasang tombol readmore di blog

1.Login akun blogger kamu di www.blogger.com

2.Klik tanda panah ke bawah -Template.

 

3.Pilih Edit Html

4.Klik lanjutkan,lalu ceklis box di atas(Expand Template Widget)

5.Lalu cari kata ini </head> atau kamu bisa tekan Ctrl+f  dan tulis </head>

6.Copy kode di bawah ini 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 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>

7.Lalu cari kata ini <data:post.body/>

8.Ganti dengan kode di bawah ini

<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:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

9.Klik Save dan lihat langsung hasilnya di blog kamu

Oke teman ini adalah Cara Membuat Tombol Readmore Otomatis di Postingan Blog. Terima kasih ya udah mampir di blog saya. kalau misalnya masih belum mengerti bisa komen di bawah yaa ^^

Lanjut baca lagi yuk tentang : Cara Mensubmit Sitemap Blog ke Google Webmaster

Tweet

Subscribe to receive free email updates: