Box Personalizada Com Postagens Aleatórias

Nesta postagem compartilho com vocês mais está box personalizável com postagens aleatórias. Eu fiz uma adaptação neste código. Na verdade esta era uma box de curtir fanpage no facebook, mas, modifiquei, coloquei nela postagens aleatórias do blog e mudei o plano de fundo para black. No decorrer deste post vou mostrar como modifica o plano de fundo.

Você pode ver esse código em funcionamento aqui no site mesmo. Enfim!

Para colocar em seu blog

Entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código:

<script type="text/javascript" src="https://sites.google.com/site/dicashotblogger/home/javascriptdicashot/DicasHot.js"></script> <script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#mbsocial").show("slow");else $("#mbsocial").hide("slow");});function closeMBsocial(){$('#mbsocial').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script> 
<style> #mbsocial{background:#343434;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;-moz-box-shadow:inset 0 0 3px #333;-webkit-box-shadow:inset 0 0 3px #333;box-shadow:inner 0 0 3px #333;padding:12px 14px 12px 14px;width:450px;position:fixed;bottom:13px;right:2px;display:none;z-index:3;height:180px;} .getmore a{display: inline-block;font-weight: large;text-decoration: none;font-size:29px;color:#333!important; float:right;} .getmore a:visited{ color:#ddd;}</style>  
 <div style="display: none;" id="mbsocial">

<a style="position:absolute;top:3px;right:20px;color:#555;font-size:15px;font-weight:bold;" href="javascript:void(0);" onclick="return closeMBsocial();">X</a>
<span style="font-family: Verdana; font-size: 5px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;font-weight:bold;color:#555;"></span>
 <a>

<a href="http://dicashot.blogspot.com.br/2014/05/box-personalizada-com-postagens.html" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" target="_blank"><img height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM3ugrHgKfm25uHcbeT-6pC1JFGowcRdFnLJ5eKVdloU7ltrtlp0X1CdlBYsycCNSG_PI8KxtbRJ57Dn7Lyc08YKVv_U0qTNoVeDnCqilXzGApWJcADZ9jEG5TyLA2wIuFAk4hOzH6wF4/s320/Logo+-+DicasHot.png" width="20" /></a><span style="color: white; font-family: Trebuchet MS, sans-serif; font-size: large;">OLHA SÓ ESTA POSTAGEM:</span>
<style>
#random-posts img{float:left;margin-right:30px;
width:140px;height:120px;background-color:#F5F5F5;padding: 0px;}
ul#random-posts {list-style-type: none;}
</style>

<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=1;
var rdp_snippet_length=50;
var rdp_info='yes';
var rdp_comment='comentários';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.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 i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="http://lh5.googleusercontent.com/-ezutlQ7QGEs/AAAAAAAAAAI/AAAAAAAAAAo/3FWIzrTf_qU/photo.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}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>
</a></div>

Para modificar a cor do plano de fundo do Gadget, basta substituir a parte destacada de Azul pelo código da cor que você quer.

Tendo colado o código, basta salvar e pronto!!