Info informasi Read More Otomatis Bergambar atau artikel tentang Read More Otomatis Bergambar ini semoga dapat bermanfaat, dan menambah wawasan. Selamat Membaca! Jangan lupa dishare juga! Jika merasa artikel ini bermanfaat juga untuk orang lain.
Sudah lama saya ingin share tentang hal ini. Namun karena aktifitas PKL, saya jadi jarang buka blog. Baru sekarang saya sempat memposting artikel ini. Sekarang read more sudah banyak macamnya. Ada yang biasa, peek a boo, read more yang simple (seperti yang di bahas kang rohman), read more otomatis bergambar, dan yang lainnya. Langkah - langkah untuk membuat read more pun beragam sekali. Klik disini untuk membaca artikel read more yang biasa, Klik disini untuk read more peek a boo, Klik disini untuk read more yang simple. Nah pada artikel kali ini saya akan sedikit share tentang bagaimana caranya untuk membuat read more otomatis plus gambar seperti yang ada di blog ini.
Pertama masuk ke blog kamu, dan klik Tata Letak / Layout
Kemudian klik Edit HTML, dan centang expand template
Setelah itu cari kode
<p><data:post.body></p> atau <data:post.body>
yang letaknya di atas kode
<div style="clear: both;"><span class="fullpost"> <!-- clear for photos floats -->
Lihat kode di bawah ini yang berwarna Merah
<div class="post-body entry-content">
<data:post.body>
<div style="clear: both;"> <!-- clear for photos floats -->
</div>
Kemudian hapus kode <data:post.body> tadi dan ganti dengan kode 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>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div style='float:left; margin-right:10px;'>
</div>
<data:post.body/>
</b:if>
Sehingga kode nya menjadi seperti 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>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div style='float:left; margin-right:10px;'>
</div>
<data:post.body/>
</b:if>
<div style="clear: both;"> <!-- clear for photos floats -->
</div>
Nah setelah itu taruh kode di bawah ini, diatas kode <body>
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 530;
summary_img = 420;
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(img.length>=1) {
imgtag = '<span style="float:left; padding:0px; margin-right:5px; border: 1px solid #E9E9E9;background-"><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>
Kemudian taruh kode dibawah ini, dibawah kode
<div class='post-footer-line post-footer-line-2'>
<b:if cond='data:blog.pageType != "item"'>
<div class='more'>
<span class='rmlink' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwxfguSSk-QK7cv_prh-z8_iBCXiQ5lp8D-sURMTnyx-dKJqdNjmVsr2edeZSuMPWLRXPJlroUeDbK0F6SfDKO_tcnNxAmP3yGOCnJAF7hZyeBb_MQfnudxqpLOycJPJ91_iVzRMlfQiw/s1600/arrow_next.png) no-repeat; padding-left:18px; float:right'><a expr:href='data:post.url'>Baca Selanjutnya !!</a></span>
<span class='comment-link' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBdUagfINxerhbplWUKlboJPAwaUyrfb3oxh5fkCOSFukq6ctLWM-5s3uR9A2R5-8l_xpDpAvJzBXIvRuim1G3OSdk0ZodS6iE3tXvOezbFPYs-KkVrdAdkRLI2myg2yd4In7XLyzxIkXE/s1600/27.png) no-repeat; padding-left:18px; float:left'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
</div>
</b:if>
Simpan deh. Kata baca selanjutnya bisa kamu ganti.
Demikian artikel tentang Read More Otomatis Bergambar ini dapat kami sampaikan, semoga artikel atau info tentang Read More Otomatis Bergambar ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
Melalui jaringan backlink yang kami miliki merupakan penyedia jasa backlink menerima berbagai backlink Indonesia dengan layanan jasa backlink murah yang kami kelola secara manual dan profesional. Kami menawarkan jasa backlink terbaik. Bagaimana cara membeli backlink dari kami?. Silahkan 👉 Hubungi Kami! harga sangat terjangkau!
Berikut adalah daftar 50 situs Jaringan Backlink kami!
Kami jaringan backlink sebagai media backlink bisa juga menerima content placement yakni jasa backlink termurah kami di dalam artikel. Pesan segera jasa backlink termurah ini. Karena kami adalah raja backlink yang sebenarnya!
