Tambah Automatic Read More dengan Thumbnail

Dalam Petua Blogger ini,sayamempunyai skrip yang secara automatik akan menjadikan post anda ke dalam membaca ringkasan di halaman blog anda dengan extras.Disini Terdapat  beberapa beberapa ciri-ciri auto Read More bersama-sama dengan demo.

- Catatan anda akan dipaparkan secara automatik sebagai ringkasan pendek dengan pautan membaca lebih.
- Satu imej dari pos akan semula bersaiz ke dalam gambar thumbnail dan dipaparkan bersebelahan.
- Anda boleh memilih berapa banyak teks dipaparkan.
- Anda boleh memilih saiz thumbnail.

 Add Auto Read More Post Summary's To Your Blog

Langkah 1. Didalam (New Design) Blogger Dashboard Klik Drop Down Menu  > Pilih Template > Edit Html >  Proceed > Tick The Expand Widget Templates Box.

Langkah 2. Carikan kode dibawah ini didalam Html : (Klik CTRL and F untuk carian)

    </head>

Langkah 3. Copy kode dibawah ini dan paste diatas atau sebelum kode langkah pertama.

<script type='text/javascript'>
var thumbnail_mode = "no-float" ;

summary_noimg = 430;

summary_img = 340;

img_thumb_height = 120;

img_thumb_width = 120;

</script>
<script type='text/javascript' src='https://sites.google.com/site/jeritanblog/javascript/autoreadmore.js' ></script>

  
Penting
Kode yang berwarna merah ini menunjukan artikel anda.iingaat. Ingat bahawa artikel ini mempunyai gambar diseblah artikel anda.Jika tidak mempunyai gambar pada artikel anda ia  akan menunjukkan artikel sahaja.
summary_ noimg= 430; --> Panjang artikel  yang tidak mempunyai thumbnail.
summary_img = 340; --> panjang artikel yang memunyai gambar.
null_thumb_height = 120; --> tinggi  pixels  thumbnail.
null_thumb_width = 120; --> The lebar  pixels  thumbnail.

Langkah 4. Carikan kode dibawah ini didalam Html : (Klik CTRL and F untuk carian)

    <data:post.body/>

Langkah 5. Tukar <data:post.body/> dengan kode dibawah

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
    <b:else/>
    <div expr:id='&quot;summary&quot; + data:post.id'>
    <data:post.body/>
    </div>
    <script type='text/javascript'>
    createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
    </script>
    <div style='clear: both;'/>
    <span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more ... </a></span>
    </b:if>
    </b:if>


Nota - Anda boleh menukar teks merah dari Read More "Continue Reading", "Baca Post Penuh" atau apa sahaja yang anda suka.

Nota 1. Anda harus cuba untuk mempunyai imej yang pertama dalam catatan anda  supaya mereka bekerja dengan baik apabila digunakan sebagai thumbnail pada page.

Langkah 6. Simpan Template.


Tinggalkan Komen anda, Views Dan Pendapat .