Widget Random Post Windows 8 Style (Untuk Blogger)

Widget Blogger yang kali ini mau gw share namanya adalah "Random Post (Windows 8 Style)", keren kan, gw tuh yang kasih nama, walau yang buat orang lain :0. Widget ini berfungsi untuk menampilkan postingan-postingan acak yang kalian buat di blog kalian, selain itu, tampilan dari widget ini juga BAGUS BANGET.

Gambar widgetnya :

Ini kode HTML/JAVASRIPTNYA :


<style type="text/css">
#random-posts li{width:125px;height:150px;margin-right:12px;float:left;list-style:none;position:relative}
#random-posts li:last-child{margin-right:0}
#random-posts li img{width:125px;height:150px}
#random-posts li .isinyako{position:absolute;width:250px;top:-150px;z-index:2;background-color:#F0F0F0;padding:5px;font-size:90%;border-bottom:2px solid black;transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;visibility:hidden;opacity:0}
#random-posts li:last-child .isinyako{right:0}
#random-posts li:hover .isinyako{top:-40px;opacity:1;visibility:visible}
.isinyako span{font-size:90%;color:#B30B0B}
.isinyako p{font-size:90%;}
</style>
<span class="glap">
<ul id="random-posts">
<script type="text/javaScript">
var rdp_numposts = 9;
var rdp_snippet_length = 150;
var rdp_info = 'yes';
var rdp_comment = 'Comments';
var rdp_disable = 'Turn off comments';
var rdp_current = [];
var rdp_total_posts = 0;
var rdp_current = new Array(rdp_numposts);

function totalposts(a){rdp_total_posts=a.feed.openSearch$totalResults.$t}document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts"><\/script>');function getvalue(){for(var b=0;b<rdp_numposts;b++){var d=false;var c=get_random();for(var a=0;a<rdp_current.length;a++){if(rdp_current[a]==c){d=true;break}}if(d){b--}else{rdp_current[b]=c}}}function get_random(){var a=1+Math.round(Math.random()*(rdp_total_posts-1));return a};
</script>

<script type="text/javaScript">
function random_posts(n){a=location.href;y=a.indexOf("?m=0");for(var f=0;f<rdp_numposts;f++){var l=n.feed.entry[f];var m=l.title.$t;if("content" in l){var o=l.content.$t}else{if("summary" in l){var o=l.summary.$t}else{var o=""}}o=o.replace(/<[^>]*>/g,"");if(o.length<rdp_snippet_length){var k=o}else{o=o.substring(0,rdp_snippet_length);var b=o.lastIndexOf(" ");k=o.substring(0,b)+"&#133;"}for(var e=0;e<l.link.length;e++){if("thr$total" in l){var h=l.thr$total.$t+" "+rdp_comment}else{h=rdp_disable}if(l.link[e].rel=="alternate"){var d=l.link[e].href;if(y!=-1){d=d+"?m=0"}var g=l.published.$t;if("media$thumbnail" in l){var c=l.media$thumbnail.url}else{c="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqPStasigjGvIaneWdkbtEGpdKy5ZdVqPX2cKPpbGImIVRmUx32lFQW5l_ZwX8PS7BPoofM27wfHA-9Hh1-hf1JPfFzURMjYSY8MgxcFwqmEOeY8Rr87o2nhKRJA3xgcGSYNV6FxgqlqE/s1600/no_image.jpg"}}}document.write("<li>");document.write('<a href="'+d+'" rel="nofollow"><img alt="'+m+'" src="'+c+'"/></a>');document.write('<div class="isinyako"><h5>'+m+"</h5>");if(rdp_info=="yes"){document.write("<span>"+g.substring(8,10)+"/"+g.substring(5,7)+"/"+g.substring(0,4)+" - "+h+"</span>")}document.write("<p>"+k+"</p></div>");document.write('<div style="clear:both"></div></li>')}}getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts"><\/script>')};
</script>
</ul></span>
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b+"-c");d[a].width=b;d[a].height=b}}resizeThumb("random-posts",120);
//]]></script> <script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
if(!$.browser.msie) $(".glap ul li").hover(function() {$(this).siblings().stop().fadeTo(400,0.4);},
function() { $(this).siblings().stop().fadeTo(400,1); });
});
//]]>
</script>




<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-510b6e31459622a1"></script>
<script type='text/javascript'>
document.doAT = function(cl)
{
        var myclass = new RegExp('hentry');
        var myTitleContainer = new RegExp('post-title');
        var myPostContent = new RegExp('post-footer');
        var elem = this.getElementsByTagName('div');
        for (var i = 0; i < elem.length; i++)
        {
            var classes = elem[i].className;
            if (myclass.test(classes))
            {                var container = elem[i];
                for (var b = 0; b < container.childNodes.length; b++)
                {
                    var item = container.childNodes[b].className;
                    if (myTitleContainer.test(item))
                    {
                        var link = container.childNodes[b].getElementsByTagName('a');
                        if (typeof(link[0]) != 'undefined')
                        {
                            var url = link[0].href;
                            var title = link[0].innerHTML;
                        }
                        else
                        {
                            var url = document.url;
                            var title =  container.childNodes[b].innerHTML;
                        }
                        if (typeof(url) == 'undefined'|| url == 'undefined' ){
                            url = window.location.href;
                        }
                    var singleq = new RegExp("'", 'g');
                    var doubleq = new RegExp('"', 'g');                                                                                                                                                                                                                       
                    title = title.replace(singleq, '&#39;', 'gi');
                    title = title.replace(doubleq, '&#34;', 'gi');

                    }
                    if (myPostContent.test(item))
                    {
                        var footer = container.childNodes[b];
                    }
                }
               
                var addthis_tool_flag = true;
                var addthis_class = new RegExp('addthis_toolbox');
                var div_tag = this.getElementsByTagName('div');
                for (var j = 0; j < div_tag.length; j++)
                {
                        var div_classes = div_tag[j].className;
                        if (addthis_class.test(div_classes))
                        {
                            if(div_tag[j].getAttribute("addthis:url") == encodeURI(url))
                            {                               
                                addthis_tool_flag = false;
                            }   
                        }
                }                if(addthis_tool_flag)
                {
                    var n = document.createElement('div');
                    var at = "<div class='addthis_toolbox addthis_default_style ' addthis:title='"+title+"' addthis:url='"+encodeURI(url)+"'   > <a class='addthis_button_facebook_like' fb:like:layout='button_count'></a> <a class='addthis_button_tweet'></a> <a class='addthis_button_pinterest_pinit'></a> <a class='addthis_counter addthis_pill_style'></a> </div> ";
                    n.innerHTML = at;
                    container.insertBefore(n , footer);
                }   
            }
        }
    return true;
};

document.doAT('hentry');
</script>




Kalau agan masih blogger pemula, ini dia, cara menaruh widget di blogger:

1.Masuk / Login ke "www.Blogger.com'

2.Masuk ke "Tata Letak"

3.Pilih "Tambah Gadget"

4.Lalu pilih "HTML/JAVASCRIPT

          


5.Setelah itu Copy pastekan kode merah yang diatas tadi di 'HTML/JAVASCRIPT''


6.Klik Simpan, dan selesai :)