Auto Post Thumbnail - Auto Readmore with CSS3 Effects

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

Readmore otomatis ini juga tak sekedar read more biasa karena mengikut sertakan javascript yang berfungsi secara otomatis akan menampilkan thumbnail (image berukuran kecil) di setiap box posting dimana read more berada. Anda dapat mengatur ukuran 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:

1. Tampilan thumbnail standar:
   Tanpa menggunakan efek css3. Thumbnail dilengkapi dengan border, background, border-radius dan box-shadow.
2. Tampilan thumbnail dg effek css3:
   Thumbnail sudah dilengkapi dengan efek css3, dimana ketika mouse beada di atasnya thumbnail akan bertambah besar 1,5 kali lipat.
3. Tampilan thumbnail dengan efek css3 plus :
   Dilengkapi pacity effect dan background rgba serta css3 transform dengan efek rotate serta zoom image 2x.

Ketiga pilihan tampilan auto post thumbnail yang dilengkapi dengan readmore otomatis ini memungkinkan anda mempunyai cukup pilihan. Silahkan gunakan yang cocok dihati. Yah ..., karena beberapa sobat blogger ada yang suka tampilan 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 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 :

1. 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.
2. Setekah klik "Sign in", beberapa saat kemudian anda akan melihat halaman dasboard (Dasbor).
   Klik Design (Rancangan)"
3. 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".
4. Ini penting untuk dilakukan! Segera "Backup Template Terlebih dahulu sebelum proses penambahan kode baru dimulai.
5. Cari kode ]]></b:skin> kemudian letakkan kode CSS di atasnya, sedangkan javascript di bawahnya. Panduan untuk backup template dan cara mencari kode html di template maupun berbagai cara menyimpan kode bisa dibuka di Special Tutorials yang ada di menu sebelah kiri halaman blog.
   
   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'/>

6. Klik "Simpan Template (Save Template).
7. Lanjutkan dengan pemasangan xHTML.
8. Klik Expand Widget Template.
9. 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>

10. Ganti seluruh kode di atas dengan xHTML Baru.
11. Klik Simpan Template (Save Template).
12. 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 :

1. Selain model standart ini anda dapat membuat yang sudah dilengkapi dengan efek css3. Anda bisa ikuti tutorial beserta kode yang digunakan sekaligus di halaman demo.
2. Untuk merubah tinggi dan lebar thumbnail lakukan perubahan nilai pada javascript. Semakin besar nilai maka ukuran thumbnail semakin besar.
3. Tampilan dg css3 Effects:
   Klik link berikut melihat demoberikut kodenya (javascript, kode css dan xHTML).
   Demo berikut kode : Auto Read More - Tampilan dg css3 Effects.
4. Tampilan dg css3 Effects-plus:
   Silahkan tunggu demo selesai terlebih dahulu!

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Posting » Selasa    WAGE, Maret, 06, 2012

» Happy Blogging - gubhugreyot «