Mempercantik blog dengan membuat Read More



Mempercantik blog dengan membuat Read More. Sebuah blog akan tampak lebih indah jika tampilannya manarik sang pengunjung nah Didalam postingan artikel yang satu ini akan menjelaskan bagaimana cara membuat auto “Read More” di Halaman Depan Blog agar tampilan blog anda menjadi lebih beautiful dan menarik. Perlu diketahui ya ada beberapa cara untuk membuat Auto Read More otomatis, atau biasanya lebih dikenal dengan sebutan “Baca Selengkapnya”. Fitur otomatis posting artikel ini ditambahkan di bawah postingan artikel blog Di Homepage, Beranda atau halaman depan.
Tampilan Blog Setelah Di Auto Read More


Apa fungsinya sih membuat read more ?

Ok kita bahas perlahan ya…..fungsi 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, fungsi selanjutnya ialah untuk menarik simpatik para pengunjung blog sobat dan memudahkan mereka untuk memilih artikel yang sobat posting tadi menjadi singkat sepeti yang di jelaskan diatas, agar tulisan kita di blog tidak ditampilkan panjang di homepage maka teknik membuat read more ini dangat dianjurkan.
Akan tetapi saat ini sudah banyak web yang memberikan template yang sudah di variasi dengan read more otomatis sehingga pengguna templatenya tidak perlu mengedit lagi ya hehe. Template yang disedian juga bervariasi namun pilih aja sesuai selera anda ya…… contoh template rekomendasi dari saya klik disini
 
Kemudian 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 yang di sediakan oleh google.
 
Auto Read more Artikel dapat di modifikasi sesuai kebutuhan dan sesuka selera kita ya , diuraikan di dalam keterangan.

Pahami dan praktekan langkah-langkah Mempercantik blog dengan membuat Read More Otomatis Di Blog anda.

Perhatian: bagi yang sudah memasang read more otomatis yang ada sebelumnya harus dihapus terlebih dahulu. Versi Ini telah Direvisi.

Langkah-Langkah Mempercantik blog dengan membuat Read More khusus di blogger :

Pertamanya sih sama Login dulu Ke akun Blogger kalian.
kemudian Klik Template, Backup template terlebih dahulu biar aman atau gunakan blog lain terlebih dahulu untuk uji coba template yang akan di edit untuk ditambahkan read more.
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.
Copy kode script dibawah ini
Kemudian pastekan Kode diatas </head>


<!--Auto Read More Mulai-->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.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;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 10px solid #fff;float:left;height:165px;width:280px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:280px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar
summary_noimg = 300; //banyaknya huruf jika tidak ada gambar
summary_img = 250; //banyaknya huruf jika ada gambar
img_thumb_height = 165;
img_thumb_width = 280;
</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(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;}
//]]></script>
</b:if>
</b:if>

<!--Auto Read More Akhir-->

Sangat perlu diperhatikan : Cobalah terlebih dahulu tanpa diedit.
Warna Biru untuk mengatur banyaknya kutipan dari artikel.


Warna Merah adalah Pengaturan Lebar dan tinggi gambar di home page
Kemudian langkah selanjutnya Cari Kode <data:post.body/> ada 2, gunakan kode <data:post.body/> yang ke dua.

Hapus Kode <data:post.body/> yang ke-2 kemudian Ganti dengan kode dibawah ini:

<!-- Auto read more Mulai -->
<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:else/>
<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>
      <div class='read-more'>
      <a expr:href='data:post.url'>Baca Selengkapnya &#187;</a>
      </div>

</b:if>
</b:if>

<!-- Auto read more Akhir -->


Warna Pink boleh dihapus boleh tidak, bedakan saja.“Baca Selengkapnya” juga bisa diganti bebas sesuka kalian. 

Paling penting coba di perhatikan : Jika anda sudah menggunakan fitur read more otomatis sebelumnya maka harus dihapus yang versi sebelumnya dan kemudian ketika mencari kode <data:post.body/> mungkin jumlahnya bukan dua atau pun tiga 3 bahkan bisa lebih banyak dari itu tapi saya sarankan ambil aja yang ke dua ya ** 

Terakhir review hasil editan template yang sudah di berikan kode script read more tadi untuk di uji apakah sudah bekerja atau belom, jika sudah bekerja tinggal pake namun jika belom bekerja tinggal edit lagi.

Mudah – mudahan bermanfaat jika ada tulisan yang kurang faham harap dimaklumi ya saya juga manusia biasa tidak luput dari kesalahan salam penulis….. semoga sukses

0 Response to "Mempercantik blog dengan membuat Read More"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel