Cara membuat random post dengan efek slide

Dilihat dari tampilannya, Random Post dengan menggunakan efek animasi slide memang sangat keren bila dipasang pada web atau blog kita. Sampai saat ini saya masih tetap tertarik dengan widget ini, makanya kali ini saya update kembali random post tersebut. Random post ini sudah lama saya dapatkan dari blogger senior Abu Farhan (Tanks Bang...., sukses dan tetap berkarya selalu...)
Pada update kali ini, saya sedikit merubah tampilan widget random post tersebut, biar tampil beda, saya yakin sobat blogger suka. Silahkan anda LIHAT DEMO.

Bila anda berminat, silahkan ikuti langkah - langkah dibawah ini :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#noerlist {
width:300px;
height:400px;
display:block;
position:relative;
overflow:hidden;
margin-top:10px;
border:1px solid #;
margin:auto;
z-index:1000;
}

#noerlist ul{

overflow:hidden;
list-style-type: none;
padding:0px;
margin:0px;
}


#noerlist li{
float:right;
margin:auto;
width:300px;
height:130px;
border-top:2px solid #ccc;
border-bottom:2px solid #bbb;
background-color:#F4F4F4;
background-repeat:no-repeat;
background-position:center center;
position:relative;
overflow:hidden;
z-index:1100;
}


#noerlist li.bleft{
border-left:2px solid #fff;
}


#noerlist li a{
text-decoration:none;
color:#000;
font-size:14px;
font-weight:normal;
font-style:normal;
text-shadow: 1px 3px 3px #fff;
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
}


#noerlist li .noerlink{
height:50px;
text-decoration:none;
color:#000;
font-size:14px;
font-weight:normal;
font-style:normal;
text-shadow: 1px 3px 3px #fff;
overflow:hidden;
background-color:#eee;
margin-right:0px;
padding:5px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

#noerlist li .postsummary{
display:block;
height:55px;
text-decoration:none;
color:#000;
font-size:12px;
font-weight:normal;
font-style:normal;
line-height:18px;
text-shadow: 1px 3px 3px #fff;
border-top:1px solid #ccc;
overflow:hidden;
padding-top:0px;
padding-left:5px;
padding-bottom:0px;
padding-right:10px;
font-family:Tahoma,Arial,verdana, sans-serif;
}


#noerlist li .postsummary .separator{
display:none;
}


#noerlist li img{
float:left;
margin:5px;
padding:2px;
background:#ffffff;
border:1px solid #bbb;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

#noerlist li:hover img{
float:left;
width:285px;
height:115px;
margin:5px;
padding:2px;
background:#ffffff;
border:1px solid #bbb;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}



#noerlist li .noerdate{
float:left;
overflow:hidden;
font-size:11px;
font-weight:normal;
text-shadow: 0px 1px 0px #000;
text-align:center;
color:#FF8A00;
background-color:;
padding-top:3px;
padding-left:10px;
padding-bottom:3px;
padding-right:10px;
margin-top:-15px;
margin-left:10px;

font-family:Tahoma,Arial,verdana, sans-serif;
}


.noercomment{
float:right;
display:block;
overflow:hidden;
font-size:14px;
font-weight:normal;
text-shadow: 0px 1px 0px #fff;
text-align:center;
color:#FF8A00;
background:transparent url(file:///C:/Users/LIFINA/Pictures/bgcomment%203.png)center no-repeat;
padding-top:10px;
margin-top:-90px;
margin-right:10px;
width:35px;
height:35px;
font-family:Tahoma,Arial,verdana, sans-serif;
z-index:1500;
}
-->
</style>


<script language='JavaScript'>
imgr = new Array();
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 90;
thumbheight = 90;
fntsize = 15;
acolor = "#000000";
aBold = false;
icon = " ";
text = "";
showPostDate = true;
showpostsummary = true;
summarypost = 20;
summaryFontsize = 9;
summaryColor = "#666";
icon2 = " ";
numposts = 20;
home_page = "ULR BLOG ANDA";
limitnoer=5
intervalnoer=4000
</script>


<div id="noerlist">
<script type='text/javascript'>
//<![CDATA[
jQuery(function(){jQuery("ul.noer").simplenoer(limitnoer,intervalnoer).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simplenoer=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push("<li>"+e(this).html()+"</li>")});o=i.length;l.wrap('<div class="noerWrapper" />').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find("> li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write('<ul class="noer">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[o]=d}cmtext=(text!="no")?'<i><font color="'+acolor+'">'+f+" "+text+"</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var xy=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=xy[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'"> '+u+" "+h+" "+t+"</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v='<li><a href="'+p+'" class="recent-link"><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/></a><div class="noerlink"><a href="'+p+'" class="recent-link">'+g+'</a></div><div class="postsummary"><i>'+s+'</i></div><div class="noerdate">'+n+'</div><span class="noercomment">'+cmtext+"</span>";document.write(v);j++}document.write("</ul>")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');//]]></script>
</div>

5. SIMPAN

Selamat mencoba ya...
Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Judul: Cara membuat random post dengan efek slide; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• Cara buat menu drop down bubbleKoleksi baru lagi cara buat menu drop down, dan menu ini memiliki tampilan yang berbeda dengan menu drop down yang lain. Menu drop down ini mengunakan efek bubble y ... readmore
• CSS CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampi ... readmore
• Cara buat gallery dengan efek hover zoomingTambah lagi koleksi cara buat gallery. Berbeda dengan yang lalu, anda bisa lihat DISINI. Gallery yang ini lebih menarik dan cara kerjanya juga lebih enak dipandang. ... readmore
• Cara hanya menampilkan judul posting saja pada halaman depan blogUpdate kembali trik cara hanya menampilkan judul postingnya saja pada halaman depan atau home page. Mengingat cara ini memang sangat efisien dan sangat menghemat te ... readmore
• Cara membuat efek membesar pada gambarMemberikan efek membesar pada gambar adalah salah satu cara menjadikan web atau blog tampil menarik. Biasanya digunakan pada web atau blog yang banyak menampilkan g ... readmore