RANDOM POST EFEK MODAL JQUERY UI

DEMO

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 widget Professional Blogger 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.

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

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

  $(function() {

    $( "#dialog" ).dialog({

      autoOpen: false,

      show: {

        effect: "blind",

        duration: 1000

      },

      hide: {

        effect: "explode",

        duration: 1000

      }

    });



    $( "#opener" ).click(function() {

      $( "#dialog" ).dialog(
"open" );

    });

  });

  </script>



<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://1stproblogger.blogspot.com/feeds/posts/summary?max-results=12&amp;orderby=published&amp;alt=json-in-script&amp;callback=bprecentpostswiththumbnails'></script>

</div>

<button id="opener"><i class="fa
fa-random"></i> RANDOM POST</button>

Anda cukup mengganti http://1stproblog.blogspot.com/ menjadi situs/url blog anda.

Demikian sedikit widget blog metro ui kali ini, baca juga menu metro ui modal dialog dan semoga bermanfaat.

Jika menemukan kesalahan atau pertanyaan di atas yang belum jelas dapat memberikan komentar dibawah ini.