القسم التعليمي-كيف تغير شكل صفحات موقعك , التعامل مع القوالب

دروس التعامل مع الثيمات: كيف تغير شكل صفحات موقعك , التعامل مع القوالب

الكاتب : mastermind
بتاريخ: 2011/1/6
عدد مرات القراءة 6261
الحجم 66.68 KB

السلام عليكم و رحمة الله

ما هي القوالب ؟
القوالب هي عبارة عن ملفات html تتحكم في تصميم عرض كل صفحة من صفحات الموقع , التعديل علي القوالب يمكننا من تغيير شكل اي صفحة من صفحات الموقع ما دمنا نعرف ملف القالب الخاص بها...

اين توجد القوالب ؟
نجد ملفات القوالب داخل مجلدات البرامج في المجلد templates
ايضا هناك نسخة منها في قاعدة البيانات .

لكن بما ان هناك نسختين ,,, اي منهما يتم استخدامها في عرض الصفحات ؟
الاجابة عن هذا السؤال ,,, اعتقد انك يمكنك ان تحدد ايهما يتم استخدامه من لوحة التحكم >> التعديلات العامة>>تحديث مجلد الثيمات بشكل تلقائي ؟ (( هذه المعلومة انا مش متأكد منها بالظبط ))
اختر نعم و سيتم اعتماد الشكل طبقا لملف القالب , اختر لا و سيتم اعتماد الشكل من القالب المخزن في قاعدة البيانات

لم افهم , تحديدا اين توجد القوالب التي تتحكم في تصميم الصفحات ؟؟
لو افترضنا انك تريد التعديل علي شكل الصفحة الرئيسية للمنتديات , ادخل الي المسار التالي
www/modules/newbb/templates/
ستجد ملفات قوالب html ,,, الملف newbb_index.html هو الملف الذي يتحكم في الصفحة الرئيسية
ايضا مثال اخر , الملف newbb_item.html يتحكم مثلا في شكل الموضوع الواحد .....و هكذا
هذه القوالب كتبها مبرمجوا البرنامج , و كان من الممكن اختيار اي اسماء لكن يتم الاتفاق عادة علي اختيار اسماء معبرة للتسهيل فيما بعد ...
ملحوظة : تم اعتماد اسلوب جديد في القوالب , بالاضافة لمجلد templates يمكنك ان تضع القوالب التي تم التعديل عليها في مجلد الثيم المستخدم.
مثال , القالب السابق بعد التعديل عليه ستضعه في الرابط التالي
www/themes/theme_name/modules/newbb/newbb_index.html
......

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

ماذا احتاج لاستطيع التعديل علي القوالب وتغيير شكل احد الصفحات؟
1- تحتاج لخبرة بلغة html و لغة css , خبرة جيدة جدا , وان تكون ممارس جيد لها.
2- الصبر.و صفاء الزهن.
3- خبرة بسيطة بلغة smarty .
4- برنامج محرر نصوص , انصحك بشدة بالمحررات الاحترافية اليدوية مثل notepad++ حيث النوتة العادية لن تنفع لكبر احجام الاكواد , محررات صفحات الويب مثل frontpage يفضل الابتعاد عنها.
5- سيرفر محلي مركب عليه زووبس و البرنامج المراد تغيير صفحاته , ويجب ان يكون ممتلئ بالمقالات او المواضيع , انصح بشدة ان تكون واضع نسخة كاملة من موقعك .
6- برامج مساعدة مثل , برنامج صور كالفوتوشوب و برنامج مقارنة كـbeyond compare

فلنبدأ العمل ,,, تابع معي المثال التالي.
عمل تغيير بسيط في تصميم الصفحة الرئيسية للاخبار,
لو افترضنا انك قد استخدمت برنامج news كبرنامج للاخبار في موقعك

لو افترضنا انك تريد ان تغير في تصميم عرض الخبر , مثلا نريد ان نضع سهم بين القسم و الخبر
اخبار عامة >>>>ارتفاع عدد الاصابات.......الخ

اولا نجهز الصور التي نريدها - ان احتاجتها - و نرفعها الي المسار www/modules/news/images/
او اي مسار تريده

ثانيا نفتح المسار www/modules/news/templates/
سنجد قائمة بملفات القوالب
افتح ملف الصفحة الرئيسية و هو هنا news_index.html
و هذا هو الكود
اريد ان اذكرك قبل القراءة ان برنامج المقالات news به خيار يمكنك من تحديد عدد الاعمدة في الصفحة الرئيسية , انظر كيف سيتم تطبيق الخيار علي التصميم




<{if $topic_rssfeed_link != ""}>

<div align='right'><{$topic_rssfeed_link}></div>

<{/if}>



<{if $displaynav == true}>

  <div style="text-align: center;">

    <form name="form1" action="<{$xoops_url}>/modules/news/index.php" method="get">

    <{$topic_select}> <select name="storynum"><{$storynum_options}></select> <input type="submit" value="<{$lang_go}>" class="formButton" /></form>

  <hr />

  </div>

<{/if}>



<{if $topic_description != ''}>

    <div style="text-align: center;"><{$topic_description}></div>

<{/if}>



<div style="margin: 10px;"><{$pagenav}></div>

<table width='100%' border='0'><!--هنا يبدأ عرض المقالات علي هيئة جدول-->

<tr>

    <{section name=i loop=$columns}><!--هذا وسم سمارتي من الواضح انه يستعلم عن عدد الاعمدة ليطبقها في الجدول-->

    <td width="<{$columnwidth}>%"><!--وسم سمارتي محشور داخل وسم خلية الجدول ليحدد عرض الخلية تبعا لعدد الاعمدة المطلوب-->

        <{foreach item=story from=$columns[i]}><!--هذا وسم سمارتي تكراري ليطبق تصميم معين لكل مقال-->

            <{include file="db:news_item.html" story=$story}><!--هنا التصميم المراد تكراره , و هنا التصميم موجود في ملف قالب اخر يتم استدعاؤه-->

        <{/foreach}>

    </td>

    <{/section}>

</tr>

</table>



<div style="text-align: right; margin: 10px;"><{$pagenav}></div>

<{include file='db:system_notification_select.html'}>

الان فهمنا من الكود السابق ان مربع المقال موجود في الملف news_item
افتح الملف news_item.html




<table cellpadding="0" cellspacing="0" class="item"><!--المبرمج يصر علي عرض المقال كجدول-->

<tr>

    <td>

        <table cellpadding="0" cellspacing="0" width="98%">

        <tr>

            <td class="itemHead"> <!--خلية تم تعريفها .itemHead تعرض العنوان-->

                <span class="itemTitle"><!--جملة تحتوي علي العنوان-->

                    <a href="<{$xoops_url}>/modules/news/index.php?storytopic=<{$story.topicid}>"><{$story.topic_title}> >>>> <{$story.news_title}> <!--هنا قمنا بوضع اربع اسهم >>>> بين اسم القسم و اسم المقال-->

                </span>

            </td>

        </tr>

        <tr>

            <td class="itemInfo"><{if $story.files_attached}><{$story.attached_link}> <{/if}><{if $story.poster != ''}><span class="itemPoster"><{$lang_postedby}> <{$story.poster}></span><{/if}> <span class="itemPostDate"><{$lang_on}> <{$story.posttime}></span> (<span class="itemStats"><{$story.hits}> <{$lang_reads}></span>) <{$news_by_the_same_author_link}></td>

        </tr>

        <tr>

            <td class="itemBody">

                <{$story.imglink}>

                <{if $articlePicture != ''}><img src="<{$articlePicture}>" alt="" align="left" style="margin-right: 5px; margin-bottom: 5px" /><{/if}>

                <p class="itemText"><{$story.text}></p>

            </td>

        </tr>

        <tr>

            <td class="itemFoot"><span class="itemAdminLink">

            <{$story.adminlink}><!--هذا الكود يعرض روابط تحرير و مسح , ضع اكواد الصور هنا ولا تنسي الروابط-->

            </span>

                <{if $rates}><b><{$lang_ratingc}></b> <{$story.rating}> (<{$story.votes}>) - <a href="<{$xoops_url}>/modules/news/ratenews.php?storyid=<{$story.id}>" rel="nofollow"><{$lang_ratethisnews}></a> - <{/if}>

                <span class="itemPermaLink"><{$story.morelink}></span></td><!--هذا الكود مسئول عن كلمة اقرا المزيد , اكثر من 886 بايت , التعليقات-->

        </tr>

        </table>

    </td>

