بسم الله الرحمن الرحيم .
السلام عليكم .
كما هو موضح في العنوان .. شرح عمل خبر عاجل كما في صحيفة الربوعة الإلكترونية .
الصورة
للمشاهدة على الطبيعة
http://www.alraboah.net/index.htm
أولاً :- سنستخدم كود أحداث خفيفة .
الطريقة :
- نذهب للإستايلات والقوالب > الإستايلات > إستعراض
- نختار التصميم من أمام الإستايل المطلوب .
- نذهب لقالب servcontent.htm
- نبحث عن الكود التالي
كود:
<!-- START BLOCK : newlighteventsbl -->
<div class="module-title">{phrase_lightevents}</div>
<div id="contents" class="justify">
<div id="lightevents" style="overflow:hidden;">
<!-- START BLOCK : newlightevents -->
<div>{newlightevents}</div>
<!-- END BLOCK : newlightevents -->
</div>
</div>
<br />
<script type="text/javascript">
$(document).ready(function() {
$("#lightevents").rotator({ms : 10000, n:1, autoHeight:true});
});
</script>
<!-- END BLOCK : newlighteventsbl -->
نقوم بقص ( وليس نسخ ) الكود ثم نضغط تحرير
نفقتح المفكرة او الفرونت بيج ثم نقوم بلصق الكود
و شاهد الصورة التالية ... وركز قليلاً .
1- المحدد بالأحمر الأول وهو
كود:
<div class="module-title">{phrase_lightnews}</div>
نقوم بحذفه نهائياً .
2 المحدد بالأحمر الثاني وهو كلمة contents نقوم
بإستبدالها بـ quiknews
ثم ننسخ الكود بالكامل الذي أصبح هكذا .
كود:
<!-- START BLOCK : newlighteventsbl -->
<div id="quiknews" class="justify">
<div id="lightevents" style="overflow:hidden;">
<!-- START BLOCK : newlightevents -->
<div>{newlightevents}</div>
<!-- END BLOCK : newlightevents -->
</div>
</div>
<br />
<script type="text/javascript">
$(document).ready(function() {
$("#lightevents").rotator({ms : 10000, n:1, autoHeight:true});
});
</script>
<!-- END BLOCK : newlighteventsbl -->
ثم نذهب إلى قالب index.htm في الإستايل .
نلصق الكود في هذا المكان المحدد بالأبيض . والذي هو اسفل الكود
كود:
<td rowspan="2" valign="top" width="{style_menuwidth}">
<!-- INCLUDE BLOCK : menucontent -->
</td>
ثم نضغط تحرير .
-------------------------------------------
الآن نبدأ في ملف style.css
أولاً .. نقوم برف الصورة التالية إلى مجلد images في الإستايل المطلوب .
ثانياً : نذهب لملف style.css ثم نضيف الكود التالي إليه . وليكون في الآخر مثلاً .
كود:
#quiknews{
background:#FFFFFF url('quicknews.png') no-repeat scroll right center;
border:1px solid #FF0000;
margin:0px;
overflow:hidden;
padding-right: 152px;
padding-top: 10px;
padding-bottom: 10px;
color: #FF0000;
font-size: 20px;
font-family: 'Times New Roman', arial, verdana, geneva, lucida, 'lucida grande', helvetica, sans-serif;
font-weight:bold;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-webkit-box-shadow: 0px 0px 5px #303030;
-moz-box-shadow: 0px 0px 5px #303030;
box-shadow: 0px 0px 5px #303030;
}
ثم نحفظ ونرفع الملف .. والصلاة والسلام على سيدنا محمد .