كيفية إضافة زر التصفيق في مدونة بلوجر لزيادة التفاعل بسهولة

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

كيفية إضافة زر التصفيق في مدونة بلوجر لزيادة التفاعل بسهولة

أهمية زر التصفيق في مدونة بلوجر

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

لماذا تختار إضافة زر التصفيق لمدونتك؟

1. زيادة التفاعل: يقدم زر التصفيق ردود فعل فورية على المحتوى، مما يعزز الثقة لدى الكاتب ويجذب الزوار.
2. مؤشر لجودة المحتوى: كلما زادت التصفيقات، شعر الزوار بأن المحتوى ذو قيمة.
3. تحسين SEO: زيادة التفاعل تعتبر إشارة إيجابية لمحركات البحث، مما يحسن ترتيب المدونة.

كيفية إضافة زر التصفيق في مدونة بلوجر (خطوات العملية)

ملاحظة: قبل القيام بهذه الخطوات، نوصي بأخذ نسخة احتياطية من القالب الخاص بك، وبالصدفة إذا حدث أي خطأ، يمكنك استعادته لاحقًا!

الخطوة 1: اذهب إلى لوحة تحكم مدونتك .

الخطوة 2: ثم انقر على زر الموضوع .

الخطوة 3: ثم انقر على زر تخصيص .

الخطوة 4: ثم انقر على زر تحرير HTML .

الخطوة 5: ثم ابحث عن كود CSS

التالي ]]></b:skin> والصقه أعلاه.

<b:if cond='data:view.isPost'><script>/*<![CDATA[*//* Clap button JS (TA) */ var claps_button=document.querySelector(".claps_button"),claps=document.querySelector(".claps");claps_button.addEventListener("click",clap),claps.innerText="+"+(localStorage.getItem("claps")?localStorage.getItem("claps"):0);let count1=Number(localStorage.getItem("claps"))?Number(localStorage.getItem("claps")):0;function clap(t){count1+=1,localStorage.setItem("claps",count1),claps.innerText="+"+count1,claps_button.classList.toggle("is_clicked"),setTimeout((()=>claps_button.classList.remove("is_clicked")),1e3)} /*]]>*/</script></b:if>

الخطوة 6: HTML ثم ابحث عن كود <data:post.body/>  التالي وألصقه أسفله مباشرة .

