اضافة اعلان دخل مدونتك بشكل جميل ورائع

اضافة اعلان دخل مدونتك بشكل جميل ورائع

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

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

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

بعد المعينة اذا اعجبك الاضافة تابع معاية التركيب

طريقة التركيب

.1 اذهب للوحة التحكم
2. تخطيط
3.عناصر الصفحة
4. اضف اداة
6.اختار 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/AVvXsEiT6M642ex8Q74-gVFIZJ0uFxZyqBsBoRi-y76YpBUtjw9x2aonTx1OfFUAaw8VS38mrEtdmxiALodhMQWoDwlcDBlx0itwMT6y31Msa4uHHxSgDhVXERt0vm1jq9pgahcpRFPZP5NyucaW/" 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/siedomar2012" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFHYFdodzlxxrhb4CdVQczjrsIpSxrnlhTzs56-cbbE62F7ojyvfoZq3El62N5wNh-6q244x4tVjUNRZPX0arFK8-LSMtquhfSVS0vp5gPrNpUmCR8pXt5ZdXMKs5SF5FIMNwdhwsV1gvp/" width="26"/></a>
<a href="http://twitter.com/omarsied" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYCsTzCNJ-iN1ITjKUeQvJDjNtMqmjpRRCDMKi0LFTY8m7hZf_3-29WKYkgzHLEVhkbOC_NgoIL9YNoYIeUyFf-E7Ajqpgxwcw0eNvyzoHoAVDPq20ykUZ0LqEd2yRMwdtRVtdqyO-479d/" width="25"/></a></div>
</fieldset>

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

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

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

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