× İletişim Formu Blogger Uyarı Kutusu Arlina Design 5/19/2017 Etiketler : Blogger Buton Blogger CSS Blogger jQuery Arlina Design <!DOCTYPE html> <html> <head> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body {font-family: 'Fira Sans Condensed', sans-serif;-webkit-font-smoothing: antialiased;margin: 0 auto 0 auto;} a:link, a:visited {text-decoration: none;transition: all .3s;} #warning-wrapper{position:fixed;width:100%;z-index:99} .warning-noactive{background:#e74c4c;width:3.125em;height:3.125em;border-radius:100%;position:fixed;z-index:999;bottom:50%;left:1.25em;-webkit-animation-duration:5s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:warninglink;animation-duration:5s;animation-iteration-count:infinite;animation-name:warninglink;transition:all 5s ease-in-out} img.warningbell{margin:15px 15px 15px 15px;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:warningicon;animation-duration:2s;animation-iteration-count:infinite;animation-name:warningicon;transition:all 2s ease-in-out} img.warningclose {margin:17px 1em 0 17px} @keyframes warninglink{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}} @keyframes warningicon{0%{transform:rotate(-30deg)}50%{transform:rotate(30deg)}100%{transform:rotate(-30deg)}} @keyframes warning-box{0%{transform:rotateZ(-45deg);visibility:visible;opacity:0;bottom:40%;left:4.875em}100%{transform:none;visibility:visible;opacity:1;bottom:40%;left:6.875em}} .warning-box{padding:1.25em;border-radius:0 2px 2px 2px;position:fixed;resize:none;line-height:1.5;z-index:999;left:6.875em;bottom:40%;max-width:32.5em;background:#e74c4c;border:1px solid #e74c4c;color:#fff;font-size:13px;display:inline-block;opacity:0;visibility:hidden;transition:.4s ease-in-out} .warning-box:before{content:"";width:0;height:0;position:absolute;top:-.7px;left:-10px;border-width:0.5em;border-style:solid;border-color:#e74c4c #e74c4c transparent transparent;display:block} .warningclose{display:none!important} #warning-wrapper.warning-active .warningclose{display:block!important;animation-name:none!important} #warning-wrapper.warning-active .warningbell{display:none!important} .warning-box.warning-active{-webkit-animation-duration:1s;-webkit-animation-iteration-count:1;-webkit-animation-name:warning-box;animation-duration:1s;animation-iteration-count:1;animation-name:warning-box;transition:all 1s ease-in-out;opacity:1;visibility:visible} @media screen and (max-width:42.5em){.warning-box:before{display:none}.warning-box{left:0%!important;bottom:0} @keyframes warning-box{0%{left:0!important}100%{left:0!important}}} </style> </head> <body> <div id='warning-wrapper'> <a class='warning-noactive' href='javascript:;' title='Uyarı Kutusu'><img alt='Warning Open' class='warningbell' height='20' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAhUExURQAAAP///////////////////////////////////////88h6/kAAAAKdFJOUwAgr8xzFJg1LOK8NtLzAAAAi0lEQVQ4y9WT2w7DIAxDITfA///BW1e1UyCk2uPOq02MrKQUR2fuJcMASw0EUKYrA6xbub3fH1CLdcGNPOiho8GxprA38MOAdYTMBlkr9NhaoYf+0cCzgR96mpqqCKhZwBQiCLlDFBuu7ew7w3UiSrFO3/3WGqDld4w/7I9Pkqs4vzIOfSThamOY119D3hBhoWu7CwAAAABJRU5ErkJggg==' width='20'/><img alt='Warning Close' class='warningclose' height='16' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAASUExURQAAAP///////////////////z5SrToAAAAFdFJOUwCrBFT7q7CDrQAAAGxJREFUOMvdk0sOwCAIRHGQ+1+5tWlMP2Pfvm4wzIsCOhGRTWGXWo6QvTyhVj0PvSyx6zWIERyhU5gbeV3hiVvSEI/Ui6AEHUlFUVuiwaz0SSz1K7F+3m8dAbqCiqQ2aVB//x9sHLQempfsvwGWIwaV4OjbnwAAAABJRU5ErkJggg==' width='16'/></a> <div class='warning-box'> Blogger Eklentileri özel yeni nesil eklentileri, temaları, CSS, CSS3, HTML, HTML5 Javascript ve JQuery kodları ile blog sitelerinize farklı tasarımlar kazandırmayı amaçlayan, blogger ipuçları hakkında bilgiler paylaşan ve rehberlik yapan kişisel bir blog. </div> </div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script type='text/javascript'> $(document).ready(function(){$(".warning-noactive").click(function(){$(".warning-box,#warning-wrapper").toggleClass("warning-active");});}); </script> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Blogger Uyarı Kutusu" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Blogger Uyarı Kutusu Arlina Design 5/19/2017 Etiketler : Blogger Buton Blogger CSS Blogger jQuery Arlina Design <!DOCTYPE html> <html> <head> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body {font-family: 'Fira Sans Condensed', sans-serif;-webkit-font-smoothing: antialiased;margin: 0 auto 0 auto;} a:link, a:visited {text-decoration: none;transition: all .3s;} #warning-wrapper{position:fixed;width:100%;z-index:99} .warning-noactive{background:#e74c4c;width:3.125em;height:3.125em;border-radius:100%;position:fixed;z-index:999;bottom:50%;left:1.25em;-webkit-animation-duration:5s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:warninglink;animation-duration:5s;animation-iteration-count:infinite;animation-name:warninglink;transition:all 5s ease-in-out} img.warningbell{margin:15px 15px 15px 15px;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:warningicon;animation-duration:2s;animation-iteration-count:infinite;animation-name:warningicon;transition:all 2s ease-in-out} img.warningclose {margin:17px 1em 0 17px} @keyframes warninglink{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}} @keyframes warningicon{0%{transform:rotate(-30deg)}50%{transform:rotate(30deg)}100%{transform:rotate(-30deg)}} @keyframes warning-box{0%{transform:rotateZ(-45deg);visibility:visible;opacity:0;bottom:40%;left:4.875em}100%{transform:none;visibility:visible;opacity:1;bottom:40%;left:6.875em}} .warning-box{padding:1.25em;border-radius:0 2px 2px 2px;position:fixed;resize:none;line-height:1.5;z-index:999;left:6.875em;bottom:40%;max-width:32.5em;background:#e74c4c;border:1px solid #e74c4c;color:#fff;font-size:13px;display:inline-block;opacity:0;visibility:hidden;transition:.4s ease-in-out} .warning-box:before{content:"";width:0;height:0;position:absolute;top:-.7px;left:-10px;border-width:0.5em;border-style:solid;border-color:#e74c4c #e74c4c transparent transparent;display:block} .warningclose{display:none!important} #warning-wrapper.warning-active .warningclose{display:block!important;animation-name:none!important} #warning-wrapper.warning-active .warningbell{display:none!important} .warning-box.warning-active{-webkit-animation-duration:1s;-webkit-animation-iteration-count:1;-webkit-animation-name:warning-box;animation-duration:1s;animation-iteration-count:1;animation-name:warning-box;transition:all 1s ease-in-out;opacity:1;visibility:visible} @media screen and (max-width:42.5em){.warning-box:before{display:none}.warning-box{left:0%!important;bottom:0} @keyframes warning-box{0%{left:0!important}100%{left:0!important}}} </style> </head> <body> <div id='warning-wrapper'> <a class='warning-noactive' href='javascript:;' title='Uyarı Kutusu'><img alt='Warning Open' class='warningbell' height='20' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAhUExURQAAAP///////////////////////////////////////88h6/kAAAAKdFJOUwAgr8xzFJg1LOK8NtLzAAAAi0lEQVQ4y9WT2w7DIAxDITfA///BW1e1UyCk2uPOq02MrKQUR2fuJcMASw0EUKYrA6xbub3fH1CLdcGNPOiho8GxprA38MOAdYTMBlkr9NhaoYf+0cCzgR96mpqqCKhZwBQiCLlDFBuu7ew7w3UiSrFO3/3WGqDld4w/7I9Pkqs4vzIOfSThamOY119D3hBhoWu7CwAAAABJRU5ErkJggg==' width='20'/><img alt='Warning Close' class='warningclose' height='16' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAASUExURQAAAP///////////////////z5SrToAAAAFdFJOUwCrBFT7q7CDrQAAAGxJREFUOMvdk0sOwCAIRHGQ+1+5tWlMP2Pfvm4wzIsCOhGRTWGXWo6QvTyhVj0PvSyx6zWIERyhU5gbeV3hiVvSEI/Ui6AEHUlFUVuiwaz0SSz1K7F+3m8dAbqCiqQ2aVB//x9sHLQempfsvwGWIwaV4OjbnwAAAABJRU5ErkJggg==' width='16'/></a> <div class='warning-box'> Blogger Eklentileri özel yeni nesil eklentileri, temaları, CSS, CSS3, HTML, HTML5 Javascript ve JQuery kodları ile blog sitelerinize farklı tasarımlar kazandırmayı amaçlayan, blogger ipuçları hakkında bilgiler paylaşan ve rehberlik yapan kişisel bir blog. </div> </div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script type='text/javascript'> $(document).ready(function(){$(".warning-noactive").click(function(){$(".warning-box,#warning-wrapper").toggleClass("warning-active");});}); </script> </body> </html>
Yorum Gönder