coba coba: Auto Read More with Animated Post Thumbnail

Auto Read More with Animated Post Thumbnail

Membuat dan menggunakan read more otomatis yang dilengkapi dengan thumbnail pada posting adalah pilihan yang sangat menarik. Dengan auto read more (automatic post summaries with thumbnail) anda tak perlu lagi untuk menggunakan fitur read more (insert jump break)yang telah disediakan blogger karena sebuah javascript akan secara otomatis menampilkan setiap posting dalam bentuk "menggunakan readmore" yang disertai sebuah image berukuran kecil (tentu saja jika posting menyertakan gambar). Jumlah teks yang ditampilkan sebelum read more (di halaman blog) dapat diatur melalui javascript, demikian pula dengan ukuran thumbnailnya.

Jika selama ini sebuah auto readmore selalu tampil ala kadarnya, kali ini kita kan buat yang lebih atraktif dengan bantuan kode css3 transition, css3 transformation, border-radius, box-shadow dan text-shadow. Untuk menggunakannya anda perlu melakukan sedikit modifikasi pada template melalui penambahan kode css dan javascript serta perubahan xHTML. Penggantian xHTML dilakukan di antara tag pembuka dan penutup body (<body> & </body>) sedang penambahan kode css dan javascript di antara tag pembuka dan penutup head (<head> & </head>).

Kode CSS :

.GRbacayo a{
       float:right;
       font-size:14px;
       color:red !important;
       font-weight:bold;
       text-transform:uppercase;
       font-family:Arial;
       background:rgba(255,255,255,0.8);
       text-shadow:2px 2px 2px #888;
       padding:4px 8px;border:1px solid #555;
       text-decoration:none;
       transition:1s;
       -o-transition:1s;
       -moz-transition:1s;
       -webkit-transition:1s;
       -ms-transition:1s;
}
.GRbacayo a:hover{
       background:red;
       color:#fff !important;
       text-decoration:underline;
}
.GRmorethumb{
       box-shadow:0 0 6px #aaa;
       border:1px solid #eee;
       border-radius:6px;
       padding:6px 6px 2px 6px;
       margin:5px 12px 5px 0;
       background:#ccc;
}
.GRmorethumb img{
       padding:0;
       margin:0;
       border:1px solid #555;
       border-radius:4px;
}
.GRbacayo a,.GRmorethumb img{
       transition:1.2s;
       -o-transition:1.2s;
       -moz-transition:1.2s;
       -webkit-transition:1.2s;
       -ms-transition:1.2s;
}
.GRmorethumb{
       transition:2.5s 1s;
       -o-transition:2.5s 1s;
       -moz-transition:2.5s 1s;
       -webkit-transition:2.5s 1s;
       -ms-transition:2.5s 1s;
}
.GRmorethumb:hover{
       transform:scale(2) translate(27px,0);
       -o-transform:scale(2) translate(27px,0);
       -moz-transform:scale(2) translate(27px,0);
       -webkit-transform:scale(2) translate(27px,0);
       -ms-transform:scale(2) translate(27px,0);
       z-index:10;
}
.GRmorethumb img:hover{
       transform:scale(0.7);
       -o-transform:scale(0.7);
       -moz-transform:scale(0.7);
       -webkit-transform:scale(0.7);
       -ms-transform:scale(0.7);
       border-radius:8px;
}

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/GRauto-readmore.js' type='text/javascript'></script>

xHTML Baru :

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

Untuk menggunakan kode ini silahkan anda baca melalui link di bawah ini. Jika anda sudah mengikuti panduan sebelumnya (Auto Post Thumbnail - Auto Readmore with CSS3 Effects), maka hanya perlu mengganti kode CSS dan Javascriptnya saja karena xHTML Baru tak ada perubahan (sama persis).