Sebenarnya cara membuat penggalan artikel ini ada 2 cara yaitu cara yang menggunakan fasilitas dari blogger dan menggunakan sedikit script untuk menggunakan penggalan artikel. eh sobat kita langsung aja yuk ke langkah pembuatannya.
Cara yang menggunakan fasilitas dari blogger
- Pertama kita login dulu ke blogger
- Masuk ke entri baru, disana sobat tulis artikel
- setelah selesai menulis artikel jangan di terbitkan dulu apabila ingin menggunakan fasilitas penggalan artikel dari blogger
- nah kalau selesai menulis, silahkan sobat pilih dari mana saja artikel itu ingin di potong agar tidak terlihat semua pada halaman depan
- setelah memilih sobat klik icon seperti
- Setelah mengkliknya sobat dapat menerbitkannya
- mari kita menuju ke halaman Rancangan (dulunya tata Letak) >> elemen Halaman
- nah pada elemen posting sobat klik tulisan edit
- setelah itu cari tulisan Baca Selengkapnya dan ganti dengan tulisan yang ingin sobat tampilkan, misalnya : Lanjutin Yuk bacanya >> atau Baca lanjutannya
- nah kalau sudah sobat simpan deh
- selesai
Cara menggunakan dengan penambahan Script pada template
- Login ke blogger masuk ke Rancangan (dulunya tata letak) >> Edit HTML
- sebelum melakukan trik ini sebaiknya backup terlebih dahulu template sobat, agar tidak terjadi hal yang tidak dinginkan
- Setelah berada pada halaman Edit HTML sobat klik kotak kecil di samping tulisan Expand Template Widget (baca : Mengenal Edit HTML)
- setelah itu, cari kode </head> lalu tambahkan kode di bawah ini tepat di atasnya
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 300;
summary_img = 300;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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(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>
Penjelasan :- 300 >> ini menunjukan karakter artikel yang di penggal tanpa gambar, sobat dapat menentukan berapa karakter yang di tampilkan apabila tidak ada gambar
- 300 >> ini menunjukan karakter artikel yang di penggal dengan gambar, sobat dapat menentukan berapa karakter yang di tampilkan apabila dengan gambar
- 120 >> ini adalah ukuran tinggi dari gambar yang terdapat pada penggalan artikel apabila artikel sobat terdapat gambar, sobat dapat mengaturnya
- 120 >> ini adalah ukuran lebar dari gambar yang terdapat pada penggalan artikel apabila artikel sobat terdapat gambar, sobat dapat mengaturnya
- setelah itu sobat cari kode <data:post.body/> lalu ganti dengan kode di bawah 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:right'><a expr:href='data:post.url'>Baca Selengkapnya >></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/><
Penjelasan :- Baca Selengkapnya >> >> ini adalah tulisan yang akan muncul pada penggalan artikel sobat, sobat dapat menggantinya dengan kata-kata yang lain atau dapat sobat ganti juga dengan gambar, nah kalau untuk gambar sobat harus menulisnya seperti ini <img src="ALAMATGAMBARSOBATTARUHDISINI"/>
- Setelaj itu sobat dapat menyimpannya
No comments:
Post a Comment