أهمية إضافة بطاقة تعريف المؤلف في قوالب بلوجر

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

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

 ما هي بطاقة تعريف المؤلف في بلوجر؟

بطاقة تعريف المؤلف، والتي تُعرف أيضًا باسم Author Box أو Blogger Author Box، هي عنصر يتم إضافته إلى صفحات المقالات لعرض بيانات الكاتب بطريقة منظمة.

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

وتختلف طريقة تصميم صندوق الكاتب في بلوجر من قالب إلى آخر، حيث يمكن أن تكون البطاقة بسيطة وصغيرة، أو تحتوي على تصميم أكثر احترافية يتناسب مع هوية المدونة وألوانها.

 لماذا تحتاج مدونة بلوجر إلى بطاقة مؤلف؟

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

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

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

 تحسين ثقة الزائر بالمحتوى

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

ويمكن أن تتضمن معلومات الكاتب تخصصه أو اهتماماته أو خبرته في المجال الذي يكتب عنه، بشرط أن تكون هذه المعلومات حقيقية ومختصرة.

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

 علاقة بطاقة المؤلف بتحسين SEO

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

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

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

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

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

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

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

إضافة روابط التواصل الاجتماعي

يمكن استخدام بطاقة المؤلف في بلوجر لعرض روابط حسابات الكاتب على مواقع التواصل الاجتماعي، مثل فيسبوك وإنستغرام ويوتيوب وإكس وغيرها.

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

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

 أين يفضل وضع بطاقة المؤلف؟

يُعد وضع بطاقة تعريف الكاتب أسفل المقال من أكثر الأماكن شيوعًا، لأنها تظهر للقارئ بعد الانتهاء من قراءة المحتوى مباشرة.

ويمكن أيضًا وضعها قبل المقال في بعض أنواع المدونات، خصوصًا المواقع التي يكون فيها اسم الكاتب وخبرته عنصرًا مهمًا بالنسبة للقارئ.

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

 تصميم بطاقة مؤلف احترافية لقوالب بلوجر

يمكن إنشاء بطاقة مؤلف احترافية باستخدام HTML وCSS، مع إضافة JavaScript عند الحاجة إلى وظائف إضافية. ويمكن تخصيص التصميم ليتوافق مع ألوان القالب والخطوط المستخدمة في المدونة.

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

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

 هل بطاقة المؤلف مهمة للمدونات التي تحتوي على أكثر من كاتب؟

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

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

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

 أهم النصائح عند إضافة صندوق المؤلف

للحصول على أفضل نتيجة عند إضافة بطاقة المؤلف لبلوجر، يفضل اتباع بعض النصائح المهمة:

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

 الخلاصة

تُعد بطاقة تعريف المؤلف في بلوجر إضافة بسيطة لكنها مفيدة للمدونات التي تهتم بالمظهر الاحترافي وتجربة المستخدم. فهي تساعد على إظهارهوية الكاتب ومعلومات المؤلف، وتمنح الزائر فرصة للتعرف على صاحب المحتوى والوصول إلى المزيد من مقالاته وحساباته الاجتماعية.

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

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

معاينة البطاقات

معاينة البطاقات

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

قم بالذهاب الى الصفحات و اختار صفحة جدبدة ثم أختار عرض HTML و الصق الكود التالي بداخلها 

و لا تنسى وضع عنوان للصفحة و الغاء التعليقات 

