Membuat Related Posts Blogger dengan Efek CSS3

11

Mar 2012

Jika mungkin anda telah menggunakan atau memasang widget (script) related post untuk blogger seperti yang sudah banyak terposting di beberapa blog lainnya, pasti akan terlihat sedikit berbeda dengan yang ada di blog ini. Cobalah untuk menggulung halaman ini turun hingga di bawah posting. Arahkan cursor ke setiap link dan akan terlihat sebuah animasi saat tersentuh cursor. Untuk membuat related posts yang seperti ini anda perlu menambahkan css3 transition serta mengatur padding dan background position yang terpasang pada setiap link.

Kode yang diperlukan untuk membuat related posts blogger dengan animasi yang tercipta melalui css3 transition dapat anda lihat dalam beberapa box berikut:

Kode CSS :

#GRrelated-posts{
      padding:10px;
      display:block;
      clear:both;
      border-top:5px double #444;
      border-bottom:5px double #333;
      margin:15px 0;
}
h3.GRrelated-post{
      border-bottom:3px double #666;
      font-weight:bold;
      line-height: 1.2;
      margin:25px 15px 5px;
      padding:0 6px;
      text-transform:uppercase;
      font-size:14px;
}
#GRrelated-posts a:hover{
      text-decoration:none;
}
#GRrelated-posts ul{
      list-style-type:none;
      margin:10px 0;
      padding:0;
}
#GRrelated-posts li{
      background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz9KUylPmAyPb1JFdyENEDxYckiKAQieueYEBIkLPuaRkTATzuIJOVGpTqVq5wqw4leuo_wkanlvCzckPVonbW1Z7mAKsJlXnhU9Na5tdhBq4W6ODrOJgNuLXmgn0vA361Rxs8-rS-VXgE/s128/ball.red.png') no-repeat scroll 12px 0 transparent;
      background-size:auto 18px;
      display:block;
      list-style-type:none;
      padding:0 0 0 35px;
      line-height:20px;
      margin:0;
      transition:all 0.8s ease;
      -o-transition:all 0.8s ease;
      -moz-transition:all 0.8s ease;
      -webkit-transition:all 0.8s ease;
      -ms-transition:all 0.8s ease;
}
#GRrelated-posts li:hover{
      background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUj2OKKufHBcE2nbK1ocD4NVzVsz-GKA8TsCwO1ZBFCaCfWUKzm2A80_O6hlAZ6vAtHJ6X_RoMRA2vi-lXRWuh01IQRrnMKj0Rwcix4RFHuJi5z56bodlpbRewpYG-WzBop8WxOVRMVFJ3/s128/arrow-gold.png') no-repeat scroll 3px 0 transparent;
      padding-left:45px;
}

Javascript :

<script src='http://gubhugreyotprojects.googlecode.com/svn/widgets/GR_related-posts.js' type='text/javascript'></script>

xHTML :

<b:if cond='data:blog.pageType == "item"'>
<h3 class='GRrelated-post'>Related Posts</h3>
<div id='GRrelated-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=10;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

Cara menggunakan kode related posts :

• Login ke Blogger.
• Halaman Dasbor (Dasboard):
  KLik Design (Rancangan)
• Klik Edit HTML
• Backup template.
  Karena melakukan perubahan xHTML di bagian body mempunyai resiko terjadi kegagalan yang mungkin menimbulkan kerusakan template, anda harus melakukan proses backup template terlebih dahulu demi keamanan.
  • Klik Download Template Lengkap (Download Full Template)
  • Simpan file template di folder PC.
  • File yang tersimpan ini bisa digunakan untuk memulihkan template seperti sebelum dilakukan modifikasi dengan cara menguploadnya kembali ke blogger dengan cara :
    Klik browse kemudian temukan file yang sebelumnya yelah tersimpan dan lanjutkan dengan klik upload.
• Kembali di halaman Edit HTML :
  Cari kode ]]></b:skin>
• Letakkan kode CSS tepat di atas kode tersebut sedang javascript di bawahnya sehingga kode ]]></b:skin> akan berada diantara kode css dan javascript.
• Klik Simpan Template (Save Template).
• Jika sudah berhasil tersimpan, lanjutkan kembali dengan klik Expand Widget Template.
• Cari kode <data:top.authorLabel/>
  Di atas kode ini terdapat beberapa kode lain dengan bentuk seperti berikut:
  
  

  <div class='post-footer'>
      <div class='post-footer-line post-footer-line-1'>
        <span class='post-author vcard'>
          <b:if cond='data:top.showAuthor'>
            <data:top.authorLabel/>

  
  Letakkan xHTML tepat di atasnya.
  
  

  <b:if cond='data:blog.pageType == "item"'>
  <h3 class='GRrelated-post'>Related Posts</h3>
  <div id='GRrelated-posts'>
  <b:loop values='data:post.labels' var='label'>
  <b:if cond='data:label.isLast != "true"'>
  </b:if>
  <b:if cond='data:blog.pageType == "item"'>
  <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/></b:if>
  </b:loop>
  <script type='text/javascript'>
  var currentposturl="<data:post.url/>";
  var maxresults=10;
  removeRelatedDuplicates(); printRelatedLabels();
  </script>
  </div>
  </b:if>
  
      <div class='post-footer'>
      <div class='post-footer-line post-footer-line-1'>
        <span class='post-author vcard'>
          <b:if cond='data:top.showAuthor'>
            <data:top.authorLabel/>

  
  
  
• Klik Simpan Template (Save Template).

Continue lendo

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

Continue lendo