• Four Create

Slide Show Para Destacar Postagens

#Ezio

Vamos aprender a colocar um slideshow destacar sua postagens mais populares ou aquelas para as quais você queira chamar a atenção do leitor. Fica bem bonito e é muito fácil de configurar e gerenciar. Você pode ver o slideshow em ação AQUI.
Dentro do script abaixo, você poderá alterar o tamanho das imagens de acordo com as medidas do seu template, mudar a cor do background, da exibição, cor e formato das bordas.
A velocidade da exibição também pode ser alterada.
Vamos lá:

Códigos/Script

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

<script type='text/javascript'>
//<![CDATA[

/* ------------------------------------------------------------------------
s3Slider

Developped By: Boban Karišik -> http://www.serie3.info/
CSS Help: Mészáros Róbert -> http://www.perspectived.com/
Version: 1.0

Copyright: Feel free to redistribute the script/modify it, as
long as you leave my infos at the top.
-------------------------------------------------------------------------- */

(function($){

$.fn.s3Slider = function(vars) {

var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

items.each(function(i) {

$(items[i]).mouseover(function() {
mOver = true;
});

$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});

});

var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}

var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}

makeSlider();

};

})(jQuery);

//]]>
</script>

<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>

<style type='text/css'>
#s3slider {
background: #000000;
border: 5px inset #584536;
width: 550px;
height: 200px;
position: relative;
overflow: hidden;
}#s3sliderContent {
width: 550px;
position: absolute;
top:-14px;
padding: 0px;
margin-left: 0;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 550px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style>

Para mudar as cores do background, largura, formato e cor das bosdas, procure o código:

background: #000000; (veja tabela de cores AQUI)
border: 5px inset #584536;

5px é a largura da borda
inset é o formato, pode ser double, outset, solid, dashed
#584536 é o código da cor

Borda dotted

Borda dashed

Borda solid

Borda double

Borda groove

Borda ridge

Borda inset

Borda outset

Para mudar o velocidade de slideshow, altere o valor 4000

Para mudar o tamanho das imagens mude:

width: 550px; (largura)
height: 200px; (altura)
width: 550px; (largura)

Como inserir o script e as imagens acima da área de postagem:

1. Faça o login no Blogger e no seu painel clique em ►Layout

2. Clique na aba ► Editar HTML

3. Encontre a tag </head>

4. Copie código do script e cole- ANTES da tag </ head>

Salve o modelo

Agora volte para a página Layout e clique em "Adicionar um gadget"
Escolha um gadget HTML/JavaScript e coloque dentro dele o seguinte código:

<div id="s3slider">
<ul id="s3sliderContent">

<li class="s3sliderImage">
<a href="SEU-LINK-AQUI"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6iSBNm6isE7DQOZUd5rHd0V2ZEOlVG5T7GONUzoR47RhStf9sErZ6ERSLzBnLDAKPbEKOFWkhyZZ0fD2jSsVVRRg9ElN0IPGM-DiuRX0KJSKvMCMqczapI3fccbLQLP_yqNm0r3pBcmY/s320/Foto1.jpg" />
<span>Texto: Título do post </span></a>
</li>

<li class="s3sliderImage">
<a href="SEU-LINK-AQUI"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhojTtOebNHCFy3w6y95DGPKqyEc2sE05Xg8YI5PzqWJcFBr2puzYrWt75HNXfoH-xdRPLPbYc4rBAONd1Qy5Pkxk1ackfz_Kg_NCmcH5cTArPC1iB4OmiDeLh3h5dQt4glQ1VFOh5YIzE/s320/Foto2.jpg" />
<span>Texto: Título do post</span></a>
</li>

<li class="s3sliderImage">
<a href="SEU-LINK-AQUI"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9J31HLvVewt6Phy34THZU5hwtxR2nzI36hfbHxrXsnsSP59o4X813RqNr0bmGw48lcq9JQjB4aM84Vpd086xTtU1MLXHPuezzBPXCfamUHTo3lTKXVofJpTy0wH0zAXLXn-q3DySCTys/s320/Foto3.jpg" />
<span>Texto: Título do post</span></a>
</li>