<div class="team-slider">
  <button id="left" class="team-arrow" aria-label="Previous">
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <polyline points="15 6 9 12 15 18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </button>

  <ul class="team-carousel">
    <li class="team-card">
      <div class="team-img">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQjkSVCBI69NxYIT6CUQ1wFiUOIJv-JZ9Uai1lUX9_S-g&s" alt="Atharv" draggable="false">
      </div>
      <h2>Atharv</h2>
      <span>Founder</span>
      <p class="team-desc">Passionate entrepreneur leading the vision and strategy of the company.</p>
      <a target="_blank" rel="noopener noreferrer" href="https://example.com/atharv" class="team-btn">View Profile</a>
    </li>
    <li class="team-card">
      <div class="team-img">
        <img src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?w=600&auto=format&fit=crop&q=60" alt="Arjun" draggable="false">
      </div>
      <h2>Arjun</h2>
      <span>Web Developer</span>
      <p class="team-desc">Full-stack web developer creating modern and scalable solutions.</p>
      <a target="_blank" rel="noopener noreferrer" href="#" class="team-btn">View Profile</a>
    </li>
    <li class="team-card">
      <div class="team-img">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9SxmItTvkyQk0JORqWUL5Ga3eSoxie7tmJELiNRJ9dQ&s" alt="Riya" draggable="false">
      </div>
      <h2>Riya</h2>
      <span>Graphics Designer</span>
      <p class="team-desc">Creative designer turning ideas into stunning visuals.</p>
      <a target="_blank" rel="noopener noreferrer" href="https://example.com/Riya" class="team-btn">View Profile</a>
    </li>
    <li class="team-card">
      <div class="team-img">
        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&auto=format&fit=crop&q=60" alt="Rahul" draggable="false">
      </div>
      <h2>Rahul</h2>
      <span>Freelancer</span>
      <p class="team-desc">Freelancer with expertise in digital marketing and content creation.</p>
      <a target="_blank" rel="noopener noreferrer" href="https://example.com/Rahul" class="team-btn">View Profile</a>
    </li>
    <li class="team-card">
      <div class="team-img">
        <img src="https://plus.unsplash.com/premium_photo-1688350808212-4e6908a03925?w=600&auto=format&fit=crop&q=60" alt="Monika" draggable="false">
      </div>
      <h2>Monika</h2>
      <span>Freelancer</span>
      <p class="team-desc">Freelancer specializing in UI/UX and responsive designs.</p>
      <a target="_blank" rel="noopener noreferrer" href="https://example.com/Monika" class="team-btn">View Profile</a>
    </li>
    <li class="team-card">
      <div class="team-img">
        <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=600&auto=format&fit=crop&q=60" alt="Ziya" draggable="false">
      </div>
      <h2>Ziya</h2>
      <span>App Designer</span>
      <p class="team-desc">App designer crafting intuitive and user-friendly mobile experiences.</p>
      <a target="_blank" rel="noopener noreferrer" href="https://example.com/Ziya" class="team-btn">View Profile</a>
    </li>
  </ul>

  <button id="right" class="team-arrow" aria-label="Next">
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <polyline points="9 6 15 12 9 18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </button>
  <div class="team-dots"></div>
</div>

<style>

