Membuat Read More Otomatis Pada Artikel Blog

Pada kesempatan kali ini saya mencoba untuk sher kepada teman-teman mengenai blogger yaitu Cara Membuat Read More Otomatis Pada Artikel Blog. mingkin sobat merasa tidak nyaman degan artikel blog sobat yang begitu panjang pada halam awal sobat.

Read more atau baca selanjutnya ataupun baca selengkapnya adalah salah satu hal terpenting yang harus di gunakan pada blog, hal ini bertujuan untuk membuat blog sobat tidak panjang dan menampilkan banyak artikel di halaman awal.

1.untuk sign in ke blog anda klik sign in

2.Langkah kedua mengenai cara membuat read more pada blog yaitu dengan klik rancangan dan klik edit   HTML.

3. centang Expand Template Widget

4.Untuk memudahkan mencari kode HTML, silahkan tekan CTRL+F.

5.cari kode </head> dan jika sudah ketemu kemudian tambahkan kode di bawah ini tepatnya di atas kode </head>

<script type='text/javascript'> var thumbnail_mode = "yes"; summary_noimg = 430; summary_img = 340; img_thumb_height = 150; img_thumb_width = 150; </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(thumbnail_mode == "yes") { 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>

Keterangan :  

summary_noimg = 430; merupakan tinggi potongan artikel tanpa gambar

summary_img = 340; merupakan tinggi potongan artikel dengan gambar

img_thumb_height =100; merupakan ukuran tinggi thumbnail

img_thumb_width = 120; merupakan ukuran lebar thumbnail

6. Kemudian dilanjutkan mencari kode <data:post.body/> lalu ganti tag <data:post.body/> tersebut dengan kode yang berada di bawah ini.

<b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <div style='text-align:justify;' expr:id='"summary" + data:post.id'> <data:post.body/> </div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <a class='more' expr:href='data:post.url'> <font color='#1780dd'>Read More</font> </a> </b:if> </b:if>  

7. Ada 3 kode yang sama dengan <data:post.body/>, ganti semuanya dengan kode diatas

8. Simpan/save

Semoga pada artikel mengenai Membuat Read More Otomatis Pada Artikel Blog dapat membarikan mamfaat pada sobat....

Ditulis Oleh : Unknown

Terimakasi atas kunjungan teman-teman...
Bila artikel ini sangat bermanfaat, sobat dapat bagikan ke teman-teman yang lain melalui jejaring sosila yang ada di bawah ini!!
Jangan lupa tinggalkan komentarnya...

Berbagi di :

Tweet

BACA JUGA :