Popups Redes Sociais ~ MaguiSilva-WebDesigner e Programação

Olá, abaixo deixo o código de uma PopUp configurada com Cookies para usar em seu Blogger.

Antes de mais nada você deve fazer um backup de seu template para depois editar o código.

Vamos lá:

1º – Acesse o design do seu blog.
2º – Em seguida, clique no Botão Editar HTML.
3º – Segure as teclas CTRL+F e procure por:

</head>

4º – Acima da tag head cole o seguinte código:

<link href='http://dl.dropbox.com/u/44914301/codigos/colorbox.css' media='screen' rel='stylesheet'/>

<script src='https://dl-web.dropbox.com/get/jquery.js?w=47105892'/>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js'/>

<script src='http://dl.dropbox.com/u/44914301/codigos/jquery.colorbox-min.js'/>

<script type='text/javascript'>

  jQuery(document).ready(function(){

    if (document.cookie.indexOf(&#39;visited=true&#39;) == -1) {

        var fifteenDays = 1000*60*60*24*15;

        var expires = new Date((new Date()).valueOf() + fifteenDays);

        document.cookie = &quot;visited=true;expires=&quot; + expires.toUTCString();

    $.colorbox({width:&quot;700px&quot;, inline:true, href:&quot;#subscribe&quot;});

        }

});

</script>





<style>

 #subscribe {font: 12px/1.2 Arial,Helvetica,san-serif;}

#subscribe a,#subscribe a:hover,#subscribe a:visited {text-decoration:none;}

.box-tagline {color: #999;font-size: 14px;margin: 0;text-align: center;}

.box-side.left {padding: 0 30px 0 15px;border-right: 1px solid #ecedf3;}

.box-side.left li { list-style:none; margin-bottom:20px;}

.box-icon {width: 72px;height: 54px;padding: 6px 0 0 0;margin: 0 auto;}

.box-icon a.rss{display: block;width: 70px;height: 56px;margin: 0 auto;}

.box-icon a{display: block;width: 72px;height: 54px;}

.box-icon a.email img,.box-icon a.rss img {margin: -5px 0 0;border: 0 none;}

.box-side h4, .box-side h4 a {font-size: 14px;line-height: 14px;color: #f26535;font-weight: bold;}

.box-side h4 { margin: 20px 0 10px 0; }

.box-side h5 {font-size: 11px;color: #5e6066; line-height: 18px;margin: 0 0 20px 0;}

.box-side h4 a:hover {color: #f26535;}

.demo {display:none;}

#subscribe{font:12px/1.2 Arial,Helvetica,san-serif;}

#subscribe a,#subscribe a:hover,#subscribe a:visited{text-decoration:none;}

#subs-container{position:relative;padding:35px 0 30px;}

.box-icon{width:72px;height:54px;margin:0 auto;padding:6px 0 0;}

.box-icon a.rss{display:block;width:70px;height:56px;margin:0 auto;}

.box-icon a{display:block;width:72px;height:54px;}

.box-icon a.email img,.box-icon a.rss img{border:0 none;margin:-5px 0 0;}

.box-side h4,.box-side h4 a{font-size:14px;line-height:14px;color:#f26535;font-weight:700;}

.box-side h4{margin:20px 0 10px;}

.box-side h5{font-size:11px;color:#5e6066;line-height:18px;margin:0 0 20px;}

.box-side h4 a:hover{color:#f26535;}

</style>

5º – Segure as teclas CTRL+F e procure por:

<body>

6º – Abaixo cole o seguinte código:

<div style='display:none'>

<div id='subscribe' style='padding:10px; background: url(http://i1212.photobucket.com/albums/cc447/wesleyextreme/Fatia-cabealho-popup.png) repeat-x top;'>

<h2 class='box-title' style='text-transform: uppercase;color: #ffffff;font-size: 20px;font-weight: 700;text-align: center;margin: 10px 0;'>Assine Nossa Newslatter gratuitamente!</h2>

<h3 class='box-tagline' style='color: #fea63f;font-size: 14px;text-align: center;margin: 0;'>Receba Nossas Atualizações em Seu E-mail:</h3>

<div class='clearfix' id='subs-container' style='position: relative;padding: 35px 0 0px;'>

<div class='box-side left' style='width:350px;text-align: center;border-right:1px solid #ecedf3;padding:0 20px 0 15px;'>

<li>

<div style=' background:#fff url(http://i1212.photobucket.com/albums/cc447/wesleyextreme/curtirFacebook-tecwindows-1.png) no-repeat top right; width:350px; height:180px;'>





<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FID DA PÁGINA DO FACEBOOK AQUI&amp;width=350&amp;height=180&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false' style='border:none; overflow:hidden; width:350px; height:180px;'/>



</div>

 </li>



<li style='font-size: 14px;font-family: arial;background-image: url(http://i1212.photobucket.com/albums/cc447/wesleyextreme/bullet-bullet.png);background-position: 0px 0px;text-shadow: 0px 0px 1px #B5B5B5;font-weight: normal;background-repeat: no-repeat;padding-left: 35px;margin-bottom: 10px;line-height: 27px;text-align: justify;color: black;list-style-type: none;text-transform: uppercase;'>Seu Email Nunca Será Revelado!!!</li>



</div>

<div class='box-side right' style='width: 240px !important;float:right;margin-top:-236px;margin-right:10px;'>

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=NOME DO SEU FEED AQUI&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='padding:3px;text-align:center;' target='popupwindow'><img alt='Assine nosso feed gratis' src='http://i1212.photobucket.com/albums/cc447/wesleyextreme/Assinar_rss_assinaturadefeed.png' style='margin-top: -2px;width: 124px;height: 125px;' title='Assine nosso feed gratis'/><p>

<input name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Digite seu e-mail aqui!&apos;;}' onfocus='if (this.value == &apos;Digite seu e-mail aqui!&apos;) {this.value = &apos;&apos;;}' size='30' style='background-image: url(http://2.bp.blogspot.com/-X8mQ080Fah4/ToXN1HRKeRI/AAAAAAAACI8/6sfxOEWP-h0/s1600/lightbox-text-box.png);margin-bottom: 5px;border: 0px;line-height: 20px;padding-right: 10px;padding-top: 12px;margin-left: 3px;background-repeat: no-repeat;padding-bottom: 12px;width: 230px;color: #555;font-family: Helvetica, Arial, sans-serif;font-size: 14px;padding-left: 10px;background-color: transparent;background-position: left center;outline: none;' type='text' value='Digite seu e-mail aqui!'/>

</p><input name='uri' type='hidden' value='NOME DO SEU FEED AQUI'/><input name='loc' type='hidden' value='pt_BR'/><input style='width: 255px;height: 47px;margin-bottom: 5px;margin-left: auto;margin-right: auto;background: url(http://i1212.photobucket.com/albums/cc447/wesleyextreme/boto-de-assinatura.png) no-repeat;text-align: center;border: none;font-size: 19px;color: white;font-family: Helvetica, Arial, sans-serif;font-weight: bold;text-shadow: 1px 1px 0px black;text-transform: uppercase;letter-spacing: -1px;line-height: 45px;' type='submit' value='INSCREVER-SE!'/></form><br/>

<span style='float: left;margin-top: -30px;color: gray;margin-left: -400px;font-size: 13px;'>Desenvolvido Por <b><a href='http://www.maguisilva-wd.blogspot.com.br/' style='color: #004D97 !important;' target='_blank'>MaguiSilva</a></a></b></span>

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

Antes de salvar você deve substituir a marcação azul pala "ID da sua página de fãs do facebook" e o vermelho pelo "nome do feed".
11º - Após ter feito os passos acima basta salvar e pronto.

Espero que tenham gostado deste Tutorial.
Comente deixando sua opinião.

Curso de Adobe PhotoShop

GMDigital

EquipeGM WebDesigner

Curso de NVU

MaguiSilva WebDesigner

Twitter

Labels

Blogroll

quinta-feira, 31 de maio de 2012

Popups Redes Sociais

0 comentários:

Postar um comentário

Destaque

TOPs

Categorias

Blog Archive

@magui_official

Site

Redes Sociais

Categoria de Ensino