نظرًا لأنه دائمًا ما يظل دائمًا في أعلى موقعك ، حتى لو قام الزائرون بتمرير صفحتك ، فسيبقى بشكل دائم في الجزء العلوي من موقعك وبالتالي لا يعيق زوارك.
يمكن أن يقلل الإشعار من معدل الارتداد المرتفع من خلال عرض إشعار حول أحدث مشاركة لك.
قم بزيادة التفاعل لموقعك عن طريق عرض الميزات الهامة الخاصة بك آخر مشاركة لمدونتك ، إلخ.
لا يحتاج زوار موقعك إلى إزالة شريط التنبيهات لقراءة محتوياتك.
كيفية إضافة شريط الاشعارات ؟
اولاً من القالب Edit HTML ثم ابحث عن ]]></b:skin> ثم فوقها اضف كود cssثانيا ابحث عن <body> وتحتها اضف كود HTML
ثالثا ابحث عن </body> ثم فوقها اضف كود JQuery/JS
شريط الاشعار 1.
CSS Code
CSS Code
#BlogSupporter_NotificationBar_wrap {
margin:0;
padding:0;
position:relative;
width:100%;
z-index:9999999;
}
.BlogSupporter_NotificationBar {
color: #fff;
position: relative;
background: #595959; /*--Change Background Color Here--*/
width: 100%;
padding: 0;
text-align: center;
font-family: Arial Black, sans-serif;
text-shadow: 0px -1px 0px #000;
margin: 0px auto;
height: 40px;
box-shadow: 0px 1px 5px #616161;
}
.BlogSupporter_NotificationBar label:hover {
cursor: pointer;
}
.BlogSupporter_NotificationBar label {
text-align: center;
background: #FF5353; /*--Change Button Background Color Here--*/
color: #FFF;
border: 0;
font-family: fontawesome;
text-shadow: 0px -1px 0px #EC0000;
font-size: 26px;
-webkit-transition: 0.3s all ease-in-out;
-moz-transition: 0.3s all ease-in-out;
-ms-transition: 0.3s all ease-in-out;
-o-transition: 0.3s all ease-in-out;
transition: 0.3s all ease-in-out;
position: relative;
transition-delay: 0s;
margin-top: 0;
float: right;
height: 35px !important;
width: 30px;
overflow: hidden !important;
z-index: 9999;
padding-top: 5px;
}
input.BlogSupporter_ShowHideButtonBar:checked + label {
transform-origin: 12% 50% !important;
transform: translateY(0px) rotateX(190deg);
-webkit-transform: translateY(0px) rotateX(190deg);
-moz-transform: translateY(0px) rotateX(190deg);
-ms-transform: translateY(0px) rotateX(190deg);
-o-transform: translateY(0px) rotateX(190deg);
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transition-delay: 0.3s;
margin-top: 47px;
border: 0;
}
input.BlogSupporter_ShowHideButtonBar ~ .BlogSupporter_ContentArea {
position: relative;
overflow: hidden;
height: 40px;
-webkit-transition: 0.5s all ease-in-out;
-moz-transition: 0.5s all ease-in-out;
-ms-transition: 0.5s all ease-in-out;
-o-transition: 0.5s all ease-in-out;
transition: 0.5s all ease-in-out;
}
input.BlogSupporter_ShowHideButtonBar:checked ~ .BlogSupporter_ContentArea {
margin-top: -50px;
}
input.BlogSupporter_ShowHideButtonBar {
display: none;
}
/*--Change FontAwesome Icons Style Here--*/
.BlogSupporter_ContentArea .fa {
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
font-family: FontAwesome;
border-bottom: 1px solid #FFFFFF;
margin-right: 5px;
}
.BlogSupporter_ContentArea ul {
margin: 0;
padding: 0;
list-style: none;
list-style-type: none;
height: 100%;
}
.BlogSupporter_ContentArea ul > li {
list-style: none;
font-size: 14px;
font-weight: bold;
font-family: sans-serif;
text-decoration: none;
padding-top: 10px;
margin-right: 10px;
display: inline-block;
}
.BlogSupporter_ContentArea ul > li > a {
color: #FFD946; /*--Change Links Color Here--*/
text-decoration: none;
font-family: cursive;
font-weight: normal;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.BlogSupporter_ContentArea ul > li > a:hover {
color: #EFCB41 !important; /*--Change Links Hover Color Here--*/
}
.bs_sticking {
position:fixed !important;
width: 100% !important;
}
@media only screen and (max-width:479px) {
#BlogSupporter_NotificationBar_wrap, .BlogSupporter_NotificationBar {
display: none !important;
}
}
HTML
<div id='BlogSupporter_NotificationBar_wrap'>
<div class='BlogSupporter_NotificationBar'>
<input class='BlogSupporter_ShowHideButtonBar' id='tbn' type='checkbox'/>
<label for='tbn'><i class='fa fa-chevron-circle-up'/></label>
<div class='BlogSupporter_ContentArea'>
<ul>
<li>
<i class='fa fa-signal'/> Trending: <a href='#Your-Link1'>How to Create a Landing Page on Blogger</a>
</li>
<li>
<i class='fa fa-fire'/> Hot: <a href='#Your-Link2'>How to Maintain the Website SEO Ranking</a>
</li>
<li>
<i class='fa fa-rss'/> Rss: <a href='#Your-Link3'>Website SEO Audit Tips</a>
</li>
</ul>
</div>
</div>
</div>
JS
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
شريط الاشعار 2.
CSS Code
.TW_Notification_Wrap {
width: 100%;
min-height: 40px;
margin: 0px;
padding: 0px;
box-sizing: border-box;
position: fixed;
z-index: 999999;
top: 0px;
left: 0px;
}
.TW_Notifications_innerWrap {
overflow: hidden;
width: 100%;
height: 40px;
box-sizing: border-box;
text-align: center;
background: #F44A56;
position: relative;
box-shadow: 0px 2px 9px #000;
z-index: 999;
text-decoration: none;
color: #FFF056;
font-family: oswald, arial, sans-serif;
font-size: 13px;
font-weight: bold;
text-shadow: 0px 0px 2px #FFF056;
border-bottom: 1px solid #C9C9CB;
margin: 0px;
box-sizing: border-box;
}
.TW_All_Notifications {
max-width: 997px;
margin: 0px auto;
padding-top: 12px;
box-sizing: border-box;
}
.TW_All_Notifications a {
text-decoration: none;
color: #fff!important;
text-shadow: 0px 0px 2px #242729!important;
font-size: 14px;
}
.TW_Notification_HeadLines {
margin-left: 10px;
}
.TW_Notification_HeadLines a:hover {
text-transform: uppercase;
border-bottom: 1px dotted #FFF056;
}
.TW_Close_Notifications_bar{
position: absolute;
font-size: 20px;
color: #fff;
box-sizing: border-box;
z-index: 999;
right: 15px;
bottom: 12px;
z-index: 7900;
font-weight: bold;
display:block;
}
.TW_Close_Notifications_bar:before{
content: "hide";
font-size: x-small;
position: relative;
top: 10px;
left: 22px;
color: #fff;
cursor: pointer;
text-transform: uppercase;
}
.TW_Opened_Notifications_bar:before{
content: "show";
font-size: x-small;
position: absolute;
top: 30px;
left: 10px;
color: #fff;
cursor: pointer;
text-transform: uppercase;
}
.TW_Opened_Notifications_bar .fa{
position: relative;
top: 5px;
}
.TW_Opened_Notifications_bar{
background: #F44A56!important;
box-shadow: 0px 2px 9px #000;
width: 50px;
height: 45px;
padding: 0px 15px;
box-sizing: border-box;
position: fixed;
z-index: 999999;
top: 0px;
right: 16px;
z-index: 7900;
color: #fff;
box-sizing: border-box;
font-size: 25px;
font-weight: bold;
display: none;
}
<div class='TW_Notification_Wrap' id='TW_Notification_Wrap'>
<div class="TW_Notifications_innerWrap">
<div class="TW_All_Notifications">
<span class="TW_Notification_HeadLines"><i class="fa fa-line-chart" aria-hidden="true"></i> Trending Today: <a class="TW_Notification_text" href='#'>Best Mobiles</a> </span>
<span class="TW_Notification_HeadLines"><i class="fa fa-bullhorn" aria-hidden="true"></i> Announcement: <a class="TW_Notification_text" href='#'>Please Check Our New Page</a> </span>
</div>
<span class='TW_Close_Notifications_bar'><i class="fa fa-arrow-up" aria-hidden="true"></i></span>
</div>
</div>
<span class='TW_Opened_Notifications_bar'><i class="fa fa-arrow-down" aria-hidden="true"></i></span>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
شريط الاشعار 3.
CSS Code
#knigulper_bar {width: auto; height: auto; display: block; text-align: center; padding: 6.5px; background: #3e454c; color: #fff; position: relative; font-size: 14px;font-family: oswald;font-weight: normal;}
#close_knigulper_bar {display: inline-block; cursor: pointer; padding: 4px; position: absolute; top: 0px; right: 0; font-weight: bold; font-size: 19px;}
#close_knigulper_bar:hover { background: #3e454c}
#knigulper_bar a{background: #fff; color: #3e454c; padding: 4px 16px; border-radius: 100px; margin-left: 5px; font-weight: 600;}
#knigulper_bar a:hover{background:#3e454c;color:#fff;}
<div id='knigulper_bar'>
Want to get top insights about blogging, blogger widgts and much more? <a href='#Your-link-here' target='_blank'>Check This!</a>
<span data-target='#knigulper_bar' id='close_knigulper_bar'>×</span>
</div>
JS
شريط الاشعار 4.
CSS Code
<script type='text/javascript'>
//<![CDATA[
// Knigulper bar
var button=document.querySelector("#close_knigulper_bar");button.addEventListener("click",function(){var t=document.querySelector(button.getAttribute("data-target"));t.style.display="none"==t.style.display?"block":"none"});
//]]>
</script>
شريط الاشعار 4.
CSS Code
#knigulper_bar {width: auto; height: auto; display: block; text-align: center; padding: 7.5px; background: none repeat scroll 0 0 #000000;
border-bottom: 3px dotted #FFFFFF; color: #fff; position: relative; font-size: 14px;font-family: oswald;font-weight: normal;}
#close_knigulper_bar {display: inline-block; cursor: pointer; padding: 4px; position: absolute; top: 0px; right: 0; font-weight: bold; font-size: 19px;background:#FF0000; height:35px;border-bottom: 3px dotted #FFFFFF;border-left: 3px solid #FFFFFF;}
#close_knigulper_bar:hover { background: #3e454c;}
#knigulper_bar a{background: #fff; color: #3e454c; padding: 5px 16px; border-radius: 100px; margin-left: 5px; font-weight: 600;}
#knigulper_bar a:hover{background:#3e454c;color:#fff;}
HTML
<div id='knigulper_bar'>
Want to get top insights about blogging, blogger widgts and much more? <a href='#Your-link-here' target='_blank'>Check This!</a>
<span data-target='#knigulper_bar' id='close_knigulper_bar'>×</span>
</div>
<script type='text/javascript'>
//<![CDATA[
// Knigulper bar
var button=document.querySelector("#close_knigulper_bar");button.addEventListener("click",function(){var t=document.querySelector(button.getAttribute("data-target"));t.style.display="none"==t.style.display?"block":"none"});
//]]>
</script>
شريط الاشعار 5.
CSS Code
شريط الاشعار 6.
CSS Code
#stickybar{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1R2s7BR0B_ZUlxRoLXoqZjq8XbLFQctOhEUyM_0c-hr1Fb1KKB21xdvFTRmx6mk8xk-T5ciDMpO29HgzwLnW4Bbr5_BP92j91pJPQ4-3Yx-BdS2kkMLvyqPNntLM8Zs2Ok7mZy3Pv_iyA/s1600/headline-bg.png') repeat; color:#fff; margin:0 auto; border-top: 1px solid #000; height:30px; font-size:12px; position:fixed; bottom:0; z-index:1000; width:100%;border-top-left-radius:20px;border-top-right-radius:20px; display:block;}
#stickybar:hover{background:#333;}
#stickybar a{ font-weight:700; text-decoration:blink; color:#fe0; border-bottom:1px dashed; }
#stickybar p{line-height:30px; font-size:12px; text-align:center; width:95%; float:left;}
#stickybar p a{ text-decoration:blink; color:#ffcc00; border-bottom:1px dashed;}
#stickybar li.widget, #stickybar li.widget p{margin:0; line-height:30px; list-style:none; font-size:12px; text-align:center;}
HTML
<div id='stickybar'>
<li class='widget'>
<p>Join us on: <a href='https://www.facebook.com/knigulper' target='_blank' style='margin-right: 20px;'>Twitter</a> <a href='https://www.facebook.com/knigulper' target='_blank' style='margin-right: 20px;'>Facebook</a> <a href='https://plus.google.com/u/0/b/107705481216986870331/+KnigulperGplus' target='_blank' style='margin-right: 20px;'>Google+</a></p>
</li>
</div>
شريط الاشعار 6.
CSS Code
#bloggernotificationWrap{display:none;position:relative;z-index:999999;width:100%;height:41px;margin:0px 0px -41px 0px;padding:0}
#bloggernotification{overflow:hidden; width:100%;height:28px;padding-top:7px;text-align:center; background:#242729;position:relative;box-shadow:1px 2px 9px #2A5200;z-index:9998;text-decoration:none;color:#fff;font-family:oswald, arial,sans-serif;font-size:13px;font-weight:400;text-shadow:1px 1px 4px #000;border-bottom:1px solid #90f128;margin:0}
#bloggernotification strong {font-size:14px;font-family:oswald; font-weight:normal;padding-right:7px;}
#bloggernotification a{text-decoration:none;color:#fff;font-family:oswald, arial,sans-serif;font-size:13px;font-weight:400; word-spacing:1px; text-shadow:1px 1px 1px #000;outline:none}
#bloggernotification a:hover{text-decoration:underline}
#bloggernotificationWrap #closebloggernotification{display:block;position:absolute;top:0;right:23px;height:40px;width:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA4pqcLXA5-9b-PaDgJ-S1zRHxoX1SvQ68f6YQVyBR0KNzLmzLiEW9oQb54iY20-G37q1hGIiKXHorxxdrMUevcAMCeQQW7mQtp6ZQcPJg5Sbk95rRHQ9HMOYJlahP5cPvEr6rFr9FSkX6/s400/light.png) no-repeat 0 center;cursor:pointer}
#bloggernotificationWrap #closebloggernotification:hover{background-position:-21px 50%}
#bloggernotificationWrap.bottomPosition #closebloggernotification{background-position:right 50%}
#bloggernotificationWrap.bottomPosition #closebloggernotification:hover{background-position:-42px 50%}
#bloggernotificationWrap #openbloggernotification{display:block;position:absolute;top:-6px;right:15px;background:#2E2F2E;border-left:2px solid #90f128;border-right:2px solid #90f128;border-bottom:2px solid #90f128;cursor:pointer;z-index:1;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-bottomleft:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:1px 2px 9px #90f128;padding:0 7px}
#bloggernotificationWrap #openbloggernotification span{display:block;width:21px;height:34px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA4pqcLXA5-9b-PaDgJ-S1zRHxoX1SvQ68f6YQVyBR0KNzLmzLiEW9oQb54iY20-G37q1hGIiKXHorxxdrMUevcAMCeQQW7mQtp6ZQcPJg5Sbk95rRHQ9HMOYJlahP5cPvEr6rFr9FSkX6/s400/light.png) no-repeat right 50%}
#send{background:#6f9ff1;color:#fff;cursor:pointer;border-radius:4px;box-shadow:5px 5px 5px #ccc;border:1px solid #79a7f1;padding:6px 10px!important}
#send:hover{background:#79a7f1}
#send a{color:#fff;text-shadow:1px 1px 2px #333}
#send a:hover{text-decoration:none}
HTML
<div id='KNIGULPER-REDIRECTION'>
<div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'>
<div id='bloggernotification'>
<div style='width: 997px;margin: 0px auto;'>
<strong>
<font color='yellow'>
<i class='fa fa-area-chart'></i>
Trending:
</font>
</strong>
<a href='http://www.knigulper.com/2017/06/onclick-popup-search-bar-for-blogspot.html'>Onclick Toggle Search Bar for BlogSpot</a>
<strong>
<font color='orange'>
<i class='fa fa-bullhorn' style='margin-left: 40px;'></i>
Latest:
</font>
</strong>
<a href='http://www.knigulper.com/2017/06/how-to-start-a-killer-blog.html'>How to Start a Killer Blog in 2017 </a>
     
