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

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

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

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

لماذا تحتاج إلى أزرار تحميل ومعاينة احترافية؟

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

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

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

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

لإضافة الأزرار الاحترافية إلى مدونتك، اتبع الخطوات التالية بعناية.

1️⃣ توليد أكواد الأزرار عبر الأداة المخصصة

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

2️⃣ نسخ وإضافة كود CSS إلى مدونتك

بعد ضبط إعدادات الأزرار، انسخ كود CSS الناتج ثم:

1. انتقل إلى منصة بلوجر.
2. اضغط على المظهر > تحرير HTML.
3. ابحث عن الوسم ]]></b:skin>
4. اضع كود CSS الذي نسخته فوق هذا الوسم مباشرة  ]]></b:skin>

نسخ

.zr-download,.zr-demo,.zr-url{display: inline-flex;position: relative;direction: rtl;justify-content: space-between;flex-direction: row-reverse;align-items: center;column-gap: 57px;color: #ffffff!important;text-decoration: none;font-weight: bolder;padding: 15px 40px 17px 21px;font-size: 16px;border-radius: 30px;transition: .25s all;border-bottom: solid 3px #00000050;overflow: hidden;box-shadow: 0 0 2px #000;margin: 5px;}
.zr-download{background: linear-gradient(45deg,#106df9,#4163c8);}
.zr-demo{background: linear-gradient(45deg,#0a8560,#069d7f);}
.zr-url{background: linear-gradient(45deg,#de1b1b,#eb1c05);}
.zr-download:before{background:no-repeat center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29px' height='29px' viewBox='0 0 512 512' fill='%23000' %3E%3Cpath d='M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zM432 456c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24z'/%3E%3C/svg%3E");}
.zr-demo:before{background: no-repeat center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29px' height='29px' viewBox='0 0 576 512' fill='%23000' %3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM432 256c0 79.5-64.5 144-144 144s-144-64.5-144-144s64.5-144 144-144s144 64.5 144 144zM288 192c0 35.3-28.7 64-64 64c-11.5 0-22.3-3-31.6-8.4c-.2 2.8-.4 5.5-.4 8.4c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6z'/%3E%3C/svg%3E");}
.zr-url:before{background:no-repeat center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29px' height='29px' viewBox='0 0 448 512' fill='%23000' %3E%3Cpath d='M288 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h50.7L169.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L384 141.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H288zM80 64C35.8 64 0 99.8 0 144V400c0 44.2 35.8 80 80 80H336c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v80c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16h80c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/%3E%3C/svg%3E");}
.zr-download:before,.zr-demo:before,.zr-url:before {content: "";display: block;width: 24px;height: 24px;padding: 5px;border-radius: 100%;box-shadow: 0 0 10px #fff;background-color: #fff!important;}
.zr-download:active,.zr-demo:active,.zr-url:active{border-bottom: solid 1px #00000050;inntransform: translate(0px,3px);}
.zr-download:after,.zr-demo:after,.zr-url:after{content: "";display: block;position: absolute;left: -10%;top: 0;width: 0;height: 100%;box-shadow: 0 0 20px 5px #fff;transition: unset;}
.zr-download:hover:after,.zr-demo:hover:after,.zr-url:hover:after{left: 120%;transition: 1s all;}

3️⃣ إضافة أكواد HTML داخل المقالات

بعد إضافة كود CSS، قم بنسخ أكواد HTML لكل زر تريده، ثم    

✔ انسخ كود الزر الذي تريد استخدامه.

✔ اضفه داخل مقالاتك مع تغيير الاسم والرابط حسب الحاجة.

✔ استخدم class الزر المناسب لكل رابط تضيفه.

نسخ

<a class="zr-download" href="رابط الموضوع" target="_blank">زر التحميل</a>
<a class="zr-demo" href="رابط الموضوع" target="_blank">زر المعاينة</a>

نصائح لتحسين تجربة المستخدم وتحسين السيو

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

روابط مفيدة لتحسين موقعك

• كيفية تحسين سرعة تحميل موقعك ( رابط داخلي )
• أفضل ممارسات تحسين تجربة المستخدم ( رابط خارجي )

اجعل موقعك أكثر احترافية الان!

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

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