Kumpulan Widget Random Post Animasi

Postingan kali ini saya akan share tentang Kumpulan Widget Random Post Animasi. Random post secara sederhana dapat di artikan sebagai kumpul...

Postingan kali ini saya akan share tentang Kumpulan Widget Random Post Animasi. Random post secara sederhana dapat di artikan sebagai kumpulan postingan yang di acak. Iya lebih tepatnya, widget ini akan menampilkan judul postingan anda secara acak. Nah, kelebihan fitur beberapa widget ini adalah tampilannya yang dinamis dan didukung oleh efek animasi. Secara otomatis widget ini akan bergerak dan postingan akan tampil secara bergantian. Baca juga artikel terkait lainnya:

Cara Menerapkan Random Post di Blog 

1. Login ke blog anda

2. Klik Tata letak >> Tambah Gadget >> HTML/JavaScript>>

3. Silahkan atur posisi widget

4. Klik simpan

[<center><div id="headerbox">Featured Posts</div><div id="featuredpostside"></div><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script><script src="http://files.allbloggertricks.com/Scripts/abt-sidebar-slider.js" type="text/javascript"></script><script type='text/javascript'>//<![CDATA[FeaturedPostSide({blogURL:"http://www.iqbalpajatapuih.com",MaxPost:8,idcontaint:"#featuredpostside",ImageSize:300,interval:5000,autoplay:true,tagName:false});//]]></script><link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'/><style scoped="" type="text/css">/*Made by AllBloggerTricks.com with lot of hardwork please keep the comment intact*/ul.abt-sidebar-slider * { -moz-box-sizing: border-box;}ul.abt-sidebar-slider { font: 11px Verdana,Geneva,sans-serif;}ul.abt-sidebar-slider, ul.abt-sidebar-slider li { list-style: none outside none; margin: 0; padding: 0; position: relative;}ul.abt-sidebar-slider { height: 500px; width: 100%;}ul.abt-sidebar-slider li { display: none; float: left; height: 24.5%; overflow: hidden; padding: 0; position: absolute; width: 100%;}ul.abt-sidebar-slider li:nth-child(1), ul.abt-sidebar-slider li:nth-child(2), ul.abt-sidebar-slider li:nth-child(3), ul.abt-sidebar-slider li:nth-child(4) { display: block;}ul.abt-sidebar-slider li:nth-child(2) { left: 0; top: 50%;}ul.abt-sidebar-slider img { border: 0 none; height: 100%; width: 100%;}ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider li { transition: all 0.4s ease-in-out 0s;}ul.abt-sidebar-slider li:nth-child(4) { left: 0; top: 75%; width: 100%;}ul.abt-sidebar-slider li:nth-child(3) { left: 0; top: 25%;}ul.abt-sidebar-slider .overlayx { background-color: rgba(0, 0, 0, 0.5); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 2;}ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider img { border: 4px solid #2E8DCE; border-radius: 3px 3px 3px 3px;}ul.abt-sidebar-slider .overlayx:hover { opacity: 0.1;}ul.abt-sidebar-slider h4 { color: white; font-family: Oswald; font-size: 25px; font-weight: 100; line-height: 1.5em; margin: 0; padding: 0 10px; position: absolute; top: 25px; width: 100%; z-index: 2;}ul.abt-sidebar-slider .label_text { bottom: 10px; color: white; font-size: 90%; left: 10px; position: absolute; z-index: 2;}ul.abt-sidebar-slider li:nth-child(2) .autname, ul.abt-sidebar-slider li:nth-child(3) .autname { display: none;}.buttons { margin: 5px 0 0;}.buttons a { display: inline-block; height: 25px; position: relative; text-indent: -9999px; width: 15px;}.buttons a:before { border-color: transparent #535353 transparent transparent; border-style: solid; border-width: 8px 7px; content: ""; height: 0; left: 50%; margin-left: -10px; margin-top: -8px; position: absolute; top: 50%; width: 0;}.buttons a.nextx:before { border-color: transparent transparent transparent #535353; margin-left: -3px;}.date { background: none repeat scroll 0 0 rgba(32, 122, 161, 0.84); bottom: 93px; padding: 8px; position: relative; right: 6px;}#headerbox { background: #8FB93D; font-family: Oswald; padding: 4px;}</style></center>]

[<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/><div id="slider-rotator" class="slider-rotator loading"></div><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script><script type="text/javascript">makeSlider({ url: "http://www.iqbalpajatapuih.com" // Add your blog URL});</script>]

    [<div style="margin-bottom: 15px;">
    <style type="text/css">
    #rp_plus_img{height:287px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
    #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:70px;padding:1px;list-style:none;}
    #rp_plus_img a{color:#3366ff;}
    #rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
    #rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
    #rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>
    <script type="text/javascript">
    var speed = 400;
    var pause = 3500;
    $(document).ready(function(){
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
    });
    </script>
    <ul id="rp_plus_img">
    <script style="text/javascript">
    var numposts = 20;
    var numchars = 60;
    </script>
    <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
    </ul>
    </div>]
Demikianlah postingan saya tentang Kumpulan Widget Random Post Animasi. Semoga beberapa widget di atas dapat membuat tampilan blog anda lebih keren.