Meu Mundo It

SLIDE POSTS POPULARES CAROUSEL SLIDER 3

2017-12-17T18:42:00.002-08:00

Clique em Adicionar um Gadget

Ao abrir, clique em HTML/Javascript

Cole então o próximo código.

Agora arraste o widget para baixo das postagens populares.

Crédito: AbuFarhan

SLIDE CAROUSEL COM AS POSTAGENS RECENTES DO BLOG 2

2017-12-16T18:39:00.000-08:00

DEMO

Um outro modelo de slide carousel que mostra, automaticamente suas postagnes mais recentes. Pode ficar interessante em seu blog, dar uma toque a mais.

Vá até o modelo de seu blog e clique em Personalizar

Cole o código abaixo no local indicado. Salve.

/*Carousel---------------------------------------------------------*/
#carousel{
width:99%;
height:330px;
border: 4px groove #ccc;
position:relative;
display:block;
background:#fff;
margin:40px auto;
padding:0 auto;

}
#carousel .container{
background: #fff;
position:absolute;
left:10px;
width:98%;
height:330px;
overflow:hidden
}
#carousel #previous_button{
position:absolute;
width:35px;
height:330px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4LfAFWyAmdXNdTfhppEjYNZglOPugO-cdGvzTNMs1nj153w1UWTlCn_bRWY3nolXMydSUludKIKLuidHjFrDZso3_ADadq8Yr1wT3Yw-v45mWVG1oEyqLZCWJd9FomHFQwlbpHqoBZTo/s1600/prev.png) center;
z-index:100;
cursor:pointer;
}
#carousel #next_button{
position:absolute;
right:0;
width:35px;
height:330px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoa1EyOQiV2_L4kcAk9bq3nrKEZ0vWRFgrGoTfQeUMAeZ5WdzG4wRF1-x6EvZuRNLqZq_Er9tB-lcZpJOaFDmLzUGHtRnEKbp7YdECEm9JAP6d3Pg6rs4yJ37wAIn_coY9JiUTwNJ4RcU/s1600/next.png) center;z-index:100;
cursor:pointer;
}
#carousel #next_button:hover,#carousel #previous_button:hover,#carousel ul li:hover{
filter:alpha(opacity=80);opacity:.8
}
#carousel ul{
width:100000px;position:relative;margin-top:10px
}
#carousel ul li{
background:#404040 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnHC1C-4dSh7q522EJOwzyuqel8icfuRfLVNwRJvekT1rfDjsG8WrtRg83ZOLuW89xH3U8AsqBKT9OhhzpHvQf2nW5jVBGSqRT67DGOUtutrlw0QFmmn-SaXowlk_dvN2a5DIP-kAtJw0/s1600/sliderbg.png) repeat-x top;
display:inline;
float:left;
text-align:center;
font-weight:700;
line-height:1.2em;
width:200px;
height:300px;
margin:0 1px 20px 12px;padding:6px
}
#carousel ul li a.slider_title{
color:#ccc;
display:block;
margin-top:5px;
text-shadow:0 1px 1px #000
}
#carousel ul li a.slider_title:hover{
color:#f7bc2f
}

Procure agora por: </head>

Acima dele cole o código abaixo:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:false,auto:null,speed:200,easing:null,vertical:false,circular:true,visible:3,start:0,scroll:1,beforeStart:null,afterEnd:null},o||{});return this.each(function(){var running=false,animCss=o.vertical?"top":"left",sizeCss=o.vertical?"height":"width";var div=$(this),ul=$("ul:first",div),tLi=$(".car",ul),tl=tLi.size(),v=o.visible;if(o.circular){ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());o.start+=v}var li=$(".car",ul),itemLength=li.size(),curr=o.start;div.css("visibility","visible");li.css({overflow:"hidden",float:o.vertical?"none":"left"});ul.css({padding:"0",position:"relative","list-style-type":"none","z-index":"1"});div.css({overflow:"hidden","z-index":"2"});var liSize=o.vertical?height(li):width(li);var ulSize=liSize*itemLength;var divSize=liSize*v;li.css({width:li.width()});ul.css(sizeCss,ulSize+"px").css(animCss,-(curr*liSize));div.css(sizeCss,divSize+"px");if(o.btnPrev)$(o.btnPrev).click(function(){return go(curr-o.scroll)});if(o.btnNext)$(o.btnNext).click(function(){return go(curr+o.scroll)});if(o.btnGo)$.each(o.btnGo,function(i,val){$(val).click(function(){return go(o.circular?o.visible+i:i)})});if(o.mouseWheel&&div.mousewheel)div.mousewheel(function(e,d){return d>0?go(curr-o.scroll):go(curr+o.scroll)});if(o.auto)setInterval(function(){go(curr+o.scroll)},o.auto+o.speed);function vis(){return li.slice(curr).slice(0,v)};function go(to){if(!running){if(o.beforeStart)o.beforeStart.call(this,vis());if(o.circular){if(to<=o.start-v-1){ul.css(animCss,-((itemLength-(v*2))*liSize)+"px");curr=to==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll}else if(to>=itemLength-v+1){ul.css(animCss,-((v)*liSize)+"px");curr=to==itemLength-v+1?v+1:v+o.scroll}else curr=to}else{if(to<0||to>itemLength-v)return;else curr=to}running=true;ul.animate(animCss=="left"?{left:-(curr*liSize)}:{top:-(curr*liSize)},o.speed,o.easing,function(){if(o.afterEnd)o.afterEnd.call(this,vis());running=false});if(!o.circular){$(o.btnPrev+","+o.btnNext).removeClass("disabled");$((curr-o.scroll<0&&o.btnPrev)||(curr+o.scroll>itemLength-v&&o.btnNext)||[]).addClass("disabled")}}return false}})};function css(el,prop){return parseInt($.css(el[0],prop))||0};function width(el){return el[0].offsetWidth+css(el,'marginLeft')+css(el,'marginRight')};function height(el){return el[0].offsetHeight+css(el,'marginTop')+css(el,'marginBottom')}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj49fC3aM2_cAKdX_4WxTHx3-rzwjZEXSX-aEy1f8sauZMqlytdWgcL0CQIG1NJzGAEa2CqOxWduqVw0q_DufnENvJ-8AHT_LT94_7zhxqKJdz-yl36GE7hPrKK5JyYiL6841Qr6hBnTGQ/s1600/no-image4.png";showRandomImg=true;aBold=true;summaryPost=200;summaryTitle=20;numposts1=12;numposts2=4;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 showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();document.write('<ul>');for(var i=0;i<numposts1;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;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 class="car"><div class="thumb"><a href="'+posturl+'"><img width="200" height="250" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';document.write(trtd);j++}document.write('</ul>')}function showrecentposts5(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;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;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 trtd='<li id="nav-post-'+i+'" class="ui-tabs-nav-item"><a href="#post-'+i+'"><img width="100" height="69" src="'+img[i]+'"/><span>'+posttitle+'</span></a></li>';document.write(trtd);j++}}function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}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;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;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="maskolis_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;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!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]=''}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h1>'+relatedpoststitle+'</h1>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 10px 10px 0;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="maskolis_img" src="'+thumburl[r]+'"/><br/><div style="">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>

Agora procure por: </header>

E abaixo dele, cole a div para instalar neste local o slide. (se quiser que o slide apareça também nas páginas internas, delete os códigos que estão na cor vermelha.)

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(" <script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {    $(document).ready(function(){
$("#carousel .container").jCarouselLite({
   auto:4000,
   scroll: 1,
   speed: 800,
   visible: 4,
   start: 0,
   circular: true,
   btnPrev: "#previous_button",
   btnNext: "#next_button"
   });
   })})(jQuery)
</script>
</b:if></b:if>

Como colocar slide de novas postagens

2017-12-15T18:38:00.000-08:00

Ola galera, hoje venho mostrar pra vocês como coloquei o meu slide de postagens recentes no blog.

Aqui temos o código usado:

..............................................................................................................................................................

/*INICIO CSS FOTOS*/

.bsrp-gallery {

margin-top:70px;

width:1300px; ==LARGURA DO SLIDE==

float:center; ==POSIÇÃO DO SLIDE==

clear:both;

}

.bsrp-gallery:after {

display: table;

clear: both;

}

.bsrp-gallery .bs-item a {

position: relative;

float:left;

margin: 0 10px 15px 0;

text-decoration:none;

}

.bsrp-gallery .bs-item .ptitle {

background:#000; /*==COR AREA DE TITULO==*/

display: block;

clear: left;

font-family: 'georgia', cursive; ==FONTE DO SLIDE==

font-weight:200;

text-transform:none; /*==TDS LETRAS MAIÚSCULAS - altere se quiser==*/

font-size:10px; /*==TAMANHO DO TITULO==*/

line-height:1.3em;

height:50px;

position: absolute;

bottom:5%;

text-align: center; /*==POSIÇÃO DO TITULO==*/

color:#fff; /*== COR DO TITULO==*/

width:90%;

padding:6px;

word-wrap: break-word;

overflow:hidden;

}

.bsrp-gallery a img {

background: #fff;

float: left;

}

.bsrp-gallery a:hover img {

filter:alpha(opacity=90);

-moz-opacity:0.8;

-khtml-opacity:0.8;

opacity:0.8;

}

/*FIM CSS FOTOS*/

</style>

//byjana

function bsrpGallery(root) {

var entries = root.feed.entry || [];

var html = ['<div class="bsrp-gallery nopin" title="Get this from poderondesign">'];

for (var i = 0; i < entries.length; ++i) {

var post = entries[i];

var postTitle = post.title.$t;

var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNBHKTwZ_GhssSv4kcdcQQxliklpAA1qiF90QXVQk7x208V9ZcECGOwPuqz3FP5lLbdaKgxEeZMv5BjJMnr3KCgwD3ub837RNYra1AXjShsd1Et2PYDgONO1eGVGod1DkzpihQgR7EGIhL/s72-c/default+image.png';

var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');

var links = post.link || [];

for (var j = 0; j < links.length; ++j) {

if (links[j].rel == 'alternate') break;

}

var postUrl = links[j].href;

var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';

var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';

var item = '<a href="' + postUrl + '" title="' + postTitle + '">' + imgTag + pTitle + '</a>';

html.push('<div class="bs-item">', item, '</div>');

}

html.push('</div>');

document.write(html.join(""));

}

hoje = new Date()

numposts =1

var bsrpg_thumbSize = 255;

var bsrpg_showTitle = true;

