كود html لنشر ملفات pdf في منشور علي بلوجر

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

الخطوة 1: إعداد ملف PDF الخاص بك

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

الخطوة 2: تحميل ملف PDF الخاص بك إلى Google Drive

لتضمين ملفات PDF بسهولة في منشور بلوجر الخاص بك، ستحتاج إلى استضافة الملف عبر الإنترنت. يوفر Google Drive حلاً مناسبًا لذلك. اتبع هذه الخطوات لتحميل ملف PDF الخاص بك إلى Google Drive:

انتقل إلى Google Drive وقم بتسجيل الدخول باستخدام حساب Google الخاص بك.

انقر فوق الزر "جديد" وحدد "تحميل الملف".

اختر ملف PDF من جهاز الكمبيوتر الخاص بك وانقر فوق "فتح" لتحميله على Google Drive.

الخطوة 3: مشاركة رابط PDF

بمجرد تحميل ملف PDF الخاص بك إلى Google Drive، يجب عليك إنشاء رابط قابل للمشاركة. إليك الطريقة:

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

في إعدادات المشاركة، انقر فوق "الحصول على الرابط" لإنشاء رابط قابل للمشاركة.

تأكد من تعيين مشاركة الرابط على "يمكن لأي شخص لديه الرابط العرض".

انسخ الرابط الذي تم إنشاؤه.

طريقة التركيب

انسخ رمز CSS أدناه والصقه في قالب CSS المخصص الخاص بك

.pdf-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
}
.pdf-container {
	position: relative;
	width: 600px;
	aspect-ratio: 1/1.399;
}
.pdf-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.download-wrapper {
	text-align: center;
	margin: 30px 0;
}
.pdfdownload-btn {
	padding: 8px 15px;
	border-radius: 50px;
	background-color: blue;
	color: white;
	border: none;
	outline: none;
    cursor: pointer;
}

الخطوة 4: قم بتضمين ملف PDF في منشور مدونتك

الخطوة 4: قم بتضمين ملف PDF في منشور مدونتك الآن بعد أن أصبح لديك الرابط القابل للمشاركة، يمكنك تضمين ملف PDF في منشور بلوجر الخاص بك. اتبع الخطوات التالية:

قم بتسجيل الدخول إلى لوحة تحكم مدونتك.

أنشئ منشورًا جديدًا أو قم بتحرير منشور موجود.

انسخ الكود أدناه والصقه في المكان الذي تريد أن يظهر فيه ملف PDF الخاص بك

تأكد من استبدال رابط pdf google Drive بالرابط الخاص بك.

<div class="pdf-wrapper">
   <div class="pdf-container">
      <iframe
         class="pdf-viewer"
         src="YOUR_PDF_LINK_HERE"
         frameborder="0"
         ></iframe>
   </div>
</div>
<div class="download-wrapper">
   <button class="pdfdownload-btn">Download</button>
</div>

الخطوة 5: الخطوة النهائية!

انسخ الكود أدناه والصقه في أسفل مشاركتك.

<script>
   const downloadBtns = document.querySelectorAll(".pdfdownload-btn");
   downloadBtns.forEach(function (btn, index) {
     btn.addEventListener("click", function () {
       const pdfViewer = document.querySelectorAll(".pdf-viewer")[index];
       const pdfSrc = pdfViewer.src;
       const fileId = pdfSrc.match(/\/file\/d\/(.+)\/preview/)[1];
       const downloadUrl = `https://drive.google.com/uc?export=download&id=${fileId}`;
       window.open(downloadUrl, "_blank");
     });
   });
</script>

الخطوة 5: معاينة ونشر مشاركتك

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

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

معاينة

معاينة