<b:if cond='data:view.isPost'><!--[ Clap button ]--><div class='clpN'><span class='clap'><button class='claps_button'><!--[ Clap SVG Icon ]--><svg class='svgIcon-use' height='33' viewBox='0 0 33 33' width='33'><path d='M28.86 17.342l-3.64-6.402c-.292-.433-.712-.729-1.163-.8a1.124 1.124 0 0 0-.889.213c-.63.488-.742 1.181-.33 2.061l1.222 2.587 1.4 2.46c2.234 4.085 1.511 8.007-2.145 11.663-.26.26-.526.49-.797.707 1.42-.084 2.881-.683 4.292-2.094 3.822-3.823 3.565-7.876 2.05-10.395zm-6.252 11.075c3.352-3.35 3.998-6.775 1.978-10.469l-3.378-5.945c-.292-.432-.712-.728-1.163-.8a1.122 1.122 0 0 0-.89.213c-.63.49-.742 1.182-.33 2.061l1.72 3.638a.502.502 0 0 1-.806.568l-8.91-8.91a1.335 1.335 0 0 0-1.887 1.886l5.292 5.292a.5.5 0 0 1-.707.707l-5.292-5.292-1.492-1.492c-.503-.503-1.382-.505-1.887 0a1.337 1.337 0 0 0 0 1.886l1.493 1.492 5.292 5.292a.499.499 0 0 1-.353.854.5.5 0 0 1-.354-.147L5.642 13.96a1.338 1.338 0 0 0-1.887 0 1.338 1.338 0 0 0 0 1.887l2.23 2.228 3.322 3.324a.499.499 0 0 1-.353.853.502.502 0 0 1-.354-.146l-3.323-3.324a1.333 1.333 0 0 0-1.886 0 1.325 1.325 0 0 0-.39.943c0 .356.138.691.39.943l6.396 6.397c3.528 3.53 8.86 5.313 12.821 1.353zM12.73 9.26l5.68 5.68-.49-1.037c-.518-1.107-.426-2.13.224-2.89l-3.303-3.304a1.337 1.337 0 0 0-1.886 0 1.326 1.326 0 0 0-.39.944c0 .217.067.42.165.607zm14.787 19.184c-1.599 1.6-3.417 2.392-5.353 2.392-.349 0-.7-.03-1.058-.082a7.922 7.922 0 0 1-3.667.887c-3.049 0-6.115-1.626-8.359-3.87l-6.396-6.397A2.315 2.315 0 0 1 2 19.724a2.327 2.327 0 0 1 1.923-2.296l-.875-.875a2.339 2.339 0 0 1 0-3.3 2.33 2.33 0 0 1 1.24-.647l-.139-.139c-.91-.91-.91-2.39 0-3.3.884-.884 2.421-.882 3.301 0l.138.14a2.335 2.335 0 0 1 3.948-1.24l.093.092c.091-.423.291-.828.62-1.157a2.336 2.336 0 0 1 3.3 0l3.384 3.386a2.167 2.167 0 0 1 1.271-.173c.534.086 1.03.354 1.441.765.11-.549.415-1.034.911-1.418a2.12 2.12 0 0 1 1.661-.41c.727.117 1.385.565 1.853 1.262l3.652 6.423c1.704 2.832 2.025 7.377-2.205 11.607zM13.217.484l-1.917.882 2.37 2.837-.454-3.719zm8.487.877l-1.928-.86-.44 3.697 2.368-2.837zM16.5 3.293L15.478-.005h2.044L16.5 3.293z' fill-rule='evenodd'/></svg><button class='claps'/></button></span></div></b:if>

يمكنك استبدال رمز رمز SVG المميز برمز رمز SVG الخاص بك!

الخطوة 7: ثم ابحث عن </body> جافا سكريبت التالي والصقه فوقه مباشرة.

<b:if cond='data:view.isPost'><script>/*<![CDATA[*//* Clap button JS (TA) */ var claps_button=document.querySelector(".claps_button"),claps=document.querySelector(".claps");claps_button.addEventListener("click",clap),claps.innerText="+"+(localStorage.getItem("claps")?localStorage.getItem("claps"):0);let count1=Number(localStorage.getItem("claps"))?Number(localStorage.getItem("claps")):0;function clap(t){count1+=1,localStorage.setItem("claps",count1),claps.innerText="+"+count1,claps_button.classList.toggle("is_clicked"),setTimeout((()=>claps_button.classList.remove("is_clicked")),1e3)} /*]]>*/</script></b:if>

الخطوة 8: ثم انقر على زر حفظ .

تحسين تجربة المستخدم باستخدام زر التصفيق

1. مكان بارز: وضع الزر في مكان واضح، يفضل بعد كل مقال.
2. نص توضيحي: مثل إذا أعجبك المقال، اضغط هنا للتصفيق! لتحفيز الزوار.
3. القسم الخامس: تحسين المقالات باستخدام زر التصفيق لمحركات البحث.
4.  زيادة التفاعل: مع زر التصفيق يمكن أن يساعد في تحسين ترتيب المدونة في نتائج البحث.

الأسئلة الشائعة

1. هل يمكن إضافة زر التصفيق دون معرفة البرمجة؟

نعم، عبر أكواد جاهزة بسيطة.

2. هل يؤثر زر التصفيق على سرعة المدونة؟

إذا كان الكود خفيفًا، لن يؤثر بشكل ملحوظ.

3. كيف يمكنني قياس تفاعل القراء عبر زر التصفيق؟

بعض الأكواد توفر إحصائيات لتتبع عدد التصفيقات.

الخاتمة

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

انتهى المقال الى هنا! اذا اعجبك مقال وأستفدت منه لاتنسى مشاركته مع الاصدقاء والعائلة. نحن نسعى دائما لتقديم الافضل.