document.write("<script src=\"AQUI O ENDEREÇO DO SEU BLOG/feeds/posts/default?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>

.................................................................................................................................................................

❥ Vá em Layout > adicionar um Gadget > HTML/ Java Script e cole o código acima dentro dele ( lembre-se de deixar o gadget sem título ). Só altere partes com as especificações em letras maiúsculas ao lado ok ? Depois disso salve as alterações e visualize o blog para ver como ficou. Os slides ficaram como os daqui do blog.Tudo que estiver em azul pode ser alterado. Não mexa no restante do código.

Este código foi encontrado em pesquisas pela net.

Para mostrar direitinho como eu fiz, assista o vídeo! Ah se gostar se inscreva no canal ok?

Se não souber fazer ou não tiver paciência para isso me chama certo? Beijos! S2

CSS Tutorial - Criando um botão flutuante back-to-top (topo da página)

2017-06-30T16:14:00.003-07:00

Olá ^_^, vamos criar um botão flutuante onde o usuário clica nele pra voltar ao topo do blog, mesmo que a página role o botão continua fixo no canto da página, essa mesma dica serve pra você criar um botão de Feedback, Twitter ou o que você imaginar. É bem simples !
Primeiramente o CSS, crie isso:
.botaotopo { display:scroll; position:fixed; bottom:2px; right:2px; }

Entre todas essas propriedades, quero destacar aqui o position:fixed ele é responsável por fixar o botão no canto da página.

Agora criamos um link com a imagem, recomendo inserir esse código logo depois da tag <body>:
<a class="botaotopo" href="#" title="Para o topo !"> <img src="http://ENDEREÇO-DA-IMAGEM-AQUI.gif" border="0" /> </a>

Não esqueça de adicionar a class="botaotopo" no link (como acima), e veja que no lugar do endereço do link foi adicionado apenas um "#" pois esse link não servirá para redirecionar para outra página, apenas para o topo da mesma por isso colocamos apenas esse caractere. Substitua o http://ENDEREÇO-DA-IMAGEM-AQUI.gif pelo endereço da imagem de sua preferência.

Atualização(12/03/10)
Recebi alguns comentários de pessoas que estavam com dificuldades para iserir esse botão em seu blog por não ter muita intimidade com o CSS e/ou HTML, utilize esse outro método, é só inserir apenas esse código que já está com o CSS imbutido no link, isira logo abaixo da tag <body>:
<a style="display:scroll;position:fixed;bottom:2px;right:2px;" href="#" title="Para o topo !"> <img src="http://suaimagemdobotaoaqui.gif" border="0" /> </a>

Redes sociais com efeito hover

2017-06-27T15:06:00.001-07:00

http://www.elainegaspareto.com/2016/08/menu-de-redes-sociais-com-efeito-hover.html

http://fontawesome.io/

Abaixo de <head> coloque esse script:

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css?ver=3.9.2' id='font-awesome-css' media='all' rel='stylesheet' type='text/css'/>

Depois va em modelo... adicionar gadget... e coloque o codigo abaixo:

<center>
<ul class="redessociais">
<a href="LINK DO PERFIL" title="Facebook"><li class="icone"><i class="fa fa-facebook" style="color:#fff"></i></li></a>

<a href="LINK DO PERFIL" title="Google+"><li class="icone"><i class="fa fa-google-plus" style="color:#fff"></i></li></a>

<a href="LINK DO PERFIL" title="Pinterest"><li class="icone"><i class="fa fa-pinterest" style="color:#fff"></i></li></a>

<a href="LINK DO PERFIL" title="Instagram"><li class="icone"><i class="fa fa-instagram" style="color:#fff"></i></li></a>

</ul>
</center>

<style>
li.icone{width: 38px; height: 38px; line-height: 38px; background: #E8657B; text-align: center; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.1); margin: 8px 4px 0 auto; font-size: 26px; font-weight: normal;}

li.icone:hover{background: #000;}

ul.redessociais{margin-top: 5px; margin-left:-2px; padding: 0; list-style: none;}

ul.redessociais li{display: inline-block; padding: 4px;margin-left: 1px;margin-right: 3px;}
</style>

<center>
<ul class="redessociais">
<a href="LINK DO PERFIL" title="Facebook"><li class="icone"><i class="fa fa-facebook" style="color:#fff"></i></li></a>

<a href="LINK DO PERFIL" title="Twitter"><li class="icone"><i class="fa fa-twitter" style="color:#fff"></i></li></a>

<a href="LINK DO PERFIL" title="Skoob"><li class="icone"><i class="fa fa-bookmark-o" style="color:#fff"></i></li></a>

<a href="LINK DO PERFIL" title="Youtube"><li class="icone"><i class="fa fa-youtube-play" style="color:#fff"></i></li></a>

<a href="LINK DO PERFIL" title="Instagram"><li class="icone"><i class="fa fa-instagram" style="color:#fff"></i></li></a>

<a href="LINK DO PERFIL" title="Contato"><li class="icone"><i class="fa fa-envelope-o" style="color:#fff"></i></li></a>

</ul>
</center>

<style>
li.icone{width: 24px; height: 24px; line-height: 24px; background: #ffc63d; text-align: center; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.1); margin: 8px 4px 0 auto; font-size: 20px; font-weight: normal; -webkit-border-radius: 5em; -moz-border-radius: 5em; /** borda redonda **/}

li.icone:hover{background: #777777;}

ul.redessociais{margin-top: 5px; margin-left:-10px; padding: 0; list-style: none;}

ul.redessociais li{display: inline-block; padding: 4px;margin-left: 1px;margin-right: 3px;}
</style>

________________________________________________________________

<center>
<ul class="redessociais">
<a href="https://www.facebook.com/DicasdeLivros" title="Facebook"><li class="icone"><i class="fa fa-facebook" style="color:#fff"></i></li></a>

<a href="https://twitter.com/dlivros" title="Twitter"><li class="icone"><i class="fa fa-twitter" style="color:#fff"></i></li></a>

<a href="https://www.skoob.com.br/usuario/24546" title="Skoob"><li class="icone"><i class="fa fa-bookmark-o" style="color:#fff"></i></li></a>

<a href="https://www.youtube.com/user/elinharegis/videos?view_as=public" title="Youtube"><li class="icone"><i class="fa fa-youtube-play" style="color:#fff"></i></li></a>

<a href="https://www.instagram.com/d.livros/" title="Instagram"><li class="icone"><i class="fa fa-instagram" style="color:#fff"></i></li></a>

<a href="http://dlivros.blogspot.com.br/p/contato.html?zx=f4d661dd97576374" title="Contato"><li class="icone"><i class="fa fa-envelope-o" style="color:#fff"></i></li></a>

</ul>
</center>

<style>
li.icone{width: 24px; height: 24px; line-height: 24px; background: #ffc63d; text-align: center; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.1); margin: 8px 4px 0 auto; font-size: 20px; font-weight: normal; -webkit-border-radius: 5em; -moz-border-radius: 5em; /** borda redonda **/}

li.icone:hover{background: #777777;}

ul.redessociais{margin-top: 5px; margin-left:-10px; padding: 0; list-style: none;}

ul.redessociais li{display: inline-block; padding: 4px;margin-left: 1px;margin-right: 3px;}

</style>

Autor, marcadores e comentários abaixo do Título do Post

2017-06-26T20:33:00.003-07:00

http://sonhoshtml.blogspot.com.br/2015/01/autor-marcadores-e-comentarios-abaixo.html

Autor, marcadores e comentários abaixo do Título do Post

Oiiiiiie coelhinhos *-* Como estão hoje??

Eu não estou tão bem assim... minha cachorrinha morreu anteontem. O nome dela era Lady e tinha 9 anos. Ela sofria com uma doença chamada cinomose e tinha hérnia de disco. A cinomose paralisou as suas patas traseira e por causa disso, ela não podia andar. Ela sofreu muito com essa doença, e o pior, não tinha cura :(

Estou muito triste com o falecimento dela ,mas estou aliviada por ela esta descansando em paz e não esta mas sofrendo! ~

Hoje trago um tuto a pedido de uma leitora do blog, que foi de por os links do Post-footer (autor, marcadores e comentários) abaixo do título do post!

O tutorial é bem complicadinho e requer MUITA atenção, mas tentarei ao máximo explicar bem explicadinho para que você consiga entender facilmente!!! Vamos ao tuto o/

Antes de fazer as modificações, salve um backup do seu blog!

FAÇA O TUTORIAL COM BASTANTE ATENÇÃO E SEM PREÇA!

Primeiro você vai em Layout Postagem no blog Editar e deixe marcado igual a imagem:

E depois, logo abaixo coloque da mesma forma, como mostra a imagem:

Transfira as "opções'' , abaixo onde está escrito " Título da postagem ". Depois Salve!!

Depois vá em seu Editor e procure por:

<div class='post-footer-line post-footer-line-1'>

Você vai achar isso:

Repare que ao descer um pouco você vai encontrar :

<div class='post-footer-line post-footer-line-3'><span class='post-location'>

Selecione desde:

<div class='post-footer-line post-footer-line-3'><span class='post-location'>

Até:

<div class='post-footer-line post-footer-line-1'>

~A imagem está horrível, mas é o exemplo do que terá que selecionar~

E substitua por:

<div class='post-footer-line post-footer-line-1'/>
<div class='post-footer-line post-footer-line-2'>
</div>
<div class='post-footer-line post-footer-line-3'><span class='post-location'>

Ficando assim:

Visualize para ver se deu algum erro! Se não deu erro, continue com o tutorial!

Agora procure por:

<div class='post-header'>

Terá DOIS resultados, iremos modificar o segundo!

Abaixo do código que procuramos, coloque:

<span class='post-comment-link'>

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:post.allowComments'>

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

<data:post.commentLabelFull/>:

</a>
</b:if> </b:if> </b:if> </span> | <span class='post-author vcard'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <b:if cond='data:post.authorProfileUrl'> <span class='fn'> <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'> <data:post.author/> </a> </span> <b:else/> <span class='fn'><data:post.author/></span> </b:if> </b:if> </span> | <span class='post-labels'> <b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> </b:if> </span> <span class='post-icons'>  <b:if cond='data:post.emailPostUrl'> <span class='item-action'> <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'> <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/> </a> </span> </b:if>  <b:include data='post' name='postQuickEdit'/> </span>

Ficando assim:

Visualize e veja se ficou assim:

Se ficou igual a imagem acima, você fez tudo certinho!

Agora para editar os links e centralizá-lo, você vai procurar por:

.post-footer {

Você irá achar ele assim:

.post-footer {
margin: .5em 0;
line-height: 1.6;
}

Substitua por:

.post-header { text-align: center; /*Alinha no centro*/
padding-top: 5px;
font-size: 11px; /*Tamanho da fonte*/
border-bottom: 2px solid #A3A2A2; /*Borda inferior*/}
.post-header a { color: #696969;!important; /*Cor dos links*/}
.post-header a:hover {color: #fff !important; /*Cor dos links ao passar o mouse*/}

Visualize novamente e veja se centralizou. Depois Salve!

Espero que tenham conseguido!!! Qualquer dúvida ou se estiver tendo problemas, deixe nos comentários que tentarei ajudar!! Bjos e até a próxima ♥

Tirei esse tutorial do Blog Sweet of cherry, mas da forma que estava ensinando lá, estava dando erro, então eu tive que simplificar e tirar algumas coisas. Quando usar dê créditos ao Sweet of Cherry ou Sonhos HTML.

Slider Automatico com 2 setas e marcador

2017-06-15T10:47:00.002-07:00

Oi pessoal, como estão?

Fazia tempo que não aparecia por aqui, né?! Os motivos são faculdade + muitas encomendas. Mas voltei trazendo pra vocês um tutorial muito pedido lá no grupo do blog no Facebook, um slider (ou slideshow) nesse estilo:

Esse modelo de slider é AUTOMÁTICO. Isso significa que os posts aparecem nele automaticamente, sem você precisar incluir cada imagem e link. Ótimo, né?! Mas a melhor parte é que você pode escolher apenas um marcador para exibir, por exemplo, apenas os posts com o marcador "Resenhas".

Vamos ao tutorial?
1 - No painel do Blogger vá em Modelo > Editar HTML. Pesquise por ]]></b:skin> e cole ACIMA um dos códigos a seguir (escolher 1 modelo):

/* ---- CAROUSEL ----- */
#carousel{
background-color: transparent;
width: 700px;
height:354px;
margin: 0 auto;
padding: 20px 0px 10px 0px;
position:relative;
border-top: 0px solid #FEE7D4;
border-right: 0px dashed #FEE7D4;
border-left: 0px dashed #FEE7D4;
border-bottom: 0px dashed #FEE7D4;
display:block;
}
#carousel .container{
position:absolute;
left:35px;
margin: 50px 0px 0px 0px;
width: 700px;
height:200px;
overflow:hidden;
border: 0px solid #cccccc;
}
#carousel img {
width: 187px;
height: 187px;
}
#carousel #previous_button{
position:absolute;
margin: 50px 0px 0px 5px;
width:31px;
height:210px;
background: url(https://lh3.googleusercontent.com/-l8_dhVk0Wso/VvNhuEGK2fI/AAAAAAAAEDc/4DpBg2dBrFI2TpzyrqKQIDYk8FRvXww9gCCo/s23-Ic42/SetaEsquerda.png) no-repeat center;
z-index:100;
cursor:pointer;
border-right:0px solid #ccc}
#carousel #previous_button:hover{
background: url(https://lh3.googleusercontent.com/-0oTDcE1pZns/VvNhupaPdzI/AAAAAAAAEDk/czfX0w3LraUXjGNBuhJ8I3TEdn8Ldjf-QCCo/s23-Ic42/SetaEsquerdaHover.png) no-repeat center}
#carousel #next_button{
position:absolute;
right:0;
margin: 50px 5px 0px 0px;
width:31px;
height:210px;
background: url(https://lh3.googleusercontent.com/-VTnP2gpbXX8/VvNhuF5rxwI/AAAAAAAAEDc/MoYqBx7AZJsMRiFv8Az0AlrE3JU3bk6GQCCo/s23-Ic42/SetaDireita.png) no-repeat center;z-index:100;cursor:pointer;border-left:0px solid #ccc}
#carousel #next_button:hover {background: url(https://lh3.googleusercontent.com/-SF-5nNLG408/VvNhuEy8grI/AAAAAAAAEDk/W2wf3Mo1ZXcGvs_Hz5m5IyFdaG0RMS9ygCCo/s23-Ic42/SetaDireitaHover.png) no-repeat center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{
background:transparent url() repeat-x top;
display:inline;
float:left;
text-align:center;
font-size: 15px;
font-family: 'Arial';
font-weight: normal;
line-height:1.2em;
border:0px solid #ccc;
width: 200px;
margin:0 4px 20px 0px;
padding:6px;
}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{
display:none;
margin-top:5px;
text-decoration: none;
}
#carousel ul li a.slider_title:hover{color:#A7725D}
#carousel a img{display:block;background:transparent;margin-top:0; text-decoration: none;}

/* ---- CAROUSEL ----- */
#carousel{
background-color: transparent;
width: 700px;
height: 230px;
margin: 0 auto;
padding: 20px 0px 10px 0px;
position:relative;
border-top: 0px solid #FEE7D4;
border-right: 0px dashed #FEE7D4;
border-left: 0px dashed #FEE7D4;
border-bottom: 0px dashed #FEE7D4;
display:block;
}
#carousel .container{
position:absolute;
left:35px;
margin: 50px 0px 0px 0px;
width: 700px;
height:230px;
overflow:hidden;
border: 0px solid #cccccc;
}
#carousel img {
width: 143px;
height: 230px;
}
#carousel #previous_button{
position:absolute;
margin: 50px 0px 0px 5px;
width:31px;
height:245px;
background: url(https://lh3.googleusercontent.com/-l8_dhVk0Wso/VvNhuEGK2fI/AAAAAAAAEDc/4DpBg2dBrFI2TpzyrqKQIDYk8FRvXww9gCCo/s23-Ic42/SetaEsquerda.png) no-repeat center;
z-index:100;
cursor:pointer;
border-right:0px solid #ccc}
#carousel #previous_button:hover{
background: url(https://lh3.googleusercontent.com/-0oTDcE1pZns/VvNhupaPdzI/AAAAAAAAEDk/czfX0w3LraUXjGNBuhJ8I3TEdn8Ldjf-QCCo/s23-Ic42/SetaEsquerdaHover.png) no-repeat center}
#carousel #next_button{
position:absolute;
right:0;
margin: 50px 5px 0px 0px;
width:31px;
height:245px;
background: url(https://lh3.googleusercontent.com/-VTnP2gpbXX8/VvNhuF5rxwI/AAAAAAAAEDc/MoYqBx7AZJsMRiFv8Az0AlrE3JU3bk6GQCCo/s23-Ic42/SetaDireita.png) no-repeat center;z-index:100;cursor:pointer;border-left:0px solid #ccc}
#carousel #next_button:hover {background: url(https://lh3.googleusercontent.com/-SF-5nNLG408/VvNhuEy8grI/AAAAAAAAEDk/W2wf3Mo1ZXcGvs_Hz5m5IyFdaG0RMS9ygCCo/s23-Ic42/SetaDireitaHover.png) no-repeat center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{
background:transparent url() repeat-x top;
display:inline;
float:left;
text-align:center;
font-size: 15px;
font-family: 'Arial';
font-weight: normal;
line-height:1.2em;
border:0px solid #ccc;
width:143px;
margin:0 4px 20px 0px;
padding:6px;
}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{
display:none;
margin-top:5px;
text-decoration: none;
}
#carousel ul li a.slider_title:hover{color:#A7725D}
#carousel a img{display:block;background:transparent;margin-top:0; text-decoration: none;}

2 - Agora, ainda nessa página pesquise por </head> e cole ACIMA o código a seguir:

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 10;
label1 = "MARCADOR";
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 showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < numposts1; 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 class="car"><div class="thumb"><a href="'+posturl+'"><img width="160" height="240" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';
document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/41591450002/carousellite.js' type='text/javascript'/>

- Substitua o trecho destacado em azul (MARCADOR) pelo marcador dos posts que deseja exibir. Exemplo: Resenhas.

- Substitua o trecho destacado em vermelho (10) pela quantidade de imagens à exibir.

E clique em salvar.

3 - Agora, vá em LAYOUT e no local onde o slider será inserido adicione um novo gadget de HTML/Java Script. Dentro dele cole o código a seguir:

<div id="carousel">
<div id="previous_button"></div>
<div class="container" style="visibility: visible; overflow: hidden; z-index: 2; width: 700px;">
<script>document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");</script>

<script src="/feeds/posts/default/-/MARCADOR?max-results=10&orderby=published&alt=json-in-script&callback=showrecentposts"></script>
<div class="clear"></div>
</div>
<div id="next_button"></div>
</div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$("#carousel .container").jCarouselLite({
auto:2000,
scroll: 1,
speed: 800,
visible: 3,
start: 0,
circular: true,
btnPrev: "#previous_button",
btnNext: "#next_button"
});
})})(jQuery)
</script>
<div style='clear: both;'></div>

- Substitua o trecho destacado em azul (MARCADOR) pelo marcador dos posts que deseja exibir. Deve ser o mesmo do passo anterior.

- Substitua o trecho destacado em vermelho (6) pela quantidade de imagens visíveis no slider. No primeiro modelo são 3 e no segundo modelo são 4.

- Substitua o trecho destacado em laranja (10) pela quantidade de imagens exibidas no total.

E salve o gadget.

Fim! :)

Esse slider, quando utilizado com outros scripts, pode apresentar conflito. Quando isso acontece, as setinhas para as laterais não funcionam. Se esse for o seu caso, recomendo que remova os outros scripts instalados fazendo testes até descobrir com qual deles é o conflito.

É isso, pessoal!
Não consegui achar o autor desse slider, se alguém souber, por favor me informe nos comentários para que eu possa creditar, ok?! Obrigada! :)

Um beijo!

Retirando Fundo transparente

2015-07-13T19:17:00.002-07:00

http://mademoiselle-pardal.blogspot.com.br/2013/05/janeladeimagem.html

Neste mini Tutorial irei mostrar algo bem simples de se fazer. O fundo transparente do Modelo Janela de imagem do blogger incomoda bastante aqueles que querem dar um visual legal ao blog; este tutorial ira mostrar como é facil se livrar deste pequeno problema.(Para completar, nesta postagem também estarei mostrando como retirar o fundo do Widget ''Atribution'')

Antes de retirar o fundo

Depois de retirar o fundo

Retirando o Fundo

Vá no Html do seu blog

Procure por

/* Main

Você vai encontrar o código da seguinte maneira:

/* Main
.main-outer {
background: $(main.background);

-moz-border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;
-webkit-border-top-left-radius: $(main.border.radius.top);
-webkit-border-top-right-radius: $(main.border.radius.top);
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
-goog-ms-border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;
border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;

-moz-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
}

Apague o trecho entre as Chaves ''{ }

.main-outer { Trecho que deve ser apaguado }

Ficando da seguinte forma:

/* Main

.main-outer {

}

Visualize e se estiver tudo bem, salve

Retirando o Fundo do Widget 'Atribuition'

Antes

Depois

Procure por

.footer-outer {

O código vai estar da seguinte maneira:

.footer-outer {
color:$(footer.text.color);
background: $(footer.background);

-moz-border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);
-webkit-border-top-left-radius: $(footer.border.radius.top);
-webkit-border-top-right-radius: $(footer.border.radius.top);
-webkit-border-bottom-left-radius: $(footer.border.radius.bottom);
-webkit-border-bottom-right-radius: $(footer.border.radius.bottom);
-goog-ms-border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);
border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);

-moz-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
}

Apague o trecho entre as Chaves ''{ }

.footer-outer { Trecho que deve ser apagado }

O código deve ficar assim:

.footer-outer {

}

Visualize e se estiver tudo certo, salve.

Como retirar o fundo do gadget

Vá no html do seu blog

procure por

/* Widgets

Em seguida procure pelo trecho:

.main-inner .column-left-inner,

.main-inner .column-right-inner {

background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat 0 0;

Apague o trecho acima

visualize e se estiver tudo bem então é só salvar.

Antes Depois

Como retirar o fundo do Cabeçalho

Vá no html do seu blog

procure por

.header-outer {

Abaixo dele irá aparecer o seguinte:

.header-outer {
margin: $(header.margin.top) 0 $(header.margin.bottom) 0;

background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;

Apague o trecho inteiro acima

(incluindo .header-outer { )

Visualize e se estiver tudo bem salve.

Retirando do rodapé

Vá no html do seu blog

procure por:

.footer-fauxborder-left {

Abaixo dele irá aparecer o seguinte

.footer-fauxborder-left {
border-top: 1px solid $(widget.border.color);
background: $(footer.background.color) $(footer.background.gradient) repeat scroll 0 0;

Apague o trecho inteiro acima
(incluindo .footer-fauxborder-left { )

Visualize e se estiver tudo bem salve.

(Espero que tenham gostado e se caso quizer compartilhar não esqueça de dar os devidos creditos)

TUTORIAL: COMO COLOCAR POSTAGENS NA BARRA LATERAL

2015-07-13T15:33:00.001-07:00

Heeey gente! Quanto tempo hein? Mas tô aqui de volta para ensinar vocês a personalizarem um gadget que coloca outras postagens na sidebar. O bom dele é que ele é em imagem e como diz o ditado "uma imagem vale mais que mil palavras", os leitores vão clicar e ler outras postagens que não aparecem na página inicial. Vem comigo para eu te ensinar ^ ^

Aqui uma imagem de como ficará:

Não precisa mexer no HTML do blog, nós vamos utilizar só o design de modelo.

Painel do blogger >> Opções >> Layout;
Adicionar um gadget >> HTML/Javascript;
Dentro do Gadget cole o seguinte código:

<br />

</div>

var main;

var float_clear=false;

var flag = 0;

function bprecentpostswiththumbnails(json) {

for (var i = 0; i < numberOfPosts; i++) {

if (i == json.feed.entry.length) break;

var s;

var entry = json.feed.entry[i];

var postTitle = entry.title.$t;

postTitleOriginal = postTitle;

if (isNaN(titleLength) || titleLength == 0) {

postTitle = '';

}

else if (postTitle.length > titleLength) postTitle = postTitle.substring(0, titleLength) + "...";

var postUrl="";

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {

var commentText = entry.link[k].title;

var commentUrl = entry.link[k].href;

}

if (entry.link[k].rel == 'alternate') {

postUrl = entry.link[k].href;

break;

}

if (showThumbs == true) {

var thumbUrl = "";

try {

thumbUrl = entry.media$thumbnail.url;

thumbUrl = thumbUrl.replace("/s72-c/","/s"+imgDim+"-c/");

} catch (error) {

if ("content" in entry) s = entry.content.$t; else s="";

if (thumbUrl == "" && mediaThumbsOnly == false) {

regex = /http\:\/\/www\.youtube(-nocookie){0,1}\.com\/(v){0,1}(embed){0,1}\/(([^"&?' ]*))/;

videoIds = s.match(regex);

if (videoIds != null) {

videoId = videoIds[4];

}

if (videoIds != null && videoId != null) thumbUrl = "http://img.youtube.com/vi/" + videoId + "/2.jpg"

}

if (thumbUrl == "" && mediaThumbsOnly == false) {

a = s.indexOf("<img");

b = s.indexOf("src=\"", a);

c = s.indexOf("\"", b + 12);

d = s.substr(b + 12, c - b - 12);

if ((a != -1) && (b != -1) && (c != -1) && (d != "")) thumbUrl = d;

}

if(thumbUrl.indexOf("static.flickr.com")!=-1) {thumbUrl= thumbUrl.replace("_b_t.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_m_t.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_s_t.jpg","_s.jpg");

thumbUrl= thumbUrl.replace("_b.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_m.jpg","_s.jpg");}

if (thumbUrl == "" && showNoImage == true)

{

thumbUrl = "<span style="color: red;">URL DA FIGURA DE IMAGEM NÃO LOCALIZADA"</span>;

try{if(defaultImage!="") thumbUrl=defaultImage;}catch(error){}

thumbUrl = thumbUrl.replace("/s72-c/","/s"+imgDim+"-c/");

}

if (showPostDate == true) {

var postdate = entry.published.$t;

var cdyear = postdate.substring(0, 4);

var cdmonth = postdate.substring(12, 7);

var cdday = postdate.substring(8, 10);

var monthnames = new Array();

monthnames[1] = "Jan";

monthnames[2] = "Feb";

monthnames[3] = "Mar";

monthnames[4] = "Apr";

monthnames[5] = "May";

monthnames[6] = "Jun";

monthnames[7] = "Jul";

monthnames[8] = "Aug";

monthnames[9] = "Sep";

monthnames[10] = "Oct";

monthnames[11] = "Nov";

monthnames[12] = "Dec";

}

code = "";

main = document.getElementById('bp_recent');

myDiv = document.createElement('div');

myDiv.setAttribute("class", "bp_item_title");

myLink = createLink(postUrl,"_top",postTitleOriginal)

if(main.innerHTML!=""){

mySeparator = createDiv("bp_recent_separator");

main.appendChild(mySeparator)

}

if(postTitle != ''){myDiv.appendChild(myLink);}

main.appendChild(myDiv);if(postTitle != '')myLink.innerHTML = postTitle;

if (showThumbs == true && thumbUrl != "") {

myImage = document.createElement('img');

myImage.setAttribute("src", thumbUrl);

if(imgFloat!="none")

{

float_clear=true;

myImage.style.cssFloat=imgFloat;

myImage.style.styleFloat=imgFloat;

}

try{if(myMargin!=0)myImage.style.margin = myMargin+"px";} catch(error){}

myImage.setAttribute("alt", postTitleOriginal);

myImage.setAttribute("width", imgDim);

myImage.setAttribute("height", imgDim);

myLink = document.createElement('a');

myLink.setAttribute("href", postUrl+"?utm_source=bp_recent&utm-medium=gadget&utm_campaign=bp_recent");

myLink.setAttribute("target", "_top");

myLink.setAttribute("title", postTitleOriginal);

myLink.appendChild(myImage);

myDiv = document.createElement('div');

myDiv.setAttribute("class", "bp_item_thumb");

myDiv.appendChild(myLink);

main.appendChild(myDiv);

}

try {

if ("content" in entry) {

var postContent = entry.content.$t;

}

else if ("summary" in entry) {

var postContent = entry.summary.$t;

}

else var postContent = "";

var re = /<\S[^>]*>/g;

postContent = postContent.replace(re, "");

if (showSummary == true) {

myDiv = createDiv("bp_item_summary");

if (postContent.length < summaryLength) {myDiv.appendChild(document.createTextNode(postContent));}

else {

postContent = postContent.substring(0, summaryLength);

var quoteEnd = postContent.lastIndexOf(" ");

postContent = postContent.substring(0, quoteEnd);

myDiv.appendChild(document.createTextNode(postContent + '...'));

}

main.appendChild(myDiv);

}

} //end try

catch (error) {}

myDiv = createDiv("bp_item_meta");

myDiv.style.clear="both";

myDiv.style.marginBottom="4px";

if (showPostDate == true) {

myDiv.appendChild(document.createTextNode(monthnames[parseInt(cdmonth, 10)] + '-' + cdday + '-' + cdyear));

flag = 1;

}

if (showCommentCount == true) {

if (flag == 1) {

myDiv.appendChild(document.createTextNode(" | "));

}

if (commentText == '1 Comments') commentText = '1 Comment';

if (commentText == '0 Comments') commentText = 'No Comments';

var myLink = createLink(commentUrl,"_top",commentText + " on " + postTitleOriginal)

myDiv.appendChild(myLink);

myLink.innerHTML=commentText;

flag = 1;;

}

if (showReadMore == true) {

if (flag == 1) {

myDiv.appendChild(document.createTextNode(" | "));

}

var myLink = createLink(postUrl,"_top",postTitleOriginal)

myDiv.appendChild(myLink);

myLink.innerHTML = readMore+" »";

flag = 1;;

}

if (flag == 1) main.appendChild(myDiv);

}

if(float_clear==true && imgFloat!="none")

{

myDiv = createDiv("bp_clear_float");

myDiv.style.clear=imgFloat;

main.appendChild(myDiv);

}

document.getElementById("bp_recent_link").style.backgroundImage="url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRZXSOvrcNM5cLylVRMfF_2GrDUqkubkm46LdPHZwPJ_4tWxdl11dP_tra51zk8zA4z5gmEK4_lIx04Ab7BZzccdPrBLiVUxee3TG9ewtSyMdKWWKI0nSammhRz3gYDsuAJe9JN7C7UH4/')";

document.getElementById("bp_recent_link").style.backgroundRepeat="no-repeat";

try{

if(myMargin!=0 && imgFloat=="left" && flag==0) document.getElementById("bp_recent_link").style.marginLeft = myMargin+"px";

} catch(error){}

}

function createDiv(className)

{

var myDiv = document.createElement('div');

myDiv.setAttribute("class", className);

return myDiv;

}

function createLink(href,target,title)

{

var myLink = document.createElement('a');

if(href.substring(href.length-13,href.length)=="#comment-form") {href= href.substring(0,href.length-13)+"?utm_source=bp_recent&utm-medium=gadget&utm_campaign=bp_recent"+"#comment-form";myLink.setAttribute("href", href);}

else myLink.setAttribute("href", href+"?utm_source=BP_recent&utm-medium=gadget&utm_campaign=bp_recent");

myLink.setAttribute("target", target);

myLink.setAttribute("title", title);

return myLink;

}

var numberOfPosts = 12;

var showPostDate = false;

var showSummary = false;

var titleLength = 0;

var showCommentCount = false;

var showThumbs = true;

var showNoImage = true;

var imgDim = 90;

var imgFloat = 'left';

var myMargin = 5;

var mediaThumbsOnly = true;

var showReadMore = false;

hoje = new Date()

var numposts = (<span style="color: BLUE;">6</span> +(2*(hoje.getSeconds())))

document.write("<script src=\"http://www.cereja-black.blogspot.com.br/feeds/posts/default?start-index="+numposts+"&max-results=<span style="color: blue;">6</span>&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails\"><\/script>");

</script><br />

Substitua a parte em "URL DA FIGURA DE IMAGEM NÃO LOCALIZADA" por um URL de imagem que você quer que apareça quando a imagem do post não tiver disponível. E a parte http://www.cereja-black.blogspot.com pela url do seu blog.

Bom gente, espero que tenham gostado desse tutorial. Caso dê algum erro me comunique dizendo que erro deu. Desculpe a falta de posts, prometo postar mais vezes. Não esqueçam de comentar, eu retribuo.

Slide Automático Estilo Carrossel para Blogger

2015-07-10T18:22:00.002-07:00

http://www.prodeveloper.com.br/2014/06/slide-automatico-estilo-carrossel-para.html

Slide que insere automaticamente as postagens recentes do blog exibindo-as em estilo carrossel.

Bastante procurados na Blogosfera, os slides com posts recentes permitem aos donos dos blogs uma “tranquilidade” em não ter trabalho com edição e assim poder dedicar a outras tarefas. Fora esse trabalho a menos, com esses slides, disponibilizamos já imediatamente as postagens recém publicadas, e, normalmente é o que interessa a muitos visitantes principalmente aqueles que já conhecem o blog.

Slide Carrossel com Posts Recentes no Blog

Anteriormente já publicamos aqui no blog um Slide com Posts Recentes Automático, porém esse slide que apresentamos nessa postagem, tem lá suas particularidades. Como já dito, ele é totalmente automático e inserirá as postagens recentes do blog com imagem (se a postagem conter), título, data da publicação e comentários até o momento. Tudo isso, com um efeito chamado carrousel (carrossel), caso você ainda não conheça, ele faz com que o slide “corra” lateralmente mostrando uma quantidade determinada pela largura, retornando ao estágio inicial e sempre repetindo o processo.

Outro ponto importante a ser citado, é que você poderá colocar em qualquer local de seu blog, bastando é claro que você conheça bem as áreas do template determinadas pelos códigos, pois, o slide se adequa automaticamente ao local (menos se for muito pequeno). No nosso tutorial, após a conclusão, o slide ficará logo abaixo do cabeçalho, espaço esse mais comum e propício para ser utilizado.

Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.

Colocar Slide Carrossel no Blog

>> Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".

>> Clique no código do template, pressione "CTRL+F" e pesquise por ]]></b:skin>

>> Logo ACIMA da tag encontrada, cole o seguinte código:

/* CSS Slider */
#featured-wrap{background:#4b5557;position:relative;height:225px;margin:0 auto;margin-bottom:20px;margin-top:10px;}
#featured{outline:none;position:relative;width:88%;height:200px;overflow:hidden;top:10px;margin:0 auto}
#featured ul{width:9999px}
#featured ul,#featured li{list-style:none;padding:0;margin:0;overflow:hidden}
#featured li{width:150px;display:inline-block;float:left;height:200px;background:#40484a;}
.thumb-featured{width:150px;height:150px;margin:5px auto;overflow:hidden;}
.thumb-featured img{opacity:0.7;display:block;width:135px;height:135px;padding:5px;background:#5b686a;transition:all .3s linear;}
.thumb-featured img:hover{opacity:1;background:#363c3e;transition:all .3s linear;}
.title-featured{text-align:center;position:relative;margin-top:-5px}
.title-featured a{color:#d5d9dc;}
.title-featured a:hover{color:#fff;transition:all .3s linear;}
.title-featured h4{font-size:90%;max-height:45px;overflow:hidden}
.arrow{position:absolute;display:block;background:#4b5557 url(http://3.bp.blogspot.com/-fD6n0KkLQAE/U4nnStRGPkI/AAAAAAAADhE/5nOTxqken-o/s1600/arrow.png)no-repeat;background-position:0 50%;width:35px;height:60px;top:85px;text-indent:-9999px;}
.arrow.back{background-position:0 50%;left:10px}
.arrow.forward{background-position:100% 50%;right:10px}
span.slideloading{display:none;background-image:none;background-repeat:no-repeat;background-position:50% 50%;text-indent:-9999px;margin:50px auto}

>> Pesquise agora por </head>

>> Logo ACIMA da tag encontrada, cole o seguinte código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
var numpostx = 12,
thumbSize = 140,
contjumlah = 0,
cmtext = "Comentarios",
pBlank = "http://4.bp.blogspot.com/-GTi1qJI5XEQ/U4nnmPWZGaI/AAAAAAAADhc/L3g0KV4hoRo/s1600/no-image2.png",
pkBlank = "http://3.bp.blogspot.com/-zkU-NPD-TGk/U4nnlyy_8_I/AAAAAAAADhY/V51m4qNLTZM/s1600/avatar.png",
numcomment = 5,
thumbcsize = 140,
cmsumm = 50;
$(document).ready(function(){$.ajax({url:"/feeds/posts/default?alt=json-in-script&max-results="+numpostx+"",type:"get",dataType:"jsonp",success:function(g){var k,n,b,m,h,d="",o=g.feed.entry;if(o!==undefined){d="<ul>";for(var f=0;f<o.length;f++){for(var e=0;e<o[f].link.length;e++){if(o[f].link[e].rel=="alternate"){k=o[f].link[e].href;break}}for(var c=0;c<o[f].link.length;c++){if(o[f].link[c].rel=="replies"&&o[f].link[c].type=="text/html"){h=o[f].link[c].title.split(" ")[0];break}}if("content" in o[f]){n=o[f].content.$t}else{if("summary" in o[f]){n=o[f].summary.$t}else{n=""}}if("media$thumbnail" in o[f]){postimg=o[f].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+thumbSize+"-c")}else{postimg=pBlank}var p=/<\S[^>]*>/g;n=n.replace(p,"");if(n.length>contjumlah){n=n.substring(0,contjumlah)}b=o[f].title.$t;m=o[f].published.$t.substring(0,10),m=m.replace(/-/g,"/");d+='<li><div class="thumb-featured"><a href="'+k+'" target="_blank"><span><img alt="'+b+'"src="'+postimg+'"title="'+b+'" /></span></a></div><div class="title-featured"><h4><a href="'+k+'" title="'+b+'" target="_blank">'+b+'</a></h4><div class="datex"><span class="dt">'+m+'</span><span class="cm">'+h+" "+cmtext+'</span></div></div><div class="contxisi">'+n+"</div></li>"}d+="</ul>";$("#featured").html(d);(function(){$.fn.infiniteCarousel=function(){function i(j,l){return new Array(l+1).join(j)}return this.each(function(){var q=$("> div",this).css("overflow","hidden"),r=q.find("> ul").width(9999),s=r.find("> li"),j=s.filter(":first");singleWidth=j.outerWidth(),visible=Math.ceil(q.innerWidth()/singleWidth),currentPage=1,pages=Math.ceil(s.length/visible);if(s.length%visible!=0){r.append(i('<li class="empty" />',visible-(s.length%visible)));s=r.find("> li")}s.filter(":first").before(s.slice(-visible).clone().addClass("cloned"));s.filter(":last").after(s.slice(0,visible).clone().addClass("cloned"));s=r.find("> li");q.scrollLeft(singleWidth*visible);function l(u){var t=u<currentPage?-1:1,w=Math.abs(currentPage-u),v=singleWidth*t*visible*w;q.filter(":not(:animated)").animate({scrollLeft:"+="+v},3000,function(){if(u>pages){q.scrollLeft(singleWidth*visible);u=1}else{if(u==0){u=pages;q.scrollLeft(singleWidth*visible*pages)}}currentPage=u})}q.after('<a href="#" class="arrow back"><</a><a href="#" class="arrow forward">></a>');$("a.back",this).click(function(){l(currentPage-1);return false});$("a.forward",this).click(function(){l(currentPage+1);return false});$(this).bind("goto",function(t,u){l(u)});$(this).bind("next",function(){l(currentPage+1)})})}})(jQuery);var a=true;$("#featured-wrap").infiniteCarousel().mouseover(function(){a=false}).mouseout(function(){a=true});setInterval(function(){if(a){$("#featured-wrap").trigger("next")}},8000)}else{$("#featured").html("<span>No result!</span>")}},error:function(){$("#featured").html("<strong>Error Loading Feed!</strong>")}});$.ajax({url:"/feeds/comments/default?alt=json-in-script&max-results="+numcomment+"",type:"get",dataType:"jsonp",success:function(n){var f,a,c,m,g,h,b="",j=n.feed.entry;if(j!==undefined){b="<ul>";for(var e=0;e<j.length;e++){for(var d=0;d<j[e].link.length;d++){if(j[e].link[d].rel=="alternate"){m=j[e].link[d].href;break}}if("content" in j[e]){f=j[e].content.$t}else{if("summary" in j[e]){f=j[e].summary.$t}else{f=""}}if(j[e].author[0].gd$image.src=="http://img1.blogblog.com/img/blank.gif"){a=pkBlank}else{a=j[e].author[0].gd$image.src.replace(/\/s[0-9]+(\-c|\/)/,"/s"+thumbcsize+"$1")}var l=/<\S[^>]*>/g;c=(j[e].author[0].uri)?j[e].author[0].uri.$t:"#nope";g=j[e].author[0].name.$t;f=f.replace(l,"");if(f.length>cmsumm){f=f.substring(0,cmsumm)+"..."}h=j[e].gd$extendedProperty[1].value;b+='<li><div class="kmtimg"><a rel="nofollow" href="'+m+'"><span><img src="'+a+'" title="'+g+'" alt="'+g+'"/></span></a></div><div class="ketkomt"><a rel="nofollow" href="'+m+'" title="'+g+'" class="tooltip">'+g+"</a><span>"+h+'</span></div><div class="komtsum">'+f+"</div></li>"}b+="</ul>";$("#rcentcomnets").html(b)}else{$("#rcentcomnets").html("<span>No result!</span>")}},error:function(){$("#rcentcomnets").html("<strong>Erro ao carregar</strong>")}})});
//]]>
</script>

* Destacado em AMARELO, quantidade de posts que aparecerão no slide.

>> Pesquise agora por </header>

>> Logo ABAIXO da tag encontrada, cole o seguinte código:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='featured-wrap'>
<div id='featured'>
<span class='slideloading'>Loading...</span>
</div>
</div>
</b:if>

* Com essa configuração, o slide aparecerá apenas na página inicial do blog. Caso desejar que apareça nas outras páginas, retire a primeira e a última linha do código.

>> Clique em "Visualizar", não encontrando nenhum erro clique em "Salvar Modelo".

>> Vá em seu blog e veja como ficou.

Com a conclusão do processo o slide automático com posts recentes estilo carrossel já estará totalmente adaptado a um local importante de seu blog, e, a partir de agora já exibindo todas as atualizações com design panorâmico e moderno, assim, chamando a atenção e atraindo cada vez mais cliques e adeptos as suas novas publicações.

Menu acima do cabeçalho

2014-04-23T18:25:00.000-07:00

Oi gente? Como estão? Depois do texto depressivo de ontem, estou bem melhor e espero que vocês também estejam tá bom?

Quanto tempo não posto um tutorial né mesmo? Então hoje eu vim tirar essa tag da poeira e atender o pedido da Laís Herculano do blog Meus Dezoito Anos ♥ e da Jessica Alves do Batom e Blush ♥, que era como fazer o menu acima do cabeçalho (igual a do blog) com barra de pesquisa. É bem simples e precisa de bastante atenção, pois se errar uma letrinha já era. Preparados?

Testado apenas no modelo travel. Códigos editados por mim, o código original não lembro da onde tirei. Se for seu, me fale!

1. Entre no painel do blogger >> mais opções >> modelo >> editar html;
2. Acima da tag ]]></b:skin>
cole o seguinte código:

#mymenuda {
background: #CD6090; /* defina a cor do background */

border-left: 200px solid #CD6090; /* tamanho da borda e cor- não retire pq ela centraliza o menu */

width: 100%;
height: 42px;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
#mymenu {
background: #fff; /* cor da fonte */
font-family: 'Arial', corsiva; /* nome da fonte */
font-size: 20px; /* titulo da fonte */
text-transform: uppercase;
}
#mymenu li {
list-style-type: none;
display: inline;
float: left; /* posicionamento do menu */
padding: 0px;
}
#mymenu li a {
color: #fff;
text-decoration: none;
padding-right: 24px;
line-height: 42px;
}
#mymenu a:hover {
color: #EED5D2; /* cor do link da fonte em hover */
}
#mymenu ul {
list-style: none;
margin: 0;
padding: 0;
background: #fff;
margin-left: 40px;
}
#mymenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 120px;
padding-left: -40px;
}
#mymenu li ul a {
font-size: 12px;
line-height: 24px;
}
#mymenu li:hover ul ul,
#mymenu li:hover ul ul ul,
#mymenu li.sfhover ul ul,
#mymenu li.sfhover ul ul ul {
left: -999em;
}
#mymenu li:hover ul,
#mymenu li li:hover ul,
#mymenu li li li:hover ul,
#mymenu li.sfhover ul,
#mymenu li li.sfhover ul,
#mymenu li li li.sfhover ul {
left: auto;
}

