CARA MEMBUAT READ MORE OTOMATIS DI BLOG

Dunia Online Share:

Buat Sahabat-Sahabat Bloger.. Kali ini Dunia Online Kembali dengan Postingan " Cara Membuat Read More Otomatis di Blog "..
Sudah Lama Dunia Online tidak Ngepost di Blog, menyangkut Kegiatan yang Menyita waktu di Dunyat alias Dunia Nyata begitu padat.. Heheheee....
.. Oke Sahabat Bloger, Kita langsung aja,, ke Cara Membuat Read More / Baca Selengkap'nya dll.

Manfaat readmore juga untuk mempersingkat atau merapihkan artikel yang panjang, jadi postingan artikel anda akan tersusun rapi dengan hanya menampilkan gambar dan beberapa kalimat saja...

Untuk Hasilnya, Akan Seperti gambar di Bawah ini

• Langka Awal Login ke akun blogger sobat.
• Lalu masuk ke design Template, klik Edit HTML
• Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
• Copy paste kode dibawah ini tepat di atas kode </head>

</b><!--http://matexcbi.blogspot.com/--></span></span><br /> <div style="text-align: left;"> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;"></span></span><br /> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;"><b:if cond='data:blog.pageType != "static_page"'></span></span><br /> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;"><b:if cond='data:blog.pageType != "item"'></span></span><br /> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;"><style></span></span><br /> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;">.post-body{text-align:justify;}</span></span><br /> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;">.post-body img{max-width:none;width:auto;}</span></span><br /> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;">.read-more{float:left; padding-top: 10px;}</span></span><br /> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;">.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9;  text-decoration:none;font:bold 13px Arial;padding:5px;}</span></span><br /> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;">.read-more a:hover{text-decoration:none;background:#666;}</span></span><br /> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;">.pic{border: 10px solid #fff;float:left;height:165px;width:250px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}</span></span><br /> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;">.grow img{height:165px;width:250px;transition: all 2s ease;}</span></span><br /> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;">.grow img:hover{width:400px;height:250px;}</span></span><br /> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;"></style></span></span><br /> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;"><script type='text/javascript'></span></span><br /> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;">var thumbnail_mode = "yes"; //yes -dengan gambar, no -tanpa gambar</span></span><br /> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;">summary_noimg = 300; //banyaknya huruf jika tidak ada gambar</span></span><br /> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;">summary_img = 250; //banyaknya huruf jika ada gambar</span></span><br /> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;">img_thumb_height = 165;</span></span><br /> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;">img_thumb_width = 250;</span></span><br /> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;"></script></span></span><br /> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;"><script type='text/javascript'>//<![CDATA[</span></span><br /> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;">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 = '<div class="grow pic"> <img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div> ';summ = summary_img;}}var summary = imgtag + '<div> ' + removeHtmlTag(div.innerHTML,summ) + '</div> ';div.innerHTML = summary;}</span></span><br /> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;">//]]></script></span></span><br /> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;"></b:if></span></span><br /> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;"></b:if></span></span><br /> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;"></span></span><br /> <span style="color: red;"><span style="font-family: Times,"Times New Roman",serif;"><!--Auto Read More Akhir-->

• Save Template Sobat
• Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>  ( gunakan CTRL + F untuk mempermudah pencarian). Jika ditemukan 2 kode yang sama, gunakan atau ganti yang pertama. 
• Jika sudah ketemu silahkan anda ganti kode tersebut dengan kode dibawah ini

<!-- Auto read more Mulai --><br /><b:if cond='data:blog.pageType == "item"'><br /><data:post.body/><br /><b:else/><br /><b:if cond='data:blog.pageType == "static_page"'><br /><data:post.body/><br /><b:else/><br /><div expr:id='"summary" + data:post.id'> <data:post.body/></div> <br /><script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");<br /></script><br />      <div class='read-more'> <br />      <a expr:href='data:post.url'>Baca Selengkapnya »</a><br />      </div> <br /></b:if><br /></b:if><br /><!-- Auto read more Akhir -->

• Klik Save / Simpan ... Na Silahkan Lihat Hasilnya...

Saya Merasa Cukup Jelas dengan Penjelasan saya di Atas.. dan Semoga Artikel ini bermanfaat buat sahabat Bloger Semua'nya..