Membuat Read more / Baca Selengkapnya Otomatis Blogger [Versi Baru]

read more otomatis
Wah kelihatannya menarik dan perlu dicoba cara- cara yang satu ini. karena apa? soalnya setelah kita berhasil dengan cara- cara nanti, kita posting maka read more / baca selengkapnya akan mengatur sendiri secara otomatis...enak bukan. Tanpa kita menanamkan kode- kode di postingan kita. Saya berani share ini karena saya sudah mencobanya di blog saya ini. dan saya dapatkan dari oom. terima kasih oom.
Sekarang gantian saya share barangkali ada teman- teman yang kebetulan mampir di blog saya ini dan membutuhkan tutorial ini. OK...kita mulai saja: ., Eits saya lupa, sebelum kita masuk cara ada baiknya saya beritahukan bahwa jika teman- teman dulu pernah membuat read more [read more yang dulu], maka sebaiknya dihapus dulu.


Cara membuat Read More Otomatis di Blogspot
  • Pertama , Login ke akun blogger teman
  • Pada Dhasboard Pilih Tata Letak - Edit HTML
  • Cari kode </head>
  • Letakkan Kode di bawah ini di atas kode </head> tadi
    <script type='text/javascript'>
    var thumbnail_mode = "float" ;
    summary_noimg = 250;
    summary_img = 250;
    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>
     Keterangan:
     var thumbnail_mode = "float" [kita dapat memutuskan apakah letak thumbnail atau gambar kita di (float) kiri atau kanan atau jika tidak ganti dengan (no-float)]
     summary_noimg = 250 [menetapkan berapa banyak karakter yang ditampilkan pada posting tanpa gambar]
    summary_img = 250 [menetapkan berapa banyak karakter yang ditampilkan pada posting yang menggunakan gambar / dengan gambar]
    img_thumb_height = 120; [mengatur tinggi thumbnail / gambar dalam ukuran pixel]

    img_thumb_width = 120; [mengatur lebar thumbnail / gambar dalam ukuran pixel]



  • Klik Simpan Template
  • Kita masih ada pada halaman Edit HMTL , sekarang teman- teman centang kotak kecil Expand Template Widget
  • Sekarang cari kode di bawah ini

    <data:post.body/>
    atau Jika tidak menemukan kode tadi, cari kode ini

    <p><data:post.body/></p>

  • Hapus kode tadi, lalu ganti dengan kode- 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: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>

  • Selanjutnya, klik Simpan Template
  • Lihat hasil dan previewnya


Bookmark and Share

Posted by: Mas Eko
Download info - Tips trik - update - sharing, Updated at: 00:09

13 - komentar:

fathoni said...

ship dik toturialnya mudah di pahami, langsung bsa ku terapkan di blogs baruku nggk mulek kyak biasanya, langsung sekali jadi.....

Didik M.A said...

ya makasih atas kunjungan dan komentarnya sobat thoni..

Anonymous said...

Setuju dengan Tonny. Thnk's. Yuk Back Link http://www.d-copy.blogspot.com. Terima kasih. Semoga menerima permintaan BackLink saya.

klik disini said...

makasih infonya

hartono said...

thanks for information..nemano bucho

obat tahan lama foredi said...

makasih banyak tutorialnya langsung dipraktekan ni gan

septic tank biotech said...

thx tutor y gan ...

biotech indonesia said...

makasih artikel y sobb ..

sukses terus ,,

stp biotech said...

lanjutkan dan sukses ..

flash card untuk bayi said...

nice blog

unsgu said...

Berbagai informasi yang diposting pada web ini sangat bermanfaat, dan menambah wawasan untuk para pembaca. Terimakasih yah udah mau share, dan ditunggu berita terbaru menarik lainnya. price motorcycles and cars , Sample Pictures Modern Minimalist House , latest engine specification , minimalist house interior exterior

unsgu said...

terimakasih, all new kia rio website ini telah memberikan ilmu pengetahuan yang sangat bermanfaat untuk saya dan yang lain Terima kasih sudah mau berbagi price Kawasaki Z800 dengan informasinya tersebut, price ktm rc390 semoga dapat bermanfaat untuk kita semuanya yang telah menyimaknya specifications ford ecosport

Unknown said...

Helpful once design for home ya news,
thanks a lot ya pa price and specifications admin has home design minimalist given this good news.

Post a Comment

Tiada gading yang tak retak, baka banyak pula hal yang salah dari aku. maka, tinggalkan walau hanya secoret komentar sebagai lankah ke depanku untuk lebih maju

NO SPAM NO PORN!