O primeiro da série "É grátis", completamente personalizado, e disponível pra download, gostou da idéia, vem ver que lindo.
Atenção !!! Leia o restante do post.
Este modelo permite que você mude a imagem do banner, e eu até fiz três modelinhos que combinam com ele, se acaso você se interessar, basta abrir a imagem e copiar o endereço dela, ou baixar em seu computador e criar seu próprio banner a partir delas.Caso você não saiba como colocar o banner no blog, eu explico certinho como faz em outra postagem, é só clicar no botão abaixo:
Código para "Menu Fixo"
<div id="mymenuda">
<div id="mymenu">
<li><a href=" Link ">Título</a></li>
<li><a href="Link ">Título</a></li>
<li><a href=" Link ">Título</a></li>
<li><a href=" Link ">Título</a></li>
<li><a href=" Link ">Título</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>
Para editar o menu é bem simples. Copie o codigo e antes de salvar, faça as seguintes edições:
Onde está escrito "Link" em verde, você coloca o link que o menu é direcionado.
E onde esta escrito "Titulo" em vermelho, você muda para os nomes dos menus.
Código para "Miniaturas de posts recentes
<div id="posts-recente"><div class='widget-content'>
<style type="text/css">
/* CSS - Destaque de posts */
.bsrp-gallery {
width:100%;
clear:both;
margin-left: 3px;
margin-top: 0px;
padding-left:0px;
}
.bsrp-gallery:after {
display: table;
clear: both;
border: 5px #13aa8c solid;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
border: 5px #13aa8c solid;
margin: 0 0 0 15px;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background: #afefe1; /*--cor de fundo das miniaturas ao passar o mouse --*/
display: block;
clear: left;
font-size: 14px;
font-family: Arial;
line-height:1.3em;
font-weight:300;
height: 55%; /*--define a altura da legenda --*/
width:88%; /*--define a largura da legenda --*/
position: absolute;
bottom:0%;
text-align: center;
margin:0 0 0px 0px;
padding:40px 8px 20px 10px;
color:#000000; /*--cor da fonte do texto--*/
word-wrap: break-word;
overflow:hidden;
filter:alpha(opacity=0.30);
-moz-opacity:0.30;
-khtml-opacity:0.30;
opacity:0;
}
.bsrp-gallery .bs-item .ptitle:hover {
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity:0.9;
opacity:0.4;
}
.bsrp-gallery a img {
background: #fff;
float: left;
}
.bsrp-gallery a:hover img {
}
/* CSS FIM */
</style>
<script>
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="by elainegaspareto.com">'];
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/AVvXsEioTYvxvu2xDfiiQteJ5v71OigbpbDRzCFGKBxXRlZGbYrPs5RfYgeotOOImh8X_wXpliOMntJiHicZ1AgFYuieEOTx7hOq7HdWVCPn_cz3OdJui2-8OI_A_Q1G_L_DuOUa8bHaZYYn_vgx/s1600/sem.gif';
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; /*--define em qual post começa a exibição --*/
var bsrpg_thumbSize = 130; /*--define o tamanho das miniaturas --*/
var bsrpg_showTitle = true;
document.write("<script src=\"ENDEREÇO DO SEU BLOG//feeds/posts/default?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script>
</div>
<div class='clear'></div></div>
Antes de salvar este código, edite a parte onde esta escrito "ENDEREÇO DO SEU BLOG", em Azul, com o endereço do seu blog.
Qualquer dúvidas sobre estes códigos, você pode estar usando as fontes orignais, onde o menu fixo quem disponibiliza é a Renata Massa, nesse post "Menu fixo no topo do Blog" , e os post recentes quem passa é a Karoline Vendramini no post "Blogger, miniatura dos ultimos posts", e eu os personalizei para se adequar ao template.
Imagens e todos o trabalho de personalização são de minha autoria.
Arquivo do download é zippado e a senha é
#PBPCR017G$
Qualquer dúvidas entre em contato através do formulário no menu "contato".
Qualquer comentário a respeito faça neste post, para que possamos interagir.
Espero que tenham gostado.
Fiz com Muito Carinho
Avalie !
ResponderExcluir