Cara Membuat Auto Readmore Keren Di Blog

Setelah mengembara keblog tetangga akhirnya dapat ide untuk postingan kali ini ..hehe
Cara Membuat Auto Readmore Keren Di Blog - Meurut saya, Auto Readmore memang sangat penting untuk dipasang dalam setiap blog, karena dengan adanya Auto Readmore dapat memberikan keunikan dan keindahan tersendiri dalam tampilan sebuah blog, terutama pada bagian Artikel, karena Auto Readmore akan terlihat pada setiap masing-masing post {ya ialah, itukan uda pungsinya Auto Readmore.. hihi}.

Cara memasang Auto Readmore ini sebenarnya sudah banyak yang posting, tapi disini saya akan menulisnya kembali untuk teman-teman pemula yang kebetulan nyangkut keblog saya yang sepi kayak kuburan ini.

Ok, tanpa panjang kali lebar langsung saja kita terapkan bersama Cara Membuat uto Readmore Keren Di Blog.

Pertama-tama masuk dulu di www.blogger.com --->> kemudian klik Template --->> klik edit Template

Jangan lupa backup template terlebih dahulu untuk berjaga-jaga

Kemudian cari kode </head>,untuk memudahkan pencarian gunakan Ctrl+F.

Jika kode </head> sudah ketemu lalu copy dan pastekan kode dibawah ini tepat diatas 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>

Selanjutnya cari kode <data:post.body/> lalu hapus kemudian ganti dengan kode dibawah ini

<b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <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 → </a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if></b:if>

Teman-teman bisa memodifikasi Auto Readmorenya sesuai keinginan masing-masing dengan mengatur kode-kode seperti dibawah ini :

summary_noimg = 250; untuk mengubah banyaknya karakter kata yang ingin ditampilkan di posting tanpa gambar.

summary_img = 250; untuk mengubah berapa banyak karakter yang akan ditampilkan di postingan dengan gambar

img_thumb_wight = 120;idth = 120; untuk mengatur lebar thumbnail dalam ukuran pixel

Agar Auto Readmorenya terlihat semakin menarik, teman-teman tinggal menambahkan kode Css dibawah ini diatas kode ]]></b:skin

.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; }

Ganti kode warna #E37F52 sesuai keinginan.

Nah itu dia kodenya, semoga bermanfaat. Jangan lupa tinggalkan komentar untuk memberikan kritik dan saran.

Description: Cara Membuat Auto Readmore Keren Di Blog
Reviewer: Dunia Komputer
Rating: 4.0
ItemReviewed: Cara Membuat Auto Readmore Keren Di Blog

Artikel Terkait :