</tr>

</table>

من الشرح السابق اتضح ان
بسهولة تم وضع الاسهم >>> كما ترا




<{$story.topic_title}> >>>> <{$story.news_title}>

النتيجة النهائية مثل الصورة.

ملحوظة هامة جدا : عند تطبيقك للخطوات السابقة , و حفظ التعديلات علي الملفات , احيانا لا يحدث تغيير في تصميم الصفحة ,,,, ربما يكون السبب هو انك نسيت تغيير خيار "تحديث مجلد الثيمات بشكل تلقائي " من لوحة التحكم ,,,,,,,,,,,,, الحل الثاني هو تفريغ مجلد xoops_data/cashes/smarty_compile
هذا المجلد يحتوي علي ملفات مخزنة من القوالب للوصول السريع اليها

يتبع >>>>>>>

>>>>>>>>>>>>>>>>>>>

يجب قراءة الجزء الاول , للقراءة ادخل من هنا
http://www.arabxoops.com/modules/newb ... hp?topic_id=7880&forum=13
يبدو اننى سهوت و وضعت الجزء الاول في منتدي تركيب و ترقية المجلة ,,, مش عارف ازاى مأخدتش بالي ,,, الواحد بدأ يكبر ولا ايه :)

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

كيف نقرأ ملفات القوالب؟؟؟

كما ذكرت سابقا لتقرأ ملفات القوالب تحتاج الي خبرة عميقة بلغة html و css وخبرة بسيطة بلغة smarty يجب استخدام محرر نصوص متقدم , مثل notepad++

ما هي لغة سمارتي Smarty ????

لغة سمارتي هي الوسيط بين php و الhtml
باستخدام لغة سمارتي نحن نضع النصوص الثابتة " ترجمة البرامج و المجلة " والنصوص المتغيرة " اسم العضو , نص المقال , صورة العضو ,.....الخ" داخل تصميم القالب
سمارتي اوسع من ذلك ايضا , فهي لغة تمكنك من وضع جمل شرطية برمجية و ادراج قوالب داخل قالبك , و الكثير من المميزات التي سيتم ذكرها في درس اخر...

كما تعلم ان وسوم لغة html تكون هكذا


<html tags>.....</html tags>

فأن وسوم لغة سمارتي تكون هكذا


<{smarty}>.......<{/smarty}>

هناك وسوم سمارتي عامة , كقواعد if و include و غيرها
وهناك وسوم سمارتي خاصة بزووبس مثل الوسوم الدالة علي اسم المستخدم , اسم الموقع , عنوان الصفحة , و الروابط .....الخ
و اخيرا ستجد وسوم سمارتي خاصة بالقالب نفسه يصنعها مبرمج الموديل لاستخدامها في القوالب الخاصة ببرنامجه,,, مثلا في الدرس السابق في الملف news_item.html




<{$story.topic_title}> <!--وسم سمارتي يدل علي عنوان القسم-->



<{$story.news_title}> <!--وسم سمارتي يدل علي عنوان المقال-->



<{$lang_postedby}> <!--وسم سمارتى عبارة عن ثابت لغة-->



<{$story.poster}> <!--وسم سمارتى يدل علي كاتب المقال-->

كما ترى فان سمارتي واسعة و تحتاج لدرس منفصل ...

المثال الثاني سيتضمن تغيير شكل بلوك تسجيل الدخول و بلوك لوحة تحكم العضو

في هذا المثال نريد ان نري التغيير عند استخدام ثيم معين فقط وليس في كل الثيمات
لو افترضنا انك تستخدم الثيم mca_blue في موقعك لو افترضنا انك تريد ان تغير شكل بلوكي تسجيل الدخول و قائمة العضو واجعلهم اكثر حيوية , و لو افترضنا انني اريد هذا التغيير عند استخدام هذا الثيم فقط , لكن في باقي الثيمات سيتم استخدام التصميم الاصلي

الخطوة الاولي سنحدد ما هي الملفات المطلوب التعديل عليها....

هذان البلوكان تم انشاؤهما ببرنامج لوحة التحكم العامة system اذن فان ملفات القوالب تجدها في المسار
www/modules/system/templates/
وبما اننا نبحث عن قوالب البلوكات فسندخل للمجلد blocks اي ان مسار قوالب هذان البلوكان هو
www/modules/system/templates/block

