U3F1ZWV6ZTIwOTM5NTg3MTQ0MjEyX0ZyZWUxMzIxMDUwMjIzNDU4Mw==

شرح اضافة زر التزيل والمعاينة للمقال في مدونات بلوجر 2019


اهلا متابعين مدونة ثانوس تك شرح النهاردة.
إضافة الزر "تنزيل والمعاينة" في Blogger - اتبعه أثناء قيامنا بإنشاء أزرار تجريبية وتنزيلية بسيطة وعلاجها باستخدام بعض CSS3. سوف تستخدم أزرار CSS التجريبية والتنزيلية تأثير التحويم المغلق ، بما في ذلك نصف قطر الحدود ، وظلال المربع ، والتدرجات الخطية ، ومؤشر z ، والتحولات لتحقيق تأثير فريد وبسيط على التحويم. في هذا المنشور ، سأشارك برنامجًا تعليميًا عن كيفية إضافة زر تجريبي وتنزيل css سريع الاستجابة للمدون. قد يساعدهم هذا البرنامج التعليمي في التدوين حول قالب المدون وموضوع وورد. يتم إنشاء أزرار تجريبي وتنزيل باستخدام CSS مع تأثير تحريك الماوس. تؤخذ اثنين من الرموز من fontawesome. لذا قبل التحديق في هذا البرنامج التعليمي ، يجب عليك إضافة fontawesome في مدونتك.

إليك كيفية العمل: باستخدام مزيج من HTML و CSS ، سأقوم بإنشاء قطعتين منفصلتين. يتضمن ذلك الزر الرئيسي واثنين من أيقونات العين والتنزيل. أيقونة العين والتنزيل المستخدمة من أيقونة fontawesme.

الآن لنبدأ الشرح:-


قبل البدء في هذا الشرح ، يرجى أخذ نسخة احتياطية من القالب للامان.

  • أولاً ، انتقل إلى لوحة معلومات Blogger>
  •  القالب> تحرير HTML 
  • ، ثم ضع الرمز أدناه قبل العلامة </ style>.
.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}.btn ul {margin:0;padding:0}.btn li{display:inline;margin:5px;padding:0;list-style:none;}.demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}.demo {background-color:#3498DB;}.download {background-color:#1ABC84;}.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;}.demo:before {content:&#39;\f135&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}.download:before {content:&#39;\f019&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}

احفظ القالب

استخدم الآن كود HTML أدناه في كل مشاركة في علامة تبويب html حيث تريد مشاركة الزر المعاينة والتنزيل.

<div style="text-align: center;"><ul class="btn"><li><a class="demo" href="YOUR-LINK-HERE" target="_blank">المعاينة</a></li><li><a class="download" href=" YOUR-LINK-HERE" target="_blank">التنزيل</a></li></ul></div>

شكرا للمتابعة.
الشرح منقول من موقع msdesignbd

ليست هناك تعليقات
إرسال تعليق

إرسال تعليق

الاسمبريد إلكترونيرسالة