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

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

 

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

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

 

و طريقة الإضافة سهلة للغاية ما عليك سوى نسخ الكود الموجود بالأسفل و لصقه في صندوق إضافة أداة الخاصة ب 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs7ToWOLak16I1pCR9FLLp8GMmRXUEEyltl0BAuCZt54B_DpHVJoxxFVjGQzsgIBZu6nuY8zOVBUPSI2FairVTJuvhB6_nLiC42e4_Srl3EI5VSrw_2OChKmTh9zmDn1kWALgSqKWykkcN/" 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9V2XT2UZZA2GTGGAHy3cAD6CufjpRZwZzTjaOMCRvowfV-GewVGZnvDmmaEJsWftxCMHLQCYgDWzEPVXZhrOVmQuzx-1gTNNPmM4uTfIf5SbRYC5F0JtI7KI3r93qVxizr0fzx2i6LEmI/" width="26"/></a>
<a href="http://twitter.com/إسم حسابك" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi6C9gx1R-1Im971WowItpyuf0oeIKZtQDdk-2vSlAZgH_RF0VqDHRIu1g9EIctcf40PajEsvtUUX6gEl5n01Nwt5qFcQD4imBy1XNS4hWQYxqo8aO0njIMjp7WkeCvVdcrgDpm5SZM11E/" width="25"/></a></div>
</fieldset>

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

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

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

 

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

مواضيع تفيدك أيضاَ :

اذا احببت هذه المقاله , رجاء منك انسخ الرابط وقم بنشره .

رابط هذه المشاركة :

http://te-7.blogspot.com/2011/11/box-warning.html

كود HTML لهذه المشاركة:

<a href="http://te-7.blogspot.com/2011/11/box-warning.html">مربع إعلان لبلوغر مع خاصية الإغلاق Box warning</a>