#mymenuright {
float: right;
color: #fff;
}

/* BARRA DE PESQUISA */

.search{

float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
font-family: Georgia, Tahoma; /* Fonte da letra que será escrita quando procurarmos por algo */

}

.searchbar{

margin-top:7px;

height: 20px;

width: 240px;

color: #ccc; /* Cor da fonte da letra que será escrita quando procurarmos por algo */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo da parte onde escrevemos */

}

.searchbut{

background: url('http://cdn1.iconfinder.com/data/icons/Snow/Snow/snow/Search.png'); /* Link/Url da imagem do botão de pesquisar | tamanho: 30 x 30px */

width:30px;

height:30px;

border: 0;

padding:7px;

}

3. Depois de ter colado o código e ter feito todas as suas personalizações, vá para Layout >> Add Gadget >> HTML/ JAVASCRIPT e cole o código abaixo trocando o " # " pelo link da página e "PAG" pelo nome da página.

<div id="mymenuda">
<div id="mymenu">
<li><a href=" # ">PAG</a></li>
<li><a href="# ">PAG</a></li>
<li><a href=" # ">PAG</a></li>
<li><a href=" # ">PAG</a></li>
<li><a href=" # ">PAG</a></li></div>
<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>
<div id='mymenuright'>
</div></div>