.team-slider *,.team-slider *::before,.team-slider *::after{box-sizing:border-box}
.team-slider{max-width:1140px;width:100%;position:relative;margin:0 auto;padding:0 20px}
.team-arrow{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border-radius:50%;border:none;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.15);cursor:pointer;z-index:10;transition:all 0.3s ease}
.team-arrow:hover{background:#8b53ff;color:#fff}
.team-arrow svg{display:block;width:18px;height:18px}
.team-arrow{color:#222}
.team-arrow#left{left:-5px}
.team-arrow#right{right:-5px}
.team-slider .team-carousel{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% / 3) - 12px);overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;scroll-behavior:smooth;scrollbar-width:none;padding:15px 5px;margin:0;list-style:none}
.team-carousel::-webkit-scrollbar{display:none}
.team-carousel.no-transition{scroll-behavior:auto}
.team-carousel.dragging{scroll-snap-type:none;scroll-behavior:auto}
.team-carousel.dragging .team-card{cursor:grab;user-select:none}
.team-carousel .team-card{scroll-snap-align:start;min-height:420px;background:#fff;border-radius:12px;padding:25px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 10px 20px rgba(0,0,0,0.05),0 2px 6px rgba(0,0,0,0.05);transition:transform 0.3s ease,box-shadow 0.3s ease}
.team-carousel .team-card:hover{transform:translateY(-5px);box-shadow:0 15px 30px rgba(139,83,255,0.15)}
.team-carousel .team-card .team-img{background:#8b53ff;height:140px;width:140px;border-radius:50%;overflow:hidden;display:flex;justify-content:center;align-items:center;margin-bottom:15px;flex-shrink:0}
.team-card .team-img img{width:132px;height:132px;border-radius:50%;object-fit:cover;border:4px solid #fff}
.team-carousel .team-card h2{font-weight:600;font-size:1.4rem;margin:5px 0 2px;color:#222}
.team-carousel .team-card span{color:#8b53ff;font-size:1rem;font-weight:500;margin-bottom:12px}
.team-card .team-desc{font-size:0.9rem;color:#6a6d78;margin:0 0 20px 0;line-height:1.5;flex-grow:1}
.team-btn{display:inline-block;width:100%;max-width:160px;padding:10px 0;background:#8b53ff;color:#fff;text-decoration:none;border-radius:30px;font-size:0.95rem;font-weight:500;transition:background 0.3s,transform 0.2s;margin-top:auto}
.team-btn:hover{background:#6a36d6}
@media screen and (max-width:900px){.team-slider .team-carousel{grid-auto-columns:calc((100% / 2) - 9px)}.team-arrow#left{left:-15px}.team-arrow#right{right:-15px}}
@media screen and (max-width:600px){.team-slider .team-carousel{grid-auto-columns:100%}.team-arrow#left{left:-10px}.team-arrow#right{right:-10px}}
.team-dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
.team-dots .dot{width:10px;height:10px;background:#d1d1d1;border-radius:50%;cursor:pointer;transition:all 0.3s ease}
.team-dots .dot.active{background:#8b53ff;width:24px;border-radius:5px}
</style>

<script>
const wrapper = document.querySelector(".team-slider");
const carousel = document.querySelector(".team-carousel");
const firstCard = carousel.querySelector(".team-card");
const arrowBtns = document.querySelectorAll(".team-arrow");
const dotsContainer = document.querySelector(".team-dots");
const carouselChildrens = [...carousel.children];

let isDragging = false, isAutoPlay = true, startX, startScrollLeft, timeoutId;

const getCardWidth = () => firstCard.offsetWidth + parseFloat(window.getComputedStyle(carousel).gap);
let firstCardWidth = getCardWidth();

let cardPerView = Math.round(carousel.offsetWidth / firstCard.offsetWidth);

carouselChildrens.slice(-cardPerView).reverse().forEach(card => {
  carousel.insertAdjacentHTML("afterbegin", card.outerHTML);
});
carouselChildrens.slice(0, cardPerView).forEach(card => {
  carousel.insertAdjacentHTML("beforeend", card.outerHTML);
});

carousel.classList.add("no-transition");
carousel.scrollLeft = carousel.offsetWidth;
carousel.classList.remove("no-transition");

window.addEventListener('resize', () => {
  firstCardWidth = getCardWidth();
});

arrowBtns.forEach(btn => {
  btn.addEventListener("click", () => {
    carousel.scrollLeft += btn.id === "left" ? -firstCardWidth : firstCardWidth;
    setTimeout(updateDots, 50);
  });
});

const dragStart = (e) => {
  isDragging = true;
  carousel.classList.add("dragging");
  startX = e.pageX || e.touches[0].pageX;
  startScrollLeft = carousel.scrollLeft;
}

const dragging = (e) => {
  if(!isDragging) return;
  const pageX = e.pageX || e.touches[0].pageX;
  carousel.scrollLeft = startScrollLeft - (pageX - startX);
}

const dragStop = () => {
  isDragging = false;
  carousel.classList.remove("dragging");
}

const infiniteScroll = () => {
  if(carousel.scrollLeft === 0) {
    carousel.classList.add("no-transition");
    carousel.scrollLeft = carousel.scrollWidth - (2 * carousel.offsetWidth);
    carousel.classList.remove("no-transition");
  }
  else if(Math.ceil(carousel.scrollLeft) >= carousel.scrollWidth - carousel.offsetWidth) {
    carousel.classList.add("no-transition");
    carousel.scrollLeft = carousel.offsetWidth;
    carousel.classList.remove("no-transition");
  }
  clearTimeout(timeoutId);
  if(!wrapper.matches(":hover")) autoPlay();
  updateDots();
}

const autoPlay = () => {
  if(window.innerWidth < 800 || !isAutoPlay) return;
  timeoutId = setTimeout(() => {
    carousel.scrollLeft += firstCardWidth;
    updateDots();
  }, 3000);
}

let totalCards = carouselChildrens.length;
for(let i=0; i<totalCards; i++) {
  const dot = document.createElement("div");
  dot.classList.add("dot");
  if(i === 0) dot.classList.add("active");
  dot.addEventListener("click", () => {
    carousel.scrollLeft = (i + cardPerView) * firstCardWidth;
    updateDots();
  });
  dotsContainer.appendChild(dot);
}

const updateDots = () => {
  let currentIndex = Math.round((carousel.scrollLeft - carousel.offsetWidth) / firstCardWidth);
  if(currentIndex >= totalCards) currentIndex = 0;
  if(currentIndex < 0) currentIndex = totalCards - 1;

  document.querySelectorAll(".team-dots .dot").forEach((dot, idx) => {
    dot.classList.toggle("active", idx === currentIndex);
  });
}

autoPlay();
carousel.addEventListener("mousedown", dragStart);
carousel.addEventListener("mousemove", dragging);
document.addEventListener("mouseup", dragStop);
carousel.addEventListener("scroll", infiniteScroll);

carousel.addEventListener("touchstart", dragStart);
carousel.addEventListener("touchmove", dragging);
carousel.addEventListener("touchend", dragStop);

wrapper.addEventListener("mouseenter", () => clearTimeout(timeoutId));
wrapper.addEventListener("mouseleave", autoPlay);
</script>

و ثم قم بالحفظ و شاهد النتيجة

ما رأيك في هذا الموضوع؟

★ 1

★ 2

★ 3

★ 4

★ 5

0.0/ 5

لا توجد تقييمات بعد

اختر تقييمك للمقال

وفي الختام !

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

اضافات بلوجر سكربتات