يُعد زر التنزيل والمعاينة أحد العناصر الهامة في تصميم المواقع الإلكترونية. زر التحميل أو زر المعاينة يسهل على المستخدمين الوصول إلى المحتوى المطلوب وتحميله بكل سهولة، وكذلك الاطلاع على محتوى الصفحة قبل التنزيل.
في هذا المقال سنستعرض أكثر من 20 كود HTML و CSS لأزرر التحميل والمعاينة وغيرها. أكود الأزرار المستخدمة خفيفة الوزن ولا تؤثر على سرعة الصحفة.
كود زر التحميل والمعاينة HTML و CSS
يوفر زر التنزيل وزر المعاينة الوقت. عندما يحتاج المستخدم إلى تنزيل ملف أو مستند، يمكنه النقر على زر التنزيل بدلاً من البحث عن طرق أخرى للوصول إلى الملف. كذلك، يتيح زر التحميل أو زر المعاينة للمستخدمين معاينة الملفات والتحقق من محتواها، وبالتالي يسمح لهم باتخاذ قرارات أفضل بشأن تنزيل الملف أو عدمه.
باختصار، يمثل زر التحميل و زر المعاينة في المواقع الإلكترونية خيارًا مريحًا وآمنًا للمستخدمين لتنزيل الملفات، سنستعرض الأن أكثر أنواع أزرر التحميل و أزرر المعاينة الأكثر شيوعاً بالمواقع الإلكترونية، يمكنك استخدامها بسهولة في مقالاتك بغض النظر ان يكون لديك خبرة بالأكواد.
ميزات كود زر التحميل و زر المعاينة HTML و CSS
- مظهر زر التحميل و زر المعاينة جميل و احترافي.
- تجربة مستخدم أفضل.
- كود CSS نقى خفيف الوزن.
- زر ذو حركة سلسة.
- خاصية التحويم الرائعة.
- نمط النص وتأثيراته.
- سهل التخصيص.
- تنزيل كود زر التحميل و زر المعاينة CSS و HTML مجاناً.
خطوات إضافة كود زر التحميل و زر المعاينة في بلوجر / Blogger
يمكنك إضافة زر تحميل و زر معاينة احترافي على موقعك أو مدونتك عن طريق كود HTML و CSS، فقط اتبع الخطوات أدناه إلى إضافة كود CSS إلى سمة Blogger وشفرة HTML إلى منشور مدونتك. يوجد مثال أدناه على زر تحميل بسيط يمكنك استخدامه في بلوجر.
إضافة كود زر تنزيل CSS و HTML مجانًا
- قم بالدخول إلى لوحة تحكم مدونة بلوجر / Blogger.
- افتح قسم المظهر، ثم انقر فوق خيار تعديل HTML.
- اضغط Ctrl + F في الكيبورد وابحث علامة </head> والصقها فوقها الكود التالي ثم أنقر احفظ القالب الخاص بك.
إضافة زر التحميل و زر المعاينة في مقال بلوجر
أنسخ كود الزر المراد استخدامه. ثم أفتح المقال الذى تريد إنشاء زر التحميل أو زر المعاينة به، قم بتحويل التدوينه لعرض HTML ثم الصق كود الزر بالمكان الذى تريده بالمقال وأنقر حفظ.
كود HTML و CSS أنواع مختلفة من الأزرار
الآن تعرف كيفية إضافة زر تنزيل في المدونة ، باستخدام HTML و CSS. استخدم أفضل ما يلبي احتياجك. فيما يلي بعض أنواع كود زر التحميل و زر المعاينة التي يستخدمها أغلب المواقع. فقط قم بنسخ كود الزر وقم بلصقة في مقالاتك.
كود زر تحميل بسيط
كود زر تحميل خفيف وبسيط يمكنك استخدامه في المقالات بشكل مباشر.
كود زر التنبيه
كود زر بألوان مختلفة. زر التنبيه يمكنك تخصيصه حسب احتياج المقال.
كود زر تحميل - زر المخطط التفصيلي
كود زر المخطط التفصيلي. يمكنك استخدامه في أغراض عديد، يمتلئ الزر بالون عند المرور عليه بالماوس.
زر تحميل القائمة المنسدلة
كود زر لتحميل لوضع أكثر من رابط للتحميل بالزر. عند المرور بالماوس فوق رمز السهم تُفتح القائمة المنسدلة لروابط التحميل. يمكنك استخدامه ذا كان لديك أكثر من رابط لتحميل الملف.
كود زر تحميل - (خاصية التحويم)
كود زر متحرك عند الإشارة عليه يُخرج سهماً عند التمرير، لذلك تسمى هذه الخاصية يحوم_Hover.
كود زر تحميل بعرض الشاشة
كود خفيف وسهل الاستخدام، يمكنك التحكم بعرض الزر والألوان. زر التحميل هذا متجاوب، يعمل بعرض الشاشة كما موضح.
كود زر النص
يعمل هذا الزر عندما تمر عليه بالماوس، يُظهر لون الخلفية.
كود زر تحميل أو معاينة
مجموعة كبيرة بمظهر جميل. زر خفيف أشكال مختلفة يساعدك الزر على ابراز تنسيق مقالاتك باحترافية.
كود زر التحميل والمعاينة
كود الزر الذى يبحث عنه الجميع وتستخدمه معظم المواقع، زر التحميل والمعاينة هذا يمكنك أستخدمهم عندما يكون لديك ملف قابل للتنزيل وتربد أن يرى زوار الملف قبل تحميله.
كيفية التعديل على كود زر التحميل أو المعاينة:
- يمكنك تغير لون الزر بكل سهولة. للحصول على جميع أكواد الألوان قم بزيارة هذه الصفحة.
- يمكنك أيضاً التعديل على لون الخط وحجمه، وتغير حجم الزر.
جميع أكواد الأزرار المستخدمة بالمقال. يمكنك استخدامها على أي منصة سواء ووردبريس أو بلوجر وغيرها.
وفي الأخير، يمكن القول إن زر تنزيل الملفات والمعاينة يعد أحد العوامل الأساسية التي تجعل المواقع الإلكترونية أكثر فعالية وسهولة في الاستخدام، ويساعد على زيادة الثقة والأمان في استخدام الموقع، ويساعد في جذب الزوار.
لذلك، يجب على كل صاحب مواقع الاهتمام بالمظهر وتوفير تجربة أفضل للمستخدمين. وإضافة زر التحميل أو زر المعاينة بشكل مناسب ليتلاءم مع احتياجات المستخدمين ويسهل عليهم الوصول إلى المحتوى المطلوب بكل سهولة.
أتمنى أن يكون المقال مفيد لك واذا كان لديك أي سؤال بشأن الأكواد المستخدمة فلا تتردد بالتعليق أو المرسلة وسيتم الرد على استفسارك بأذن الله، لا تنسى مشاركة المقال ليستفيد غيرك ودعماً منك لتقديم محتوى مماثل.
سعدنا بوجودك 😍 شكراً لك اترك تعليقك بمدى أستفادتك من المحتوى دعمنا لنا وسيتم الرد عليك في أقرب وقت. يسعدنا دائماً اقتراحاتكم بخصوص المحتوى وأذا كان لديك أى أستفسار لاتترد بالتعليق أو المراسلة عبر صندوق البريد.