Assalamu Alaikum Warhmatullahi Wabarakatuh
Cara Memasang Auto Read More di Blogger Post
yaitu cara otomatis untuk membuat Read More. Dengan fitur ini anda
tidak perlu lagi menambah kode read more dalam setiap postingan namun
sistem akan secara otomatis menghasilkan link read more untuk postingan
anda. Dengan cara ini tentu kerja kita akan menjadi lebih ringan.
Bagi anda yang ingin menerapkan sistem auto read more pada blog anda langsung saja ikuti langkah-langkah dibawah ini.
Sebelum mengutak atik Rancangan HTML Blog Silahkan Backup ato silahkan Klik Download Templet Lengkap dulu baru memulainya..
1. Login ke Blogger. Masuk ke menu Design->Edit HTML
2. Beri centang pada "Expand Widget Templates"
3. Letakkan kode dibawah ini tepat diatas </head>
<script
type='text/javascript'> var thumbnail_mode =
"no-float" ; summary_noimg = 300; summary_img = 301;
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");
if(img.length<1) {
imgtag = '<span style="float:right; padding:0px 0px 5px
10px;"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWTsAe_JCCrxxHUK9lx7zmFtZdhlRT7KMKp1Ts_Q-TKcypSl8zK55UvjF0GlYEBEmn3H2L2t22zmz58nJLseCPjm2_swFe8lXHdG3NTl-S7GmCaRoydRl2DQRM2SoZgwa2NfLz7xYjuw/s1600/def-thumb.png"
width="'+img_thumb_width+'px"
height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:right; padding:0px 0px 5px
10px;"><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>
utuk Keterangannya sbb:
summary_noimg = 300 menunjukkan jumlah karakter yang ditampilkan tanpa gambar
summary_img = 301 menunjukkan jumlah karakter yang ditampilkan termasuk gambar
img_thumb_height = 150 menunjukkan tinggi gambar thumbnail
img_thumb_width = 150 menunjukkan lebar gambar thumbnail
float:right menunjukkan posisi gambar thumbnail di kanan. Jika anda
ingin gambar thumbnail berada di kiri ganti right menjadi left
img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWTsAe_JCCrxxHUK9lx7zmFtZdhlRT7KMKp1Ts_Q-TKcypSl8zK55UvjF0GlYEBEmn3H2L2t22zmz58nJLseCPjm2_swFe8lXHdG3NTl-S7GmCaRoydRl2DQRM2SoZgwa2NfLz7xYjuw/s1600/def-thumb.png"
adalah gambar cadangan yang muncul jika tidak ada gambar dalam
postingan. Anda bisa ganti gambar cadangan dengan gambar lain atau hapus
saja alamat gambarnya jika anda tidak mau menggunakan gambar cadangan.
4. Kemudian cari <data:post.body/> atau <p><data:post.body/></p>
5. Ganti kode tersebut dengan kode dibawah 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>
<span class='rmlink' style='float:left'><a
expr:href='data:post.url'><b>Read more
»</b></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><p><data:post.body/></p>
</b:if>
6. Kalau sudah, simpan template anda. dan lihat hasilnya
Seperti biasa anda bisa mengkreasi sendiri link read more misal dengan
menambah judul posting didalamnya atau mengganti link read more dengan
gambar. Caranya sama dengan read more manual. Selamat mencoba
7.Sebelum Disimpan SIlahkan Klik Dulu PRATINJAU untuk melihat Displaynya......Kalo sudah sesuai dengan yang diinginkan....maka Silakan klik tombol SIMPAN TEMPLATE.
Nb
:. Seandainya Terjadi Kesalahan ato tdk bisa juga...silahkan tinggalkan
Komentarx Inysa Allah akan kami beri solusinya........Trima kasih.....
0 komentar:
Posting Komentar