إضافة أزرار المعاينة والتحميل مثل مدونة مستر أبوعلي

السلام عليكم ورحمة الله وبركاتة متابعي مدونة مستر ابو علي الأعزاء أقدم لكم اليوم طريقة إضافة أزرار للمعاينة والتحميل وزر عادي بشكل رائع حيث يمكنك الإختيار بين عدد لا نهائي من الألوان ، والإختيار بين أربعة أحجام مختلفه ، والإختيار بين ثلاثة أشكال جاهزة للزر منها ازرار المعاينة والتحميل ، وذلك بواسطة ملف "مولد الأكواد " سوف تجد رابط تحميلة في أسفل التدوينة والأن نتجة إلي الشرح.

لأن وقبل الولوج إلي الشرح يمكنك معاينة الأزرار من هنا.

كل ما عليك هو البحث الوسم ]]></b:skin> ثم قم بوضع الكود التالي فوقة.

.ibtn{-webkit-border-radius:5px;border-radius:5px;display:inline-block;vertical-align:top;margin:5px;border:1px solid rgba(0,0,0,0.05);-webkit-transition:.2s ease-out;-o-transition:.2s ease-out;transition:.2s ease-out;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);text-shadow:1px 1px 0 rgba(0,0,0,0.1);font-family:inherit}.ibtn:hover{-webkit-box-shadow:0 -20px 75px 0 rgba(0,0,0,0.25) inset;box-shadow:0 -20px 75px 0 rgba(0,0,0,0.25) inset}.ibtn-1{padding:10px 15px;font-size:16px}.ibtn-2{padding:10px 25px;font-size:17px}.ibtn-3{padding:15px 30px;font-size:20px}.ibtn-4{padding:20px 35px;font-size:24px}.iDown:before{content:"\f0ed";font-family:fontAwesome;display:inline-block;vertical-align:top}.iDown:before{padding-left:10px}.iDown:before{padding-right:10px}.iDown.ibtn-1:before{font-size:24px}.iDown.ibtn-2:before{font-size:25px}.iDown.ibtn-3:before{font-size:28px;font-size:31px}.iPrev:before{content:"\f002";font-family:fontAwesome;display:inline-block;vertical-align:top}.iPrev:before{padding-left:10px}.iPrev:before{padding-right:10px}.iPrev.ibtn-1:before{font-size:20px}.iPrev.ibtn-2:before{font-size:25px}.iPrev.ibtn-3:before{font-size:28px;font-size:31px}

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

تحميل مولد الأكواد أزار المعاينة