هدا الأزرار تصلح لجميع الاحتياجات فيمكنك استخدامها كزر تحميل أو معاينه أو لجعل موقعك أكثر أناقة وجمالاً حين إن هدا الأزرار احترافية جداً فلم نستطع إيجادها ألا بعد عنا كبير فهي مبرمجه بلغة css3 ألحديثه فهي ستلبي الاحتياجات لمبرمجين المواقع مثل بلوجر أو ووردبريس وهي ستجعل من تصميمك أكثر احترافية وجمالاً فهده الإضافة ذو منظر جميل من وان شاء الله تفيدك وتساعدك.
شرح التركيب وطريقة الاستخدام
الأزرار مقسمه إلى أربع أقسام لكل شكل قسم لتركيب أي قسم اذهب إلى قالب تحرير HTML وبحث عن </head> وأضف كود CSS للقسم الذي تريده فوقها مباشرتاً
القسم الأول من الأزرار
<link href="https://googledrive.com/host/0BypzyVeh7C0YS0lGclBwbk1sTjQ" rel="stylesheet" />
القسم الثاني من الأزرار
<link href="https://googledrive.com/host/0BypzyVeh7C0YN1N6MFlYZ01hMWM" rel="stylesheet" />
القسم الثالث من الأزرار
<link href="https://googledrive.com/host/0BypzyVeh7C0YVmlvaXJYa01HTVU" rel="stylesheet" />
القسم الرابع من الأزرار
<link href="https://googledrive.com/host/0BypzyVeh7C0YSzFkUk01c0tYOHc" rel="stylesheet" />
تركيب الخط
@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);آدا قمت بتركيب الخط سابقاً فلا داعي لتضيفه
شرح التعامل مع الإضافة بتفصيل
نلاحظ عند الدخول إلى (صفحة المعانية / أكواد مفصله) لأحد الأقسام نجد وجود لكل زر كود خاص به من أكواد الأزرار الموجودة بهده الشكل
<a href="#"><div class="set_2_button color1 set_2_btn-1 icon-forward"><span>الارتقاء للبلوجر</span></div></a>التعديلات تكون على التالي
الارتقاء للبلوجر : غيرها بل اسم الذي تريده ان يظهر في الزر
"#" : قم بتغير علامة (#) برابط الصفحة
تركيب الزر داخل الموضوع
أولان توجه إلى الموضوع الذي تريد وضع الزر فيه تم اكتب نص مثل "معاينة" تم انسخها تم انتقل من تأليف إلى HTML وبحث عن "معاينة" باستخدام Ctrl + Fستجدها بالشكل التالي
معاينة
قم باستبدال "معاينة" بكود الزر
تغيير اتجاه الزر داخل الموضوع
ملاحظ: آدا أردت جعل اتجاه الزر في الوسط أضف هده الكودstyle="float: none;max-width: 127px;margin-left: auto; margin-right: auto;"
أضف الكود في نهاية كود الدف ضعه بين قبل ناهاية div وعلامة التنصيص( في الوسط )
<div class="-------"هنا > --------
مثال هده كود الزر<a href="#"><div class="set_2_button color1 set_2_btn-1 icon-forward" ><span>الارتقاء للبلوجر</span></div></a>بعد إضافة الكود أصبح
<a href="#"><div class="set_2_button color1 set_2_btn-1 icon-forward" style="float: none;max-width: 127px;margin-left: auto; margin-right: auto;" ><span>الارتقاء للبلوجر</span></div></a>
لو نريد إضافة زرين, واحد في اليسار والأخر في اليمين تابع ألطريقه التالية
مثال إنا لدي زران واحد بلون الأحمر والأخر بلون بالأخضر
<a href="#"><div class="set_2_button color1 set_2_btn-1 icon-forward"><span>الارتقاء للبلوجر</span></div></a>
<a href="#"><div class="set_2_button color1 set_2_btn-1 icon-forward"><span>الارتقاء للبلوجر</span></div></a>
لو نريد إضافة واحد في اليمين والأخر في اليسار نستخدم الكود التالي
style="float: right; margin-right: 0;margin:10px;"
هده الكود نضعه في كود الزر بنفس الطريقة السابقة
right : يعني سيتم وضعه الزر في اليمين لو أردنا وضعه في اليسار نضع بدله left
المثال السابق يرجع بهذه الشكل
<a href="#"><div class="set_2_button color1 set_2_btn-1 icon-forward" style="float: right; margin-right: 0;margin:10px;" ><span>الارتقاء للبلوجر</span></div></a>
<a href="#"><div class="set_2_button color1 set_2_btn-1 icon-forward" style="float: left; margin-right: 0;margin:10px;" ><span>الارتقاء للبلوجر</span></div></a>
نلاحظ الزر الذي بلون الأحمر أضفنا له right يعني سيكون في اليمين بينما الزر الذي بلون الأخضر أضفنا له left يعني سيكون في اليسار
إن شاء الله تكون أعجبتكم الإضافة وفهمت الشرح وطريقه تركيبه انتظرونا في الجزء الثاني من الإضافة, أد كان لديك إي سؤال أو استفسار ضعه في تعليق. وشكراً
ليست هناك تعليقات:
إرسال تعليق