بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
أقدم لكم قائمة الأزرار الخاصة بي Kwicks Plugin
حيث للجكوري تلك اللمسة الخاصة
مثل حي تفضل بالضغط هنا
كما ترى الأزرار تلك
المهم نأتي لشرح طريقة التركيب install
طبعا تطبيقنا راح يكون على منتدى ومثال لأحد المنتديات
إضغط هنا
جيد نبدا في التطبيق بسم الله
إفتح لوحة تحكم المنتدى forum ثم توجه للاستايل style الذي تريد تطبيق الأزرار عليه أي وضعها فيه
ثم إذهب إلى قالب template header في المكان الذي تريد الأزرار ان تظهر فيه ضع هذا الكود code مع إستبدال ما يناسبك طبعا ستجد في المرفقات ملف psd كامل مع الليرات والازرار والايقونات تستطيع التعديل عليه وتغيير مسمى الازرار و الايقونات لما يناسبك ثم التعديل على الكود code هذا للروابط والأسماء
رمز PHP:
<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 />
ثم قم بحفظ القالب template وثم توجه إلى تعاريف خصائص css الإضافية واضف التالي فيها مع تغيير مسار الصور للصور التي تريدها
رمز PHP:
.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;
}
ثم قم بحفظ القالب template
ثم الأن نأتي للنقطة الأهم توجه إلى قالب template headinclude
وضع أخر شئ منه
رمز PHP:
<script src="http://www.creativityworld.net/js/tajareb/Kwicks-Navigation/jquery-1.2.6.min.js" type="text/javascript">
طبعا هذه مشغلات الجكوري
وبخصوص خصائص css تستطيع تعديلها فقط بتحميل للصور لموقعك وتغيير مسارها والتعديل على ملف ال psd بالمرفقات كله تجده
وأي إستفسار أنا موجود
http://www.dzbatna.com/images/smilies/icon31.gif
إعداد : Honourable
