هاك الفعاليات .. [ slider ]

هاك الفعاليات أو ما يسمى بـ [ slider ]


http://sub3.rofof.com/img3/012djkey14.png



ويعتبر هذا الهاك لمسة جمالية للصفحة الرئيسية خاصة لما يجد مصمم بارع يتحفه

بالتصاميم الجميلة

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

والآن بعد ما تعرفنا على الهاك ووضيفته نأتي للمهم وهو طريقة تركيب الهاك

--::[ طريقة التركيب ]::--

لنكون متفقين على كل الأمور أحب أوضح أمر مهم وهو أني راح أشرح تركيب الهاك

على مجلة vBadvanced CMPS لمنتديات الفي بي كما أني راح أشرح مضمون عرض القالب

حتى يسهل لمستخدمي المجلات الأخرى تركيبه بسهولة

بسم الله نبدأ

1-نرفع الملف [ Slider ] للموقع حتى يكون رابطه على هذا الشكل


www.XXXX.com/slider/

2- ندخل لوحة تحكم الإدارة

من القائمة الرئيسية نختار vBa CMPS --- ثم ----> Add Module

http://img34.imageshack.us/img34/976/22072009190411.jpg


3- من الصفحة لي تظهر نختار [Template Module‎]

http://img26.imageshack.us/img26/82/22072009190514.jpg


4- نملىء البيانات بهذا الشكل

http://img403.imageshack.us/img403/9...2009190723.jpg

-[1]-عنوان الموديل وأنا وضعت " --:: [ الفعاليات ] ::-- "

-[2]-عنوان القالب

-[3]-إختر الستايلات التي تريد أن يظهر بها الهاك

-[4]-كود القالب (راح نشرحه مع كيفية التعديل عليه)

http://img31.imageshack.us/img31/841...2009191120.jpg

5- أنهينا طريقة تركيب الهاك بنجاح الآن راح نشرح كيفية التعديل عليه

--::[ طريقة التعديل ]::--

1- من لوحة تحكم الإدارة دوما ومن القائمة الرئيسية

إختر : الإستايلات والقوالب ---ثم ---->

http://img26.imageshack.us/img26/459...2009191337.jpg

2-إختر الستايل الذي أضفت فيه قالب الهاك في عملية التركيبب

ثم من القائمة إختر تعديل القوالب




http://img25.imageshack.us/img25/328...2009191545.jpg

3- من قائمة القوالب إختر القالب لي أنشائته في عملية التركيبbr>
http://img10.imageshack.us/img10/454...2009192307.jpg

4-الآن تظهر لنا لوحة االتحكم بالقالب




http://img37.imageshack.us/img37/796...2009192637.jpg

نأتي لشرح القالب خطوة خطوة/p>

اقتباس:

---

<tr>
<td class="$bgclass">

---

هذا الكود خاص بمجلة vBadvanced CMPS

وهو لازم في هذه المجلة قبل كتابة أي قالب

اقتباس:

---

<!--begin Box-->
<div align="center">
<link rel="stylesheet" type="text/css" href="slider/contentslider.css" />

---

السطر الأول مجرد تعليق لفصل قالب الفاعاليات عن كود المجلة
السطر الثاني لجعل المضمون في الوسط (توسيط)
السطر الثالث لإستدعاء الملف contentslider.css من الموقع

اقتباس:

---

<script type="text/javascript" src="slider/contentslider.js"></script>

---

كود إستدعاء الملف contentslider.js من الموقع

اقتباس:

---

<div id="slider1" class="sliderwrapper">
<div class="contentdiv"> <a href="stats.php"><img border="0" src="slider/1.jpg" width="492" height="266"></a> </div>
<div class="contentdiv"> <a href="stats.php"><img border="0" src="slider/1.jpg" width="492" height="266"></a> </div>
<div class="contentdiv"> <a href="stats.php"><img border="0" src="slider/1.jpg" width="492" height="266"></a> </div>
</div>
<div id="paginate-slider1" class="pagination"></div>

---

كود مضمون الفعاليات وهذا هو الكود اللي عليه العمل

ومن خلال هذا الكود لو تلاحظ فيه أنا كررت جملة ثلاث مرات متتالية

اقتباس:

---

<div class="contentdiv"> <a href="stats.php"><img border="0" src="slider/1.jpg" width="492" height="266"></a> </div>

---

وهي تنقسم لشيئين فقط دون النظر للبقية

1- رابط الصورة

اقتباس:

---

slider/1.jpg

---

2- الرابط الذي تفتحه

اقتباس:

---

stats.php

---

راح نعطي مثال لو مثلا كان رابط الصورة لي راح تعرضها هو

اقتباس:

---

http://localhost/vb/Ma3hd/gradients/325-60.jpg

---

ورابط الموضوع لي تفتحه الصورة هو

اقتباس:

---

http://localhost/vb/showthread.php?t=8

---

راح تكون الجملة بهذا الشكل

اقتباس:

---

<div class="contentdiv"> <a href="https://al-naddaf.com/PC-NDF/vb/showthread.php?t=8"><img border="0" src="https://al-naddaf.com/PC-NDF/vb/Ma3hd/gradients/325-60.jpg" width="492" height="266"></a> </div>

---

ويكون القالب ككل بهذا الشكل

اقتباس:

---

<tr>
<td class="$bgclass">
<!--begin Box-->
<div align="center">
<link rel="stylesheet" type="text/css" href="slider/contentslider.css" />
<script type="text/javascript" src="slider/contentslider.js"></script>
<div id="slider1" class="sliderwrapper">
<div class="contentdiv"> <a href="https://al-naddaf.com/PC-NDF/vb/showthread.php?t=8"><img border="0" src="https://al-naddaf.com/PC-NDF/vb/Ma3hd/gradients/325-60.jpg" width="492" height="266"></a> </div>
<div class="contentdiv"> <a href="stats.php"><img border="0" src="slider/1.jpg" width="492" height="266"></a> </div>
<div class="contentdiv"> <a href="stats.php"><img border="0" src="slider/1.jpg" width="492" height="266"></a> </div>
</div>
<div id="paginate-slider1" class="pagination"></div>
<script type="text/javascript">
featuredcontentslider.init({
id: "slider1",
contentsource: ["inline", ""],
toc: "#increment",
nextprev: ["<", ">"],
revealtype: "click",
enablefade: [true, 0.3],
autorotate: [true, 6000],
onChange: function(previndex, curindex){
}})</script>
</div>
<!--End Box-->
</td>
</tr>

---

إن شاء تكونو فهمتو الطريقة رغم أنها سهلة جدا ولاتحتاج لكل هذا التعقيد

ومتأكد 100% لو يأتي أي شخص يفهم html راح يضحك على كل الشرح لي وضعته من أجل

هذا الأمر البسيط

المهم لتحميل الهاك

الرابط

click here





في أمان الله