Organização e economia de espaço é tudo em nosso blog. Um bom widget a se instalar é esse, de menu em abas onde se instala os posts populares, os útimos posts, os últimos comentários e os marcadores.
Da um puquinho de trabalho e é necessário ter um sidebar mais largo, de pelo menos 380px para que fique bem estruturado e não embole os títulos dos widgets.
Clique no botão "Editar modelo" e depois nas teclas Ctrl e F. Ao abrir a janela, procure pelo seguinte trecho.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
aBold = true;
summaryPost = 90;
summaryTitle = 25;
numpostsf = 8;
numposts3 = 7;
numposts1 = 6;
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showhomeposts1(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
if (numposts1 <= json.feed.entry.length) {
maxpost = numposts1;
}
else
{
maxpost=json.feed.entry.length;
}
for (var i = 0; i < maxpost; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
if (i==0) {
var trtd = '<div class="grid-box"><div class="hover_play"><a href="'+posturl+'"><img src="'+img[i]+'" alt=""></img></a></div><h2 class="big_title"><a href="'+posturl+'" title="">'+posttitle+'</a></h2><span class="block-metas">'+daystr+' <a href="#" title="">- '+pcm+' Comments</a></span><p>'+removeHtmlTag(postcontent,summaryPost)+'</p></div>';
document.write(trtd);
}
else{
var trtd = '<div class="showthis"><div class="grid-box"><div class="grid-image"><a class="hover_play_small" href="'+posturl+'" title=" "><img src="'+img[i]+'" alt=" "></img></a></div><h2><a href="'+posturl+'" title="">'+posttitle+'</a></h2> </div></div>';
document.write(trtd);
}
j++;
}
}
function showrecentposts1(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
if (numposts1 <= json.feed.entry.length) {
maxpost = numposts1;
}
else
{
maxpost=json.feed.entry.length;
}
document.write('<ul class="slides">');
for (var i = 0; i < maxpost; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li> <a href="'+posturl+'"><img src="'+img[i]+'"/></a> <h2 class="entry-title"><a href="'+posturl+'">'+posttitle+'</a></h2> </li>';
document.write(trtd);
j++;
}
document.write('</ul>');
}
function showrecentposts2(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
if (numposts3 <= json.feed.entry.length) {
maxpost = numposts3;
}
else
{
maxpost=json.feed.entry.length;
}
for (var i = 0; i < maxpost; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li><a href="'+posturl+'">'+posttitle+'</a></li>';
document.write(trtd);
j++;
}
}
var classicMode = false ;
var summary = 20;
var indent = 3;
function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')}
function getSummaryLikeWP(id) {
return document.getElementById(id).innerHTML.split(/<!--\s*more\s*-->/)[0];
}
function getSummaryImproved(post,max){
var re = /<.*?>/gi
var re2 = /<br.*?>/gi
var re3 = /(<\/{1}p>)|(<\/{1}div>)/gi
var re4 = /(<style.*?\/{1}style>)|(<script.*?\/{1}script>)|(<table.*?\/{1}table>)|(<form.*?\/{1}form>)|(<code.*?\/{1}code>)|(<pre.*?\/{1}pre>)/gi
post = post.replace(re4,'')
post = post.replace(re3,'<br /> ').split(re2)
for(var i=0; i<post.length; i++){
post[i] = post[i].replace(re,'');
}
var post2 = new Array();
for(var i in post) {
//if(post[i]!='' && post[i]!=' ' && post[i] != '\n') post2.push(post[i]);
if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;
}
var s = "";
var indentBlank = "";
for(var i=0;i<indent;i++){
indentBlank += " ";
}
if(post2.join('<br/>').split(' ').length < max-1 ){
s = post2.join(indentBlank +' <br/>');
} else {
var i = 0;
while(s.split(' ').length < max){
s += indentBlank + ' ' + post2[i]+'<br/>';
i++;
}
}
return s;
}
function createSummaryAndThumb(pID,title,url,date,comment){
var posturl= url;
var title=title;
var date =date;
var comment = comment;
var div = document.getElementById(pID);
var content = div.innerHTML;
if (/<!--\s*more\s*-->/.test(content)) {
div.innerHTML = getSummaryLikeWP(pID);
div.style.display = "block";
}
else {
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary;
if(img.length>=1) {
imgtag = '<a href="'+posturl+'"><img src="'+img[0].src+'"></a>';
}
var summary1 = '<div class="article-thumbnail">'+imgtag+'</div> <div class="article-content"><div class="article-excerpt"> <p>'+stripHtmlTags(content,summary)+'... </p><div class="read-more"><a class="read-more-button" href="'+posturl+'">Read More</a></div></div> </div>';
div.innerHTML = summary1;
div.style.display = "block";
}
}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
/*
* Superfish v1.4.8 - jQuery menu widget
* Copyright (c) 2008 Joel Birch
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
*/
;(function($){
$.fn.superfish = function(op){
var sf = $.fn.superfish,
c = sf.c,
$arrow = $(['<span class="',c.arrowClass,'"> »</span>'].join('')),
over = function(){
var $$ = $(this), menu = getMenu($$);
clearTimeout(menu.sfTimer);
$$.showSuperfishUl().siblings().hideSuperfishUl();
},
out = function(){
var $$ = $(this), menu = getMenu($$), o = sf.op;
clearTimeout(menu.sfTimer);
menu.sfTimer=setTimeout(function(){
o.retainPath=($.inArray($$[0],o.$path)>-1);
$$.hideSuperfishUl();
if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
},o.delay);
},
getMenu = function($menu){
var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
sf.op = sf.o[menu.serial];
return menu;
},
addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };
return this.each(function() {
var s = this.serial = sf.o.length;
var o = $.extend({},sf.defaults,op);
o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
$(this).addClass([o.hoverClass,c.bcClass].join(' '))
.filter('li:has(ul)').removeClass(o.pathClass);
});
sf.o[s] = sf.op = o;
$('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
if (o.autoArrows) addArrow( $('>a:first-child',this) );
})
.not('.'+c.bcClass)
.hideSuperfishUl();
var $a = $('a',this);
$a.each(function(i){
var $li = $a.eq(i).parents('li');
$a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
});
o.onInit.call(this);
}).each(function() {
var menuClasses = [c.menuClass];
if (sf.op.dropShadows && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
$(this).addClass(menuClasses.join(' '));
});
};
var sf = $.fn.superfish;
sf.o = [];
sf.op = {};
sf.IE7fix = function(){
var o = sf.op;
if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
this.toggleClass(sf.c.shadowClass+'-off');
};
sf.c = {
bcClass : 'sf-breadcrumb',
menuClass : 'sf-js-enabled',
anchorClass : 'sf-with-ul',
arrowClass : 'sf-sub-indicator',
shadowClass : 'sf-shadow'
};
sf.defaults = {
hoverClass : 'sfHover',
pathClass : 'overideThisToUse',
pathLevels : 1,
delay : 800,
animation : {opacity:'show'},
speed : 'normal',
autoArrows : true,
dropShadows : false,
disableHI : false, // true disables hoverIntent detection
onInit : function(){}, // callback functions
onBeforeShow: function(){},
onShow : function(){},
onHide : function(){}
};
$.fn.extend({
hideSuperfishUl : function(){
var o = sf.op,
not = (o.retainPath===true) ? o.$path : '';
o.retainPath = false;
var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
.find('>ul').hide().css('visibility','hidden');
o.onHide.call($ul);
return this;
},
showSuperfishUl : function(){
var o = sf.op,
sh = sf.c.shadowClass+'-off',
$ul = this.addClass(o.hoverClass)
.find('>ul:hidden').css('visibility','visible');
sf.IE7fix.call($ul);
o.onBeforeShow.call($ul);
$ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
return this;
}
});
})(jQuery);
jQuery(document).ready(function() {
jQuery('ul.nav').superfish();
jQuery('ul.topnav').superfish();
});
/* Menu */
jQuery(document).ready(function() {
jQuery('ul.nav').superfish();
jQuery('ul.topnav').superfish();
});
/* Tabs */
jQuery(document).ready(function(){
// UL = .tabs
// Tab contents = .inside
var tag_cloud_class = '#tag-cloud';
//Fix for tag clouds - unexpected height before .hide()
var tag_cloud_height = jQuery('#tag-cloud').height();
jQuery('.inside ul li:last-child').css('border-bottom','1px') // remove last border-bottom from list in tab conten
jQuery('.tabs').each(function(){
jQuery(this).children('li').children('a:first').addClass('selected'); // Add .selected class to first tab on load
});
jQuery('.inside > *').hide();
jQuery('.inside > *:first-child').show();
jQuery('.tabs li a').click(function(evt){ // Init Click funtion on Tabs
var clicked_tab_ref = jQuery(this).attr('href'); // Strore Href value
jQuery(this).parent().parent().children('li').children('a').removeClass('selected'); //Remove selected from all tabs
jQuery(this).addClass('selected');
jQuery(this).parent().parent().parent().children('.inside').children('*').hide();
/*
if(clicked_tab_ref === tag_cloud_class) // Initiate tab fix (+20 for padding fix)
{
clicked_tab_ref_height = tag_cloud_height + 20;
}
else // Other height calculations
{
clicked_tab_ref_height = jQuery('.inside ' + clicked_tab_ref).height();
}
*/
//jQuery('.inside').stop().animate({
// height: clicked_tab_ref_height
// },400,"linear",function(){
//Callback after new tab content's height animation
jQuery('.inside ' + clicked_tab_ref).fadeIn(500);
// })
evt.preventDefault();
})
})
//]]>
</script>
<div id='tabber'>
<ul class='tabs'>
<li><a class='selected' href='#popular-posts'>Popular</a></li>
<li><a href='#recent-posts'>Recente</a></li>
<li><a href='#recent-comments'>Comentário</a></li>
<li><a class='border-right-none' href='#tag-cloud'>Tags</a></li>
</ul> <!--end .tabs-->
<div class='clear'/>
<div class='inside'>
<div id='popular-posts' style='display: block;'>
<ul>
<b:section id='tab_pop'>
<b:widget id='PopularPosts11' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail-center'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</ul>
</div> <!--end #popular-posts-->
<div id='recent-posts' style='display: none;'>
<ul>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default/?max-results="+numpostsf+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</ul>
</ul>
</div> <!--end #recent-posts-->
<div id='recent-comments' style='display: none;'>
<ul>
<!-- Script Widget recent comments with avatar by http://www.way2blogging.org -->
<script type='text/javascript'>
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 60,
roundAvatar = true,
characters = 40,
showMorelink = false,
moreLinktext = "More",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script src='http://spicemag.googlecode.com/svn/trunk/spicemag/spicytricks_comments.js' type='text/javascript'/>
<script src='/feeds/comments/default?alt=json&callback=spicytricks_recent_comments&max-results=5' type='text/javascript'/>
</ul>
</div> <!-- end #recent-comments-->
<div id='tag-cloud' style='display: none;'>
<b:section id='tagsd'>
<b:widget id='Label2' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:loop>
</b:includable>
</b:widget>
</b:section>
</div> <!--end #tag-cloud-->
<div class='clear' style='display: none;'/>
</div> <!--end .inside -->
<div class='clear'/>
</div> <!-- /tabber-->
<div class='widget rece_cat_spicytricks'>
<div class='widget-title'><script type='text/javascript'>
document.write(" <h3>"+side_cat1_title+"</h3> ");
</script></div>
<ul class='widget-content'>
<script type='text/javaScript'>
document.write("<script src=\"/feeds/posts/default/-/"+side_cat1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</ul>
<div class='clear'/>
</div>
<div class='widget rece_cat_spicytricks'>
<div class='widget-title'><script type='text/javascript'>
document.write(" <h3>"+side_cat2_title+"</h3> ");
</script></div>
<ul class='widget-content'>
<script type='text/javaScript'>
document.write("<script src=\"/feeds/posts/default/-/"+side_cat2+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</ul>
<div class='clear'/>
</div>
Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.
