Trik Membuat Auto Readmore Animasi

Author : UnknownTidak ada komentar

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>).
DEMO

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

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

Tutorial :

Tutorial » Auto Post Thumbnail - Auto Readmore with CSS3 Effects

Kalau tidak berhasil dengan cara diatas bisa dengan cara yang saya gunakan saipul muiz tutorial by muizcyan-xp..

1.yang pertama login seperti bisa ke blogger ..
2. masuk ke template > edit HTML>expand widget
3. cari kode <style type='text/css'>
4. masukkan kode css diatas.. dibawah kode <style type='text/css'>
5. terus cari kode </head> dan tambahkan kode javascript diatas </head>

kalau yang xhtml gak usah ditambahin ... cuman segitu tutorial yang saya pakai sebelum melakukan kegiatan lebih dahulu backup template anda....

sekian salam blogger by muizcyan-xp

tag cara membuat gambar postingan blog animasi| trik membuat gambar post berputar| trik membuat gambar postingan penuh dengan animasi transition| cara membuat animasi di gambar postingan blog

Posted On : Kamis, 17 April 2014Time : 21.43

Trik Membuat Auto Readmore Animasi

Blog Archives

Mengenai Saya