4. Agora é só salvar. Se caso der algum erro não deixe de falar comigo tá bom?

Resultado:

Beijos!

http://www.cerejablack.com/2013/09/tutorial-menu-acima-do-cabecalho.html#.U1hkk_ldXdc

Tutorial: Postagens recentes abaixo do menu

2014-04-23T18:24:00.000-07:00

Vocês não tem ideia de como eu tava com saudade daqui! Estive viajando, por isso não postei nada nesses últimos dias. E para compensar o sumiço, trouxe um tutorial bastante pedido aqui no blog: Decomo colocar as postagens recentes abaixo do menu. Não é nada difícil e dá pra configurar sem problemas. Então vamos ver?

No painel do blogger, clique em mais opções >> Layout >> Adicionar um Gadget >> HTML/ Javascript;

Cole no gadget de HTML o seguinte código fazendo as alterações necessárias:

<center><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 = 5; var showPostDate = false; var showSummary = false; var titleLength = 0; var showCommentCount = false; var showThumbs = true; var showNoImage = true; var imgDim = 190; var imgFloat = 'right'; var myMargin = 12; var mediaThumbsOnly = true; var showReadMore = false; </script> <script src='http://LINK-DO-SEU-BLOG/feeds/posts/default?max-results=18&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script></center>

Legenda:

