مربع إعلان لبلوغر مع خاصية الإغلاق Box warning

بسم الله الرحمن الرحيم

 

إضافة اليوم هي عبارة عن نافدة إعلان تظهر بمجرد دخول الزائر لمدونتك و الجميل فيها أنها تحتوي على زر إغلاق حتى يتمكن الزائر من غلقها بعد القراءة و بهذا لن تسبب له أي إزعاج. مثل هذه النوافد تستعمل في الكثير من الأحيان في المناسبات أو للإعلان عن تحديث في المدونة أو أي شيء أخر. و ميزتها أنها تظهر أمام الزائر أي أنك لن تخشى ألا يرها زوار مدونتك.

مربع إعلان لبلوغر مع خاصية الإغلاق

و النتيجة مربع إشعارات بخاصية الإغلاق كما أنه تم إستعمال كود CSS3 الرائع في هذا الكود و يمكنك ملاحظة ذالك في الظلال الموجودة أسفل الإضافة.

 view demo

و طريقة الإضافة سهلة للغاية ما عليك سوى نسخ الكود الموجود بالأسفل و لصقه في صندوق إضافة أداة الخاصة ب Html/JavaScript و إدخال بعض التعديلات عليه.

<style type="text/css">
#aviso{
width:500px; /* عرض النافدة */
padding:5px; position:absolute; z-index:5000;}
.caja-aviso{
border:4px double #0080FF; /* لون الحدود */
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 8px 8px 6px #808080; -moz-box-shadow: 8px 8px 6px #808080; box-shadow: 8px 8px 6px #808080;
background-color: #CEECF5; /* لون الخلفية */
padding: 10px; font-family: Verdana, Geneva, sans-serif;
color: #0B173B; /* لون النص */
}
.letrero-aviso {
font-size:18pt;
font-weight:bold;
color:#B4045F;
text-shadow: 0px 0px 10px #BA55D3;}
</style>

<div id="aviso" style="left:300px; top:100px; padding:0;">
<div align="right" style="margin-bottom:-30px;"><b><a href="javascript:closeit()" ><font face="Arial" size="1">إغلاق</font> <img valign="middle" src="https://lh5.googleusercontent.com/-46DmTbFSiuQ/TliKe_XV0lI/AAAAAAAAGJ4/_H2c3HB4XoY/CloseIcon-small.png" style="vertical-align:middle;"/></a></b></div>

<br/>
<fieldset class="caja-aviso">
<legend class="letrero-aviso" align="center">إعلان</legend>
... هنا قم بوضع الكلام أو الرسالة التي تريد إصالها لزوار مدونتك  ...
<br/><div align="right"><a href="http://www.facebook.com/إسم صفحتك" target="blank"><img src="https://lh6.googleusercontent.com/-9TNSAdSEm2o/Tlgi_wnuKZI/AAAAAAAAGJw/6rLfLd-QfkE/facebook.png" width="26"/></a>
<a href="http://twitter.com/إسم حسابك" target="blank"><img src="https://lh6.googleusercontent.com/-xk9JDUThPo0/TlgjAUiI4eI/AAAAAAAAGJ0/t5QtAN0xPco/twitter.png" width="25"/></a></div>
</fieldset>

<script>
function closeit(){
document.getElementById("aviso").style.visibility = "hidden";
}
</script>

</div><div class="clear"/></div>

الأن قم بتغير الكود و كتابة الرسالة التي تريد إيصالها لزوارك و إدخال رابط صفحتك على الفيس بوك و تويتر إن أردت ذالك. كما أن الجزء الأول من الكود قابل لتغير و قد وضعت الكلمات باللون الأخضر يمكنك التغير فيها كما تريد. كما يمكنك التغير في مكان تمركز صندوق الإعلان بالتعديل في القيم الموجودة باللون الأحمر.

 

و كأخر خطوة لك في هذا الموضوع، ضع تعليقك بالأسفل.

إذا أعجبك الموضوع فشاركه مع أصدقائك فلن يأخد منك الأمر سوى 5 ثوان :)

هناك 12 تعليقًا:

  1. شكرا لك
    حقيقه انت تتحفنا باضافات غير مطروق لها
    بخصوص هذه الاضافه المربع يكون بالاسفل وخارج الصفحه ولايضهر منه الا القليل
    وحاولت ان اغير فيه مثل ما انت ذاكر لكن يتغير بلا فائده

    شكرا

    ردحذف
  2. @waleed sabr
    أهلا بك أخي الكريم و شكرا على كلامك الطيب

    بخصوص المشكلة إبحث عن الكلمة absolute و هي موجودة في أول الكود في السطر الرابع و غيرها بكلمة Center و إن شاء الله يسحل المشكل.

    تحياتي لك

    ردحذف
  3. صباح الخير ولانوار , ياصاحب الذوق الرفيع والمتجدد ,
    إن شاء الله تكون بخير وبصحة جيدة ,
    اما الاضافة فهي رائعة جدا , جزاك الله خير الجزاء .
    تحياتي اخي الحبيب

    ردحذف
  4. @زيد الجماعي

    صباحك فل أخي زيد

    و شكرا على الكلام الجميل و الرائع.

    تحياتي

    ردحذف
  5. @LAMAR

    أهلا أخي الكريم

    سعيد جدا أن الإضافة أعجبتك

    ردحذف
  6. اسعد الله صباحك استاذي الكريم

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

    ردحذف
  7. @Q8OK
    قد تحدث بعض الأخطاء في تركيب الإضافات و ذالك راجع لأن القوالب لا تدعم بعض الأكواض خاصة قوالب بلوغر الرسمية و بعض القوالب المعدلة.

    ردحذف
  8. ستــــتم التجربة على :

    مدونة ربحي : نحتــآج لايكات و إشتراكات في القائمة البريدية للمدونة


    rib7i.blogspot.com

    ردحذف
  9. مشكور اخي الكريم علي هذا المجهود الرائع اعلم ان كلمة شكر صغيره لاتكفي انا مدون جديد واستفدت منك كثيرا اشكرك وهناك مشكله يمكن ان تقابل مدونين يريدون ان يستفيدو منك اكثر اذا سمحت لي بالنسبه لزر الاغلاق الرساله تظل ثابته حتي مع الضغط علي زر اغلاق تظل كما هي وشكرا كثيرا وسف لاني طولت الكلام عليك

    ردحذف