الويب العربي - الخبر العاااااجل ....تفضلوا ياخبراء

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

السلام عليكم .

كما هو موضح في العنوان .. شرح عمل خبر عاجل كما في صحيفة الربوعة الإلكترونية .

الصورة

للمشاهدة على الطبيعة

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;

}

ثم نحفظ ونرفع الملف .. والصلاة والسلام على سيدنا محمد .