"গণপ্রজাতন্ত্রী বাংলাদেশ সরকার" গরীব ও মধ্যবিত্ত পরিবারকে দিচ্ছে, ২,৫০০৳ (বিকাশ, রকেট ও নগদ) নিতে পারবেন, তাই দেরি না করে দ্রুত রেজিষ্ট্রেশন করুন

Blogger পোস্টে PDF ফাইল যুক্ত করার সম্পূর্ণ গাইড


Blogger পোস্টে PDF ফাইল যুক্ত করার সম্পূর্ণ গাইড (২০২৬)

Blogger পোস্টে PDF ফাইল কেন যুক্ত করবেন?

অনেক ব্লগার তাদের ওয়েবসাইটে বিভিন্ন ধরনের PDF ফাইল শেয়ার করতে চান। যেমন ই-বুক, রিপোর্ট, নোটস, টিউটোরিয়াল, প্রেজেন্টেশন, গাইডলাইন অথবা শিক্ষামূলক ডকুমেন্ট। Blogger-এ সরাসরি PDF আপলোডের সুবিধা না থাকলেও Google Drive ব্যবহার করে খুব সহজেই PDF ফাইল এম্বেড করা যায়।

এই টিউটোরিয়ালে ধাপে ধাপে দেখানো হবে কীভাবে Blogger পোস্টে PDF ফাইল প্রদর্শন করবেন এবং ডাউনলোড বাটন যুক্ত করবেন।


PDF যুক্ত করার সুবিধা

  • গুরুত্বপূর্ণ ডকুমেন্ট সহজে শেয়ার করা যায়

  • ব্যবহারকারীরা ওয়েবসাইট না ছাড়াই PDF দেখতে পারে

  • শিক্ষামূলক কনটেন্ট আরও আকর্ষণীয় হয়

  • ই-বুক ও গাইড বিতরণ সহজ হয়

  • ইউজার এক্সপেরিয়েন্স উন্নত হয়


ধাপ ১: PDF ফাইল প্রস্তুত করুন

প্রথমে আপনার PDF ফাইলটি তৈরি বা সংগ্রহ করুন। নিশ্চিত করুন যে ফাইলটি সঠিকভাবে ফরম্যাট করা হয়েছে এবং পাঠকদের জন্য প্রয়োজনীয় তথ্য রয়েছে।


ধাপ ২: Google Drive-এ PDF আপলোড করুন

Blogger-এ PDF দেখানোর জন্য ফাইলটি অনলাইনে হোস্ট করতে হবে।

কীভাবে আপলোড করবেন?

  1. Google Drive-এ প্রবেশ করুন।

  2. আপনার Google অ্যাকাউন্টে লগইন করুন।

  3. New বাটনে ক্লিক করুন।

  4. File Upload নির্বাচন করুন।

  5. আপনার PDF ফাইল নির্বাচন করে আপলোড করুন।

আপলোড সম্পন্ন হলে পরবর্তী ধাপে যান।


ধাপ ৩: PDF-এর শেয়ার লিংক সংগ্রহ করুন

  1. Google Drive-এ আপলোড করা PDF ফাইলের উপর রাইট ক্লিক করুন।

  2. Share অপশনে ক্লিক করুন।

  3. Get Link নির্বাচন করুন।

  4. Access সেটিং Anyone with the link করুন।

  5. লিংকটি কপি করুন।

এখন আপনার PDF অনলাইনে ব্যবহারের জন্য প্রস্তুত।


ধাপ ৪: Blogger Theme-এ CSS কোড যুক্ত করুন

আপনার Blogger Dashboard থেকে:

Theme → Customize → Advanced → Add CSS

নিচের CSS কোডটি পেস্ট করুন।

.pdf-wrapper{
    display:flex;
    align-items:center;
    justify-content:center;
}

.pdf-container{
    position:relative;
    width:600px;
    aspect-ratio:1/1.414;
}

.pdf-container iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.download-wrapper{
    text-align:center;
    margin:30px 0;
}

.pdfdownload-btn{
    padding:10px 20px;
    border:none;
    border-radius:50px;
    background:#0066ff;
    color:#fff;
    cursor:pointer;
    font-weight:600;
}