<li class="s3sliderImage">
<a href="SEU-LINK-AQUI"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiOt5tDgIxWKSv6wPw9cLAIdDA-cEJJlVdpyRz9E0_lFmOn02JEidtBJniJn7gQBnk9Aac0z-N1d0z1zLSUorF0LcDD-Bed_rpXhTR3_5jvZsrQ8PGM4SnjJFasEdmCaIqA5hhHJy5FdI/s320/Foto4.jpg" />
<span>Texto: Título do post</span></a>
</li>

</ul>
</div>

<div class='clear'></div>

Edite o código colocando o link e o endereço da sua imagem (destaque em vermelho e azul)

Salve. Clique sobre o gadget, arraste e solte acima da seção "Postagens"
Visualize e salve!!

Observe que neste exemplo usei apenas quatro imagens com links. Você pode exibir menos ou mais links acrecentando ou retirando as seções (código abaixo).
ATENÇÃO! Cole sempre os códigos adicionais acima/antes da tag </ul>

<li class="s3sliderImage">
<a href="SEU-LINK-AQUI"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6iSBNm6isE7DQOZUd5rHd0V2ZEOlVG5T7GONUzoR47RhStf9sErZ6ERSLzBnLDAKPbEKOFWkhyZZ0fD2jSsVVRRg9ElN0IPGM-DiuRX0KJSKvMCMqczapI3fccbLQLP_yqNm0r3pBcmY/s320/Foto1.jpg" />
<span>Texto: Título do post </span></a>
</li>

Prontinho! Eu acho que você vai gostar do resultado!

0 comentários

Dicas, Slide, Tutoriais

Gadget Para Redes Socias Com caixa de Busca

#Ezio

O Blogger Templates & Tricks nos oferece um gadget muito interessante que inclui uma caixa de busca acoplada, além dos botões de subscrição do FeedBurner, inscrições via email, botões de redes sociais ( Digg, Twitter , Facebook, Delicious ) para partilhar os seus artigos, entre as redes sociais. Os botões de redes sociais são alimentados por www.addthis.com.
Você não precisa mudar nada no código da caixa de pesquisa .Para adicionar esse widget na barra lateral do Blogger , sem fazer qualquer modificação , a largura da barra lateral deve ter pelo menos 305 px de largura. Você pode adicionar este gadget de pesquisa em seu blog seu blog Blogger em poucos minutos, é muito fácil de configurar. Vejamos como:

Faça login, clique em "Design" depois em "Editar HTML"
Copie o código abaixo e cole ANTES da tag </head>

