quarta-feira, 23 de dezembro de 2015

Pagina pop up sobre nós personalizada

pagina-pop-up-sobre-nós-personalizada

Essa é uma das paginas mais importantes, pois as pessoas vão visualizar quem esta por trás do site então você precisa de uma para mostrar credibilidade para as pessoas isso nada mais é do que falar aos outros quem é você e o que deseja com seu blog bem como seus principais contatos então vamos ensinar como adicionar isso ao blogger isso da um efeito diferenciado uma vez que o visitante clica no menu sobre nós isso salta aos seus olhos criando um bom efeito


Como adicionar no blogger
Faça login no blogger então em meno procure por menu
modelo então editar/HTML então com as teclas combinadas CTRL+F
busque por <head> logo abaixo disso vamos instalar a fonte copie e cole o seguinte código

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

Em seguida procure por isso ]]></b:skin> então copie o código e cole acima o seguinte código

.boxinner{z-index:999999;width:100%;height:600px;position:absolute;left:50%;margin-left:-250px;background-color:#34393D;border-radius:3px;text-align:middle;top:20px}
.contentbox{position:absolute;background-color:#fff;top:30px;right:0;left:0;bottom:0;border-bottom-left-radius:3px;border-bottom-right-radius:3px;box-shadow:0 3px 5px rgba(0,0,0,.3)}
.circle{float:left;height:7px;width:7px;margin:10px 0 0 10px;border-radius:50%}
.circle:first-child{background:#555}
.circle:nth-child(2){background:#555}
.circle:nth-child(3){background:#555}
kepala{background:#E38202;height:50px;width:100%;position:inherit}
#textlogo{color:#FFF;padding-top:15px;text-align:center;font-weight:700;font-size:15px;position:inherit;background:#f88c00;height:70%;width:60.6%}
#left{background:#333;color:#fff;top:50px;bottom:0;right:0;width:250px;position:inherit}
#left a{color:#999;}#left a:hover{color:#fff;}
.taber1,.taber2,.taber3,.taber4,.taber5,.taber6{font-size:15px;padding:15px 25px;font-family:&#39;Roboto Slab&#39;,Arial,sans-serif;color:#999;border-bottom:1px solid #444;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out}
.taber1:hover{background:#f88c00;color:#fff}
.taber2:hover{background:#D92121;color:#fff}
.taber3:hover{background:#0B76B9;color:#fff}
.taber4:hover{background:#27C9E9;color:#fff}
.taber5:hover{background:#3ca9d0;color:#fff}
.taber6:hover{background:#FFD100;color:#fff}
div i{margin-right:10px}
#aboutme{position:absolute;border-radius:50%;background-size:100%;width:30px;height:30px;margin-top:8px;right:5px;border:2px solid #FFCC89;background-image:url(&quot;http://1.bp.blogspot.com/-N3MXtJe8A4w/VYEprWQo0WI/AAAAAAAAA8o/fz57ZUrziMA/s1600/Favicon.png&quot;)}
#aboutus{top:50px;width:59%;padding:10px;color:#444;text-align:justify;position:inherit;float:left;font-size:11px}
#aboutus img{width:98%;border:3px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.3);margin-bottom:5px}
.scrollbarbox{overflow:hidden;text-align:justify;margin-top:45px}
.scrollbarbox .innerone{height:480px;overflow:auto}}
a.popup-link{border-bottom:3px solid #e2e2e2;border-radius:3px;padding:8px 40px!important;background:#fff;color:#555!important;text-align:center;letter-spacing:1px;margin-right:10px}
#popup{visibility:hidden;opacity:0}
#popup:target{visibility:visible;opacity:1;background-color:rgba(0,0,0,0.8);position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:99999999999;-webkit-transition:all 1s;-moz-transition:all 1s;transition:all 1s}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}}
.popup-container{position:relative;margin:0 auto;padding:5px 15px;}
a.popup-close{position:relative;top:18px;border-radius:50px;left:5px;margin:0 auto;padding:4px 7px;font-size:13px;text-decoration:none;line-height:1;color:#fff}


Em seguida salve o seguinte código abaixo de <body> 

<div class='popup-wrapper' id='popup'> <div class='popup-container'> <div class='boxinner'> <div class='circle'/> <div class='circle'/> <div class='circle'/> <div class='contentbox'> <kepala><span id='textlogo'>BUNGFIAN</span> <span id='aboutme'/> <a class='popup-close' href='#closed' title='Close'><i class='fa fa-toggle-on'/></a> </kepala> <br/> <div class='scrollbarbox'> <div class='innerone'> <div id='aboutus'> <img src='//2.bp.blogspot.com/-qfcCjNtkIVo/VYFlPpF-VPI/AAAAAAAABRM/zN83Shk7YWI/s1600/me.jpg'/><br/> <b>MYBLOGGERSEO.COM</b><br/><br/> AQUI VOCÊ ESCREVE O TEXTO.<br/>ESCREVA O TEXTO ..............................................................................................................................................................................................................................................................................................................................<br/> </div> </div> </div> <div id='left'> <div class='taber1'><a href='http://www.mybloggerseo.com' target='_blank' title='mybloggerso.com'><i class='fontawesome-home'/> www.lagioke.com</a></div> <div class='taber2'><a href='https://plus.google.com/u/0/ +Lagiokecom ' target='_blank' title='Follow Us On Google Plus'><i class='fa fa-google-plus'/> Google Plus</a></div> <div class='taber3'><a href='https://www.facebook.com/mybloggerseo ' target='_blank' title='Follow Us On Facebook'><i class='fa fa-facebook'/> Facebook</a></div> <div class='taber4'><a href='https://twitter.com/ seuusername ' target='_blank' title='Follow Us On Twitter'><i class='fa fa-twitter'/> Twitter</a> </div> <div class='taber5'><i class='fa fa-phone'/> Phone: 0822127812314332xxx</div> <div class='taber6'><a href='/' target='_blank' title='email'><i class='fa fa-envelope-o'/> seuemail@gmail.com</a></div> </div> </div> </div> </div></div>

Não esqueça de fazer as alterações no que esta destacado em amarelo 

Você pode usar o botão no menu 
<li><a class='popup-link' href='#popup'><i class='fa fa-user-secret'/> About</a></li> 


não esqueça de salvar antes de conferir o resultado 
 
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner