-->

إضافة صندوق تلميحات عائم الشكل الأول


السلام عليكم ورحمة الله وبركاته

 إضافة صندوق تلميحات عائم الشكل الأول - أهلا بكم زوار مدونة جديد بلوجر في تدوينة جديدة وحصرية كما تعلمون الحصري دائما هدفنا ونأتيكم اليوم بإضافة جديدة الى عالم بلوجر وتصميم جميل ومختلف هذه المرة لصناديق التنبيهات كما يعلم البعض منكم لهذه الصناديق فائدة كبيرة سأعطيكم بعض الأمثلة على استخداماتها في نهاية التدوينة هذا الشكل الاول لهذه الاضافة وبالتأكيد إن حصلت على إعجاب كبير سأضيف الشكل الثاني والثالث . . . الخ
  • ملاحظة 1 : هذه الصندوق يظهر لمدة 15 ثاينة و من ثم يختفي لكي لا يسبب ازعاج للزائر

لن اطيل عليكم في الحديث واترككم مع المعاينة و طريقة التركيب

أولا المعاينة 


والان ثانيا طريقة التركيب :
  • ملاحظة 2 : قمة بدمج اكواد التنسيق ( css ) مع كود الإضافة لكي يتم تركيبها بشكل اسهل

  1. اذخل الى لوحة تحكم بلوجر من هنا 
  2. اختار المدونة التي تريد اضافة الادات فيها من اللوحة و من ثم ادخل الى لوحة التخطيط 
  3. اختار اضافة ادات HTML/JavaScript
  4. اضف الكود التالي :
<style>#plozer {right: 10px;top: 10px;width: 320px;height: auto;overflow: hidden;background:#BF3736;border-radius: 0px;border: 10px solid #333333;z-index: 999999;position: fixed;-webkit-animation: fadeOutnotif 15s linear forwards;-moz-animation: fadeOutnotif 15s linear forwards;-o-animation: fadeOutnotif 15s linear forwards;-ms-animation: fadeOutnotif 15s linear forwards;animation: fadeOutnotif 15s linear forwards;}#plozer a {display:block;text-decoration:none;}#plozer span {display: block;padding: 15px 15px;pointer-events: none;text-align: right;float: right;}#plozer span h2 {font-size: 20px tahoma;line-height: 21px;color: #fff;font-weight: normal;letter-spacing: 0px;}/*widget by  plozer.blogspot.com   */@-webkit-keyframes fadeOutnotif {0% { opacity: 1;}10% { opacity: 1;}90% { opacity: 1; -webkit-transform: translateY(0px);}99% { opacity: 0; -webkit-transform: translateY(-30px);}100% { opacity: 0;}}@-moz-keyframes fadeOutnotif {0% { opacity: 1;}10% { opacity: 1;}90% { opacity: 1; -moz-transform: translateY(0px);}99% { opacity: 0; -moz-transform: translateY(-30px);}100% { opacity: 0;}}@-o-keyframes fadeOutnotif {0% { opacity: 1;}10% { opacity: 1;}90% { opacity: 1; -moz-transform: translateY(0px);}99% { opacity: 0; -moz-transform: translateY(-30px);}100% { opacity: 0;}}@-ms-keyframes fadeOutnotif {0% { opacity: 1;}10% { opacity: 1;}90% { opacity: 1; -moz-transform: translateY(0px);}99% { opacity: 0; -moz-transform: translateY(-30px);}100% { opacity: 0;}}@keyframes fadeOutnotif {0% { opacity: 1;}10% { opacity: 1;}90% { opacity: 1; -moz-transform: translateY(0px);}99% { opacity: 0; -moz-transform: translateY(-30px);}100% { opacity: 0;}}</style>
<div id="plozer"><span><center><h2><b>*رسالة إدارية*</b></h2></center><div style="text-align: justify;"><span style="color: #FEF2BF;">هذه الأدات من تصميم مدونة جديد بلوجر وتستخدم لاغراض عديدة  </span></div></span></div>

التغييرات بسيطة 
  • لتغيير عنوان الرسالة هذا هو *رسالة إدارية*
  • لتغيير محتوى الرسالة هذا هو هذه الأدات من تصميم مدونة جديد بلوجر وتستخدم لاغراض عديدة
  • لتغيير لون الصندوق ابحث عن كود اللون وهو #BF3736
في أمان الله