Blogger Animasyonlu Uyarı Eklentisi - Blogcular sitelerinde ziyaretçilere bir konu hakkında bildiri veya bir uyarı yapmak için animasyonlu uyarı kutusu ekleme ile ilgili ipuçları paylaşacağım. Blog sitenizde güncellemeler ile ilgili bilgileri paylaşarak ziyaretçileriniz blogunuz hakkında daha fazla bilgiye sahip olacaktır.
Uyarı kutusu, butona tıklandığında yavaş ve zarif bir etki göstererek açılır. Kapatma butonuna tıklayarak kapanır. Uyarı kutusu mobil ekranlarda blog sayfalarının görüntülenmesini engel teşkil etmeyecek şekilde ekranın en alt kısmında görünecektir.
Blogger Animasyonlu Uyarı Kutusu Ekleme
1- Blogger hesabınızda oturum açın ve blogunuzun kumanda panelinde bulunan Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodları sayfasını açın. Açılan sayfada CTRL+F yardımıyla ]]></b:skin> veya </style> kodunu bulun ve aşağıdaki CSS kodlarını ]]></b:skin> veya </style> kodunun bir satır üzerine ekleyin.
#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}}}2- Aşağıdaki javaScript kodunu şablon kodları sayfasının en alt kısmında bulunan </body> kapanış kodunun bir satır üzerine ekleyin.
<script type='text/javascript'>
$(document).ready(function(){$(".warning-noactive").click(function(){$(".warning-box,#warning-wrapper").toggleClass("warning-active");});});
</script>3- Aşağıdaki HTML kodu <body> - </body> kodları arasında bir yere ekleyin. Nereye ekleyeceğinizi bilmiyorsanız CTRL+F yardımı ile <footer açılış kodunu bulun ve <footer açılış kodunun bir satır üzerine ekleyin.
<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'>
Açıklama/Bilgilendirme buaraya.
</div>
</div>Yukarıdaki HTML kod içerisinde işaretli renkli yere açıklama veya bilgilendirme metini ekleyin. Blogger animasyonlu uyarı kutusu oluşturma ile ilgili bilgileri sizlerle paylaştık. Blog sitemizden daha fazla bilgi almak için abone olabilirsiniz.
Yorum Gönder