شرح ربط منتدى زينفورو xenforo مع Google 2020

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

يتم إنشاء هذا الزر التجريبي والتنزيلات باستخدام HTML و CSS فقط. يعمل هذا الزر البسيط والوزن الخفيف على أي قالب مدون مخصص. لذلك لا تقلق بشأن القدرة التنافسية لهذا الزر. إن إضافة هذا الزر التجريبي والتنزيلات في مدونتك الإلكترونية أمر سهل للغاية. سأعرض كل شيء باستخدام لقطة الشاشة ، لذلك لا داعي للقلق.
كيفية إضافة تجريبي وتحميل زر في مدون؟
نحن نعلم أن المدون يحتاج إلى المزيد من التخصيص من CMS الأخرى. نظرًا لأن المدون لا يدعم أي مكون إضافي ، فسنضطر إلى إضافة هذا الزر التجريبي والتنزيلات في مدوّنتنا عن طريق تعديل نموذج المدون الحالي.

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

1. قم بتسجيل الدخول إلى حساب المدون الخاص بك وانتقل إلى قسم "القالب". الآن سترى زر "تحرير HTM". انقر عليه لفتح محرر قالب blogger. ملاحظة: احتفظ بنسخة احتياطية من نموذج المدون الخاص بك قبل التحرير.
2. ابحث عن هذا الخط:

 ]]></b:skin> 

. الآن انسخ كود CSS الموجود أدناه وقم بلصقه مباشرة فوق خط

 ]]></b:skin> 

. انقر فوق الزر "حفظ القالب".

عرض وتنزيل نمط الزر 1:

رمز CSS (رئيسي):

 /* =====================
* Demo Download Button By MAAIDNI MohammeD
* ===================== */
.boddbtn {text-align:center;color:#fff !important;list-style:none;margin:10px !important;padding:10px !important;font-size:14px;display:inline-block;text-decoration:none !important;clear:both;}
.boddbtn ul {padding:0;margin:0;}
.boddbtn li {list-style:none;display:inline;padding:0;margin:5px;}
.demobtn,.downloadbtn{color:#fff !important;padding:12px 15px !important;font-size:13px;font-weight:700;font-family:oswald;text-transform:uppercase;text-align:center;border-radius:3px;border:0;letter-spacing:1px;transition: all 0.2s ease-out;text-decoration:none !important;}
.demobtn {background-color: #3498db;}
.downloadbtn {background-color: #34d968}
.demobtn:hover {background-color: #2980b9;color: #fff;}
.downloadbtn:hover {background-color: #2fbd5a;color: #fff;}
/* =====================
* Demo Download Button By MAAIDNI MohammeD
* ===================== */ 

ملاحظة: استبدل القسم المميز بالنمط 2 ، أو النمط 3 ، أو النمط 4 أو رموز النمط 5 للحصول على نمط الزر المرغوب.

عرض وتنزيل نمط الزر 2:

 .demobtn {background-color: #516EAB;}
.downloadbtn {background-color: #29C5F6}
.demobtn:hover {background-color: #435B8E;color: #fff;}
.downloadbtn:hover {background-color: #26A6CE;color: #fff;} 

عرض وتنزيل نمط الزر 3:

 .demobtn {background-color: #EB4026;}
.downloadbtn {background-color: #CA212A}
.demobtn:hover {background-color: #C83821;color: #fff;}
.downloadbtn:hover {background-color: #A61B22;color: #fff;} 

عرض وتنزيل نمط الزر 4:

 .demobtn {background-color: #444444;}
.downloadbtn {background-color: #2C3D4F;}
.demobtn:hover {background-color: #222;color: #fff;}
.downloadbtn:hover {background-color: #24313F;color: #fff;} 

عرض وتنزيل نمط الزر 5:

 .demobtn {background-color: #E84C3D;}
.downloadbtn {background-color: #82BF57}
.demobtn:hover {background-color: #C83821;color: #fff;}
.downloadbtn:hover {background-color: #6FA34A;color: #fff;} 

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

 <div style="text-align: center;">
<ul class="boddbtn">
<li><a class="demobtn" href="#" rel="nofollow" target="_blank">DEMO</a></li>
<li><a class="downloadbtn" href="#" rel="nofollow" target="_blank">DOWNLOAD</a></li>
</ul>
</div> 

ملحوظة:
استبدل # بعنوان URL التوضيحي الخاص بك وتنزيله.

كان هذا هو الإجراء الكامل لإضافة الزر التجريبي والتنزيلات واستخدامه في مدونتك على Blogger. إذا كنت تحب هذه المشاركة ، يرجى مشاركتها وتقديم ملاحظاتك من خلال التعليق.