ط*طµط±ظٹط§ ظ‚ط§ط¦ظ…ط© ط§ظ„ط£ط²ط±ط§ط± ط§ظ„ط®ط§طµط© ط¨ظٹ Kwicks ط*ظٹط« ظ„ظ„ط¬ظƒظˆط±ظٹ ظ„ظ…ط³طھظ‡ ط§ظ„ط®ط§طµط©


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

أقدم لكم قائمة الأزرار الخاصة بي Kwicks Plugin

حيث للجكوري تلك اللمسة الخاصة

مثل حي تفضل بالضغط هنا

كما ترى الأزرار تلك

المهم نأتي لشرح طريقة التركيب install

طبعا تطبيقنا راح يكون على منتدى ومثال لأحد المنتديات إضغط هنا

جيد نبدا في التطبيق بسم الله

إفتح لوحة تحكم المنتدى forum ثم توجه للاستايل style الذي تريد تطبيق الأزرار عليه أي وضعها فيه

ثم إذهب إلى قالب template header في المكان الذي تريد الأزرار ان تظهر فيه ضع هذا الكود code مع إستبدال ما يناسبك طبعا ستجد في المرفقات ملف psd كامل مع الليرات والازرار والايقونات تستطيع التعديل عليه وتغيير مسمى الازرار و الايقونات لما يناسبك ثم التعديل على الكود code هذا للروابط والأسماء

رمز PHP:
<code style="white-space:nowrap"> <code> <br />
<div align="center">
<ul class="kwicks">
<li id="kwick1"><a href="ضع%20هنا%20رابط%20البحث">البحث</a></li>
<li id="kwick2"><a href="ضع%20هنا%20رابط%20الاتصال%20بنا">الإتصال بنا</a></li>
<li id="kwick3"><a href="ضع%20هنا%20رابط%20مركز%20الرفع">مركز الرفع</a></li>
<li id="kwick4"><a href="ضع%20هنا%20رابط%20الرئيسية">الرئيسية</a></li>
</ul>
</div>
<br />
</code> </code>

ثم قم بحفظ القالب template وثم توجه إلى تعاريف خصائص css الإضافية واضف التالي فيها مع تغيير مسار الصور للصور التي تريدها

رمز PHP:
<code style="white-space:nowrap"> <code> .kwicks {
list-style: none;
position: relative;
margin: 0;



padding: 0;
background-image:url(http://www.creativityworld.net/js/tajareb/Kwicks-Navigation/no_flicker.jpg);
}
.kwicks li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
float: right;
width: 124px;
height: 40px;
margin-left: 0px;
background-image:url(http://www.creativityworld.net/js/tajareb/Kwicks-Navigation/kwicks_sprite.jpg);
background-repeat:no-repeat;
}
.kwicks a{
display:block;
height:40px;
text-indent:-9999px;
outline:none;
}

#kwick1 {
background-position:-76px 0px;
}
#kwick2 {
background-position:-276px 0px;
}
#kwick3 {
background-position:-476px 0px;
}
#kwick4 {
background-position:-676px 0px;
}

#kwick1.active, #kwick1:hover {
background-position: -0px bottom;
}
#kwick2.active, #kwick2:hover{
background-position: -200px bottom;
}
#kwick3.active, #kwick3:hover {
background-position: -400px bottom;
}
#kwick4.active, #kwick4:hover {
background-position: -600px bottom;
}
#kwick1 a{
background-image:url(http://www.creativityworld.net/js/tajareb/Kwicks-Navigation/end.jpg);
background-repeat:no-repeat;
background-position: left 0px;
}

#kwick1 a:hover{
background-position: left -80px;
}

#kwick4 a{
background-image:url(http://www.creativityworld.net/js/tajareb/Kwicks-Navigation/end.jpg);
background-repeat:no-repeat;
background-position: right -40px;
}
#kwick4 a:hover{
background-position: right -120px;
}
</code> </code>

ثم قم بحفظ القالب template

ثم الأن نأتي للنقطة الأهم توجه إلى قالب template headinclude

وضع أخر شئ منه

رمز PHP:
<code style="white-space:nowrap"> <code> <script src="http://www.creativityworld.net/js/tajareb/Kwicks-Navigation/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="http://www.creativityworld.net/js/tajareb/Kwicks-Navigation/kwicks.js" type="text/javascript"></script>
<script src="http://www.creativityworld.net/js/tajareb/Kwicks-Navigation/custom.js" type="text/javascript"></script>
</code> </code>

طبعا هذه مشغلات الجكوري

وبخصوص خصائص css تستطيع تعديلها فقط بتحميل للصور لموقعك وتغيير مسارها والتعديل على ملف ال psd بالمرفقات كله تجده

وأي إستفسار أنا موجود

إعداد : Honourable






الملفات المرفقة [TR]
Kwicks-F-Creativityworld.net.zip (765.4 كيلوبايت, عدد مرات المشاهدة 570 مرة) [/TR]



©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©