Test Footer 2


طريقة اضافة Notification Bar بلوجر حصري

التسميات: , ,

بسم الله الرحمن الرحيم
والصلاة والسلام على سيدنا محمد صلى الله علية وسلم
السلام عليكم ورحمة الله وبركاتة
طريقة اضافة Notification Bar للبلوجر حصري

اليكم اليوم اضافة بلوجر 2014 من اجمل اضافات بلوجر الاضافة يبحث عنها الكثيرين وخي قائمة علوية لتنبيه الزائر 2014 , الاضافة تعمل بتقنية css بالون جذابة وجميلة تلفت انتباه الزائر , والاكواد لاتؤثر على سرعة مدونتك ابداً , الاضافة باللون لازرق كما في الصورة يمكنك تغير لون الاضافة الى لون الذي تريد الاضافة تستخدم لتنبية الزائر الى رسالة ادارية او موضوع حصري يمكن وضعة ,



اليكم طريقة تركيب Hulo Bar للبلوجر 2014 مجاناً

1 -الذهاب الى بلوجر >> القالب >>> تحرير HTML
وقم بالبحث عن</head> وقم باضافة الكود الاتي قبلة



  1. <style>

  2. #bloggernotificationWrap {

  3.       display: none;

  4.  

  5.     height: 71px;

  6.     margin-top: 9px;

  7.     position: relative;

  8.     width: 100%;

  9.     z-index: 999999;

  10. }

  11. .button {

  12.   display: inline-block;

  13.   padding: 5px 10px;

  14.   border: 3px solid #3498db;

  15.   color: #ddd;

  16.   text-decoration: none;

  17.   font-weight: bold;

  18.   text-transform: uppercase;

  19.   margin: 5px 5px 0 10px;

  20.   transition: all .2s;

  21. }

  22. .button:hover {

  23.   background: #3498db;

  24.   color: #fff;

  25. }

  26. #notification-bar {

  27.   position:fixed; display:block; z-index: 100000;

  28.  

  29. }

  30. .notification-bar {

  31.  position: absolute;

  32.  width: 100%;

  33.  top: 0px;

  34. }

  35. .notification-text {

  36.  background-color: #2980B9;

  37.  padding: 15px;

  38.  color: #fff;

  39.  font-size: 14px;

  40.  text-align: center;

  41.  position: absolute;

  42.  width: 100%;

  43.  

  44.  -webkit-animation: initiate 350ms ease;

  45.  -moz-animation: initiate 350ms ease;

  46.  -o-animation: initiate 350ms ease;

  47.  animation: initiate 350ms ease;

  48. }

  49. .notification-bar input {

  50.  display: none;

  51. }

  52. .notification-bar label {

  53.  cursor: pointer;

  54.  color: #fff;

  55.  position: absolute;

  56.  z-index: 5;

  57.  display: inline-block;

  58.  

  59.  text-indent: 100%;

  60.  white-space: nowrap;

  61.  overflow: hidden;

  62. }

  63. .notification-bar label[for=hide] {

  64.  

  65.  right: 15px;

  66.  top: 15px;

  67.  

  68.  width: 38px;

  69.  height: 38px;

  70.  background: url('http://2.bp.blogspot.com/-PGYIV79ZtTk/Uxbn_Pnh8cI/AAAAAAAACtQ/d-JeNX8bu5M/s1600/arrow_down_alt1-32.png') no-repeat center center;

  71.  

  72.  -webkit-animation: initiate 350ms ease;

  73.  -moz-animation: initiate 350ms ease;

  74.  -o-animation: initiate 350ms ease;

  75.  animation: initiate 350ms ease;

  76. }

  77. .notification-bar label[for=show] {

  78.  width: 45px;

  79.  height: 50px;

  80.  border-radius: 0px 0px 3px 3px;

  81.  right: 10px;

  82.  background: url('http://3.bp.blogspot.com/-gsITKBL27qc/Uxbn_cPc3CI/AAAAAAAACtU/vBc4OW4YvTk/s1600/arrow_up_alt1-32.png') no-repeat center center #2980B9;

  83. }

  84. /* Function */

  85. .notification-bar input[value=show]:checked ~ label[for=show],

  86. .notification-bar input[value=hide]:checked ~ label[for=hide],

  87. .notification-bar input[value=hide]:checked ~ .notification-text {

  88.  -webkit-transition: ease 350ms;

  89.  -moz-transition: ease 350ms;

  90.  -o-transition: ease 350ms;

  91.  transition: ease 350ms;

  92.  

  93.  -webkit-transform: translateY(-100%);

  94.  -moz-transform: translateY(-100%);

  95.  -o-transform: translateY(-100%);

  96.  transform: translateY(-100%);

  97. }

  98. .notification-bar input[value=hide]:checked ~ label[for=show],

  99. .notification-bar input[value=show]:checked ~ label[for=hide],

  100. .notification-bar input[value=show]:checked ~ .notification-text {

  101.  -webkit-transition: ease 350ms;

  102.  -moz-transition: ease 350ms;

  103.  -o-transition: ease 350ms;

  104.  transition: ease 350ms;

  105.  

  106.  -webkit-transform: translateY(0%);

  107.  -moz-transform: translateY(0%);

  108.  -o-transform: translateY(0%);

  109.  transform: translateY(0%);

  110. }

  111. /* Inital Animation */

  112. @-webkit-keyframes initiate {

  113.   0% {

  114.   -webkit-transform:translateY(-100%);

  115.   }

  116.   50% {

  117.    -webkit-transform:translateY(-50%);

  118.   }

  119.   100% {

  120.    -webkit-transform:translateY(0%);

  121.   } 

  122. }

  123. @-moz-keyframes initiate {

  124.   0% {

  125.   -moz-transform:translateY(-100%);

  126.   }

  127.   50% {

  128.    -moz-transform:translateY(-50%);

  129.   }

  130.   100% {

  131.    -moz-transform:translateY(0%);

  132.   } 

  133. }

  134. @-o-keyframes initiate {

  135.   0% {

  136.   -o-transform:translateY(-100%);

  137.   }

  138.   50% {

  139.    -o-transform:translateY(-50%);

  140.   }

  141.   100% {

  142.    -o-transform:translateY(0%);

  143.   } 

  144. }

  145. @keyframes initiate {

  146.   0% {

  147.   transform:translateY(-100%);

  148.   }

  149.   50% {

  150.    transform:translateY(-50%);

  151.   }

  152.   100% {

  153.    transform:translateY(0%);

  154.   } 

  155. }

  156. </style>




