أضف أزرار المعاينة والتحميل إلى موقعك او مدونتك بسهولة

إضافة أزرار المعاينة والتحميل إلى موقعك و مدونتك بسهولة

طريقة إضافة أزرار المعاينة والتحميل بشكل احترافي إلى جميع قوالب المدون 2022.

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

سوف أشرح هذا الموضوع طريقة إضافة أزرار المعاينة والتحميل على أي قالب على المدونة بسيطة للغاية.

هذه الأزرار منتشرة على نطاق واسع في الويب العربي ويبحث عنها الكثير من الناس.

وبالتحديد، أزرار المعاينة والتنزيل الذي تتحرك بمجرد وضع زر الماوس عليها، يتحرك رمز التنزيل أو المعاينة إلى اليمين. يمكنك رؤية هذه الأزرار بناء على معاينة الصورة التالية:

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

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

من أجل عمل نسخة احتياطية من القالب، تذهب إلى المظهر وانقر على القائمة المنسدلة على الجانب تخصيص، واختيار للحفاظ على نسخة احتياطية وانقر على تحميل فقط.

حتى إذا كانت هناك مشكلة، لا سمح الله، يمكنك استعادة القالب السابق عن طريق استعادة النسخة الاحتياطية التي قمنا بتنزيلها سابقا.

دعنا ننتقل الآن إلى شرح الطريقة. سنقوم بتقسيم الشرح إلى قسمين رئيسين بحيث يكون الشرح بسيطا ويفهم الجميع إن شاء الله.

الجزء الأول:

أولا تذهب إلى واجهة التحكم مدون، ثم تذهب إلى المظهر وانقر على القائمة المنسدلة بجانب التخصيص. بعد ذلك، انقر فوق تحرير HTML.

على لوحة المفاتيح، اضغط على أزرار CTRL + F معا حتى يظهر مربع البحث.

ثم يمكنك البحث عن التعليمات البرمجية التالية.

(نسخ التعليمات البرمجية التالية ووضعها في مربع البحث ، اضغط ENTER على لوحة المفاتيح):

]]></b:skin>

مباشرة فوق التعليمات البرمجية السابقة، يمكنك لصق التعليمات البرمجية التالية، ويمكنك تحميل كملف TXT من هنا:

تحميل كود CSS

#wrap {margin: 10px auto;text-align: center; } .btn-slide, .btn-slide2 {position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 50px;background: #fdfdfd;border: 2px solid #1495bb;margin: 10px;transition: .5s;} .btn-slide2 {border: 2px solid #1495bb;} .btn-slide:hover {background-color: #1495bb;} .btn-slide2:hover {background-color: #a8c93d; border-color: #a8c93d;} .btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {left: 100%;margin-left: -45px;background-color: #fdfdfd;color: #1495bb;} .btn-slide2:hover span.circle2 {color: #a8c93d;} .btn-slide:hover span.title, .btn-slide2:hover span.title2 {left: 40px;opacity: 0;} .btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {opacity: 1;left: 40px;} .btn-slide span.circle, .btn-slide2 span.circle2 {display: block;background-color: #1495bb;color: #fff;position: absolute;float: left;margin: 5px;line-height: 42px;height: 40px;width: 40px;top: -2px;left: 0;transition: .5s;border-radius: 50%;} .btn-slide2 span.circle2 {background-color: #1495bb;} .btn-slide span.title, .btn-slide span.title-hover, .btn-slide2 span.title2, .btn-slide2 span.title-hover2 {position: absolute; left: 90px;text-align: center;margin: 0 auto;font-size: 16px;font-weight: bold;color: #1495bb;transition: .5s;top:-2px} .btn-slide2 span.title2, .btn-slide2 span.title-hover2 {color: #1495bb;left: 72px;} .btn-slide span.title-hover, .btn-slide2 span.title-hover2 {left: 80px;opacity: 0;} .btn-slide span.title-hover, .btn-slide2 span.title-hover2 {color: #fff;} span.title{left: 70px!important}

الجزء الثاني :

نأتي الآن إلى المنشورات أو الموضوع الذي نريد وضع رموز المعاينة وتنزيلها في الجزء الثاني من الشرح.

• تذهب إلى إنشاء وظيفة جديدة من خلال النقر على زر الزائد.

• وانقر على زر القلم الموجود على اليمين.

• ونحن انقر على شاشة HTML.

• وسوف تتحول صفحة الكتابة جميعها إلى رموزHTML.

وأنت تبحث عن المكان الذي تريد أن تظهر فيه الأزرار إما في أسفل المقالة في أسفل جميع الرموز أو في أسفل قسم التنزيل المهم الذي تبحث عنه المكان المناسب.

ضع هذا الرمز التالي في ذلك: تحميل رمز HTML

• كود زر المعاينه

<div id="wrap"> <a href="https://www.facebook.com/techonline4e" class="btn-slide" target="_blank"> <span class="circle"><i class="fa fa-rocket"></i></span> <span class="title">معاينة</span> <span class="title-hover">اضغط هنا</span> </a> </div>

• كود زر التحميل

<div id="wrap"> <a href="https://www.facebook.com/techonline4e" class="btn-slide2" target="_blank"> <span class="circle2"><i class="fa fa-download"></i></span> <span class="title2">تحميل</span> <span class="title-hover2">اضغط هنا</span> </a> </div>

تأكد من وضع الرمز بعد علامة قُفْل الوسم.

تضغط على القلم مرة أخرى وتختار وضع الإنشاء ، ستلاحظ أن الأزرار قد بدأت في الظهور.

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

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

لماذا يجب عليك استخدام أزرار المعاينة والتنزيل على المدونة؟

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

كما أنه سيزيد من قدرة الزائر على فهم بسرعة والعثور على ما يبحثون عنه في بلوق، وبالتالي فإن المادة سوف يكون محبوبا من قبل محرك البحث جوجل.

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

من المرجح أن تساعد هذه الرموز المدونات التي تقوم بمعاينة القوالب.

يحتوي على زر معاينة وتنزيل أيضا. ولكن يمكن حذف أحد الأزرار.

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

تعديل المقال