Random Post Efek Modal Jquery UI - Random post atau orang sering menyebutnya recent post adalah widget unik yang berfungsi untuk menampilkan artikel maupun postingan yang sebelumnya sudah kita publikasikan. Pada tips blog metro ui style
kali ini saya akan memberikan sedikit contoh random post dengan blind
dan explode efek modal jquery ui, untuk contoh efek - efek jquery ui
lainnya baca juga contoh efek -efek jquery ui.
Komponen - komponennya sebagai berikut :CSS
<style scoped="scoped" type="text/css">
#dialog {background:#fff;color:#fff;width:300px;height:80px}
.ui-dialog-title{color:#fff}
#opener{position:relative;background:#2980b9;color:#fff;border:3px solid #2980b9;padding:6px 6px}
i.fa-random{color:#fff;font-size:16px}
</style>
#dialog {background:#fff;color:#fff;width:300px;height:80px}
.ui-dialog-title{color:#fff}
#opener{position:relative;background:#2980b9;color:#fff;border:3px solid #2980b9;padding:6px 6px}
i.fa-random{color:#fff;font-size:16px}
</style>
JQUERY UI
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
JS
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
HTML
<div id="dialog" title="RANDOM POST">
<div id='bp_recent'></div>
<script style='text/javascript' src='http://bloggergadgets.googlecode.com/files/recentposts_orig.js'></script>
<script style='text/javascript'>
var numberOfPosts = 12;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 70;
var imgFloat = 'left';
var myMargin = 9;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://ngeblogbarengbareng.blogspot.com/feeds/posts/summary?max-results=12&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>
</div>
<button id="opener"><i class="fa fa-random"></i> RANDOM POST</button>
<div id='bp_recent'></div>
<script style='text/javascript' src='http://bloggergadgets.googlecode.com/files/recentposts_orig.js'></script>
<script style='text/javascript'>
var numberOfPosts = 12;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 70;
var imgFloat = 'left';
var myMargin = 9;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://ngeblogbarengbareng.blogspot.com/feeds/posts/summary?max-results=12&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>
</div>
<button id="opener"><i class="fa fa-random"></i> RANDOM POST</button>
Anda cukup mengganti http://ngeblogbarengbareng.blogspot.com dengan url blog anda
