طريقة اضافة Notification Bar بلوجر حصري - المطور | نطوّر الويب العربي
أخر التدوينات
الخميس، 13 مارس، 2014

طريقة اضافة 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. right: 15px;
  65. top: 15px;
  66.  
  67. width: 38px;
  68. height: 38px;
  69. background: url('http://2.bp.blogspot.com/-PGYIV79ZtTk/Uxbn_Pnh8cI/AAAAAAAACtQ/d-JeNX8bu5M/s1600/arrow_down_alt1-32.png') no-repeat center center;
  70.  
  71. -webkit-animation: initiate 350ms ease;
  72. -moz-animation: initiate 350ms ease;
  73. -o-animation: initiate 350ms ease;
  74. animation: initiate 350ms ease;
  75. }
  76. .notification-bar label[for=show] {
  77. width: 45px;
  78. height: 50px;
  79. border-radius: 0px 0px 3px 3px;
  80. right: 10px;
  81. background: url('http://3.bp.blogspot.com/-gsITKBL27qc/Uxbn_cPc3CI/AAAAAAAACtU/vBc4OW4YvTk/s1600/arrow_up_alt1-32.png') no-repeat center center #2980B9;
  82. }
  83. /* Function */
  84. .notification-bar input[value=show]:checked ~ label[for=show],
  85. .notification-bar input[value=hide]:checked ~ label[for=hide],
  86. .notification-bar input[value=hide]:checked ~ .notification-text {
  87. -webkit-transition: ease 350ms;
  88. -moz-transition: ease 350ms;
  89. -o-transition: ease 350ms;
  90. transition: ease 350ms;
  91. -webkit-transform: translateY(-100%);
  92. -moz-transform: translateY(-100%);
  93. -o-transform: translateY(-100%);
  94. transform: translateY(-100%);
  95. }
  96. .notification-bar input[value=hide]:checked ~ label[for=show],
  97. .notification-bar input[value=show]:checked ~ label[for=hide],
  98. .notification-bar input[value=show]:checked ~ .notification-text {
  99. -webkit-transition: ease 350ms;
  100. -moz-transition: ease 350ms;
  101. -o-transition: ease 350ms;
  102. transition: ease 350ms;
  103. -webkit-transform: translateY(0%);
  104. -moz-transform: translateY(0%);
  105. -o-transform: translateY(0%);
  106. transform: translateY(0%);
  107. }
  108. /* Inital Animation */
  109. @-webkit-keyframes initiate {
  110. 0% {
  111. -webkit-transform:translateY(-100%);
  112. }
  113. 50% {
  114. -webkit-transform:translateY(-50%);
  115. }
  116. 100% {
  117. -webkit-transform:translateY(0%);
  118. }
  119. }
  120. @-moz-keyframes initiate {
  121. 0% {
  122. -moz-transform:translateY(-100%);
  123. }
  124. 50% {
  125. -moz-transform:translateY(-50%);
  126. }
  127. 100% {
  128. -moz-transform:translateY(0%);
  129. }
  130. }
  131. @-o-keyframes initiate {
  132. 0% {
  133. -o-transform:translateY(-100%);
  134. }
  135. 50% {
  136. -o-transform:translateY(-50%);
  137. }
  138. 100% {
  139. -o-transform:translateY(0%);
  140. }
  141. }
  142. @keyframes initiate {
  143. 0% {
  144. transform:translateY(-100%);
  145. }
  146. 50% {
  147. transform:translateY(-50%);
  148. }
  149. 100% {
  150. transform:translateY(0%);
  151. }
  152. }
  153. </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


طريقة اضافة Notification Bar بلوجر حصري Reviewed by Ahmad Waleed on 9:44 م Rating: 5 بسم الله الرحمن الرحيم والصلاة والسلام على سيدنا محمد صلى الله علية وسلم السلام عليكم ورحمة الل...

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

  1. اضافة حصرية للبلوجر مبدع تابع حصرياتك

    ردحذف
  2. اضافة رائعة شكرا

    ردحذف
  3. عفوا انتظر مازال لدينا المزيد

    ردحذف
  4. اضافة رائعة شكرا لك

    اخي هل يمكنك تغير لون الاضافة

    ردحذف
  5. ممكن لو سمحت كود شريطك الأخباري لمدونتي

    ردحذف

تذكر قوله تعالى:
(( مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ)) ‏
-----------------------------------
الان يمكنك اضافة اي مقطع فيديو الى التعليقات وايضا اضافة الصور فقط ضع رابط الصور او مقطع الفيديو في التعليقات
----------------------------------
آرائكم تسعدنا, لمتابعة التعليق حتى نرد عليك فقط ضع إشارة على إعلامي ,ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود


=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r

.