Pop up Card com Cookie para Blogger

pop up card com cookie para blogger


Para aqueles que gostam de um widget de apresentação aqui esta um por mastamvan isso é um widget diferenciado uma vez que quando ao acesso ao blog isso vai aparecer com uma caixa para fechar com um sistema de cookie para que  não seja mostrado da próxima vez isso é muito util para por exemplo fazer uma apresentação do autor do Blog bem como suas habilidades aproveite o widget para instalar siga os passos abaixo:

Para instalar o widget cartão popup siga os passos abaixo 

Faça login no blogger então va no menu tema então Editar HTML com as teclas combinadas CTRL+F busque por </head> então logo acima disso copie e cole o  seguinte código: 


<style type="text/css">
/*Widget Pop Up Card With Cookie*/
#myModal{display:none}
#popup_content a{text-decoration:none!important}
#popup_content{z-index:9999;position:fixed!important;max-width:700px;max-height:400px;width:100%;height:100%;border:6px solid black;box-shadow:0 0 5px rgba(0,0,0,0.2);border-radius:5px;margin:5% auto;top:10px;left:0;right:0;overflow:hidden}
#popup_background{left:0;background:#f80b0b;opacity:0.6;position:fixed;z-index:999;top:0;height:100%;width:100%}
.popup_close{font-size:20px;background:#FFF none repeat scroll 0% 0%;cursor:pointer;padding:2px 9px;text-align:center;position:absolute;color:#344;right:0}
.popup_container,.popup_container img{width:100%;height:100%;display:block}
.hidemodal{position:absolute;bottom:0;left:0;background:#fafafa;padding:5px;cursor:pointer;font-weight:700;border:1px solid #3349;font-size:12px}
.sosmed{position:absolute;bottom:0;right:0;background:#fafafa;padding:4px 3px 2px 3px;border:1px solid #3349;font-size:15px}
.sosmed .facebook,.sosmed .twitter,.sosmed .google{margin-left:5px}
.sosmed .facebook a{color:#3b5999}
.sosmed .twitter a{color:#55acee}
.sosmed .google a{color:#dd4b39}
@media screen and (max-width:500px){#popup_content{top:20%;width:90%;height:auto;box-sizing:border-box}}
</style>

Então busque por </body> e logo acima disso copie e cole o código: 


<div id="myModal">
    <div id='popup_background'></div>
    <div id='popup_content'>
        <a href="javascript:void(0);" onclick="document.getElementById('myModal').style.display='none';return false;" class="popup_close" title="Close">&#215;</a>
        <div class='popup_container'>
            <a href='#LinkCard' target='_blank'><img alt='Mas Tamvan on Facebook!' src='https://images3.alphacoders.com/621/621682.jpg' /></a>
            <div class='hidemodal' id='hiding'><span title="Jangan Tampilkan Lagi">&#215; Don't Show Again</span></div>
            <div class="sosmed">
                <span class="facebook"><a href="#LinkSosmer" title="Facebook"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></span>
                <span class="twitter"><a href="#LinkSosmer" title="Twitter"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></span>
                <span class="google"><a href="#LinkSosmer" title="Google Plus"><i class="fa fa-google-plus-square" aria-hidden="true"></i></a></span>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
//<![CDATA[
function setCookie(e, o, i) {
    var n = new Date;
    n.setDate(n.getDate() + i);
    var a = escape(o) + (null == i ? "" : "; expires=" + n.toUTCString());
    document.cookie = e + "=" + a
}

function getCookie(e) {
    var o, i, n, a = document.cookie.split(";");
    for (o = 0; o < a.length; o++)
        if (i = a[o].substr(0, a[o].indexOf("=")), n = a[o].substr(a[o].indexOf("=") + 1), i = i.replace(/^\s+|\s+$/g, ""), i == e) return unescape(n)
}
var MS_Tamvan_COOKIE = "cookiemastamvans",
    hideMe = document.getElementById("myModal"),
    cookie = getCookie(MS_Tamvan_COOKIE),
    cookiemastamvans = cookie ? cookie : hideMe.style.display,
    hiding = document.getElementById("hiding");
hiding.onclick = function() {
    setCookie(MS_Tamvan_COOKIE, cookiemastamvans, 100), hideMe.style.display = "block" === cookiemastamvans ? "none" : "block", cookiemastamvans = hideMe.style.display
}, hiding.onclick();
//]]>
</script>

Salve não esqueça de substituir os links em amarelo pelos seus links das redes sociais





Click to comment