كيفية إضافة مشغل صوت Mp3 مع قائمة تشغيل في بلوجر

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

 كيفية إضافة زر تنزيل الملفات  في مدونة بلوجر

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

ما هو زر التنزيل؟

زر التنزيل هو زر يظهر على صفحات الويب ويساعد المستخدمين على تنزيل الملفات بسهولة. أزرار التنزيل شائعة عبر الويب، ولكن هناك عدة أنواع مختلفة من الأزرار التي قد تراها على مواقع الويب.

لماذا تحتاج إلى زر التنزيل؟

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

يمنح زر التنزيل جمهورك طريقة لتنزيل الملفات (الصوتية / فيديو/ pdf / كتاب إلكتروني/ دورات / تطبيق) بسهولة عن طريق النقر على الزر وتحميل الملف.

كيف تضيف زر التنزيل في Blogger؟

الطريقة سهلة وسريعة لـ إضافة زر تنزيل زر تنزيل الملفات  في Blogger زر جميل بكود CSS.

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

1- قم بنسخ كود CSS التالي واتبع الشرح.

body {
	background-color: #1a1a1a;
}

.buttonDownload {
	display: inline-block;
	position: relative;
	padding: 10px 25px;
  
	background-color: #4CC713;
	color: white;
  
	font-family: Arial;
	text-decoration: none;
	font-size: 1.5em;
	text-align: center;
	text-indent: 15px;
}

.buttonDownload:hover {
	background-color: #333;
	color: white;
}

.buttonDownload:before, .buttonDownload:after {
	content: ' ';
	display: block;
	position: absolute;
	left: 15px;
	top: 52%;
}

/* Download box shape  */
.buttonDownload:before {
	width: 10px;
	height: 2px;
	border-style: solid;
	border-width: 0 2px 2px;
}

/* Download arrow shape */
.buttonDownload:after {
	width: 0;
	height: 0;
	margin-left: 3px;
	margin-top: -7px;
  
	border-style: solid;
	border-width: 4px 4px 0 4px;
	border-color: transparent;
	border-top-color: inherit;
	
	animation: downloadArrow 2s linear infinite;
	animation-play-state: paused;
}

.buttonDownload:hover:before {
	border-color: #4CC713;
}

.buttonDownload:hover:after {
	border-top-color: #4CC713;
	animation-play-state: running;
}

/* keyframes for the download icon anim */
@keyframes downloadArrow {
	/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
	0% {
		margin-top: -7px;
		opacity: 1;
	}
	
	0.001% {
		margin-top: -15px;
		opacity: 0;
	}
	
	50% {
		opacity: 1;
	}

	100% {
		margin-top: 0;
		opacity: 0;
	}
}

• الأن قم بتسجيل الدخول إلي بلوجر - Blogger.
• التوجه للوحة تحكم مدونتك ثم المظهر انقر فوق تخصيص.

• في القائمة اليمنى، انقر فوق "خيارات متقدمة".

• ثم انقر فوق السهم لأسفل. أضف CSS. بعد ذلك أضف كود CSS المرفق بالشرح، وفي الجزء السفلي الأيسر، انقر فوق حفظ.

كيفية إضافة زر تنزيل الملفات في المنشور

1. افتح الآن أي منشور أو صفحة تريد إظهار زر التنزيل فيها.
2. اختر عرض HTML وألصق كود HTML التالي في المكان الذي تريد إظهار الزر فيه.

كود HTML استدعاء زر التنزيل:

<a href="#" class="buttonDownload">Download</a>

الآن قم بتحديث منشورك وانقر على زر المعاينة للتحقق من الزر المضاف. الآن عليك فقط لصق كود HTML في أي منشور. ليس عليك إضافة كود CSS مرة أخرى.

ملحوظة
قم بإضافة رابط تحميل الملف مكان رمز #، ويمكنك تغير كلمة Download بالكلمة التي تريدها مثل التحميل الأن أو تحميل من هنا، أيضاً يمكنك تغير اللون الأساسي للزر بتغير كود اللون، يمكنك الاستفادة من هذه الاكواد لتغير لون الزر من هنا.

الخلاصة

كان موضوع اليوم عن كيفية إضافة زر تنزيل الملفات في بلوجر - Blogger، يمكنك الأنن إضافة زر تنزيل الملفات في موقعك بسهولة أفضل من وضعك لرابط التحميل فقط دون زر.

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

تعديل المقال