Home disini
widget by sy@ms

Latest Posts

Membuat Postslider Dengan Gambar (Thumbnails)

Sebetulnya postingan ini merupakan request trik dari sobat bloger. Namun ane baru bisa sharing sekarang setelah sebulan ane tedampar di kampung yang bisa dibilang pedalamanlah, dengan jaringan telephone yang lemah ane terpaksa ga bisa berinteraksi dengan internet. Setelah waktu berlalu, hari ini ane sempatkan untuk mempostkan triknya. (Ma'af ni sob sebelunya.....)

Nah sekarang ane coba untuk mempostingin triknya. Sesuai dengan gambar yang ada di samping atau kalau sobat mau lihat demonya, sobat bisa klik home pada blog ini. Tentunya postslider ini juga salah satu trik agar blog menjadi tampil menarik dan userfriendly. Gimana, jika sobat-sobat yang lain mau, silahkan ikutin step-stepnya.
Dalam hal pemasangan gadged ini sobat bisa etakn dengan dua cara, yang pertama dengan menambah gadged dan yang kedua diletakan sesuai dengan keinginan sobat melalui edit html.
Ini scriptnya css :
<style type='text/css'>
#rp_plus_img{height:212px;overflow:hidden;border:solid 0px #585858;padding:6px 10px 14px 5px;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:blue; text-decoration: none; font-size:13px; font-weight:bold;} /*link*/
#rp_plus_img a:hover{color:#f61c3b; text-decoration: none; font-size:13px; font-weight:bold;} /*ketika mouse didekatkan */
#rp_plus_img .news-title{color:blue; display:block;font-weight:bold !important;margin-bottom:4px;font-size:12px;} /*judul postingan*/
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:black;text-align:justify;} /*isi postingan*/
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 0px #585858;width:55px;height:55px;} /*image */
.slidespost {
padding:0px;
border:0px;
margin:0px;
height:260px;
width:400px;
float:left;
}
</style>

Ini script htmlnya :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript' />
<script type='text/javascript' language='javascript' src='http://syamsjs.googlecode.com/files/syams_slide_post_script.js' />
<div class='slidespost'>
<script type='text/javascript'>
var speed = 500; /*kecepatan slide/gerak */
var pause = 2500; /*lama waktu berhenti slide */
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id='rp_plus_img'>
<script style='text/javascript'>
var numposts = 15; /*jumlah post yang ingin di tampilkan */
var numchars = 200; /*jumlah karakter post yang ingin di tampilkan */
</script>
<script src='http://syamsmobillex.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt'></script> <!-- ganti syamsmobillex.blogspot.com dengan url/link blog spobat -->
</ul>
</div>

Cara pemasanganya :
  1. Login ke akun blog sobat,
  2. Pilih Rancangan --> Edit Html,
  3. Cari kode </head>,
  4. Masukan script css di atas kode no.3,
  5. Nah tinggal pemasangan script html, seperti saya katakan di atas ada dua pemasangan script ini. Pada tambah gadged dan pada Edit Html,
  6. Jika sobat akan memasang pada Add Gadged sobat pindah pada Edit Laman,
  7. Setelah itu klik Add Gadged dan pilih Html/Javascript lalu pastekan script html dan simpan.
  8. Jika sobat ingin meletakanya di Edit Html silahkan sobat sesuaikan di mana letaknya asalkan di dalam tag <body> dan pastekan script html dan simpan.

Gimana, Semoga bermanfa'at bagi sobat......

Salam senyum dariku untuk semuanya, tetaplah untuk bersemangat. Jangan lupa Comment atau isi buku tamu ya sob. Sedikit pemberitahuan untuk sobat yang ingin mengambil [Copy-Paste], Owner tidak melarang sobat untuk memperbanyak artikel namun Owner berharap sobat berlaku dengan bijak agar mencantumkan link active maupun yang tidak. Owner berharap partisipasinya ya sob.



2 komentar:

Direktori WeBlog mengatakan...

Keren postslidernya...thanks dah sharing, gan!

sy@ms mengatakan...

Sama sama sob. Semoga bermanfaat
Trims ya dah berkunjung di blog ane.
Salam kenal dari ku sob.

21 Februari 2013 23.03

Jam Sekarang
Tanggal
Salam Sapa :
Status Blogging :

*ket. status : Terjadwal : Berarti yang punya blog tidak bisa berinternet [ More... ]





sy@ms
skyNET program


Join the conversation for skyNET program

 
 free web counter Counter Powered by  RedCounter

© 2011 || Copyright by sy@ms || Thanks for skyNET program All Reserved

Technology Blogs TopOfBlogs Top Blogs Internet Internet Blogs Phil Backlink Display Pagerank
Yahoo bot last visit powered by MyPagerank.Net
USA Backlinks Free Backlinks Service at USABacklinks.com! Auto Backlink Gratis Indonesia : Top Link Indo My Ping in TotalPing.com ping fast  my blog, website, or RSS feed for Free