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 :

Tutorial Blog

• Cara membuat teks are di postingan blog
• Menghilangkan tulisan diberdayakan oleh blogger
• Cara agar blog baru cepat terindex oleh google
• Cara membuat garis di bawah judul postingan
• Cara Menghilangkan Garis Bawah Pada Link Blog
• Cara memasang meta tag super SEO friendly
• Meningkatkan Pagerank Dari Ribuan Backlink
• Membuat Widgate Jumlah Posting Dan Komentar di Blog
• Cara Menghilangkan Tulisan Diberdayakan Oleh Blogger
• Membuat Widgate Label Keren Dengan css
• Cara mudah Membuat Tulisan Copyright di blog
• Membuat Widgate Rank Alexa Di Blog
• Cara mudah memasang gambar di atas blog
• Cara Cepat membuat nomor halaman di blog
• Cara meningkatkan pagerank alexa dengan mudah
• Cari Tahu Sejarah Dan Perkembangan Rank Alexa
• Cara Membuat Menu Drobdown Css Dengan Mudah
• Mengetahui Cara Kerja Page Rank Google
• Sejarah adanya Seach Engine Optimization (SEO)
• Trik Rahasia Master SEO Untuk Blog