نظرة سريعة علي اسماء الملفات سنعرف ان الملفين المراد التعديل عليهما هما
system_block_user.html
system_block_login.html

لو افترضنا ان اسماء البلوكات كانت معقدة و لم تستطع ان تعرف اي ملف هو ملف القالب المطلوب....؟
ادخل الي موقعك , سجل الدخول , اذهب الي لوحة الادارة >>> صفحة التحكم في القوالب...
وهذا رابطها
http://www.yoursite.com/modules/system/admin.php?fct=tplsets

ستجد مجموعة القوالب المستخدمة default و تجد قائمة بالبرامج المركبة , ادخل الي قائمة قوالب برنامج المطلوب و هو هنا "لوحة التحكم العامة"
,, ستجد جدولين , واحد لقوالب الصفحات و الثاني لقوالب البلوكات ,
ابحث في قوالب البلوكات ستجد وصف لكل ملف ,,,

بعد ان حددنا

الخطوة الثانية نسخ الملفات للثيم

بما اننا سنطبق التصميم الجديد علي ثيم معين وهو mca_blue ادخل الي ملف الثيم و انشي المجلدات الاتية

مجلد modules داخل الثيم
مجلد system داخل المجلد السابق
مجلد blocks داخل المجلد السابق
اي ان المسار النهائي المطلوب هو www/themes/mca_blue/modules/system/blocks

وقيس علي هذا المثال عند التعديل علي اي قوالب لبرامج اخري ...

بعد ذلك ضع في هذا المسار الملفين الذي تم تحديدهما
system_block_user.html
system_block_login.html

الخطوة الثالثة تعديلات ملف قالب "تسجيل الدخول" ,,,

مطلوب
وضع صورة كبيرة جميلة قبل فورم التسجيل
وضع جملة "مرحبا بالزائر الكريم..."

اولا نجهز الصورة المطلوبة ثم ارفعها داخل اي مجلد في مجلد الثيم وليكن في المسار التالي
www/themes/mca_blue/images/

ثانيا نفتح ملف القالب في المسار التالي
www/themes/mca_blue/modules/system/blocks/system_block_login.html

لوضع الصورة قبل الفورم ضع هذا الكود


 <img id="nett_keysimg" src="/mca/class/xoopseditor/spaw2/empty/<{xoImgUrl images/password.png }>" />

اما الفقرة الترحيبية فستكون بعدالصورة مباشرة كالتالي


 

    <br />

    <div id="nett_loginmsg"><!--هذه الفقرة كرسالة ترحيبية-->

    أهلا بك عزيزي الزائر , من فضلك قم بتسجيل الدخول .. ليس لديك اشتراك ؟؟! , قم <a href="<{xoAppUrl register.php }>" shape="rect">بالتسجيل</a> حتي تتمكن من المشاركة في الموقع 

    </div>

لاحظ اننى قد اعطيت معرف id للصورة اسمه #nett_keysimg و معرف اخر للفقرة الترحيبية #nett_loginmsg
باستخدام هذه المعرفات يمكنني التحكم في خصائصهما من حيث تنسيق الخطوط و التوسيط و المحاذاة من خلال ملف الستايل فى الثيم.

الكود النهائي لملف القالب ككل سيكون بالصورة التالية مع الشرح




<img id="nett_keysimg" src="/mca/class/xoopseditor/spaw2/empty/<{xoImgUrl images/password.png }>" /><!--هنا وضعنا الصورة اعلي الفورم-->

<br />

<div id="nett_loginmsg"><!--هذه الفقرة كرسالة ترحيبية-->

    أهلا بك عزيزي الزائر , من فضلك قم بتسجيل الدخول .. ليس لديك اشتراك ؟؟! , قم <a href="<{xoAppUrl register.php }>" shape="rect">بالتسجيل</a> حتي تتمكن من المشاركة في الموقع 

</div>