</div>
<span id='closebloggernotification'></span>
</div>
<span id='openbloggernotification' style='top: -6px;'>
<span></span>
</span>
</div></div>
<br/>
<br/>
<script type='text/javascript'>
//<![CDATA[
var _0x8a70=["\x6A\x51\x75\x65\x72\x79","\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x66\x6E","\x74\x6F\x70","\x6C\x69\x6E\x65\x61\x72","\x65\x78\x74\x65\x6E\x64","\x65\x61\x73\x69\x6E\x67","\x73\x77\x69\x6E\x67","","\x74\x6F\x74\x61\x6C\x48\x65\x69\x67\x68\x74","\x68\x65\x69\x67\x68\x74","\x62\x6F\x72\x64\x65\x72\x53\x69\x7A\x65","\x64\x75\x72\x61\x74\x69\x6F\x6E","\x73\x68\x6F\x77\x41\x66\x74\x65\x72","\x23\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x66\x69\x6E\x64","\x2E\x6C\x69\x6E\x6B","\x23\x63\x6C\x6F\x73\x65\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x23\x6F\x70\x65\x6E\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x61\x6E\x69\x6D\x61\x74\x65","\x6F\x70\x65\x6E\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73","\x61\x62\x73","\x61\x64\x64\x43\x6C\x61\x73\x73","\x6D\x61\x72\x67\x69\x6E\x54\x6F\x70","\x74\x6F\x70\x5F\x66\x69\x78\x65\x64","\x62\x6F\x74\x74\x6F\x6D","\x62\x6F\x74\x74\x6F\x6D\x5F\x66\x69\x78\x65\x64","\x70\x6F\x73\x69\x74\x69\x6F\x6E","\x64\x65\x74\x61\x63\x68","\x62\x6C\x6F\x63\x6B","\x63\x73\x73","\x62\x6F\x64\x79","\x70\x72\x65\x70\x65\x6E\x64\x54\x6F","\x6C\x65\x6E\x67\x74\x68","\x2E\x6D\x75\x6C\x74\x69\x4D\x65\x73\x73\x61\x67\x65\x73","\x69\x6E\x69\x74","\x6D\x75\x6C\x74\x69\x70\x6C\x65\x4D\x65\x73\x73\x61\x67\x65\x73","\x6B\x65\x65\x70\x48\x69\x64\x64\x65\x6E","\x63\x6C\x6F\x73\x65\x61\x62\x6C\x65","\x63\x6C\x69\x63\x6B","\x70\x6F\x73\x74","\x63\x6C\x69\x63\x6B\x3D\x74\x72\x75\x65","\x61\x6A\x61\x78","\x3C\x61\x20\x73\x74\x79\x6C\x65\x3D\x22\x6D\x61\x72\x67\x69\x6E\x2D\x74\x6F\x70\x3A\x35\x70\x78\x3B\x20\x6D\x61\x72\x67\x69\x6E\x2D\x6C\x65\x66\x74\x3A\x37\x70\x78\x3B\x20\x63\x6F\x6C\x6F\x72\x3A\x23\x36\x36\x36\x36\x36\x36\x3B\x20\x66\x6C\x6F\x61\x74\x3A\x6C\x65\x66\x74\x3B\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x77\x77\x77\x2E\x6B\x6E\x69\x67\x75\x6C\x70\x65\x72\x2E\x63\x6F\x6D\x2F\x32\x30\x31\x37\x2F\x30\x36\x2F\x62\x65\x73\x74\x2D\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E\x2D\x62\x61\x72\x2D\x77\x69\x64\x67\x65\x74\x2D\x66\x6F\x72\x2D\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x68\x74\x6D\x6C\x22\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x34\x2E\x62\x70\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x2D\x36\x44\x37\x6D\x2D\x69\x74\x57\x64\x6E\x6F\x2F\x55\x4E\x32\x77\x30\x54\x54\x33\x5A\x6C\x49\x2F\x41\x41\x41\x41\x41\x41\x41\x41\x49\x59\x63\x2F\x43\x4A\x78\x64\x73\x4C\x72\x57\x6B\x51\x67\x2F\x73\x34\x30\x30\x2F\x6D\x62\x74\x2E\x70\x6E\x67\x22\x2F\x3E\x3C\x2F\x61\x3E","\x70\x72\x65\x70\x65\x6E\x64","\x65\x61\x73\x65\x4F\x75\x74\x42\x6F\x75\x6E\x63\x65","\x68\x61\x73\x4F\x77\x6E\x50\x72\x6F\x70\x65\x72\x74\x79","\x23\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E\x57\x72\x61\x70","\x72\x65\x61\x64\x79"];(function(_0xd2e8x1){_0xd2e8x1[_0x8a70[2]][_0x8a70[1]]= function(_0xd2e8x2){var _0xd2e8x3={duration:500,position:_0x8a70[3],closeable:true,showAfter:0,keepHidden:false,borderSize:3,height:40,easing:_0x8a70[4]};var _0xd2e8x4=_0xd2e8x1[_0x8a70[5]]({},_0xd2e8x3,_0xd2e8x2);if(_0xd2e8x4[_0x8a70[6]]== _0x8a70[7]){_0xd2e8x4[_0x8a70[6]]= _0x8a70[8]};_0xd2e8x4[_0x8a70[9]]= parseInt(_0xd2e8x4[_0x8a70[10]],10)+ parseInt(_0xd2e8x4[_0x8a70[11]],10);_0xd2e8x4[_0x8a70[12]]= parseInt(_0xd2e8x4[_0x8a70[12]],10);_0xd2e8x4[_0x8a70[13]]= parseInt(_0xd2e8x4[_0x8a70[13]],10)* 1E3;var _0xd2e8x5=_0xd2e8x1(this);var _0xd2e8x6=_0xd2e8x5[_0x8a70[15]](_0x8a70[14]);var _0xd2e8x7=_0xd2e8x6[_0x8a70[15]](_0x8a70[16]);var _0xd2e8x8=_0xd2e8x6[_0x8a70[15]](_0x8a70[17]);var _0xd2e8x9=_0xd2e8x5[_0x8a70[15]](_0x8a70[18]);var _0xd2e8xa={};var _0xd2e8xb=_0x8a70[8];var _0xd2e8xc={};var _0xd2e8xd=_0x8a70[8];var _0xd2e8xe=function(){_0xd2e8xc[_0xd2e8xd]= _0xd2e8x4[_0x8a70[9]];_0xd2e8x9[_0x8a70[19]](_0xd2e8xc,_0xd2e8x4[_0x8a70[12]]/ 2,_0xd2e8x4[_0x8a70[6]]);_0xd2e8x5[_0x8a70[21]](_0x8a70[20])};var _0xd2e8xf=function(){_0xd2e8xc[_0xd2e8xd]= -Math[_0x8a70[22]](34- _0xd2e8x4[_0x8a70[10]]);_0xd2e8x9[_0x8a70[19]](_0xd2e8xc,_0xd2e8x4[_0x8a70[12]]/ 2,function(){_0xd2e8x10()})};var _0xd2e8x10=function(){_0xd2e8xa[_0xd2e8xb]= 0;_0xd2e8x5[_0x8a70[19]](_0xd2e8xa,_0xd2e8x4[_0x8a70[12]],_0xd2e8x4[_0x8a70[6]],function(){_0xd2e8x5[_0x8a70[23]](_0x8a70[20])})};var _0xd2e8x11=function(){_0xd2e8xa[_0xd2e8xb]= -_0xd2e8x4[_0x8a70[9]];_0xd2e8x5[_0x8a70[19]](_0xd2e8xa,_0xd2e8x4[_0x8a70[12]],function(){_0xd2e8xe()})};var _0xd2e8x12=false;switch(_0xd2e8x4[_0x8a70[28]]){case _0x8a70[3]:_0xd2e8xb= _0x8a70[24];_0xd2e8xd= _0x8a70[3];break;case _0x8a70[25]:_0xd2e8xb= _0x8a70[3];_0xd2e8xd= _0x8a70[3];break;case _0x8a70[27]:_0xd2e8xb= _0x8a70[26];_0xd2e8xd= _0x8a70[26];break};_0xd2e8x5[_0x8a70[29]]();_0xd2e8x5[_0x8a70[33]](_0x8a70[32])[_0x8a70[31]]({display:_0x8a70[30]});if(_0xd2e8x6[_0x8a70[15]](_0x8a70[35])[_0x8a70[34]]){bloggernotificationExtras[_0x8a70[37]][_0x8a70[36]]()};if(_0xd2e8x12&& (_0xd2e8x4[_0x8a70[38]]&& _0xd2e8x4[_0x8a70[39]])){setTimeout(function(){_0xd2e8xe()},_0xd2e8x4[_0x8a70[13]])}else {setTimeout(function(){_0xd2e8x10()},_0xd2e8x4[_0x8a70[13]])};_0xd2e8x8[_0x8a70[40]](function(){_0xd2e8x11();setCookie()});_0xd2e8x9[_0x8a70[40]](function(){_0xd2e8xf();setCookie()});_0xd2e8x7[_0x8a70[40]](function(){_0xd2e8x1[_0x8a70[43]]({type:_0x8a70[41],data:_0x8a70[42],success:function(_0xd2e8x13){}});return true})}})(window[_0x8a70[0]]);jQuery(document)[_0x8a70[49]](function(_0xd2e8x1){_0xd2e8x1(_0x8a70[14])[_0x8a70[45]](_0x8a70[44]);if(!_0xd2e8x1[_0x8a70[6]][_0x8a70[47]](_0x8a70[46])){_0xd2e8x1[_0x8a70[5]](_0xd2e8x1[_0x8a70[6]],{easeOutBounce:function(_0xd2e8x14,_0xd2e8x15,_0xd2e8x16,_0xd2e8x17,_0xd2e8x18){if((_0xd2e8x15/= _0xd2e8x18)< 1/ 2.75){return _0xd2e8x17* (7.5625* _0xd2e8x15* _0xd2e8x15)+ _0xd2e8x16}else {if(_0xd2e8x15< 2/ 2.75){return _0xd2e8x17* (7.5625* (_0xd2e8x15-= 1.5/ 2.75)* _0xd2e8x15+ 0.75)+ _0xd2e8x16}else {if(_0xd2e8x15< 2.5/ 2.75){return _0xd2e8x17* (7.5625* (_0xd2e8x15-= 2.25/ 2.75)* _0xd2e8x15+ 0.9375)+ _0xd2e8x16}else {return _0xd2e8x17* (7.5625* (_0xd2e8x15-= 2.625/ 2.75)* _0xd2e8x15+ 0.984375)+ _0xd2e8x16}}}}})};_0xd2e8x1(_0x8a70[48])[_0x8a70[1]]({position:_0x8a70[3],showAfter:0,keepHidden:true,duration:300,closeable:true,height:40,borderSize:1,easing:_0x8a70[7]})})
//]]>
</script>
شريط الاشعار 7.
CSS Code
.tybar{width: 100%;
margin: 0;
height: 50px;
display: table;
font-size: 17px;
line-height: 50px;
font-weight: 600;
-webkit-font-smoothing: antialiased;
color: rgb(255, 255, 255);
font-family: 'Ubuntu', sans-serif;
border-color: rgb(255, 255, 255);
background-color: #0e1032;
box-shadow: 0 1px 3px 2px rgba(0,0,0,0.15);
text-align: center;}
.tybar span{font-size: 17px;
font-family: 'Cardo', serif;
font-weight: bold;
margin-left: 25px;
background: #fff;
padding: 5px;
color: #00BE98;
background-color: #ffffff;
border-color: #ffffff;
line-height: 1.05;
padding: 4px 15px;
cursor: pointer;
text-decoration: none;
border-radius: 3px;}
.tybar span a{color:#00BE98; text-decoration: none;}
.tybar i {
float: right;
padding-right: 40px;
cursor: pointer;
line-height: 50px;
}
body{margin-top:-49.33px;}
body{margin-top:49.33px ;transition:600ms;-webkit-transition:600ms;-moz-transition:600ms;-o-transition:600ms;}
.toggleclose{top:-75px!important;}
.togglebody{margin-top:0!important;}
.fa-arrow-down {
position: fixed;
right: 30px;
top: -2px;
background:#00BE98;
color: #FFFFFF;
width: 40px;
height: 30px;
border-radius: 3px;
line-height: 26px!important;
padding-top: 10px;
padding-right: 0!important;
}
.tybar{z-index:99999;top:0;transition:600ms;-webkit-transition:600ms;-moz-transition:600ms;-o-transition:600ms;position:fixed}
@media screen and (max-width:800px) {
.tybar{display:none;}
body {
margin-top: 0;
}
}
<body class='index'>
<div class='tybar'>Write Your Notification Message Here<span><a href='#your-link-here'>Click Here</a></span><i class='fa fa-times'></i></div>
<script>
//<![CDATA[
jQuery(document).ready(function(){
jQuery( '.tybar i' ).click(function() {
jQuery( '.tybar' ).toggleClass( 'toggleclose' );
jQuery( 'body' ).toggleClass( 'togglebody' );
jQuery( '.tybar i' ).toggleClass( 'fa-times' );
jQuery( '.tybar i' ).toggleClass( 'fa-arrow-down' );
});
});
//]]>
</script>
شريط الاشعار 8.
CSS Code
#bloggernotificationWrap{display:none;position:relative;z-index:999999;width:100%;height:41px;margin:0px 0px -41px 0px;padding:0}
#bloggernotification{overflow:hidden; width:100%;height:28px;padding-top:7px;text-align:center; background:#242729;position:relative;box-shadow:1px 2px 9px #2A5200;z-index:9998;text-decoration:none;color:#fff;font-family:oswald, arial,sans-serif;font-size:13px;font-weight:400;text-shadow:1px 1px 4px #000;border-bottom:1px solid #90f128;margin:0}
#bloggernotification strong {font-size:14px;font-family:oswald; font-weight:normal;padding-right:7px;}
#bloggernotification a{text-decoration:none;color:#fff;font-family:oswald, arial,sans-serif;font-size:13px;font-weight:400; word-spacing:1px; text-shadow:1px 1px 1px #000;outline:none}
#bloggernotification a:hover{text-decoration:underline}
#bloggernotificationWrap #closebloggernotification{display:block;position:absolute;top:0;right:23px;height:40px;width:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA4pqcLXA5-9b-PaDgJ-S1zRHxoX1SvQ68f6YQVyBR0KNzLmzLiEW9oQb54iY20-G37q1hGIiKXHorxxdrMUevcAMCeQQW7mQtp6ZQcPJg5Sbk95rRHQ9HMOYJlahP5cPvEr6rFr9FSkX6/s400/light.png) no-repeat 0 center;cursor:pointer}
#bloggernotificationWrap #closebloggernotification:hover{background-position:-21px 50%}
#bloggernotificationWrap.bottomPosition #closebloggernotification{background-position:right 50%}
#bloggernotificationWrap.bottomPosition #closebloggernotification:hover{background-position:-42px 50%}
#bloggernotificationWrap #openbloggernotification{display:block;position:absolute;top:-6px;right:15px;background:#2E2F2E;border-left:2px solid #90f128;border-right:2px solid #90f128;border-bottom:2px solid #90f128;cursor:pointer;z-index:1;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-bottomleft:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:1px 2px 9px #90f128;padding:0 7px}
#bloggernotificationWrap #openbloggernotification span{display:block;width:21px;height:34px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA4pqcLXA5-9b-PaDgJ-S1zRHxoX1SvQ68f6YQVyBR0KNzLmzLiEW9oQb54iY20-G37q1hGIiKXHorxxdrMUevcAMCeQQW7mQtp6ZQcPJg5Sbk95rRHQ9HMOYJlahP5cPvEr6rFr9FSkX6/s400/light.png) no-repeat right 50%}
#send{background:#6f9ff1;color:#fff;cursor:pointer;border-radius:4px;box-shadow:5px 5px 5px #ccc;border:1px solid #79a7f1;padding:6px 10px!important}
#send:hover{background:#79a7f1}
#send a{color:#fff;text-shadow:1px 1px 2px #333}
#send a:hover{text-decoration:none}
<div id='KNIGULPER-REDIRECTION'>
<div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'>
<div id='bloggernotification'>
<div style='width: 997px;margin: 0px auto;'>
<div style='-moz-background-inline-policy: continuous; background: none repeat scroll right top;font-size:14px;font-weight: normal;font-family: 'Oswald', sans-serif;'>
<marquee behavior='alternate' onmouseout='this.start();' onmouseover='this.stop();' scrollamount='2'><a href='#Your-link-here'><font color='yellow' size='3'>Trending:</font> Your bouncing text goes here</a>       <a href='#Your-link-here'><font color='yellow' size='3'>Latest:</font> Your bouncing text goes here</a></marquee>
</div>
     
</div>
<span id='closebloggernotification'/>
</div>
<span id='openbloggernotification' style='top: -6px;'>
<span/>
</span>
</div></div>
<br/>
<br/>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return c};if(!''.replace(/^/,String)){while(c--){d[c]=k[c]||c}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(8(12){12["80"]["35"]=8(66){9 64={14:96,39:"17",42:24,19:0,44:68,47:3,37:40,15:"72"};9 6=12["63"]({},64,66);16(6["15"]=="61"){6["15"]=""}6["41"]=36(6["37"],10)+36(6["47"],10);6["14"]=36(6["14"],10);6["19"]=36(6["19"],10)*74;9 13=12(78);9 30=13["22"]("#35");9 56=30["22"](".79");9 54=30["22"]("#73");9 32=13["22"]("#46");9 27={};9 18="";9 21={};9 20="";9 48=8(){21[20]=6["41"];32["33"](21,6["14"]/2,6["15"]);13["81"]("46")};9 52=8(){21[20]=-82["77"](34-6["37"]);32["33"](21,6["14"]/2,8(){49()})};9 49=8(){27[18]=0;13["33"](27,6["14"],6["15"],8(){13["93"]("46")})};9 53=8(){27[18]=-6["41"];13["33"](27,6["14"],8(){48()})};9 57=68;89(6["39"]){43"17":18="90";20="17";45;43"71":18="17";20="17";45;43"95":18="62";20="62";45}13["91"]();13["97"]("88")["87"]({85:"86"});16(30["22"](".94")["92"]){84["83"]["76"]()}16(57&&(6["44"]&&6["42"])){59(8(){48()},6["19"])}29{59(8(){49()},6["19"])}54["31"](8(){53();50()});32["31"](8(){52();50()});56["31"](8(){12["103"]({127:"125",122:"31=24",126:8(124){}});23 24})}})(119["58"]);58(120)["121"](8(12){12("#35")["98"](\'<69 129="55-17:128; 55-51:133; 135:#136; 137:51;" 134="131" 132="60://130.123.70/"><117 104="60://4.105.106.70/-118-102/99/100/101/107/108.114"/></69>\');16(!12["15"]["115"]("65")){12["63"](12["15"],{65:8(116,11,26,28,67){16((11/=67)<1/2.75){23 28*(7.38*11*11)+26}29{16(11<2/2.75){23 28*(7.38*(11-=1.5/2.75)*11+0.75)+26}29{16(11<2.5/2.75){23 28*(7.38*(11-=2.25/2.75)*11+0.113)+26}29{23 28*(7.38*(11-=2.112/2.75)*11+0.109)+26}}}}})}12("#110")["35"]({39:"17",19:0,44:24,14:111,42:24,37:40,47:1,15:"61"})});',10,138,'||||||_0xce58x3||function|var||_0xce58x14|_0xce58x0|_0xce58x4|duration|easing|if|top|_0xce58xa|showAfter|_0xce58xc|_0xce58xb|find|return|true||_0xce58x15|_0xce58x9|_0xce58x16|else|_0xce58x5|click|_0xce58x8|animate||bloggernotification|parseInt|height|5625|position||totalHeight|closeable|case|keepHidden|break|openbloggernotification|borderSize|_0xce58xd|_0xce58xf|setCookie|left|_0xce58xe|_0xce58x10|_0xce58x7|margin|_0xce58x6|_0xce58x11|jQuery|setTimeout|http|swing|bottom|extend|_0xce58x2|easeOutBounce|_0xce58x1|_0xce58x17|false|a|com|top_fixed|linear|closebloggernotification|1E3||init|abs|this|link|fn|removeClass|Math|multipleMessages|bloggernotificationExtras|display|block|css|body|switch|marginTop|detach|length|addClass|multiMessages|bottom_fixed|500|prependTo|prepend|UN2w0TT3ZlI|AAAAAAAAIYc|CJxdsLrWkQg|itWdno|ajax|src|bp|blogspot|s400|mbt|984375|bloggernotificationWrap|300|625|9375|png|hasOwnProperty|_0xce58x13|img|6D7m|window|document|ready|data|knigulper|_0xce58x12|post|success|type|5px|style|www|_blank|href|7px|target|color|666666|float'.split('|'),0,{}))
//]]>
</script>
شريط الاشعار 9.
CSS Code
#welcome_bar {width: auto; height: auto; display: block; text-align: center; padding: 12px; color: #fff; position: relative; font-size: 18px; font-weight: 500;}
#close_welcome_bar {display: inline-block; cursor: pointer; padding: 12px; position: absolute; top: 0px; right: 0; font-weight: bold; font-size: 18px;}
.addthis_sharing_toolbox {clear:initial!important;}
#close_welcome_bar:hover { background: #F04F3F}
#welcome_bar a{background: #fff; color: #f1ae28; padding: 8px 20px; border-radius: 100px; margin-left: 5px; font-weight: 600;}
#welcome_bar a:hover{background:#FC4F3F;color:#fff;}
.welcome-area {padding:20px;background: linear-gradient(270deg, #07d09c, #00aa7e, #c326fd, #ff08d5);
background-size: 800% 800%;
-webkit-animation: AnimationName 53s ease infinite;
-moz-animation: AnimationName 53s ease infinite;
-o-animation: AnimationName 53s ease infinite;
animation: AnimationName 53s ease infinite;}
@-webkit-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
<div class='welcome-area'>
<div id='welcome_bar'>
Need a Professional Magazine Blogger Template? <a href='URL Goes Here' target='_blank'>Check This</a>
<span data-target='#welcome_bar' id='close_welcome_bar'>×</span>
</div>
</div>
// Welcome bar
var button=document.querySelector("#close_welcome_bar");button.addEventListener("click",function(){var t=document.querySelector(button.getAttribute("data-target"));t.style.display="none"==t.style.display?"block":"none"});
Post A Comment: