Search for Archive .. Or Search Article

GOOGLE

ReadMore Tutorial include with Secret Trick

Sebelumnya, thanks kepada semua nya yang telah mau bersedia membaca postingan saya kali ini. Yhups, anda sudah tahu khan ReadMore itu seperti apa?
ReadMore adalah sebuah teknik untuk meringkas sebuah artikel. Ngomong-ngomong soal ReadMore, kalian sudah tahu dan bisa khan pasang readmore itu bagaimana?

Jika belum, mari saya tunjukan.
Ada beberapa cara untuk memasang readmore pada blog,
Salah satunya dengan memanfaatkan fitur Jump Break pada blogger, fitur ini adalah fitur yang baru-baru ini blogger launching kan untuk penggunanya.

Untuk membuat kode readmore default dari fitur yang disediakan blogger, anda cuma perlu membuat CSS nya saja.

1. Copy-paste kode dibawah ini diatas kode ]]></b:skin>
/* readmore
----------------------------------------------- */
.readmorecontent{text-align:right}
a.readmore{padding:4px 15px;-moz-border-radius:9px;-webkit-border-radius:9px; background:#eae6e6; color:#776868; text-decoration:none; font-size:12px}
a.readmore:hover{background-color:#8f2602; color:#fff}
2. Dan jika anda ingin membuat readmore sendiri tanpa menggunakan fitur Jump Break, maka hal yang harus anda lakukan adalah men-check list "Expand Widget Templates".
Selanjutnya cari kode ini <div class='post-header-line-1'/><div class='post-body'> , Jika sudah menemukan kode tadi segera copy kode dibawah ini kemudian paste di bawah kode yang berwarna hijau tadi.


<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>


Sesudah itu, copy kode dibawah ini dan pastekan kode nya dibawah kode <p><data:post.body/></p>

Sehingga Keseluruhan kodenya menjadi seperti Berikut
<div class='post-header-line-1'/>
<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>

<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>

<a expr:href='data:post.url'>Readmore
»»
</a>
</b:if>

<div style='clear: both;'/>
Nah terakhir simpan hasil editan anda dengan mengklik SAVE.

By The Way, kita belum ke inti permasalahan nya, Inti permasalahan nya Anda tahu kan script auto readmore itu seperti apa?
Nah, Sebelumnya kita kan sudah buat kode manual readmore nya di template kita, Namun apakah kita dapat mengembalikan kode tadi ke semula, dan bagaimanakah cara nya untuk menerapkan kode autoreadmore pada template kita?

3. Sepertinya untuk menjawab hal itu, carilah terlebih dahulu kode berikut ini dan hal yang harus anda lakukan adalah tinggal meng-hapus kode-kode yang berwarna merah. Berikut adalah kode nya:
<div class='post-header-line-1'/>
<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>

<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>

<a expr:href='data:post.url'>Readmore</a>
</b:if>

<div style='clear: both;'/>

Setelah anda meng-hapus nya, copy-paste kode dibawah ini diatas kode </head>


<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>


Keterangan:
var thumbnail_mode = "float"; (kita dapat memutuskan apakah
letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti
dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan
di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di
posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Trick Rahasia
Jika anda ingin menambahkan sesuatu kepada kode auto readmore ini, anda cukup mengedit kode pada bagian ini:
imgtag = '<span style="float:right; padding:0px 10px 5px 0px;-moz-border-radius:30px;-webkit-border-radius:30px;background:#555;border:1px solid #ccc;padding:15px"><img src="'+img[0].src+'" /></span>';
summ = summary_img;}
Fungsi kode yang berwarna hijau adalah ketika auto readmore ini berjalan, maka thumbnail gambar akan mendapatkan efek CSS Rounded. Dan untuk menambahkan efek-efek lainnya, anda tinggal edit saja kode yang berwarna hijau ini.

Jika sudah, cari kode <data:post.body/> dan ganti dengan semua kode dibawah ini, Sehingga keseluruhannya menjadi seperti 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'>READ MORE -
<data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Kemudian jangan lupa untuk menyimpan hasil nya dengan menekan tombol SAVE.
Semoga tutorial kali ini dapat bermanfaat bagi anda, amien.
Happy blogging with ILHAMFILES ^_^.
Related Posts
Sponsor

12 comments :

Do not spam,porn,violence and gore!

  1. mantap oabt infonya..... berguna nuh buat pembelajran kintaro hheheheee

    ReplyDelete
  2. saya sudah pakai sob, makasih ya atas tipsnya. Salam

    ReplyDelete
  3. udah pake readmore lama...


    oia, ngomong2 lama gak keliatan nih :)

    ReplyDelete
  4. tauk gak kelemahan pake trick read more ini???
    kalo kita masukkin gambar lebih dari satu rada beribet, kalo masukkin frame, ama form bentuknya jd ngaco....pokokna rugi kalo ahli tutorial seperti akuh pake read more jenis ini sob...btw simpel amang sih ;)) :D

    ReplyDelete
  5. Wahh tutorial yang baguss nih mas ilham... udah pake readmore versi standart.. hehhe

    ReplyDelete
  6. gw udah make readmore yg standart aja sob udah cukup kok,, hehehe,,,
    @beben bukannya gw mo ngeflame tapi klo komen di postingan orang gk usah pke nyombongin diri..
    ahli tutorial yg lebih jago aja gak pernah nyombongin diri tuh,,, hehehehe...
    pisss

    ReplyDelete
  7. bos... cara membuat popular post gimana ya??????

    ReplyDelete
  8. @nunutjoe : ntar saya bikinin postingan nya dlu..
    he,,he,,

    ReplyDelete
  9. aQ makai yang sederhana ajah...:D

    ReplyDelete
  10. wah kalau aku g pake readmore gan.... :D

    ReplyDelete
  11. wah baru tau yg auto readmore.. tp enk pake yg manual aja.. bs ngatur sendiri (menyangkut kerapian tata letak)

    ReplyDelete