<p>

    <form action="<{$xoops_url}>/user.php" method="post" style="MARGIN-TOP: 0px"><!--كود بدء الفورم-->

    <{$block.lang_username}><br /><!--كود سمارتي لوضع متغير اللغة " اسم المستخدم"-->

    <input name="uname" size="12" maxlength="25" type="text" value="<{$block.unamevalue}>" /><br />

    <{$block.lang_password}><br /><!--كود سمارتي اخر كمتغير لغة-->

    <input name="pass" size="12" maxlength="32" type="password" /><br />

    <{if isset($block.lang_rememberme)}><!--قاعدة شرطية--> 

    <input name="rememberme" class="formButton" type="checkbox" value="On" /><{$block.lang_rememberme}>

    <br />

    <{/if}>

    <br />

    <input name="xoops_redirect" type="hidden" value="<{$xoops_requesturi}>" />

    <input name="op" type="hidden" value="login" />

    <input type="submit" value="<{$block.lang_login}>" />

    <br /><{$block.sslloginlink}> 

    </form>

    

    <a title="<{$block.lang_lostpass}>" href="<{$xoops_url }>/user.php#lost" shape="rect"><{$block.lang_lostpass}></a>

    <br />

    <a title="<{$block.lang_registernow}>" href="<{$xoops_url }>/register.php" shape="rect"><{$block.lang_registernow}></a>

</p>

افتح ملف الستايل style.css -او ايا كان اسمه- الخاص بالثيم بمحرر css مناسب و اضف في اخر الملف التعريفات الخاصة بالصورة و الرسالة الترحيبية




 /*سنضع حد او اطار رمادى عرض حول الصورة*/ 

#nett_keysimg{ border: 4px solid #C4C4C4; } 



/*سنغير لون خط الرسالة الترحيبية للون الاحمر , و نجعله اصغر قليلا*/ 

#nett_loginmsg{ font-size: smaller; color: Red; }

انظر النتيجة النهائية...

واتركك مع ابداعتك في ما تصمم

الخطوة الرابعة.. تعديل قالب "قائمة العضو",,,

المطلوب
وضع صورة العضو اعلي القائمة
وضع رسالة ترحيبية باسم الدخول

قالب قائمة العضو الاصلي يحتوي الكود التالي


 

<div id="usermenu">

  <{if $xoops_isadmin}>

    <a class="menuTop" href="<{xoAppUrl admin.php}>" title="<{$block.lang_adminmenu}>"><{$block.lang_adminmenu}></a>

    <a href="<{xoAppUrl user.php}>" title="<{$block.lang_youraccount}>"><{$block.lang_youraccount}></a>

  <{else}>

    <a class="menuTop" href="<{xoAppUrl user.php}>" title="<{$block.lang_youraccount}>"><{$block.lang_youraccount}></a>

  <{/if}>

  <a href="<{xoAppUrl edituser.php}>" title="<{$block.lang_editaccount}>"><{$block.lang_editaccount}></a>

  <a href="<{xoAppUrl notifications.php}>" title="<{$block.lang_notifications}>"><{$block.lang_notifications}></a>

  <{if $block.new_messages > 0}>

    <a class="highlight" href="<{xoAppUrl viewpmsg.php}>" title="<{$block.lang_inbox}>"><{$block.lang_inbox}> (<strong><{$block.new_messages}></strong>)</a>

  <{else}>

    <a href="<{xoAppUrl viewpmsg.php}>" title="<{$block.lang_inbox}>"><{$block.lang_inbox}></a>

  <{/if}>

  <a href="<{xoAppUrl user.php?op=logout}>" title="<{$block.lang_logout}>"><{$block.lang_logout}></a>

</div>

لو شرحنا الكود سنجد ان القائمة موجودة داخل جدول من خلية واحدة

اول جزء ف القائمة عبارة عن قاعدة شرطية للتأكد ان كان المستخدم برتبة مدير ام لا




<{if $xoops_isadmin}><!--هل العضو المسجل دخوله له صلاحية ادارة ام لا-->

    <a title="<{$block.lang_adminmenu}>" class="menuTop" href="<{$xoops_url }>/admin.php" shape="rect"><{$block.lang_adminmenu}></a> 

    <!--ان كان له صلاحية ادارة سيتم اضافة رابط لوحة التحكم اول القائمة-->

    <a title="<{$block.lang_youraccount}>" href="<{$xoops_url }>/user.php" shape="rect"><{$block.lang_youraccount}></a>

<{else}><!--ان لم يتحقق الشرط , العضو بدون صلاحية ادارة سيتم تنفيذ الكود التالي--> 

    <a title="<{$block.lang_youraccount}>" class="menuTop" href="<{$xoops_url }>/user.php" shape="rect"><{$block.lang_youraccount}></a> 

<{/if}>

للمزيد من التوضيح لقاعدة if الشرطية سنزيل الاكواد و نشرحها من جديد




<{if $xoops_isadmin}>  <!--بداية جملة الشرط و هي هل العضو له صلاحية ادارة ام لا-->

    <!--ضع هنا الاكواد المراد تطبيقها عند تحقق الشرط-->

<{else}> 

    <!--لم يتحقق الشرط , العضو بدون صلاحية ادارة سيتم تنفيذ الكود الموضوع هنا-->

<{/if}>

وهناك متغيرات كثيرة غير $xoops_isadmin

هناك مثلا $block.new_messages
وهذا عبارة عن متغير يحتوي علي عدد الرسائل الجديدة

الكود التالي مسئول عن كلمة "الوارد" التي تظهر في قائمة العضو , وسيتم وضع عدد الرسائل في حالة وجود رسائل واردة جديدة

طبعا هذه الكلمة " الوارد " عبارة عن ثابت لغة بسمارتي ايضا
انظر كيف يتغير التصميم طبقا لوجود شرط "هل هناك رسائل جديدة ام لا..."


 

<{if $block.new_messages > 0}> 

    <a title="<{$block.lang_inbox}>" class="highlight" href="<{$xoops_url }>/viewpmsg.php" shape="rect">

        <{$block.lang_inbox}>

        (<span style="COLOR: #ff0000; FONT-WEIGHT: bold"><{$block.new_messages}></span>)

    </a>

<{else}>

    <a title="<{$block.lang_inbox}>" href="<{$xoops_url }>/viewpmsg.php" shape="rect"><{$block.lang_inbox}></a>

<{/if}>

وهذا شرح الكود بالتفصيل ...




<{if $block.new_messages > 0}><!--الشرط هنا هو ان عدد الرسائل اكثر من صفر-->

    <!--تحقق الشرط , وتم وضع عدد الرسائل بعد كلمة الوارد و ايضا تم جعل السطر كله معلم highlighted -->

    <a title="<{$block.lang_inbox}>" class="highlight" href="<{$xoops_url }>/viewpmsg.php" shape="rect"><{$block.lang_inbox}> (<span style="COLOR: #ff0000; FONT-WEIGHT: bold"><{$block.new_messages}></span>)</a>

<{else}>

    <!--لم يتحقق الشرط لأن عدد الرسائل ليس اكبر من صفر و بالتالي تغير التصميم-->

    <a title="<{$block.lang_inbox}>" href="<{$xoops_url }>/viewpmsg.php" shape="rect"><{$block.lang_inbox}></a>

<{/if}>

و لوضع الصورة و الرسالة الترحيبية اعلي القائمة , سنضع الكود التالي فوق الامر table




    <img align="middle" id="nett_useravatar" alt="<{$xoops_uname}>" src="/mca/class/xoopseditor/spaw2/empty/<{$xoops_avatar }>" />

    <br />

    <div id="nett_wlcmsg"><!--هذه الفقرة كرسالة ترحيبية--> 

    مرحبا بك يا <{$xoops_uname}> 

    </div>

طبعا يمكنك استخدام الcss للتحكم في التنسيقات

وهذه هي الصورة النهائية للبلوكين بعد اعتماد التغييرات

******

******

******
بعد هذا الدرس , اتمنى انك تستطيع تعديل اي صفحة في موقعك

*****************************
انتظر رأي اخوتي في الموقع و هل هناك احد يرغب بأضافة اي معلومة ؟؟؟

ترتيب الدرس : 8.33 (3 صوت)
صوت للدرس

العودة للقسم | العودة الي الصفحة الرئيسية

موقع الدعم العربي لنظام إدارة المحتوى زووبس

أضف موقعك | صور و خلفيات | أكواد الألوان | مواقع إسلامية | خريطة الموقع

مواقع صديقة: رياض القرآن ، خلفيات شاشة ، المجلة السعودية للسيارات ، أهرام العلمية ، ابن مصر ، برامج عربية و معربة ، ماسنجر شبوة.نت ، ضفاف ، العاب

معرب بالكامل

موقع الدعم العربي لنظام إدارة المحتوى زووبس