Auto Post Thumbnail - Auto Readmore with CSS3 Effects

Auto readmore pastinya akan sangan bermanfaat bagi semuanya. Dengan auto readmore yang berfungsi secara otomatis menciptakan readmore berdasarkan jumlah karakter ini, maka tak perlu lagi ada kata, Aduh ...., readmore-nya kelupaan!" Kata yang paling sering terdengar saat posting selesai dan diterbitkan.

Readmore otomatis ini juga tak sekedar readmore biasa karena mengikutsertakan javascript yang berfungsi secara otomatis akan menampilkan thumbnail (image berukuran kecil) di setiap box posting dimana readmore berada. Anda dapat mengatur ukuram thumbnail dengan merubah nilai width pada javascript. Jika anda menghendaki pengaturan ini sebaiknya lakukan pada desain yang pertama (standart). O,...ya,.. perlu diketahui bahwa kita akan buat 3 macam tampilan thumbnail yang berbeda.

Pilihan tampilan auto post thumbnail:

Tampilan thumbnail standar:
Tanpa menggunakan efek css3. Thumbnail dilengkapi dengan border, background, border-radius dan box-shadow.
Tampilan thumbnail dg effek css3 dg tambahan tag span:
Thumbnail sudah dilengkapi dengan efek css3, dimana ketika mouse beada di atasnya thumbnail akan bertambah besar 1,5 kali lipat.
Tampilan thumbnail dengan efek css3, opacity effect dan background rgba serta css3 transform dengan efek rotate.

Ketiga pilihan tampilan auto post thumbnail yang dilengkapi dengan readmore otomatis ini memungkinkan anda mempunyai cukup pilihan. Silahkan gunakan yang cocok dihati. Yah ..., karena ada sementara yamg suka tanpilan simple namun ada pula yang pilih tampilan atraktif.

Tampilan Standar:

KODE CSS :

.GRbacayo{
        font-size:16px;
        font-family:Arial;
        display:inline-block;
        float:right;
        margin:0 0 0 20px;
        padding:3px;
}
.GRbacayo a{
        padding:2px 6px 3px;
        text-decoration:none;
        background:#ccc;
        color:red;
        text-shadow:2px 2px 2px #888;
        border:1px solid #444;
        border-left-color:#888;
        border-bottom-color:#888;
}
.GRbacayo a:hover{
        background:red;
        color:#eee;
        text-decoration:underline;
}

JAVASCRIPT :

<script type='text/javascript'>
summary_noimg = 530; /* jumlah teks tanpa thumbnail */
summary_img = 440; /* Jumlah teks dengan auto thumbnail */
img_thumb_height ='auto';
img_thumb_width = 100; /* width thumbnail * Semakin besar akan semakin lebar dan tinggi */
</script>
<script src='http://gubhugreyotprojects.googlecode.com/svn/rm/GRautoreadmore-std.js' type='text/javascript'/>

XHTML :

<div class='post-header'>
    <div class='post-header-line-1'/>
    </div>

    <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' style='text-align:justify;'>
       <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>
<span class='GRbacayo'><a expr:href='data:post.url' expr:title='data:post.title'>Read More</a></span>
           </b:if>
        </b:if>
              <div style='clear: both;'/> <!-- clear for photos floats -->
   </div>

Cara Menggunakan :

Login ke Blogger. Gunakan user name (jika mengunakan gmail) dan password kemudian klik "Sign in".
Bagi yang menggunakan yahoo atau lainnya tuliskan alamat email lengkap.
Setekah klik "Sign in", beberapa saat kemudian anda akan melihat halaman dasboard (Dasbor).
Klik Design (Rancangan)"
Lanjutkan dengan Klik "Edit HTMl". Tunggu hingga halaman "Backup / Restore Template (Edit HTML)" terbuka. Di halaman ini anda bisa melihat kode penyusun template dalam box "Edit Template".
Ini penting untuk dilakukan! Segera "Backup Template Terlebih dahulu sebelum proses penambahan kode baru dimulai.

Cari kode ]]></b:skin> kemudian letakkan kode CSS di atasnya, sedangkan javascript di bawahnya.

Contoh cara peletakkan kode CSS dan javascript:

.GRbacayo{
        font-size:16px;
        ..... etc
}
.GRbacayo a{
        padding:2px 6px 3px;
        .... etc
}
.GRbacayo a:hover{
        background:red;
        color:#eee;
        text-decoration:underline;
}

]]></b:skin>

<script type='text/javascript'>
summary_noimg = 530; /* jumlah teks tanpa thumbnail */
summary_img = 440; /* Jumlah teks dengan auto thumbnail */
img_thumb_height ='auto';
img_thumb_width = 100; /* width thumbnail * Semakin besar akan semakin lebar dan tinggi */
</script>
<script src='http://gubhugreyotprojects.googlecode.com/svn/rm/GRautoreadmore-std.js' type='text/javascript'/>

Klik "Simpan Template (Save Template).

Lanjutkan dengan pemasangan xHTML.

Klik Expand Widget Template.

Cari kode :

<b:includable id='post' var='post'>

Di bawah kode tersebut, sekitar 19 deret kode di bawahnya terdapat kode seperti ini:

<div class='post-header'>
    <div class='post-header-line-1'/>
    </div>

    <div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

    <b:if cond='data:post.hasJumpLink'>
       <div class='jump-link'>
          <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
       </div>
    </b:if>

Ganti seluruh kode di atas dengan xHTML Baru.

Klik Simpan Template (Save Template).

Lihat hasilnya dengan membuat posting atau jika menggunakan blog yang sudah ada postingnya maka bisa langsung dicek di halaman utama atau melalui label posting.

Catatan/Keterangan :

Selain model standart ini anda dapat membuat yang sudah dilengkapi dengan efek css3. Silahkan tunggu dulu karena demonya blom selesai. Anda bisa ikuti tutorial beserta kode yang digunakan sekaligus di halaman demo.
Untuk merubah tinggi dan lebar thumbnail lakukan perubahan nilai pada javascript. Semakin besar nilai maka ukuran thumbnail semakin besar.