Sabtu, 16 April 2011

Smarter Related Posts Google Blogger Widget

related-post Ketimbang enggak mosting, lebih baik share cara masukin smarter related posts google blogger widget karya More Tech Tips! Kalau kepengen mirip google banget bisa dilooking New Related Articles Widget. Seperti yang ada diblog ini Prodigy of Head Related Posts Integration Blogger Widget.
So...kembali ke proyek postingan terkait miliknya moretechtips. Related posts ini berotasi alias bergonti-ganti, dapat berupa tulisan tampilannya ataupun image. Karena metode Add a Gadget ► HTML/Javascript memudahkan dalam penerapannya sob :D Buka artikel berikut guna melihat ke-4 demo Related Posts Widget for Google Blogger v2.0 Setup! Default coded your got
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js"></script>

<div class="related-posts-widget">
<!-- {
blog_url:'http://YOUR-NAME-BLOG.blogspot.com'
,thumbs:0
} -->
loading..
</div>
Script warna biru jika sudah tertanam ditemplate tidak usyah dipakai lagi yah :) YOUR-NAME-BLOG replace with your link blog. Dengan script itu saja sobat sudah memiliki related posts. Tapi tidak akan berotasi alias menjedog menjentul gan :D

Coba sekarang pasang yang ini ;))

<script type="text/javascript" src="http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js"></script>
<div class="related-posts-widget">
<!-- {
blog_url:'http://YOUR-NAME-BLOG.blogspot.com'
,titles:0
,thumbs:1
,thumb_size:'s104-c'
,max_posts:10
,max_tags:10
,show_n:4
,stay_time:9000
,animate:'width'
} -->
loading..
</div>
Keterangan:
  1. titles
  2. Pada posisi angka 0 berarti tidak aktif, kalo dibikin menjadi 1 = aktif.
  3. thumbs
  4. Sama jika pada 0 = non aktif, 1 = aktif.
  5. thumb_size
  6. Ukuran (image) jika thumbs diaktifkan. Default size 's72-c' Kalau mau uncropped (tidak dipotong) tinggal ganti 's72' Untuk ukuran cropped & uncropped: 32, 48, 64, 72, 104, 144, 150, 160. Uncropped saja: 94, 110, 128, 200, 220, 288, 320, 400, 512, 576, 640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600.
  7. max_posts
  8. Jumlah postingan yg dipanggil.
  9. max_tags
  10. Ini tidak tauk buat apaan, soalnya pas praktek tidak keliatan efeknya :P
  11. show_n
  12. Jumlah rotasi pada saat tampilan. Default point = 5.
  13. stay_time
  14. Waktu jeda ketika sedang tampil dan akan berganti ke post selanjutnya.
  15. animate
  16. Jenis animasi: width, fontSize, lineHeight, height, dan opacity.
Mungkin segitu menurut Beben Koben si bloglang anu ganteng kalem tea setingan seperlunya. Kalau mau detailsnya yaaa silahkan deh baca sendiri ke sumber pencipta ;)) :D

Terdapat link css hostingan<link type="text/css" href="http://blogger-related-posts.googlecode.com/svn/v2/style1.css" rel="stylesheet" />
Menurut hemat Beben mending sobat pakai ini

<style>
.related-posts-widget ul {
list-style-type:none;
margin:0;
padding:0;
width:XXpx;
height:XXpx;
}
.related-posts-widget ul li{
float:left;
margin:0 0 3px 3px;
}
.related-posts-widget img{
border:silver 3px solid;
}
</style>
Masukin deh bareng ketika Add a Gadget ► HTML/Javascript bersama script related postnya. Kreasikan deh itu kode CSS sesuai selera b-)



Happy relates posts \m/

Tidak ada komentar:

Posting Komentar