Minggu, 20 Oktober 2013
Browse Manual »
Wiring »
auto
»
blog
»
cara
»
di
»
gampang
»
membuat
»
more
»
read
»
Cara gampang Membuat Auto Read More di Blog
Black Line - Dengan adanya read more Blog kita akan seperti rapi dan tidak acak kadut, dari pada ulasan mulu lang sung ajah deh nih caranya :
3. Kemudian cari <data:post.body/> (gunakan Ctrl+F), dan GANTI dengan:
Kostumisasi:
Ganti Read More >> dengan kata-kata yang diinginkan. Atau jika ingin menggantinya dengan gambar, ganti tulisan berwarna merah tersebut dengan:
Cara gampang Membuat Auto Read More di Blog
Black Line - Dengan adanya read more Blog kita akan seperti rapi dan tidak acak kadut, dari pada ulasan mulu lang sung ajah deh nih caranya :
1. Masuk ke dahboard > Design/Rancangan > Edit HTML. Jangan lupa centang Expand Widget Templates.
Download/back up file XML template terlebih dahulu agar nanti bisa mengembalikan seperti semula jika ada
kesalahan.
Download/back up file XML template terlebih dahulu agar nanti bisa mengembalikan seperti semula jika ada
kesalahan.
2. Jika dulu sudah diisi script auto readmore yang pertama, hapus terlebih dahulu, gunakan panduan dari
posting auto readmore V1 untuk mengetahui mana saja yang harus dihapus.
posting auto readmore V1 untuk mengetahui mana saja yang harus dihapus.
3. Copy-paste script berikut tepat DI BAWAH </head> (gunakan Ctrl+F):
<!-- Auto read more script -http://buka-rahasia.blogspot.com- Start -->
<script type=text/javascript>
var thumbnail_mode = "yes"; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 340;
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");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
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>
<!-- Auto read more script -http://blacklinesharinggaring.blogspot.com/ -->
Yang berwarna merah adalah jumlah dan ukuran tampilan, summary_noimg=jumlah karakter tanpa gambar, summary_img=jumlah karakter dengan gambar, sedangkanimg_thumb_height dan img_thumb_width adalah ukuran gambar (dalam pixel). Ubahlah sesuai dengan keinginan.
3. Kemudian cari <data:post.body/> (gunakan Ctrl+F), dan GANTI dengan:
<!-- Auto read more -http://buka-rahasia.blogspot.com- Start -->
<b:if cond=data:blog.pageType == "item">
<data:post.body/>
<b:else/>
<b:if cond=data:blog.pageType == "static_page">
<data:post.body/>
<b:else/>
<div expr:id="summary" + data:post.id><data:post.body/></div>
<script type=text/javascript> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class=more expr:href=data:post.url>Read More >></a>
</b:if>
</b:if>
<!-- Auto read more -http://blacklinesharinggaring.blogspot.com/ -->
Kostumisasi:
Ganti Read More >> dengan kata-kata yang diinginkan. Atau jika ingin menggantinya dengan gambar, ganti tulisan berwarna merah tersebut dengan:
<img border=0 src=url (direct link) gambar readmore/>
Ganti url (direct link) gambar readmore dengan alamat url dimana anda mengupload dan menghosting gambar.
----------------
Update (12102011):
Di komentar sobat Ari di bawah ditanyakan: bagaimana cara agar tampilan teks di post summary - auto readmore bisa rata kiri kanan (justified)?
Lihat bagian ini pada script kedua di atas. Jika auto readmore sudah dipasang, cari dengan Ctrl + F:
Jadinya:
----------------
Update (12102011):
Di komentar sobat Ari di bawah ditanyakan: bagaimana cara agar tampilan teks di post summary - auto readmore bisa rata kiri kanan (justified)?
Lihat bagian ini pada script kedua di atas. Jika auto readmore sudah dipasang, cari dengan Ctrl + F:
<div expr:id="summary" + data:post.id>Untuk membuat teks di post summary dlm readmore justify, tambahkan style css ini ke dalam tag: style=text-align:justify;
Jadinya:
<div style=text-align:justify; expr:id="summary" + data:post.id>
----------------
4. Preview terlebih dahulu, jika sudah beres, kemudian save.
4. Preview terlebih dahulu, jika sudah beres, kemudian save.
Gunakan kotak komentar untuk menyampaikan pertanyaan, permasalahan, atau apapun tentang script ini.
Oke semoga bermanfaat, sekian dan terimakasih
Oke semoga bermanfaat, sekian dan terimakasih
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar