بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
أقدم لكم قائمة الأزرار الخاصة بي 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