Cara Membuat Auto Read More Otomatis Di Halaman Depan Blog

Selamat sore sobat blogger dimanapun anda berada dalam kesempatan kali ini saya akan share Tutorial blogger yaitu Cara Membuat Auto Read MoreOtomatis Di Halaman Depan Blog.  Ada beberapa cara untuk membuat Auto Read More otomatis, atau popular juga dengan sebutan Baca Selengkapnya. Biasanya Fitur otomatis posting artikel ini ditambahkan di bawah postingan artikel blog Di Homepage, Beranda atau halaman depan.

Fungsi dari Read More Otomatis itu sendiri merupakan salah satu cara untuk membuat halaman homepage lebih terlihat simple dan dinamis, dengan menampilkan judul, gambar yang mempunyai efek transisi dan uraian singkat yang dapat diatur panjangnya sehingga memudahkan pengunjung untuk membaca artikel yang diinginkan lebih cepat.

Berikut langkah-langkah Cara Membuat Auto Read More Otomatis Di Blog. Perhatian: bagi yang sudah memasang read more otomatis yang ada sebelumnya harus dihapus terlebih dahulu.

• Login Ke Blogger.

• Klik Template, Backup template untuk jaga2 bila diperlukan, atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang lain.

• Klik Edit HTML.

• Klik Kiri 1 x Dimana saja dalam kotak template.

• Klik Ctrl+F (Supaya mempercepat pencarian kode).

• Dan cari kode berikut  </head> 

• Masukan kode tersebut dalam kotak pencarian, kemudian enter untuk mencari.

• Masukan Kode berikut diatas </head>

<!--Auto Read More MULAI-->
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<style>

.post-body {width:auto; height: 170px; float:left; margin:0 auto; padding:0 auto; }

.post-outer {height: 220px; background:#fff;}

.post img{transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out; }

.post img:hover{opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}

.cutter{width:220px;height:140px;overflow:hidden;border:none; float:left; padding:0px 0px 0px 0px; margin-bottom:20px;}

.post-footer{display:none!important}

.post { float:left; margin:0px ; padding-left:0px; padding-right:0px; text-align:justify; }

.post h2 a, .post h2 a:visited, .post h2 strong {height:auto;padding-left:0px;font-size:17px;width:auto;text-align:left;}

.read-more{float:left; padding-top: 10px;}

.read-more a{ color: #fff;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9;  text-decoration:none;font:bold 13px Arial;padding:5px; }

.read-more a:hover{text-decoration:none;background:#666;}

</style>

   <script type='text/javascript'>

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 210;summary_img =210;img_thumb_width = 50;img_thumb_height = 50;

</script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(e,f){if(e.indexOf("<")!=-1){var g=e.split("<");for(var h=0;h<g.length;h++){if(g[h].indexOf(">")!=-1){g[h]=g[h].substring(g[h].indexOf(">")+1,g[h].length)}}e=g.join("")}f=(f<e.length-1)?f:e.length-2;while(e.charAt(f-1)!=" "&&e.indexOf(" ",f)!=-1){f++}e=e.substring(0,f-1);return e+"..."}function createSummaryAndThumb(k){var i=document.getElementById(k);var h="";var g=i.getElementsByTagName("img");var j=summary_noimg;if(g.length>=1){h='<span style="display:none;float:left;margin:0px 10px 5px 0px;"><img src="'+g[0].src+'" width="'+img_thumb_width+'px" /></span>';j=summary_img}var l=h+"<div>"+removeHtmlTag(i.innerHTML,j)+"</div>";i.innerHTML=l};

//]]></script></b:if><!--Auto Read More AKHIR-->

 

Catatan : Cobalah terlebih dahulu tanpa diedit.
Warna Hijau untuk mengatur ketinggian read more otomatis di Halaman Depan.
untuk .post-outer benar2 harus diperhatikan supaya tidak loncat-loncat.
Warna Hijau adalah Pengaturan Lebar dan tinggi gambar
Warna Ungu adalah Pengaturan banyaknya deskripsi artikel, tanpa gambar dan dengan gambar.

• Kemudian Cari Kode <data:post.body/> 

• Kode tersebut diatas jumlahnya biasanya ada 2 atau 3 , Cari yang versi web, biasanya yang kedua (ke-2) dengan enter 2x pada kotak pencarian.

• Hapus Kode <data:post.body/> yang kedua dan Ganti dengan kode dibawah ini.

<!--Auto Read More MULAI-->

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

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

<div class='cutter'>

<script type='text/javascript'>

//<![CDATA[

function bp_thumbnail_resize(e,d){var c=200;var a=true;var b="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCDc6LqSmxpAbjiy5CdSgh5Z79awm0AO2ra0bNmdH3Ec2oSFp-RZRjbwqiR5zarpPDDMRS_dDonI4pdK9oaL9Pxe0mcL5F_PsiLM-3o0nA61w7lsnW0xmjhp6JyGN0w-d-PZWqzBzgPGQ/s1600/no+image.jpg";if(a==true&&e==""){e=b}image_tag='<img src="'+e.replace("/s72-c/","/s"+c+"-c/")+'" class="postthumb" alt="'+d+'"/>';if(e!=""){return image_tag}else{return""}};

//]]>

</script>

<a expr:href='data:post.url'>

<script type='text/javascript'>

document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));

</script>

</a>

</div> 

<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>

<table border='0'><tbody><tr><td>

<div class='read-more'>

<a expr:href='data:post.url'>Read More&#187;</a>

</div>

</td></tr></tbody></table>

</b:if>

</b:if>

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

<b:else/>

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

</b:if><!--Auto Read More AKHIR-->

Warna Oranye adalah ukuran crop dari gambar asli, itu setting standar, sebaiknya biarkan saja.

"Read More" juga bisa diganti bebas.

•   Preview terlebih dahulu, kalo bagus ya terus Save Template, dan lihat hasilnya.

 Screen Shoot

Mudahkan Cara Membuat Auto Read More Otomatis Di Halaman Depan Blog.

Sampai disini dulu Postingan ane tentang Cara Membuat Auto Read More Otomatis Di Halaman Depan Blog.

Semoga artikel ini bisa bermanfaat bagi sobat blogger.

Salam ITnetworking support SMKN 2 JENEPONTO.