أرشيف انكور
(نسخة قابلة للطباعة من الموضوع)
https://archive.iinkor.com/t907
أنقر هنا لمشاهدة الموضوع بهيئته الأصلية

صندوق اعلاني يظهر للزائر يمكن ازالته
Admin 16-06-2020 03:12 مساءً
بسم الله الرحمن الرحيم

اقدم لكم كود callout وهو عبارة عن صندوق اعلاني او تنبيهي يظهر لرواد الموقع للاعلان عن فعالية او رسالة للزائر وغيرها ويمكن ازالتها بضغطة
يمكن استعماله في جميع المواقع والمنتديات و المدونات طبعا

معاينة الكود :
3712
تركيب الكود :
ضع الاكواد التالية في المكان المخصص لاكواد الـ css
CODE
.callout {<br />
&nbsp; position: fixed;<br />
&nbsp; bottom: 35px;<br />
&nbsp; right: 20px;<br />
&nbsp; margin-left: 20px;<br />
&nbsp; max-width: 300px;<br />
}<br />
<br />
.callout-header {<br />
&nbsp; padding: 9px 15px;<br />
&nbsp; background: #005095;<br />
&nbsp; font-size: 30px;<br />
&nbsp; color: white;<br />
&nbsp; text-align: right;<br />
}<br />
<br />
.callout-container {<br />
&nbsp; padding: 5px;<br />
&nbsp; background-color: #5e9dd4;<br />
&nbsp; color: black;<br />
}<br />
<br />
.closebtn {<br />
&nbsp; position: absolute;<br />
&nbsp; top: 5px;<br />
&nbsp; right: 15px;<br />
&nbsp; color: white;<br />
&nbsp; font-size: 30px;<br />
&nbsp; cursor: pointer;<br />
margin-right: 255px;<br />
}<br />
<br />
.closebtn:hover {<br />
&nbsp; color: lightgrey;<br />
}<br />
<br />

ومن ثم ضع الكود التالي في اي مكان تريده
وفي حال اردته ان يظهر في صفحة معينه ضعه في قالب هذه الصفحة
CODE
<div dir="rtl" class="callout">
  <div class="callout-header">اعلان هام</div>
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
  <div class="callout-container">
    <p>تم انطلاق اول فعالية للمنتدى لدينا سارع واكسب من الجوائز الرائعه <a href="">بالضغط هنا</a></p>
  </div>
</div>


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

Copyright © 2009-2025 PBBoard® Solutions. All Rights Reserved