والان قم بالبحث عن  <body> وضع تحتة الكود الاتي 


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'>
 <div class='notification-bar' id='notification-bar'>
<input id='hide' name='bar' type='radio' value='hide'/>
<input checked='checked' id='show' name='bar' type='radio' value='show'/>
<label for='hide'>hide</label>
<label for='show'>show</label>
<div class='notification-text'><a href="http://www.ahmad-web.com/"><img align='left' src="https://lh4.googleusercontent.com/-qa51wS7RTU0/Uxb1Q1q2R5I/AAAAAAAACt8/Ab4B1RPZFnc/h120/digital-00logo.png"/></a><b>أهلا وسهلا في مدونة احمد ويب ان كانت لك اول زيارة يمكنك تصفح الفهرس </b><a class='button' href='http://www.ahmad-web.com/'>الفهرس</a></div></div>
  </div>
تم قم بحفظ القالب ومبروك عليك الاضافة 

يمكنك تحميل الاكواد من هنا

والسلام عليكم ورحمة الله وبركاتة , انتهي الشرح في حال وجود اي استفسار لا تترد بوضعة في  تعليق , لاتحرمنا من الردود المشجعة

الكلمات الدلالية

تركيب قائمة علوية في البلوجر 2014
شريط علوي للبلوجر 2014
النسخة المجانية من Hulo Bar
طريقة تركيب قائمة علوية قابلة للاخفاء
اضافات بلوجر 2014
اجمل اضافات بلوجر 2014



هل أعجبك الموضوع ؟
لا تنسى دعمنا بلايك إن أفادك الموضوع و شكرا

ليست هناك تعليقات:

إرسال تعليق