Vermelho: Número de post a ser exibido

Amarelo: Tamanho das imagens

Azul: Espaço entre as imagens

Preto: Link do seu blog

Configure da forma que fique certinho em seu blog. Após fazer isso, é só você arrastar o gadget e posicioná-lo abaixo do gadget de páginas. Deverá ficar assim:

Depois você clicar em "Salvar Organização" no canto superior direito e pronto! Você terá as postagens recentes abaixo do menu com atualização automática, ou seja, você não vai precisar trocar o link e imagem a cada postagem publicada!

E aí? Gostaram do tutorial? Lembrando que qualquer dúvida, só entrar em contato!

Slide com atualizações automáticas 2 ()funciona no travel)

2014-01-25T11:48:00.000-08:00

http://templateseacessorios.blogspot.com.br/2011/03/slide-com-atualizacoes-automaticas-2.html

Copie o código e cole no HTML/Javascript, cole o endereço de seu blog no local indicado e salve.

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template cliqueAQUI

ATENÇÃO: COLOQUE O ENDEREÇO DE SEU BLOG NO LOCAL INDICADO

<div class="widget-content">

<style>
#slideshow {
width: 900px; /*aqui o comprimento do slide*/
margin: 5px 5px 5px 0;
padding:0;
background:#292929;/*cor de fundo slide*/
height:310px;/*altura do slide*/
overflow:hidden;
border: 1px solid #000;
-moz-border-radius:4px;
-webkit-border-radius:4px;
box-shadow: 0px 0px 1em #3A3B4C;
-webkit-box-shadow: 0px 0px 1em #3A3B4C;
-moz-box-shadow: 0px 0px 1em #3A3B4C;
padding: 1px 2px 1px 2px;
}
#slideshow ul {
background:transparent;
margin: 0;
padding: 0;
list-style-type: none;
}
#slideshow .slides {/*maior*/
width:600px;/*slide do lado esquerdo*/
overflow: hidden;
float:left;
color: #fff;
}
#slideshow .slides ul {/*maior*/
float:left;
overflow: hidden;
width:600px;
height:310px;
}
#slideshow .slides li {
display:none;
left:-99999em;
width:600px;
height:200px;
display:block;
overflow: hidden;
position:relative;
z-index:1;
}
.js #slideshow .slides li {/*maior*/
margin: 0;
padding: 0;
list-style-type: none;
width:700px;/*area maior*/
height:310px;
display:block;
overflow: hidden;
position:relative;
z-index:1;
}
.js #slideshow .slides li .entry {/*area maior*/
width:600px;
color: #fff;
height: 100px;/*area inscrição tarja grande*/
padding: 40px 35px 10px 10px;
font-size: 14px;
overflow: hidden;
position:absolute;
bottom:0;
left:0;
background:#000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
#slideshow .slides li .entry p {
margin: 0;
}
#slideshow .slides li .entry h2 ,
#slideshow .slides li .entry h2 a,
#slideshow .slides li .entry h2 a:link,
#slideshow .slides li .entry h2 a:visited,
#slideshow .slides li .entry h2 a:hover,
#slideshow .slides li .entry h2 a:active {
font-size: 12px;
line-height: 1.1em;
margin:0;
color: #808080;
margin: 0;
letter-spacing:0;
border:none !important;
}
#slideshow ul.slides-nav {/*Menor*/
height:310px;
width:300px;/*area menor*/
margin:0;
padding: 0;
float:right;
overflow:hidden;
}
#slideshow .slides-nav li {
display:block;
margin:0;
padding:0;
list-style-type:none;
display:block;
}
#slideshow .slides-nav li a {/*area slide menor*/
width:300px;/*area tarja menor*/
font-family:arial,helvetica,sans-serif;
display:block;
margin:0;
padding:7px;
text-align: left;
list-style-type:none;
display:block;
height:46px;
color: #ccc;
font-size:12px;/*tamanho letra menu menor*/
overflow:hidden;
background: transparent;
line-height:1.35em;
}
slides.ul li {
background-attachment:scroll;
background-color:transparent;
background-position:center top;
background-repeat:no-repeat;
display:block;
height:310px;
left:0;
opacity:1;
position:absolute;
top:0;
width:500px;
z-index:6;
}
.js #slideshow .slides-nav li.on a {/*area tarja menor*/
background: #fff;
color: #000;
}
.js #slideshow .slides-nav li a:hover,
.js #slideshow .slides-nav li a:active {
color:#fff;
}
#slideshow .slides-nav li a img.post-thum,
#slideshow .slides-nav li a img.thumbnail {
float:left;
margin: 1px 10px 2px 18px;
padding:2px;
border: 1px solid #000;
width:75px;
height:60px;
}
.js #slideshow .slides-nav li.on a img.post-thum,
.js #slideshow .slides-nav li.on a img.thumbnail {
background:#cc0000 !important;margin: 2px 2px 2px 2px; padding: 1px;/*area imagens pequenas slecionadas*/
}
</style>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgATMMFyzLAUqlRr0niWZ9F75Ba_k2yi8U-dykfWHCVbogkl_uZv6XCQNWd2Jg-33fBlIl3WEaNkcuZcagyI-wlXxIeZCF_O2CqvQDBHDxbd1bPRFqwgPoYdS4hmDaDoqtSPzDbfWki33Y3/s320/templatesww.png";
showRandomImg = true;
aBold = true;
summaryPost = 300; //
summaryTitle = 250; //
numposts = 5; //
home_page = "AQUI O ENDEREÇO DE SEU BLOG/";
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 showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul class="slides-nav">');
for (var i = 0; i < numposts; 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>' : '';
posttitle = (aBold) ? ""+posttitle+"" : posttitle;
var trtd = ' <li id="post-'+i+'" class="clearfix"> <a href="#main-post-'+i+'" class=""><img height="150px" width="150px" class="post_thumbnail thumbnail thumbnail post_thumbnail" alt="" src="'+img[i]+'"/>'+posttitle+'</a> </li> ';
document.write(trtd);
j++;
}
document.write('</ul>');
}
function showrecentposts1(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul class="clearfix" style="position: relative;">');
for (var i = 0; i < numposts; 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>' : '';
posttitle = (aBold) ? ""+posttitle+"" : posttitle;
var trtd = '<li style="background: transparent url('+img[i]+')" id="main-post-'+i+'"><div class="entry"><h2 class="post-title"><a href="'+posturl+'">'+posttitle+'</a></h2> <p>'+removeHtmlTag(postcontent,summaryPost)+'</p></div></li> ';
document.write(trtd);
j++;
}
document.write('</ul>');
}
</script>
<script src="http://sites.google.com/site/menuhorizontal2/slidefeed/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$slideshow = {
context: false,
tabs: false,
timeout: 7000,
slideSpeed: 1000,
tabSpeed: 1000,
fx: 'toss',
init: function() {
this.context = $('#slideshow');
this.tabs = $('ul.slides-nav li', this.context);
this.prepareSlideshow();
},
prepareSlideshow: function() {
$('div.slides > ul', $slideshow.context).cycle({
fx: $slideshow.fx,
timeout: $slideshow.timeout,
speed: $slideshow.slideSpeed,
fastOnEvent: $slideshow.tabSpeed,
pager: $('ul.slides-nav', $slideshow.context),
pagerAnchorBuilder: $slideshow.prepareTabs,
before: $slideshow.activateTab,
pauseOnPagerHover: true,
pause: true
});
},
prepareTabs: function(i, slide) {
return $slideshow.tabs.eq(i);
},
activateTab: function(currentSlide, nextSlide) {
var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);
if(activeTab.length) {
$slideshow.tabs.removeClass('on');
activeTab.parent().addClass('on');
}
}
};
$(function() {
$('body').addClass('js');
$slideshow.init();
});
</script>

<div id="slideshow" class="clearfix">
<div class="slides">
<script language="JavaScript">
document.write("<script src=\""+home_page+"feeds/posts/default/?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
<div class="slides-nav">
<script language="JavaScript">
document.write("<script src=\""+home_page+"feeds/posts/default/?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>

</div>
</div>
</div>

<script src='http://sites.google.com/site/menuhorizontal2/slidefeed/jquery.cycle.js' type='text/javascript'/></script>

Slide últimas postagens (falta testar)

2014-01-25T11:46:00.000-08:00

http://templateseacessorios.blogspot.com.br/2013/11/slide-ultimas-postagens.html

DEMO

Mais um modelo de slide para usar em seu blog para facilitar a navegação do visitante do blog.

Vá até o "Modelo de seu blog", clique em "Editar HTML"

Hack para o template do Blogger, implementado em abril de 2013.

Procure por ]]></b:skin>

Abaixo dele cole este próximo código.

Salve !

Procure por <div id='main-wrapper'> OU POR <div class='main-outer'>
Abaixo dele, cole o código abaixo:

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='lof-main-wapper' id='slider'>
<div class='slider-main-outer'>
<ul class='slider-main-wapper'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</ul>
</div>
<div class='slider-navigator-outer'>
<ul class='slider-navigator'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</ul>
</div>
</div>
<script type='text/javascript'>
jQuery(document).ready(function($){
$('#slider').lofJSidernews({
interval:6000,
duration:800,
mainWidth:600,
navigatorWidth:100,
maxItemDisplay:4,
easing:'easeOutBounce',
auto:true,
isPreloaded: true
});
});
</script>
</b:if>
</b:if>

Implementar CSS

No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado -------> Adicionar CSS

Copie o código abaixo e cole no local indicado.

/* Slider
------------------------------------------------*/
#slider{
border: 15px solid #1F1C1B;
background: #808080;
float:left;
padding:0;
margin:0 0 15px 0;
position:relative;
overflow:hidden;
width:600px;
height:300px;
}
.slider-main-outer{
position:relative;
height:100%;
width:600px;
z-index:3;
overflow:hidden
}
ul.slider-main-wapper li h3{
z-index:10;
position:absolute;
top:-20px;
left:0;
height:100%;
width:180px;
background:#1F1C1B;
opacity:0.7;
filter:alpha(opacity = 70);
padding:10px;
}
ul.slider-main-wapper li h3 p{
color:#fff;
font:12px Arial;
line-height:16px;
padding-top:10px;
display:block;
margin:0
}
ul.slider-main-wapper li h3 a{
color:#fff;
font:17px Arial;
font-weight:700;
line-height:20px;
margin:0
}
ul.slider-main-wapper li .imgauto{
width:600px;
height:300px;
overflow:hidden;
margin:0;
padding:0
}
ul.slider-main-wapper{
height:300px;
width:600px;
position:absolute;
overflow:hidden;
margin:0;
padding:0
}
ul.slider-main-wapper li{
overflow:hidden;
list-style:none;
height:100%;
width:600px;
float:left;
margin:0;
padding:0
}
.slider-opacity li{
position:absolute;
top:0;
left:0;
float:inherit
}
ul.slider-main-wapper li img{
list-style:none;
width:600px;
height:auto;
padding:0
}
ul.slider-navigator{
top:0;
position:absolute;
width:100%;
margin:0;
padding:0
}
ul.slider-navigator li{
cursor:pointer;
list-style:none;
width:100%;
overflow:hidden;
margin:0;
padding:0
}
.slider-navigator-outer{
position:absolute;
right:0;
top:0;
z-index:10;
height:auto;
width:100px;
overflow:hidden;
color:#333
}
.slider-navigator li div{
background:#423836;
height:100%;
position:relative;
margin:0;
padding-right:5px;
}
.slider-navigator li:hover div{
background:#336CA6;
opacity:0.7;
filter:alpha(opacity = 70);
}
.slider-navigator li img{
border:#666 solid 1px;
border-top:1px solid #000;
border-left:1px solid #000;
height:63px;
width:88px;
float:left;
margin:5px 5px 0;
padding:0
}
.slider-navigator li.active img{
border:#000 solid 1px
}

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

Slide carousel com as postagens recentes do blog

2013-09-07T18:26:00.000-07:00

http://templateseacessorios.blogspot.com.br/2013/01/slide-carousel-com-as-postagens.html

Slide carousel com as postagens recentes do blog

| 22:37 . Elke di Barros .:. Slide

DEMO

Cole o código abaixo no local indicado. Salve.

Procure agora por: </head>

Acima dele cole o código abaixo:

Agora procure por: </header>

E abaixo dele, cole a div para instalar neste local o slide. (se quiser que o slide apareça também nas páginas internas, delete os códigos que estão na cor vermelha.)

SLIDE COM POSTAGENS RECENTES DO BLOG Funcionaaaa

2013-08-27T10:40:00.001-07:00

http://www.layoutparablog.com/2013/06/slide-com-postagens-recentes-do-blog.html

Hoje trago um slide que mostra as ultimas postagens que você fez no blog com a imagem colocada, o titulo da postagem e um breve resumo da mesma.

Siga os passos:

1) entre no layout do blog

2) adicionar gadget

3) html/javascript

4) copie e cole o código abaixo

<style>

#slide-container {

height: 360px;

position: relative;

width: 480px;}

#slider {

height: 360px;

left: 25px;

overflow-x: hidden;

overflow-y:

hidden;

position: relative;

width: 480px;

font-family: calibri;}

.slide-desc {

background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;

color: #FFFFFF;

padding: 10px;

position: absolute;

right: 0px;

text-align: left;top: 0;

width: 200px;

z-index: 99999;}

.slide-desc h2 {

display: block;}

.crosscol .widget-content {

position: relative;}

#slider ul, #slider li,#slider2 ul, #slider2 li {

margin: 0;

padding: 0;

list-style: none;}

#slider2 {

margin-top: 1em;}

#slider li, #slider2 li {

/*define width and height of list item (slide)entire slider area will adjust according to the parameters provided here*/

width: 480px;

height: 360px;

overflow: hidden;}

#prevBtn, #nextBtn,#slider1next, #slider1prev {

display: block;

width: 30px;

height: 77px;position: absolute;left: -30px;text-indent: -9999px;top: 71px;z-index: 1000;}#nextBtn, #slider1next {left: 520px !important;}#prevBtn, #nextBtn, #slider1next, #slider1prev {display: block;height: 77px;left: 0;position: absolute;top: 132px;width: 30px;z-index: 1000;}#prevBtn a, #nextBtn a,#slider1next a, #slider1prev a {display: block;position: relative;width: 30px;height: 77px;background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;}#nextBtn a, #slider1next a {background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;}/* numeric controls */ol#controls {margin: 1em 0;padding: 0;height: 28px;}ol#controls li {margin: 0 10px 0 0;padding: 0;float: left;list-style: none;height: 28px;line-height: 28px;}ol#controls li a {float: left;height: 28px;line-height: 28px;border: 1px solid #ccc;background: #DAF3F8;color: #555;padding: 0 10px;text-decoration: none;}ol#controls li.current a {background: #5DC9E1;color: #fff;}ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {outline: none;}</style>

//<![CDATA[

$(document).ready(function(){

$("#slider").easySlider({

auto: true,

continuous: true

});

//]]>

</script>

var numposts_gal = 6; var numchars_gal = 150; var random_posts = false; // random posts

</script>

</div>

5) onde aparece escrito em vermelho <script src="http://layoutparablog.com/feeds/posts/default
você troca com o endereço do seu blog

6) Salve e pronto!

3 formas de personalizar o título do post

2013-08-25T18:27:00.002-07:00

Hoje eu trouxe um tutorial bem fácil e que pode deixar seu blog mais bonito.

Eu sei que você já devem saber personalizar o título das postagens, até já ensinei aqui.

Mas hoje vai ser um pouco diferente, vou ensinar três modos de personalizar, usando o mesmo código.

1º - Título do post normal, quando está na página inicial do blog.

2º - Título do post em estado houver, quando o mouse está sobre ele.

3º - Título do post depois que você clicou e já está na página em que lê o post.

O código geral de personalização é esse:

font-family: MamaeQueNosFaz; /* fonte do título */
font-size: 32px ; /* tamanho da fonte */
color: #FF82AB; /* cor do título*/
border-bottom: 1px dashed#8B5742; /* cor, tamanho e tipo de borda */

Agora vamos em parte. Cada número refere às formas citadas acima.

1º - Título do post normal, quando está na página inicial do blog.

Procure por h3.post-title a { cole o código depois dele e personalize do seu jeito.

2º - Título do post em estado houver, quando o mouse está sobre ele.

Procure por h3.post-title a:hover { cole logo após o mesmo código e personalize do seu jeito. Lembrando que a cor deve ser diferente.

3º - Título do post depois que você clicou e já está na página em que lê o post.

Esse terceiro modo pra mim é o mais interessante, porque vejo que muitos blogs ainda são usam. Sabe quando a gente abre o post e o título volta para a fonte normal, não fica com a fonte que você escolheu? Então, vamos aprender a deixar a mesma fonte em tudo.

Procure por h3.post-title { e cole o mesmo código. A personalização dele pode ficar como o primeiro.

Viu como é fácil? Indico a todos fazerem o item 3.

Beijos!!!

Rodapé do blog personalizado

2013-08-25T18:16:00.002-07:00

http://nataliamedice.blogspot.com.br/2013/03/rodape-do-blog-personalizado.html

Dias atrás eu fiz uma perguntinha na fanpage do blog sobre o que vocês gostariam de ver por aqui. Então aqui estou eu para atender o pedido do Luiz Antico , que é como fazer o rodapé de créditos igual ao que eu uso aqui no blog.

Vamos aprender então?

No HTML do seu blog procure por:

: ]]></b:skin>

Cole ANTES dele o código abaixo:

#rodape-creditos {
font:normal bold 13px Arial; /* - Fonte do rodapé - */
color:#FFFFFF; /* - Cor da fonte - */
background:#303030; /* - Cor de Fundo do Rodapé - */
border-top:4px solid #3F4C6B; /* - Edite a borda - */ Retire essa linha se não quiser borda
margin:0px 0px 0px; /* - Não é necessário editar - */
}
#rodape-creditos a:link {
color:#A8B5C4; /* - Cor dos Links do Rodapé - */
text-decoration:none; /* - Decorações do Link - */
outline:0px solid #FFFFFF; /* - Não é necessário editar - */
}
#rodape-creditos a:visited {
color:#A8B5C4; /* - Cor dos Links Visitados - */
text-decoration:none; /* - Decoração dos Links Visitados - */
outline:0px solid #FFFFFF; /* - Não é necessário edittar - */
}
#rodape-creditos a:hover {
color:#A8B5C4; /* - Cor do Link com o Mouse em cima - */
text-decoration:underline; /* - Decoração do Link com o mouse em cima - */
outline:0px solid #FFFFFF; /* - Não é necessário edittar - */
}

Agora procure por:

</body>

ANTES dele cole:

<div id='rodape-creditos'>
<table border='0' cellpadding='5' cellspacing='0' oncontextmenu='return false' ondragstart='return false' width='100%'>
<tr>
<td style='width:72%;text-align:left;'>© <a href='LINK DO BLOG'>NOME DO BLOG</a> - 2012. Todos os direitos reservados.<br/>Criado por: <a href='URL DO AUTOR DO BLOG' rel='nofollow' target='_blank'>NOME DO AUTOR DO BLOG</a>.<br/>Tecnologia do <a href='http://www.blogger.com' target='_blank'>Blogger</a>.</td>
<td style='width:28%;text-align:center;'><a href='LINK DO BLOG'><img alt='imagem-logo' border='0' id='logo-footer' oncontextmenu='return false' ondragstart='return false' src='LINK DA LOGO DO BLOG'/></a><br/></td>
</tr>
</table>
</div>

Agora vamos personalizar mais um pouquinho. Como vocês devem ter percebido, eu destaquei algumas partes nos códigos.

A seleção em azul corresponde ao fundo do rodapé, que pode ser uma cor ou uma imagem, como eu uso aqui no blog. Para usar uma imagem substitua a linha selecionada por:

background: url(URL DA IMAGEM);

A seleção em amarelo é muito importante e não deve ser retirada. Isso evitará futuras punições do Google à você e ao seu blog.

O restante você pode personalizar a seu gosto. Boa sorte pra vocês.

Créditos: Categoria Blogger

Dividir postagens no blog

2013-08-25T13:31:00.005-07:00

http://www.superdicaspfs.com.br/2010/06/dividir-postagens-no-blog-imagens-ou.html

Dividir postagens no blog – Imagens ou bordas entre os posts

Publicado em 25/06/2010 » Categoria: Blogger » Tags: area_de_postagens, customizar_layout

Hoje vou ensinar mais uma forma de dar um toque super especial no seu blog e nos seus posts: inserir divisórias entre as postagens. Divisórias entre posts, além de deixar o visual mais bonito, ajudam a dar uma organizada no blog, principalmente se na home os posts forem muito extensos e o título das postagens não tiver um certo destaque. Infelizmente alguns leitores ficam perdidos em meio a muitos palavras e acabam se confundindo com o término de um post e o inicio de outro. A forma que irei ensinar é automática, portanto todos os seus posts (dos mais antigos aos recentes) terão uma borda divisória. Como vamos ter que mexer com o código do template, não esqueça de fazer backup!
Bom chega de conversa e mãos a obra!

Primeiramente faça login em sua conta Blogger;
Vá até Design >> Editar Html. Clique em Expandir modelos de widgets;
Pressione as teclas CTRL+F para abrir a busca do seu navegador, e procure pela tag

