اضافة مجموعه ازرار احترافية وحصري | الجزء الاول

Add-a-total-of-buttons-Blogger-Collection
نقدم لكم الجز الأول من مجموعة أزرار المواقع الاحترافية ذات الجود العالية التي تصلح لجميع الإغراض المختلفة فنحن اخترنا لكم بعض الأزرار الاحترافية وقمنا بتقسيمها إلى جزأين لأنها كنيره حيت إننا أساسا لها شكلان ففكرنا بتقسيمها إلى موضوعين.


هدا الأزرار تصلح لجميع الاحتياجات فيمكنك استخدامها كزر تحميل أو معاينه أو لجعل موقعك أكثر أناقة وجمالاً حين إن هدا الأزرار احترافية جداً فلم نستطع إيجادها ألا بعد عنا كبير فهي مبرمجه بلغة css3 ألحديثه فهي ستلبي الاحتياجات لمبرمجين المواقع مثل بلوجر أو ووردبريس وهي ستجعل من تصميمك أكثر احترافية وجمالاً فهده الإضافة ذو منظر جميل من وان شاء الله تفيدك وتساعدك.

شرح التركيب وطريقة الاستخدام


الأزرار مقسمه إلى أربع أقسام لكل شكل قسم لتركيب أي قسم اذهب إلى قالب تحرير HTML وبحث عن </head> وأضف كود CSS للقسم الذي تريده فوقها مباشرتاً

القسم الأول من الأزرار

Add-a-total-of-buttons-Blogger-Collection
<link href="https://googledrive.com/host/0BypzyVeh7C0YS0lGclBwbk1sTjQ" rel="stylesheet" />

القسم الثاني من الأزرار 

Add-a-total-of-buttons-Blogger-Collection
<link href="https://googledrive.com/host/0BypzyVeh7C0YN1N6MFlYZ01hMWM" rel="stylesheet" />

القسم الثالث من الأزرار 

Add-a-total-of-buttons-Blogger-Collection
<link href="https://googledrive.com/host/0BypzyVeh7C0YVmlvaXJYa01HTVU" rel="stylesheet" />

القسم الرابع من الأزرار 

Add-a-total-of-buttons-Blogger-Collection
<link href="https://googledrive.com/host/0BypzyVeh7C0YSzFkUk01c0tYOHc" rel="stylesheet" />

تركيب الخط


مجموعه الأزرار تستخدم خط Droid Arabic Kufi لوضع الخط ضمن خطوط مدونتك توجه إلى قالب تحرير HTML تم ابحث عن  ]]></b:skin> وأضف الكود التالي فوقه مباشرتاً
@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
آدا قمت بتركيب الخط سابقاً فلا داعي لتضيفه 


شرح التعامل مع الإضافة بتفصيل


بعد تركيب كود 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 يعني سيكون في اليسار

إن شاء الله تكون أعجبتكم الإضافة وفهمت الشرح وطريقه تركيبه انتظرونا في الجزء الثاني من الإضافة, أد كان لديك إي سؤال أو استفسار ضعه في تعليق. وشكراً

ليست هناك تعليقات:

إرسال تعليق