<style type="text/css">
.subbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.rssbox:hover{border:1px solid #92aed1}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;text-decoration:underline}
.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.emailsbox:hover{border:1px solid #92aed1}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}
.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.twitterbox:hover{border:1px solid #92aed1}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}
.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.facebookbox:hover{border:1px solid #92aed1}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#7c8a9b;text-decoration:underline}
#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}
#search:hover{border:1px solid #92aed1}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% "Tahoma",Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}
</style>

Salve o template e volte a sua página Design, clique em adicionar um gadget, escolha a opção "HTML/Javascript ", copie o código abaixo e cole dentro do box do gadget. Salve e pronto.

<div class="subbox">
<div id='search' style='display:inline;'>
<form action='/search' id='searchform' method='get'>
<input id="s" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = "";}" type="text" value="Search..." />
<input id="searchsubmit" type="submit" value="Search" />
</form>
</div>
<table><tr>
<td><div class="rssbox">
<a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl4AXPY7yyq0VWBfjwhLMhDQgKi_vHaOwzN8bU6H9hyyU8L7jzqJu8IbDZoLtBplQhCeflL4vukKF9ym-HgIbVvrsicfewOf4ut9RYh9DFng_msQeJTuRG-6P_sYhqk-0PFuKMx6zkkcMp/" alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a>
</div></td>
<td><div class="emailsbox">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH9_yo_IXiAvPnrF-VBX7iLzW0K0I9ux4IGtvQ_g79_ZmIB5s40ernBXUsERSwuGm9cTNgMyWQOxhZsco1KOdBT5EEjQOCO2LM6cvoM3Wbd_JMZNqP90VAy6Tcunn9hstXtNw_TD-obOQk/" alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a>
</div></td>
</tr><tr>
<td><div class="twitterbox">
<a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_zSbwYIoAgRk0_l7bCpyMjE7XHXaLnsSqVWZMpEhRyliuzRjuMxaH879N9OCdLcOBle_QeHLFDoZB9Ye27Osg6-IJ63aV5R86KIwb4aI5justccwa-f_M197WTxl10umnyr5TnD-LElrC/" alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow">Twitter</a>
</div></td>
<td><div class="facebookbox">
<a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz8XykvcfcUm1oEsYRYEiCJHgiFDYI-gJx0SQ6u2fMaZQjsqaBR2hFpF-nXFa656YwM9w3VpiStRNBiD8x8oiP3PjEWUY6ov-VJR-iubKw99y0absgcjIQFSsr2prYv3o7xPcfuBqvn2wi/" alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow">Facebook</a>
</div></td>
</tr></table>
<p style="display:none;" align="center">Widget by <a href="http://www.bloggertipandtrick.net/" target="_blank">Blogger Tips And Tricks</a></p>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFnkYnlo2V5CVleajFV927xR4ftC2FsMBqXPVqJQASaX6CUew1g3OSAuLtdCLe5uVD5TA8vrWjmu7qOg-tQY0o5R_jXWaEVJJJBz4_jypeRKmHilnm8e24lrqk3hSk75Z-Mtg07o6bOS0/' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0fZbJXjAkdfUovoioF8YmdVznz1gexfTeC7_Lqft_z5kymEvBXYYLxO9aug0Vxz91n32hq8H4ffD99RbC-AQSk2IqCtseU04Vdf8Hac-SlAHaM9N3v7wg-UrSKqvTSWrk_gRbZJed8yc/' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYp42pzvtQkbOLq0usShrWtlAv2fABzSTmOM0ceXUXTCmdl2VW8T6XwA4DHHf_DJrhUgMjrU87CAjnb-jdmKhDMwxg3Jt8XTC1VmAskdPm8LuvDCOWUIoS9avycv92v7uoaAanJxdAKuQ/' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9pPU7WohNmh8BzMPEA55NGwmc75OBROd8O-L3MfB_r1idy2x4nZmlGQMD6FFtXzs4O2v9GYi2B9FpMLXu2S1vcDd81i_5uiAAC_s-mcIMlsU8MKG79QkEJTPch1gZK1CfzTeGsgY2sKI/' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5izG1ed5V7whmyyl-j9I4Fs_UXR8NcwZONDDO3duo7cVDnzYEVaR-LUv64oMs9_tX7vB2TLpD3gOzAZzn7sbRY0cVE7jaaT2xV2Z0kA07z6TyHw12shD-aOKxD936kFjBWOjr79Ac3N4/' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDiTPMsZnUnEXpKEn6Y4PUZm2GPZQ4-84yhma8LS9eP-16DFQmxpAgBftXK1Q2XXxLmHuqdGt4cnLLzJVL0fDpqlAan620GKI0nEe26KV3fHN6GZXuN0eRQmAjTmXOPLeFBXesOUlAMvs/' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf4EK5SamtORdGAdjXFXXgsmBYLM-ovQomaF63D2BqhDZm4eXpqFiCAEMaNa_lTwG33YSG77NDwS8ceazZBxglOiK7W27tEpo8OKSgJoSk4PfEheoCYucksXvVtTv1ZCII_c3dQQRspGU/' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
</div>

Configure as partes grifadas:

FEEDBURNER-ID ► Seu Feedburner ID.(4 vezes).
TWITTER-USERNAME ►Seu Twitter username.
FACEBOOK-USERNAME ►Seu Facebook username.

Caso você tenha algum conhecimento de html e CSS, poderá fazer algumas mudançs para adequar melhor ao seu layout.

0 comentários