.post{
caso você use templates Artisteer procure por .art-post{
feito isso, insira antes do colchete o código a seguir:

background:url(URL-DA-IMAGEM) center bottom no-repeat;
padding-bottom: 30px;

Alterações:

A parte em vermelho, você deverá trocar pela url da imagem de divisória que você vai usar.
A parte rosa é referente ao distanciamento que a barrinha divisória ficará perante aos outros elementos (fim do texto e marcadores). Você deverá alterar conforme a disposição dos elementos em seu template. Dica: vá testando valores de padding-bottom. Digite um valor e visualize, quando encontrar um que fique perfeito salve.

Depois de fazer as alterações necessárias seu código deverá ficar semelhante ao da imagem abaixo:

Se deu tudo certo e a divisória apareceu em todos os posts corretamente salve.
Nota: a divisória aparecerá na página inicial e também na página de postagens, fazendo uma divisa entre o fim do post e a área de comentários.

Inserindo uma borda em vez de uma imagem

Para inserir uma borda em vez de uma imagem o processo é bem semelhante. Você irá procurar a tag que mencionei anteriormente e irá inserir este código antes do colchete:

border-bottom: dotted 4px #000;
padding-bottom: 30px;

Alterações:

A parte em cinza corresponde ao estilo da borda (veja a tabela de bordas ao lado);
A parte verde corresponde a largura em pixels da borda;
A parte laranja corresponde a cor da borda;
E por fim o padding-bottom tem a mesma função que já citei acima.

Essas são as únicas partes que você pode e deve alterar.
No final seu código deve ficar como o da imagem abaixo:

Correndo tudo bem, visualize e salve. E seus posts já estarão divididos com bordas ou imagens.

Atualização 22/07/2010:

Alguns templates não possuem a tag .post{
se este for o caso você deverá adiciona-la manualmente juntamente com o código da divisória. Tudo isso deverá ficar antes da tag ]]></b:skin>
O código final deverá ficar como mostra a imagem abaixo:

Visualize se as bordas aparecerem salve!

Veja também:

Artigo escrito e elaborado por Andressa Quadro
É terminantemente proibida a cópia total ou parcial do conteúdo disponibilizado.

Arquivo em forma de calendário

2013-08-24T20:42:00.000-07:00

http://tur-quesa.blogspot.com.br/2013/03/fazendo-um-site-no-dreamweaver.html

http://www.templatesparavoce.com/2013/07/arquivo-do-blogger-na-forma-de.html *****

Para personalizar mais o seu blog, irei postar agora um modo de personalizar o gadget Arquivo do Blog e deixa-lo em forma de calendário, veja um exemplo aqui. Isso é bem útil, pois o arquivo fica mais organizado bonito.

Inserindo os Códigos

Primeireiro você ja deve ter o gadget no seu blog.

1) Entre em layolt ► Adicionar um Gadget ► Arquivo do Blog. Deixe-o neste formato:

É importante fazer isso, configure o gadget de acordo com a imagem.

2) Procure pelo seguinte Código ^{Deixe a opção "Expandir modelos de widgets" desativada}

<b:widget id='BlogArchive1' locked='false' title='Arquivo do Blog' type='BlogArchive'/>

Substitua o código acima por:

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='toggle' var='interval'>

</b:includable>
<b:includable id='flat' var='data'>
<div id='bloggerCalendarList'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</div>
<div id='blogger_calendar' style='display:none'>
<table id='bcalendar'><caption id='bcaption'>
</caption>

<thead id='bcHead'></thead>


<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr>
</tbody>
</table>
<table id='bcNavigation'><tr>
<td id='bcFootPrev'></td>
<td id='bcFootAll'></td>
<td id='bcFootNext'></td>
</tr></table>

<div id='calLoadingStatus' style='display:none; text-align:center;'>
<script type='text/javascript'>bcLoadStatus();</script>
</div>
<div id='calendarDisplay'/>
</div>
<script type='text/javascript'> initCal();</script>
</b:includable>
<b:includable id='posts' var='posts'>

</b:includable>
<b:includable id='menu' var='data'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
<b:includable id='interval' var='intervalData'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
</b:widget>

3) Agora vamos aplicar estilos. Procure por ]]></b:skin> e Acima dele cole o seguinte código CSS:

/* Arquivo Calendario*/
#blogger_calendar{
margin:5px 0 0 0;
width:100%;
}
#bcaption {
border:1px solid #000;
padding:2px;
margin:10px 0 0;
background:#1F1FFF;
}
#bcaption select{
border:0px;
background:#1F1FFF;
color:#fff;
font-weight:bold;
}
table#bcalendar thead{
background:#000;
}
table#bcalendar thead tr th{
width:20px;text-align:center;
padding:2px; border:1px solid #000;
font-family:Tahoma;
font-weight:bold;color:#fff;
}
table#bcalendar{
border:1px solid #000;
border-top:0; margin:0px 0 0px;
width:95%;
background:#fff;
}
table#bcalendar tbody tr td{
text-align:center;
padding:2px;
border:1px solid #000;
color:#1F1FFF;
}
table#bcalendar tbody tr td a{
font-weight:bold;
color:#000;
}
td.firstCell {visibility: visible;
}
td.filledCell{
background: #fff;
}
td.emptyCell{
visibility: hidden;
}
td.highlightCell{
background:#ddd;
border:1px outset #000
}
table#bcNavigation{
width:95%;
background:#1F1FFF;
border:1px solid #000;
border-top:0;
}
table#bcNavigation a{
ext-decoration:none;
color:#fff;
}
td#bcFootPrev{
width:10px;
}
td#bcFootAll{
text-align:center;
}

Agora visualize o modelo e clique em Salvar Modelo

4) Agora procure por </head> e cole o seguinte código acima dele.

<script src='http://static.tumblr.com/726xof9/M1tmhz78n/arquivo_calendario.js' type='text/javascript'/>
<script src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=timezoneSet'/>

Última Observação:

Se você retirar a 2ª linha do código CSS: #calendarDisplay { display: none }
→ Irá aparecer abaixo do calendário a lista de posts criados naquele mês em questão.
Se você escreve com uma frequência grande a lista ficará muito grande e pode ficar feio, mas se você escreve com pouca frequência pode ativar este recurso apagando esta linha e, dessa forma estará destacando os posts do mês.

Visualize o modelo, se está tudo certo, clique em Salvar Modelo.

Você pode alterar os estilos da forma que quiser.

PRINCIPAIS EFEITOS DO FAMOSO "CSS"

2013-08-24T19:04:00.001-07:00

Nos templates do blogger encontramos diferentes formas de personaliza-lo não é? Então agora veremos os pricipais efeitos que usamos no seu CSS.

Exemplo:

color - cor do texto » exemplo: #000000
font-family - tipo da fonte » exemplo: arial, tahoma, etc...
font-size - tamanho da fonte » exemplo: 10px, 12px, etc...
font-style - estilo da fonte » exemplo: italic, oblique, normal
font-weight - largura da fonte » exemplo: bold

line-height - altura da linha » exemplo:12px, 15px, etc...
text-align - alinhamento do texto » exemplo:center (centro), left (esquerda), right (direita) e justify (justificar)
text-decoration - decoração do texto » exemplo: none (nenhuma), underline (sublinhado) overline (sobrelinhado) e line-through (tachado)
text-transform - forma do texto » exemplo: capitalize (primeira letra maiúscula), uppercase (todas as letras maiúsculas) e lowercase (todas as letras minúsculas)
text-indent - recuo do texto » exemplo: 10px, 12px, etc...
letter-spacing - espaço entre as letras » exemplo: 2px, 3px, etc..
word-spacing - espaço entre as palavras » exemplo: 2px, 3px, etc..

background-color - cor do fundo » exemplo: #FFFFFF
background-image - imagem de fundo » exemplo: url (http://www.endereço.com/fundo.gif)
background-positon - posição do background » exemplo: left, right, center, top, bottom, etc...
background-repeat - repetir background
background-no-repeat - não repetir background
background-repeat-x - repetir background na horizontal
background-repeat-y - repetir background na vertical

margin - tamanho das 4 margens » exemplo: 5px, 10px, etc...
margin-left - margem à esquerda » exemplo: 5px, 10px, etc...
margin-right - margem à direita » exemplo: 5px, 10px, etc...
margin-top - margem em cima » exemplo: 5px, 10px, etc...
margin-bottom - margem em baixo » exemplo: 5px, 10px, etc...

padding distância entre as 4 bordas e o texto » exemplo: 3px, 5px, etc...
padding-left - distância entre a borda e o texto à esquerda » exemplo: 3px, 5px, etc...
padding-rigth - distância entre a borda e o texto à direita » exemplo: 3px, 5px, etc...
padding-top - distância entre a borda e o texto acima » exemplo: 3px, 5px, etc...
padding-bottom - distância entre a borda e o texto abaixo » exemplo: 3px, 5px, etc...

border-color - cor da borda » exemplo: #000000
border-style - estilo da borda » exemplo: none (nenhuma), dotted (pontilhado), solid (sólida), double (dupla), etc...
border-width - tamanho da borda » exemplo: 1px, 2px etc... ou 90%, 100%, etc...

float - alinha o elemento, fazendo com o que o texto fique ao redor dele » exemplo:left e right

width - define largura » exemplo: 10px, 20px, etc... ou 90%, 100%, etc...
heigth - define altura » exemplo: 10px, 20px, etc... ou 90%, 100%, etc...

vertical-align - alinhamendo vertical - » exemplo: middle (no meio), bottom ( abaixo), top (acima).

COMO PERSONALIZAR O POST FOOTER

2013-08-24T19:01:00.002-07:00

Oi amorecos, tudo bem? Eu vou ensinar hoje apenas como personalizar o post footer que é aquele lugar em baixo do post onde ficam as tags, o link para comentar e etc Muitas pessoas tem perguntando como fazer e na verdade é muito fácil. Vamos lá:

Vá no html do seu blog e procure(Ctrl + F) pela tag: ]]></b:skin> ACIMA dela cole o código a seguir:

.post-footer-line-1{
border-bottom: 1px dashed #BBB; /* Estilo da borda */
font-size:11px; /* Tamanho da fonte de letra */
}
.post-footer-line-2{
border-bottom: 1px dashed #BBB; /* Estilo da borda */
font-size:11px; /* Tamanho da fonte de letra */
}
.post-footer-line-3{
border-bottom: 1px dashed #BBB; /* Estilo da borda */
font-size:11px; /* Tamanho da fonte de letra */
}

Se traduzirem o nome "post-footer-line" significa rodapé do post linha, então isso significa que cada parte personaliza uma linha do rodapé do post em especial, eu coloco todas iguais mas se quiserem colocar diferente fiquem a vontade. Esse é exatamente o code que eu uso ta gente, e eu to dando sim ele pra vocês... rsrs Se tiverem mais alguma dúvida sobre meu layout atual ou sobre algum recurso de outro blog é só pergunta ta bom? Por hoje é só espero que consigam, beijos!

Categorias personalizadas

2013-08-24T19:00:00.000-07:00

http://trasshygirl.blogspot.com.br/2011/09/como-colocar-categorias-personalizadas.html

fica muito bonito e super original né? Créditos ao Pink Skull Design... Então vamos aprender! Exemplo:

Estão vendo do lado do post? Uma imagem com fundinho cinza e um ícone no meio? É isso que vamos fazer, sem mas enrolação:

Passo 1 - Clique em Expandir modelos de widgets e cole o código a seguir antes de </head>

<script type='text/javascript'>
function lebel_logo(etiqueta) {
imagenes = new Array();
imagenes[1] = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiG37WTlrPUn8FpcULybrw3USpvr03SlPaKzpOXQIXBwYaMoP7Ac2i0HS0QtAMVHTQv1pwylzoSdOCLEdxZSzE0oz3OpJ3iSsc6JxSQd-mPQch_KfPXi75rsOD088ziA8c1Gppsh4RDdRt/s0/image.png'
title='Image'/>"
imagenes[2] = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcI3FC7I4xPg6QFVrEgRenQdmLBcOGjXv5Rp0p0wmVpo0mEKDbAh5nL39q9qiCi1XNfHZ_Mov1oX_qXYqqX57IbWXqCrVDmZzQpMe2UlgNZhA9nOXnB3MQdHPRJ41DPJeZnOydtRKxDqtV/s0/video.png'
title='Video'/>"
imagenes[3] = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP_0B8uoX2Bmx3LgGX9b4DClDvAzc-ePL4PC56RbL55TgiTIkEMe0nXrC6XWrryAKFnEc2jCu15PjlE8TSiPPH1mZgh7En0svZG4mvNwmw_pIhy_Pj9aJYdGEB447H6g4Cej2gk-hhc09C/s0/audio.png'
title='Music'/>"
imagenes[4] = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSKKGWnFrx29jNuFtdNboqHFHn3_d3nyAq9BoEwdRSCiAUp4UyzFtt3vooYrEZYMnErqigpO90LgTtgdDdXOavxHmgcvU1QLxDfTEtpKAbPdWSiy9aSXEXw-0LZ2rsq2cisuveFeo_EpdM/s0/quote.png'
title='Quote'/>"
imagenes[5] = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrE5iXuwEUlRBtQf3c77lc9z63vgwkjVYjFw3cHImdwwO-_2uFvCxA0uo3QHhTSi3RZteEID8NAXiZX_-gafxukVcQ5gslZ8K6vDhDIFCd7JcJGQ0YX0Hu80AtBwax1CoaQX5Yy346PcaP/s0/aside.png'
title='Blog'/>"
if (etiqueta == "Image")
{document.write(imagenes[1]);}
if (etiqueta == "Video")
{document.write(imagenes[2]);}
if (etiqueta == "Music")
{document.write(imagenes[3]);}
if (etiqueta == "Quote")
{document.write(imagenes[4]);}
if (etiqueta == "Blog")
{document.write(imagenes[5]);}
}
</script>

As categorias do código acima são divididas em:

Marcador para música: Songs

Marcador para vídeo: Video

Marcador para citação: Quote

Marcador para imagem: Image

Marcador para texto: Blog

Podendo mudar os nomes no código acima... Então na hora de postar é só usar o marcador que deseja.

Passo 2 - Antes de ]]></b:skin> cole o código a seguir

.format-icon{
width:50px;
height:50px;
position:absolute;
left:-70px;
top:5px;
display:block;
}

Passo 3 - Agora procure por <div class='post-header'> e acima dele cole o código a seguir:

<b:loop values='data:post.labels' var='label'>
<a class='format-icon' expr:href='data:label.url' rel='tag'>
<script type='text/javascript'>lebel_logo("<data:label.name/>");</script>
</a>
</b:loop>

