جدول المحتويات

الصفحة الرئيسية
اضافات بلوجر
بلوجر

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

اضافة ازرار التحميل والمعاينة لجميع المواقع والمدونات علي جميع المنصات بدون اكواد جافا ازارا التحميل وازار المعاينة مجانا لمدونة بلوجر.
طريقة اضافة ازرار التحميل والمعاينة لمدونات بلوجر وجميع المواقع

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

Blogger Additions Button Demo And Download

اضافة ازرار التحميل والمعاينة لجميع المواقع والمدونات علي جميع المنصات بدون اكواد جافا ازارا التحميل وازار المعاينة مجانا لمدونة بلوجر.

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

يمكنك معاينة الإضافة من خلال الزر التالي
معاينة
انقر للعرض


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

  1. اذهب الي لوحة تحكم بلوجر
  2. انتقل الي قسم المظهر
  3. خذ نسخة احتياطية من قالبك قبل بدء استخدام الكود.
  4. اضغط علي "‏تعديل HTML"
Blogger Additions Button Demo And Download
  1. بعد اختيار "تعديل HTML" سيظهر لك الشكل التالي:
شرح اضافة ازرار التحميل والمعاينة لمدونات بلوجر 2019
  • ابحث عن الوسم ]]></b:skin> ، وضع الكود التالي فوقه
/* button-demo-download By memy-net.com */
a{text-decoration: none;}
.memy-view, .memy-dwonload {position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 50px;background:#fdfdfd;border: 2px solid #0099cc;margin: 10px;transition: .5s;}
.memy-dwonload {border: 2px solid #00c144;}
.memy-view:hover {background-color: #0099cc;}
.memy-dwonload:hover {background-color: #00c144;}
.memy-view:hover span.circle, .memy-dwonload:hover span.circle2 {left: 100%;margin-left: -45px;background-color: #fdfdfd;color: #0099cc;}
.memy-dwonload:hover span.circle2 {color: #00c144;}
.memy-view:hover span.title, .memy-dwonload:hover span.title2 {left: 40px;opacity: 0;}
.memy-view:hover span.title-hover, .memy-dwonload:hover span.title-hover2 {opacity: 1;left: 40px;}
.memy-view span.circle, .memy-dwonload span.circle2 {display: block;background-color: #0099cc;color: #fff;position: absolute;float: left;margin: 5px;line-height: 42px;height: 40px;width: 40px;top: 0;left: 0;transition: .5s;border-radius: 50%;}
.memy-dwonload span.circle2 {background-color: #00c144;}
.memy-view span.title,
.memy-view span.title-hover, .memy-dwonload span.title2,
.memy-dwonload span.title-hover2 {position: absolute;left: 90px;
text-align: center;margin: 0 auto;
font-size: 16px;font-weight: bold;
color: #30abd5;transition: .5s;}
.memy-dwonload span.title2,
.memy-dwonload span.title-hover2 {color: #00c144;left: 80px;}
.memy-view span.title-hover, .memy-dwonload span.title-hover2 {left: 80px;opacity: 0;}
.memy-view span.title-hover, .memy-dwonload span.title-hover2 {color: #fff;}
/* button-demo-download By memy-net.com */
  • ثم قم بالضغط علي حفظ المظهر

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

اولا زرار المعاينة: لاستخدام زرار المعاينة قم بنسخ الكود التالي:
<!-- button-demo-download By memy-net.com -->
<a class="memy-view" href="https://www.memy-net.com" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">معاينة</span>
  <span class="title-hover">اضغط هنا</span>
</a>
<!-- button-demo-download By memy-net.com -->
ثانياً زرار التحميل: لاستخدام زرار التحميل قم بنسخ الكود التالي:
<!-- button-demo-download By memy-net.com -->
<a class="memy-dwonload" href="https://www.memy-net.com" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">تحميل</span>
  <span class="title-hover2">اضغط هنا</span>
</a>
<!-- button-demo-download By memy-net.com -->
ثالثاً زرار التحميل والمعاينة: لاستخدام زرار التحميل والمعاينة معاً قم بنسخ الكود التالي:
<!-- button-demo-download By memy-net.com -->
<a class="memy-view" href="https://www.memy-net.com" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">معاينة</span>
  <span class="title-hover">اضغط هنا</span></a>
<a class="memy-dwonload" href="https://www.memy-net.com" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">تحميل</span>
  <span class="title-hover2">اضغط هنا</span></a>
<!-- button-demo-download By memy-net.com -->
انتهت الاكواد.

تعديلات الكود

النص المظلل بالأحمر:  هو رابط المعاينة استبدله بالرابط الخاص بك.
النص المظلل بالأخضر: هو رابط التحميل استبدله بالرابط الخاص بك.
النص المظلل بالأزرق: هو النص الذي يظهر عند مرور الماوس علي الزر.
النص المظلل بالأصفر: هو النص الذي يظهر علي الزر.

ملاحظات

قم بوضع الكود في الموضوع ولاكن في وضع HTML وليس في وضع تأليف.
لاتقم بالتعديل علي الكود او التعديل علي اكواد CSS حتي لا تتسبب في تلف الكود.
خذ نسخة احتياطية من قالبك قبل بدء استخدام الكود.
احذف اي اضافة متشابهة مع هذا الكود حتي لا تتسبب في تلف قالبك.
اذا واجهت اي مشكلة ضعها بتعليق وسنقوم بالرد عليك.

الي هنا قد انتهي الدرس نمتني ان تعجبكم الإضافة وانتظرونا في درس جديد علي ميمي نت بالتوفيق.

إرسال تعليق

ads222
ads333
تحديث