">
Didalam posting artikel yang satu ini menjelaskan bagaimana Cara Membuat
Auto Read More Otomatis 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.
Screenshot
Versi yang sebelumnya memang paling cepat, namun kekurangannya bahwa
gambar dan deskripsi singkat terbatas untuk dimodifikasi (namun tetap
ideal).
Sedangkan versi auto read more otomatis yang ini, ukuran gambar
mempunyai efek transisi menarik serta panjang deskripsi dapat diatur
sesuai kebutuhan. Sebaiknya Posting mempunyai gambar meskipun hanya 1,
kalo tidak ada gambar nanti kosong tampilannya.
Untuk menambahkannya memerlukan waktu beberapa menit saja. Auto Read
More di halaman depan Blog ini memiliki beberapa versi, dan untuk postingan berikut, akan
diuraikan versi yang memiliki loading cepat setelah versi sebelumnya ada yang tercepat, sehingga
sangat baik bagi Mesin Pencari.
Auto Read more Artikel dapat di modifikasi sesuai kebutuhan, diuraikan
di dalam keterangan.
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.
1.
Login Ke Blogger.
2.
Klik Template, Backup template untuk jaga2 bila diperlukan,
atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang
lain.
3.
Klik Edit HTML.
4.
Klik Kiri 1 x Dimana saja dalam kotak template.
5.
Klik Ctrl+F (Supaya mempercepat pencarian kode),
Dan cari kode berikut </head>
Masukan kode tersebut dalam kotak pencarian, kemudian enter untuk
mencari.
6. Masukan Kode berikut diatas </head>
<!--Auto Read More AKHIR-->
Perhatian: Cobalah terlebih dahulu tanpa diedit.
Warna Biru untuk mengatur ketinggian read more otomatis di Halaman Depan.
untuk .post-outer benar2 harus diperhatikan supaya tidak loncat-loncat.
Warna Pink adalah Pengaturan Lebar dan tinggi gambar
Warna Ungu adalah Pengaturan banyaknya deskripsi artikel, tanpa gambar dan dengan gambar.
7. Kemudian Cari Kode <data:post.body/>
6. Masukan Kode berikut diatas </head>
<!--Auto Read More MULAI-->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<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 = "float" ;
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-->
Perhatian: Cobalah terlebih dahulu tanpa diedit.
Warna Biru untuk mengatur ketinggian read more otomatis di Halaman Depan.
untuk .post-outer benar2 harus diperhatikan supaya tidak loncat-loncat.
Warna Pink adalah Pengaturan Lebar dan tinggi gambar
Warna Ungu adalah Pengaturan banyaknya deskripsi artikel, tanpa gambar dan dengan gambar.
7. 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.
8. Hapus Kode <data:post.body/> yang kedua dan Ganti dengan kode dibawah ini.
<!--Auto Read More AKHIR-->
Warna Oranye adalah ukuran crop dari gambar asli, itu setting standar, sebaiknya biarkan saja.
"Baca Selengkapnya" juga bisa diganti bebas.
biasanya yang kedua (ke-2) dengan enter 2x pada kotak pencarian.
8. Hapus Kode <data:post.body/> yang kedua dan Ganti dengan kode dibawah ini.
<!--Auto Read More MULAI-->
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if
cond='data:blog.pageType != "item"'>
<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/AVvXsEgTdTbdmX7UxX8N_gxyYbiR0hSTXWcSjYdB3vHnycjb25Kpge4h0h9XQRYJFX3PvTtuCPNG5B3LpzBZtHsVgfNNb4VyAEW3fQzESfLQU9HEg9DqgDy0ziTArwBLUXLD_fsN9u0GiQ160K4/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("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script>
</a>
</div>
<div expr:id='"summary"
+ data:post.id'><data:post.body/></div>
<script
type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<table
border='0'><tbody><tr><td>
<div
class='read-more'>
<a
expr:href='data:post.url'>Baca Selengkapnya »</a>
</div>
</td></tr></tbody></table>
</b:if>
</b:if>
<b:if
cond='data:blog.pageType ==
"item"'><data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType ==
"static_page"'><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.
"Baca Selengkapnya" juga bisa diganti bebas.
9. Preview terlebih dahulu, kalo bagus ya terus Save Template, dan lihat hasilnya.
Demikian Tutorial Cara Membuat Auto Read More Otomatis Artikel Di Blog, mudah-mudahan bisa bermanfaat.
sumber : As-salaam