Então é isso, não é tão fácil como os outros mas a maioria consegue... Créditos ao Pink Skull Design Dúvidas? Só comentar...

Tutorial: Posts relacionados personalizados

2013-08-13T07:55:00.001-07:00

http://www.omundodejess.com/2013/03/tutorial-posts-relacionados.html

Desde o começo da semana passada, quando eu dei uma mudada em alguns detalhes do blog como os posts relacionados e a paginação, algumas pessoas me pediram ajuda pra fazer igual, e como é super facinho, resolvi fazer um tutorial.

O código eu encontrei no blog Jackie Dream, e como ele está com algumas falhas, resolvi fazer algumas alterações, então o código que eu irei postar já está pronto pra ser usado no seu blog, só precisará trocar as cores.

Antes de começar, faça um backup do seu theme e salve.

O primeiro passo é adicionar o widget do Linkwithin, vou fazer um passo a passo, mas acredito que a maioria de vocês já o utilizam.

Acesse o site do Linkwithin clicando aqui e preencha as opções:

Você será redimensionado para esta página, onde você encontra um tutorial de como instalar o widget.

Escolha seu blog, não altere o título e clique em adicionar wigdet. Depois em layout posicione o widget em baixo da área do post e salve.
Feito isso é hora da parte mais legal, colocar o código HTML :)

Agora em vá em modelo e depois editar html, para facilitar a busca aperte ctrl+f e procure por esse trecho ]]></b:skin>
Agora que você encontrou o código, ANTES ou ACIMA dele, cole esse código:

/* LINKWITHIN PERSONALIZADO editado por

Jess Vieira - www.omundodejess.com

----------------------------------------------- */

.linkwithin_div {

background: #F6F1D4; /* COR DE FUNDO */

padding: 0 10px;

}

.linkwithin_text {

font-size:14px; /* TAMANHO DO TITULO DO GADET */

color:#CDA59B; /* COR DO TITULO DO GADET */

font-family: 'Arial', cursive; !important;

}

a#linkwithin_logolink_0, a#linkwithin_logolink_1, a#linkwithin_logolink_2, a#linkwithin_logolink_3, a#linkwithin_logolink_4, a#linkwithin_logolink_5, a#linkwithin_logolink_6, a#linkwithin_logolink_7, a#linkwithin_logolink_8, a#linkwithin_logolink_9, a#linkwithin_logolink_10, a#linkwithin_logolink_11, a#linkwithin_logolink_12, a#linkwithin_logolink_13, a#linkwithin_logolink_14, a#linkwithin_logolink_15, a#linkwithin_logolink_16, a#linkwithin_logolink_17, a#linkwithin_logolink_18, a#linkwithin_logolink_19, a#linkwithin_logolink_20 {

display:none; /* CCOM ISTO ELIMINAMOS O LINK */

}

.linkwithin_posts {

width: 560px !important; /* TAMANHO DO GADET */

}

.linkwithin_posts a {

border: 0 !important;

padding-right:10px !important;

}

.linkwithin_posts a:hover {

background: #D8C1B9 !important; /* COR DO FUNDO AO PASSAR O MOUSE */

-webkit-border-radius: 10px !important; /*BORDAS REDONDAS*/

-moz-border-radius: 10px;

border-radius: 10px;

}

.linkwithin_img_0 div, div.linkwithin_img_0,

.linkwithin_img_1 div, div.linkwithin_img_1,

.linkwithin_img_2 div, div.linkwithin_img_2,

.linkwithin_img_3 div, div.linkwithin_img_3,

.linkwithin_img_4 div, div.linkwithin_img_4,

.linkwithin_img_5 div, div.linkwithin_img_5,

.linkwithin_img_6 div, div.linkwithin_img_6,

.linkwithin_img_7 div, div.linkwithin_img_7,

.linkwithin_img_8 div, div.linkwithin_img_8,

.linkwithin_img_9 div, div.linkwithin_img_9,

.linkwithin_img_10 div, div.linkwithin_img_10,

.linkwithin_img_11 div, div.linkwithin_img_11,

.linkwithin_img_12 div, div.linkwithin_img_12,

.linkwithin_img_13 div, div.linkwithin_img_13,

.linkwithin_img_14 div, div.linkwithin_img_14,

.linkwithin_img_15 div, div.linkwithin_img_15,

.linkwithin_img_16 div, div.linkwithin_img_16,

.linkwithin_img_17 div, div.linkwithin_img_17,

.linkwithin_img_18 div, div.linkwithin_img_18,

.linkwithin_img_19 div, div.linkwithin_img_19,

.linkwithin_img_20 div, div.linkwithin_img_20 { /* BORDAS REDONDAS */

-webkit-border-radius: 10px !important;

-moz-border-radius: 10px;

border-radius: 10px;

border-style: dashed !important;

}

.linkwithin_title {

color: #494347 !important; /* COR DOS TITULOS DAS POSTAGENS */

font-family: 'Arial', cursive; !important; /* TIPO DE FONTE DOS TITULOS DAS POSTAGENS */

font-size: 12px !important; /* TAMANHO DOS TITULOS DAS POSTAGENS */

line-height: 15px !important;

text-align:center;

text-decoration: none;

}

.linkwithin_title:hover {

color: #F6F1D4 !important; /* COR DOS TITULOS AO PASSAR O MOUSE */

font-weight: bold !important;

}

Altere apenas a área que estiver com a escrita indicando, que são cores, fontes e tamanho. Para as cores, eu uso esse site aqui.

Com esse código seus posts relacionados ficarão assim:

Agora se você quer que eles fiquem redondinhos iguais ao do meu blog, é só mudar a área marcada como /* BORDAS REDONDAS */ de 20px para 50px. Visualize, se estiver tudo ok, salve e voilá.

*Atualização: Pessoal, visitando alguns blogs de quem utilizou a personalização, eu encontrei um errinho de margem, mas acabei de editar a postagem e agora o código está corrigido.

Bem facinho né pessoal? Espero que tenham compreendido e que eu tenha tirado as dúvidas de vocês.
Quem usar o código, comenta aqui pra eu ver como ficou, que tal?
xoxo

Slide Postagens Recentes... funciona

2013-08-02T20:11:00.002-07:00

Bom pessoal, uma coisa que muitos vem procurando na blogsfera é como fazer um slide para blogger, aqueles que agora estão criando um blog com estilo revista, sempre fica a procura de um, existe vários tutorias ensinando, mais sempre uma parte que nem todo mundo adora, que é ta trocando direto as imagens do slide, então você já viram o slide do Ecleticus, ele funciona automaticamente, eu não preciso tá direto trocando as imagens, assim que faço algum post novo, ele vai automaticamente por slide, maior barato isso né? Então, decidi mostrar esse tutorial aqui pra vocês, espero que gostem e que agradem a todos. E é claro, só não esqueçam de comentar e é claro creditar. Então, let's go.

1º Vá em Designer > Editar HTML e procure pela seguinte tag ]]></b:skin>

2º Acima dela coloque o seguinte código.

/*----- INÍCIO DO SLIDE  ----------------------------------------*/
.theme-default .nivoSlider {
 position:relative;
 background:#fff url(http://i1043.photobucket.com/albums/b436/JBollton/loading.gif) no-repeat 50% 50%;
 -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
 -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
 box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
 position:absolute;top:0px;left:0px;display:none;
}
.theme-default .nivoSlider a {
 border:0;display:block;
}
.theme-default .nivo-controlNav {
 position:absolute;left:50%;bottom:-42px;
 margin-left:-40px; /* Tweak this to center bullets */
}
.theme-default .nivo-controlNav a {
 display:block;width:22px;height:22px;
 background:url(http://i1043.photobucket.com/albums/b436/JBollton/bullets.png) no-repeat;
 text-indent:-9999px;border:0;margin-right:3px;float:left;
}
.theme-default .nivo-controlNav a.active {
 background-position:0 -22px;
}
.theme-default .nivo-directionNav a {
 display:block;width:30px;height:30px;
 background:url(http://i1043.photobucket.com/albums/b436/JBollton/arrows.png) no-repeat;
 text-indent:-9999px;border:0;
}
.theme-default a.nivo-nextNav {
 background-position:-30px 0;right:15px;
}
.theme-default a.nivo-prevNav {
 left:15px;
}
.theme-default .nivo-caption {
 font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
 color:#fff;
 border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
 color:#fff;
}
/*----- END Default Theme ----------------------------------------*/
/* The Nivo Slider styles */
.nivoSlider {
 position:relative;
}
.nivoSlider img {
 position:absolute;top:0px;left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
 position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;
 padding:0;margin:0;z-index:6;display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:5;
 height:100%;
}
.nivo-box {
 display:block;
 position:absolute;
 z-index:5;
}
/* Caption styles */
.nivo-caption {
 position:absolute;
 left:0px;
 bottom:0px;
 background:#000;
 color:#fff;
 opacity:0.8; /* Overridden by captionOpacity setting */
 width:100%;
 z-index:8;
}
.nivo-caption p {
 padding:5px;
 margin:0;
}
.nivo-caption a {
 display:inline !important;
}
.nivo-html-caption {
 display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
 position:absolute;
 top:45%;
 z-index:9;
 cursor:pointer;
}
.nivo-prevNav {
 left:0px;
}
.nivo-nextNav {
 right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
 position:relative;
 z-index:9;
 cursor:pointer;
}
.nivo-controlNav a.active {
 font-weight:bold;
}
.theme-default #slider {
 margin:100px auto 50px auto;
 width:618px; /* Make sure your images are the same size */
 height:246px; /* Make sure your images are the same size */
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
 margin-top:150px;
}
.clear {
 clear:both;
}

3º Depois procure por </body> e acima dele coloque o código abaixo.

<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
 <script src='http://teste.bymetemplates.zip.net/nivo-slider-modified.min.js' type='text/javascript'/>
 <script type='text/javascript'>
 $(window).load(function() {
 $(&#39;#slider&#39;).nivoSlider();
 });
 </script>

4º Em seguida salve.

5º Agora vá em Designer e adiciona um novo HTML/Javascript e cole o seguinte código.

<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
 <script style="text/javascript" src="http://teste.bymetemplates.zip.net/galleryposts.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;   //number of posts
 var image_height = 246; //image height
 var image_width = 618;  //image width
</script>
<script src="http://www.ecleticus.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>

6º O código destacado de vermelho se refere a quantidade post que você deseja mostrar no slide, o meu eu coloquei 6.

7º O código destacado de azul, se refere a largura(width) e altura(height) do slide, caso não esteja ao seu gosto, só mudar os número para o tamanho desejado.

8º O código destacado de laranja se refere ao endereço do seu blog.

Atenção, só troque a parte destacada de laranja, nada de passar dai.

Então gostaram do tutorial? Espero que sim, agora é só comentar, e se usar só creditar.

Galera to meio sem tempo então não fiz tutorial mas achei esse ai espero que vocês gostem.

Font:http://www.ecleticus.com/2011/10/slide-que-funciona-automatico-no.html

Meu Mundo It

SLIDE POSTS POPULARES CAROUSEL SLIDER 3

SLIDE CAROUSEL COM AS POSTAGENS RECENTES DO BLOG 2

Como colocar slide de novas postagens

CSS Tutorial - Criando um botão flutuante back-to-top (topo da página)

Redes sociais com efeito hover

Autor, marcadores e comentários abaixo do Título do Post

Autor, marcadores e comentários abaixo do Título do Post

Slider Automatico com 2 setas e marcador

Retirando Fundo transparente

Antes de retirar o fundo

Depois de retirar o fundo

Retirando o Fundo

Retirando o Fundo do Widget 'Atribuition'

Antes

Depois

Como retirar o fundo do gadget

Antes Depois

Como retirar o fundo do Cabeçalho

Retirando do rodapé

TUTORIAL: COMO COLOCAR POSTAGENS NA BARRA LATERAL

Slide Automático Estilo Carrossel para Blogger

Slide Carrossel com Posts Recentes no Blog

Colocar Slide Carrossel no Blog

Menu acima do cabeçalho

Tutorial: Postagens recentes abaixo do menu

Slide com atualizações automáticas 2 ()funciona no travel)

Slide últimas postagens (falta testar)

Slide carousel com as postagens recentes do blog

Slide carousel com as postagens recentes do blog

SLIDE COM POSTAGENS RECENTES DO BLOG Funcionaaaa

3 formas de personalizar o título do post

1º - Título do post normal, quando está na página inicial do blog.

2º - Título do post em estado houver, quando o mouse está sobre ele.

3º - Título do post depois que você clicou e já está na página em que lê o post.

Rodapé do blog personalizado

Dividir postagens no blog

http://www.superdicaspfs.com.br/2010/06/dividir-postagens-no-blog-imagens-ou.html

Dividir postagens no blog – Imagens ou bordas entre os posts

Inserindo uma borda em vez de uma imagem

Tutorial escrito e elaborado por Andressa Quadro – Super Dicas PFS.Copyright © 2010 – TODOS OS DIREITOS RESERVADOS

Arquivo em forma de calendário

Última Observação:

PRINCIPAIS EFEITOS DO FAMOSO "CSS"

COMO PERSONALIZAR O POST FOOTER

Categorias personalizadas

Tutorial: Posts relacionados personalizados

Slide Postagens Recentes... funciona

Tutorial escrito e elaborado por Andressa Quadro – Super Dicas PFS.
Copyright © 2010 – TODOS OS DIREITOS RESERVADOS