DEMO
29 de jan. de 2013
25 de jan. de 2013
Menu fixo com banner e links para o Blogger
DEMO
Mais um modelo de menu, mas este bem diferente. Possui área para links, área para colocar um banner e setas deslizantes e mais, você pode inserir, se quiser, botões sociais, box do Facebook, chat, o que bem entender.
Vá até o "Modelo de seu blog", clique em "Editar HTML"
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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011
Agora procure por:
</body>
Acima dele, cole o código abaixo, fazendo as modificações necessárias.
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<b:include data='blog' name='google-analytics'/>
<!-- zFPmenu START -->
<div id='zfpm_div' style='display:none;'>
<div id='zfpm_upperBox'>
<div class='separator' style='clear: both; text-align: center;'>
<a href='http://templateseacessorios.blogspot.com' imageanchor='1' style='margin-left: 1em; margin-right: 1em;'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnE6V3elLsZ6Z7n2B87CeeJqmlWime5DbKhj7idclMtAa70QAFvJ7s15O33naG31-o4CNqgb5bdo2IQKjxCpPS39fToHj1Mo2BaBB9_sxrLKvi_M87piN32jayWt6P89y6irYAugp0gbI/s1600/banner+templates.png'/></a></div>
</div>
<ul id='zfpm_ul'>
<!-- Your menus start -->
<li><a href=''>Início</a></li>
<li class='dir'><a href=''>Templates</a>
<ul>
<li class='dir'><a href=''>Mais links</a>
<ul>
<li><a href='AQUI O ENDEREÇO DO LINK'>LINK 2.1.1</a></li>
<li><a href='AQUI O ENDEREÇO DO LINK'>LINK 2.1.2</a></li>
</ul>
</li>
<li><a href='AQUI O ENDEREÇO DO LINK'>LINK 2.2</a></li>
<li><a href='AQUI O ENDEREÇO DO LINK'>LINK 2.3</a></li>
</ul>
</li>
<!-- Your menus end -->
</ul></div>
<script type='text/javascript'>
var zfpm_colorTheme = 'light'
var zfpm_shareBox = 'no';
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://zfpmenu.googlecode.com/svn/trunk/js/zfpmenu.js' type='text/javascript'/>
<!-- zFPmenu END -->
Mais um modelo de menu, mas este bem diferente. Possui área para links, área para colocar um banner e setas deslizantes e mais, você pode inserir, se quiser, botões sociais, box do Facebook, chat, o que bem entender.
Vá até o "Modelo de seu blog", clique em "Editar HTML"
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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011
Agora procure por:
</body>
Acima dele, cole o código abaixo, fazendo as modificações necessárias.
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<b:include data='blog' name='google-analytics'/>
<!-- zFPmenu START -->
<div id='zfpm_div' style='display:none;'>
<div id='zfpm_upperBox'>
<div class='separator' style='clear: both; text-align: center;'>
<a href='http://templateseacessorios.blogspot.com' imageanchor='1' style='margin-left: 1em; margin-right: 1em;'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnE6V3elLsZ6Z7n2B87CeeJqmlWime5DbKhj7idclMtAa70QAFvJ7s15O33naG31-o4CNqgb5bdo2IQKjxCpPS39fToHj1Mo2BaBB9_sxrLKvi_M87piN32jayWt6P89y6irYAugp0gbI/s1600/banner+templates.png'/></a></div>
</div>
<ul id='zfpm_ul'>
<!-- Your menus start -->
<li><a href=''>Início</a></li>
<li class='dir'><a href=''>Templates</a>
<ul>
<li class='dir'><a href=''>Mais links</a>
<ul>
<li><a href='AQUI O ENDEREÇO DO LINK'>LINK 2.1.1</a></li>
<li><a href='AQUI O ENDEREÇO DO LINK'>LINK 2.1.2</a></li>
</ul>
</li>
<li><a href='AQUI O ENDEREÇO DO LINK'>LINK 2.2</a></li>
<li><a href='AQUI O ENDEREÇO DO LINK'>LINK 2.3</a></li>
</ul>
</li>
<!-- Your menus end -->
</ul></div>
<script type='text/javascript'>
var zfpm_colorTheme = 'light'
var zfpm_shareBox = 'no';
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://zfpmenu.googlecode.com/svn/trunk/js/zfpmenu.js' type='text/javascript'/>
<!-- zFPmenu END -->
Efeito deslizante nos marcadores do Blogger
Coloque um pequeno efeito deslizante em seus marcadores com um código simples e leve. Só mesmo para dar uma bossa a seu blog, quando o leitor passar o mouse por cima do link.
Vá até o modelo de seu blog e clique em Editar HTML
Procure por </head>
E acima dele, cole o código abaixo:
<!-- Codigo marcadores -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 450;
$(document).ready(function() {
$('a.linknudge, .Label ul li a').hover(function() {
$(this).animate({
paddingLeft: '20px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});</script>
Vá até o modelo de seu blog e clique em Editar HTML
Procure por </head>
E acima dele, cole o código abaixo:
<!-- Codigo marcadores -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 450;
$(document).ready(function() {
$('a.linknudge, .Label ul li a').hover(function() {
$(this).animate({
paddingLeft: '20px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});</script>
Menu social com efeito para seu blog
DEMO
Um blog pode sim sobreviver sem páginas sociais mas que é melhor tê-las para uma melhor divulgação não resta dúvidas. E são tantas redes socias, para compartilhar fotos, opinião, compartilhar postagens, vídeos e por aí vai. Que tal então este modelo de widget enxuto, com um efeito bonito para seu blog, e ainda por cima fácil de instalar ?
Clique em Adicionar um Gadget
Ao abrir, clique em HTML/Javascript
Cole então o próximo código fazendo as modificações necessárias.
<div id="GIB-social-hover">
<div id="links"><a href="AQUI O ENDEREÇO DE SEU TWITER" class="twitter" title="Twitter" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEuqVxBf5xJDNWZMBfQGDOgNVTlaqIR8AHA6xU-iWBUIUAfjMo99nfu8Vh8aBWjlrTB524mdphFcugDZl4Bku4yltpiKzcffdIPO8xQMeU7BWUqBYFZxO3007l0IEwVpNR9dvpQHJBSyo/s1600/twitter.png" /></div></a>
<a href="AQUI O ENDEREÇO DE SEU FACEBOOK" class="facebook" title="Facebook" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtk47tScUdxImSngDQVCn03GZ5HdhwLyXkd2isUS4MpNP8rfWcBLtPaAqF6qm_ziuKWmaTwsgQHRdC4BguTTyKb0gkITEKg9zQArhKJP6otIRNTRfTo-U912OsZjswl2kBTC7PFVof47Y/s1600/FB.png" /></div></a>
<a href="AQUI O ENDEREÇO DE SEU GOOGLE PLUS" class="google" title="Google Plus" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkU_Oi3xlliNmT2oubbFcL_DpadgnRRo1J1IOP2wEA6_NxhClR04CuvvOlUtmzEbZet7vaMLe5j2jwGs6tM-EijOO8WaOjsHvXmYPe1FzIn69EcEG8gZC9OmB9bTn5E_UhmHEYyPJ7vSI/s1600/google.png" /></div></a>
<a href="AQUI O ENDEREÇO DE SEU PINTEREST" class="pinterest" title="Pinterest" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtEj-fPKlAziPPXqn_fdVBZx-qLPcnbWXP09dFUXz9S3G2UPJ2Gy1ii5EuR_yCXBNzB4ciXIKxbfPbdOe4pudGsfAf2omMVqRnSTiGUTtiEQRgK9wfZnYg0We75nUYNcedRLVYmIx3R70/s1600/pin.png" /></div></a>
<a href="AQUI O ENDEREÇO DE SEU FEEDBURNER" class="rss" title="Feedburner" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVHVLNTtQVSnUdC2ysmn8vhtkJu6gCiRcJa4IqiDnVK_TaY4jqHXzmwJdZuF9wYdv_adpQxeDsfFXo3Cayh9UqzdDlz1DU-9lMh5ou-221S5JMGFflgwXbQtCq7GfCrJO-FAh1FKmycmM/s1600/rss.png" /></div></a>
</div></div>
<style>/*Menu social---------------------------------------------------------------------------*/
.tota { margin:10px auto; }
#GIB-social-hover{position:relative;width:100%;height:215px;
background:#404040 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7O6zG-ctacFBZOuSLrl4l5apr9_MtQe-GZ7iOqvQYJvjcDheKt-Lx3GwtOnYKCe8AKR89zc9erLLuV4Tdawy6tjPCIhyeKprhE1UuhvkVgkYlxpuYsZDrUz41OJfXYDnMKVL0nm4bDhc/s1600/vintage.png");}
#GIB-social-hover #title{font-family:'Open sans';font-size:28px;color:#fff;font-weight:600;margin:30px 20px 0;text-align:center;line-height:1.1em;text-shadow:1px 1px 1px rgba(0,0,0,0.3);}
#GIB-social-hover #title span{display:block;font-size:14px;line-height:1.5em;margin-top:10px;font-weight:400;}
#GIB-social-hover #links{position:absolute;bottom:0;width:100%;}
#GIB-social-hover a{display:block;padding:0 20px;height:42px;line-height:42px;color:#fff;font-size:12px;background:rgba(0,0,0,0.08);border-top:1px solid #4c4644;border-top:1px solid rgba(0,0,0,0.1);
-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;
#GIB-social-hover a:hover{background:rgba(0,0,0,0.15);text-decoration:none;}
#GIB-social-hover a.twitter:hover{background:#79dbff;}
#GIB-social-hover a.facebook:hover{background:#6e9bee;}
#GIB-social-hover a.google:hover{background:#cccccc;}
#GIB-social-hover a.pinterest:hover{background:#cb2027;}
#GIB-social-hover a.rss:hover{background:#ffae42;}
#GIB-social-hover a span{height:15px;line-height:15px;width:15px;text-align:center;margin-right:20px;font-size:13px;padding:5px;border-radius:99px;background:rgba(0,0,0,0.1);}
#home-tagline{text-align:center;font-size:32px;color:#000;font-weight:300;margin:60px 0 40px;}
#home-tagline strong{color:#ff5421;font-weight:300;}#home-highlights{margin-bottom:40px;}
.home-highlight{float:left;width:142px;padding:30px 0;margin-right:21px;text-align:center;font-size:13px;display:block;opacity:0.9;color:#796f6c;font-size:40px;background:#e2e0df;background:rgba(0,0,0,0.04);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}
.home-highlight p{margin:0;}
.home-highlight:hover{color:#3a3534;text-decoration:none;background:rgba(0,0,0,0.1);}
.home-highlight-title{font-size:13px;margin:7px 0 0;text-align:center;color:#796f6c;cursor:pointer;font-weight:900;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}
.home-highlight:hover .home-highlight-title{color:#3a3534;}
#home-featured{min-height:400px;margin-bottom:37px;}
#home-featured .home-divider{margin-top:0;}
#home-featured h2{text-align:center;font-size:32px;color:#161414;font-weight:300;margin:0 0 40px;}
#home-featured h2:after{display:block;content:"";width:342px;margin:0 auto;height:1px;background:#161414;margin-top:5px;}
.featured-theme-entry-content{font-size:16px;float:left;width:430px;font-weight:300;}
.featured-theme-entry-content h3{font-size:21px;line-height:1.4em;margin:0;font-weight:400;}
.featured-theme-entry-content .button{margin-top:15px;}
.featured-theme-entry-content .button:hover{background:#f5634a;opacity:1;}
.featured-theme-entry-img{display:block;float:right;margin-right:5px;}.featured-theme-entry-img a{display:block;padding:6px;background:#fff;border-radius:2px;}
#featured-theme-slider .flex-control-nav{position:absolute;top:-20px;left:-54px;}
#featured-theme-slider .flex-direction-nav{margin:0;}
#featured-theme-slider .flex-direction-nav li a{background:#312d2c;cursor:pointer;display:block;height:70px;line-height:70px;width:30px;color:#fff;text-align:center;margin:-30px 0 0;position:absolute;top:50%;-moz-transition:background 0.3s ease-in-out 0s;opacity:0.15;border-radius:4px;}
#featured-theme-slider .flex-direction-nav li .flex-prev{left:-90px;}
#featured-theme-slider{}
</style>
Um blog pode sim sobreviver sem páginas sociais mas que é melhor tê-las para uma melhor divulgação não resta dúvidas. E são tantas redes socias, para compartilhar fotos, opinião, compartilhar postagens, vídeos e por aí vai. Que tal então este modelo de widget enxuto, com um efeito bonito para seu blog, e ainda por cima fácil de instalar ?
Clique em Adicionar um Gadget
Ao abrir, clique em HTML/Javascript
Cole então o próximo código fazendo as modificações necessárias.
<div id="GIB-social-hover">
<div id="links"><a href="AQUI O ENDEREÇO DE SEU TWITER" class="twitter" title="Twitter" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEuqVxBf5xJDNWZMBfQGDOgNVTlaqIR8AHA6xU-iWBUIUAfjMo99nfu8Vh8aBWjlrTB524mdphFcugDZl4Bku4yltpiKzcffdIPO8xQMeU7BWUqBYFZxO3007l0IEwVpNR9dvpQHJBSyo/s1600/twitter.png" /></div></a>
<a href="AQUI O ENDEREÇO DE SEU FACEBOOK" class="facebook" title="Facebook" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtk47tScUdxImSngDQVCn03GZ5HdhwLyXkd2isUS4MpNP8rfWcBLtPaAqF6qm_ziuKWmaTwsgQHRdC4BguTTyKb0gkITEKg9zQArhKJP6otIRNTRfTo-U912OsZjswl2kBTC7PFVof47Y/s1600/FB.png" /></div></a>
<a href="AQUI O ENDEREÇO DE SEU GOOGLE PLUS" class="google" title="Google Plus" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkU_Oi3xlliNmT2oubbFcL_DpadgnRRo1J1IOP2wEA6_NxhClR04CuvvOlUtmzEbZet7vaMLe5j2jwGs6tM-EijOO8WaOjsHvXmYPe1FzIn69EcEG8gZC9OmB9bTn5E_UhmHEYyPJ7vSI/s1600/google.png" /></div></a>
<a href="AQUI O ENDEREÇO DE SEU PINTEREST" class="pinterest" title="Pinterest" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtEj-fPKlAziPPXqn_fdVBZx-qLPcnbWXP09dFUXz9S3G2UPJ2Gy1ii5EuR_yCXBNzB4ciXIKxbfPbdOe4pudGsfAf2omMVqRnSTiGUTtiEQRgK9wfZnYg0We75nUYNcedRLVYmIx3R70/s1600/pin.png" /></div></a>
<a href="AQUI O ENDEREÇO DE SEU FEEDBURNER" class="rss" title="Feedburner" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVHVLNTtQVSnUdC2ysmn8vhtkJu6gCiRcJa4IqiDnVK_TaY4jqHXzmwJdZuF9wYdv_adpQxeDsfFXo3Cayh9UqzdDlz1DU-9lMh5ou-221S5JMGFflgwXbQtCq7GfCrJO-FAh1FKmycmM/s1600/rss.png" /></div></a>
</div></div>
<style>/*Menu social---------------------------------------------------------------------------*/
.tota { margin:10px auto; }
#GIB-social-hover{position:relative;width:100%;height:215px;
background:#404040 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7O6zG-ctacFBZOuSLrl4l5apr9_MtQe-GZ7iOqvQYJvjcDheKt-Lx3GwtOnYKCe8AKR89zc9erLLuV4Tdawy6tjPCIhyeKprhE1UuhvkVgkYlxpuYsZDrUz41OJfXYDnMKVL0nm4bDhc/s1600/vintage.png");}
#GIB-social-hover #title{font-family:'Open sans';font-size:28px;color:#fff;font-weight:600;margin:30px 20px 0;text-align:center;line-height:1.1em;text-shadow:1px 1px 1px rgba(0,0,0,0.3);}
#GIB-social-hover #title span{display:block;font-size:14px;line-height:1.5em;margin-top:10px;font-weight:400;}
#GIB-social-hover #links{position:absolute;bottom:0;width:100%;}
#GIB-social-hover a{display:block;padding:0 20px;height:42px;line-height:42px;color:#fff;font-size:12px;background:rgba(0,0,0,0.08);border-top:1px solid #4c4644;border-top:1px solid rgba(0,0,0,0.1);
-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;
#GIB-social-hover a:hover{background:rgba(0,0,0,0.15);text-decoration:none;}
#GIB-social-hover a.twitter:hover{background:#79dbff;}
#GIB-social-hover a.facebook:hover{background:#6e9bee;}
#GIB-social-hover a.google:hover{background:#cccccc;}
#GIB-social-hover a.pinterest:hover{background:#cb2027;}
#GIB-social-hover a.rss:hover{background:#ffae42;}
#GIB-social-hover a span{height:15px;line-height:15px;width:15px;text-align:center;margin-right:20px;font-size:13px;padding:5px;border-radius:99px;background:rgba(0,0,0,0.1);}
#home-tagline{text-align:center;font-size:32px;color:#000;font-weight:300;margin:60px 0 40px;}
#home-tagline strong{color:#ff5421;font-weight:300;}#home-highlights{margin-bottom:40px;}
.home-highlight{float:left;width:142px;padding:30px 0;margin-right:21px;text-align:center;font-size:13px;display:block;opacity:0.9;color:#796f6c;font-size:40px;background:#e2e0df;background:rgba(0,0,0,0.04);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}
.home-highlight p{margin:0;}
.home-highlight:hover{color:#3a3534;text-decoration:none;background:rgba(0,0,0,0.1);}
.home-highlight-title{font-size:13px;margin:7px 0 0;text-align:center;color:#796f6c;cursor:pointer;font-weight:900;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}
.home-highlight:hover .home-highlight-title{color:#3a3534;}
#home-featured{min-height:400px;margin-bottom:37px;}
#home-featured .home-divider{margin-top:0;}
#home-featured h2{text-align:center;font-size:32px;color:#161414;font-weight:300;margin:0 0 40px;}
#home-featured h2:after{display:block;content:"";width:342px;margin:0 auto;height:1px;background:#161414;margin-top:5px;}
.featured-theme-entry-content{font-size:16px;float:left;width:430px;font-weight:300;}
.featured-theme-entry-content h3{font-size:21px;line-height:1.4em;margin:0;font-weight:400;}
.featured-theme-entry-content .button{margin-top:15px;}
.featured-theme-entry-content .button:hover{background:#f5634a;opacity:1;}
.featured-theme-entry-img{display:block;float:right;margin-right:5px;}.featured-theme-entry-img a{display:block;padding:6px;background:#fff;border-radius:2px;}
#featured-theme-slider .flex-control-nav{position:absolute;top:-20px;left:-54px;}
#featured-theme-slider .flex-direction-nav{margin:0;}
#featured-theme-slider .flex-direction-nav li a{background:#312d2c;cursor:pointer;display:block;height:70px;line-height:70px;width:30px;color:#fff;text-align:center;margin:-30px 0 0;position:absolute;top:50%;-moz-transition:background 0.3s ease-in-out 0s;opacity:0.15;border-radius:4px;}
#featured-theme-slider .flex-direction-nav li .flex-prev{left:-90px;}
#featured-theme-slider{}
</style>
22 de jan. de 2013
Mais modelos de menu de páginas, ou guias
Mais alguns modelinhos de menu de páginas para quem uso o template Simples.
Menu de navegação por página, alguns modelos
Vamos modernizando, vamos modificando, vamos melhorando, vamos colocar um menu de navegção de página e substituir "Postagens antigas" no Blogger.
21 de jan. de 2013
Como descobrir a senha do roteador
Para descobrir a senha de seu roteador para conectar seu celular, tablet, notbook ou outro aparelho é necessário primeiro entrar no computador ligado ao roteador, o computador central. Uma vez conectado, clique no ícone de acesso a internet, geralmente está na barra, no lado direito do monitor de seu computador.
Abrirá uma janela. Clique então com o botão esquerdo do mouse.
Abriu então uma outra janela, como essa abaixo. Clique em "Propriedades"
Ao abrir, clique em "Segurança" depois clique em "Mostrar caracteres" . Eis a sua senha.
O meu computador é um HP Pavillon e meu roteador um DLink. Espero que a solução que encontrei para mim sirva para você. Forte abraço.
Abrirá uma janela. Clique então com o botão esquerdo do mouse.
Abriu então uma outra janela, como essa abaixo. Clique em "Propriedades"
Ao abrir, clique em "Segurança" depois clique em "Mostrar caracteres" . Eis a sua senha.
O meu computador é um HP Pavillon e meu roteador um DLink. Espero que a solução que encontrei para mim sirva para você. Forte abraço.
Assinar:
Postagens (Atom)
