cara membuat read more otomatis dengan gambar

halo sobat blogger. Lama gak nge-blog dan memberi tutorial segar yg bisa membuat blog anda lebih mantap. Dan pada kesempatan kaliini saya akan memberikan tutorial blog, yaitu cara membuat read more otomatis dengan ditambahi gambar. JIka anda tertarik dengan ini, anda bisa mencoba tutorial ini. Trik ini sangat mudah. Langsung aja ya..!!

cekidot..

1. Log in blogger.com

2. Dasbor > tata letak > edit HTML

3. Centang Expand Template Widget

4. Cari kode </head>

5. Copy kode di bawah ini,dan letakkan di atas </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>

6. Lalu cari kode <data:post.body/>

7. Ganti kode tersebut dengan kode di bawah ini..

<b:if cond='data:blog.pageType != &quot;item&quot;'>



<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>



<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>





<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicRbPxZkEP6j-im3eImtWrIiOtX3vACmTi2TESoK1NKHO3hN7BN7l0vuj27BrHFoNGekDBVTHA46aFao45KOU_3My4OpbdeV0XnwS5edCil4oZw87cHz4vZ-wFSCsefFT5eFioFL4eM5aQ/'/></a></span>



</b:if>



<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

ket: gambar readmore bisa diganti, dengan cara ganti URL gambar(yg warna merah)

Read more: http://kaehmalam.blogspot.com

Artikel Terkait Lainnya :

DAFTAR ISI BLOG

• Cara membuat multi tab dengat gadget didalamnya
• Membuat Tampilan Dinamis & Menarik Fitur Blogspot.
• Membuat Widget Label Tertentu dengan Satu Thumbnail
• Domain Dot Com Gratis Dari Intuit
• Dapatkan Domain Gratismu!
• Cara Mendapatkan Domain .com Gratis
• Domain Gratis .COM .NET .INFO .NAME .BIZ Free...!!!! -
• Cara Mensubmit Blog ke 300 search engine
• Pasang Tombol "Save as PDF" Di Blogger
• Cara Membuat Tanda Tangan di Akhir Postingan
• 11 Cara Isengi Komputer Teman
• Membuat Windows Bisa Bicara saat dihidupkan
• Membuat Windows Bisa Bicara
• Cara Membuat Tooltip Otomatis di Blog
• Membuat Tab View Menu Tanpa Edit HTML di Blogspot
• Cara Agar Semua Halaman Blog Terindex Google
• Cara Memasang Meta Tag di Setiap Postingan Otomatis
• Cara Membuat Widget Blog Bergerak
• Tanya Jawab seputar Template magazine 2
• Panduan Cara Penggunaan Template Sporty Magazine 2
• Membuat Daftar Isi Bergaya Slide + Ringkasan
• Cara Membuat Widget News Update
• Cara mudah menghapus, Attribution blogger
• Membuat Slider Otomatis Sporty Magazine 2 Template