ধাপ ৫: Blogger পোস্টে PDF এম্বেড করুন

নতুন পোস্ট তৈরি করুন অথবা পুরোনো পোস্ট সম্পাদনা করুন।

যেখানে PDF দেখাতে চান সেখানে নিচের HTML কোডটি যুক্ত করুন।

<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 PDF
   </button>
</div>

নোট: YOUR_PDF_LINK_HERE এর জায়গায় আপনার Google Drive PDF Preview Link বসাতে হবে।


ধাপ ৬: PDF ডাউনলোড বাটন যুক্ত করুন

পোস্টের একদম নিচে নিচের JavaScript কোডটি পেস্ট করুন।

<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>

এই কোড ব্যবহার করলে ভিজিটররা একটি ক্লিকে PDF ডাউনলোড করতে পারবে।


ধাপ ৭: পোস্ট Preview করুন

পোস্ট প্রকাশ করার আগে অবশ্যই Preview অপশন ব্যবহার করুন।

যাচাই করুন:

  • PDF সঠিকভাবে প্রদর্শিত হচ্ছে কি না

  • Download Button কাজ করছে কি না

  • মোবাইল ও ডেস্কটপে ঠিকমতো দেখা যাচ্ছে কি না

সবকিছু ঠিক থাকলে পোস্ট Publish করুন।


Blogger-এ PDF যুক্ত করার সেরা টিপস

১. ছোট সাইজের PDF ব্যবহার করুন

বড় ফাইল ওয়েবসাইটের লোডিং স্পিড কমিয়ে দিতে পারে।

২. Mobile Friendly রাখুন

বেশিরভাগ ভিজিটর মোবাইল ব্যবহার করে, তাই Responsive Layout ব্যবহার করুন।

৩. SEO-Friendly Title ব্যবহার করুন

উদাহরণ:

  • Blogger PDF Embed Tutorial

  • How to Add PDF in Blogger

  • Blogger PDF Viewer Guide

  • PDF Download Button in Blogger

৪. PDF-এর ভিতরে আপনার ব্র্যান্ড যুক্ত করুন

PDF-এর মধ্যে ওয়েবসাইটের নাম ও লিংক যুক্ত করলে ব্র্যান্ডিং বৃদ্ধি পাবে।


সাধারণ সমস্যার সমাধান

PDF দেখা যাচ্ছে না

  • Google Drive Permission চেক করুন।

  • "Anyone with the link" চালু আছে কিনা নিশ্চিত করুন।

Download Button কাজ করছে না

  • Google Drive Link সঠিকভাবে যুক্ত হয়েছে কিনা পরীক্ষা করুন।

  • JavaScript কোড সম্পূর্ণ পেস্ট করা হয়েছে কিনা নিশ্চিত করুন।

মোবাইলে PDF সমস্যা

  • Responsive CSS ব্যবহার করুন।

  • Theme-এর CSS-এর সাথে কোনো Conflict আছে কিনা দেখুন।


উপসংহার

Blogger-এ PDF ফাইল যুক্ত করা খুবই সহজ এবং কার্যকর একটি পদ্ধতি। Google Drive ব্যবহার করে আপনি সহজেই PDF এম্বেড করতে পারবেন, ডাউনলোড বাটন যুক্ত করতে পারবেন এবং আপনার পাঠকদের জন্য আরও সমৃদ্ধ অভিজ্ঞতা তৈরি করতে পারবেন।

আপনি যদি ই-বুক, নোটস, গাইড, রিপোর্ট বা শিক্ষামূলক কনটেন্ট শেয়ার করতে চান, তাহলে এই পদ্ধতি আপনার Blogger ওয়েবসাইটকে আরও পেশাদার ও ব্যবহারবান্ধব করে তুলবে।

Meta Description: Blogger ওয়েবসাইটে PDF ফাইল কীভাবে এম্বেড করবেন? Google Drive ব্যবহার করে PDF Viewer ও Download Button যুক্ত করার সম্পূর্ণ বাংলা টিউটোরিয়াল।