ميزة رياكشن الجمهور: اضافة زر التصفيق تحت المقالات

Split Post - Split Article Into Several Pages

السلام عليكم ورحمة الله وبركاته

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

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

معاينة في صِوانᴜɴPʟᴜɢ

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

كود html لزر التصفيق

لنبدأ بتقديم زر التصفيق. يتم ذلك باستخدام الكود التالي:

الوسم <b:if cond='data:view.isPost'>:
هذا الوسم يستخدم للتحقق من أننا في صفحة مقالة.

<b:if cond='data:view.isPost'>

عنصر الفقرة

يظهر نصًا قويًا يدعو لتقييم الموضوع.

  <p><strong>قيم هذا الموضوع</strong></p>

وسم <b:if cond='data:view.isPost'>

هذا الوسم يستخدم في Blogger لتحديد إذا كانت الصفحة التي تظهر عليها القالب هي صفحة مقالة أم لا. في حالة تحقق الشرط (data:view.isPost يعني أننا في صفحة مقالة)، يتم تنفيذ الكود الذي يأتي داخل هذا الوسم.

شرح الكود

<b:if cond='data:view.isPost'>
  <p><strong>قيم هذا الموضوع</strong></p>
  <!--[ Clap button ]-->
  <div class='clpN'><span class='clap'>

يتحقق الكود أولاً مما إذا كانت الصفحة هي صفحة مقالة (data:view.isPost).
إذا كانت الصفحة مقالة، يتم عرض فقرة (<p>)تحتوي على نص قوي (<strong>) "قيم هذا الموضوع".
يأتي بعدها كود HTML مخصص لزر التصفيق، هذا الوسم يساعد في ضمان أن يتم عرض زر التصفيق وعداد التصفيقات فقط في صفحات المقالات داخل مدونتك.

كود زر التصفيق

يشمل زر التصفيق بالإضافة إلى العناصر الأخرى.

<!--[ 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'>
        <!-- ... محتوى SVG هنا ... -->
      </svg>
      <button class='claps'/>
    </button>
  </span></div>

ايقونة زر التصفيق و كود الايقونة Clap.SVG

<svg class='svgIcon-use' viewBox='0 0 33 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>

إغلاق وسم <b:if>

يغلق الوسم بعد إضافة كود زر التصفيق.

</b:if>

إستدعاء محتوى المقال

يتم استدعاء محتوى المقال بواسطة السطر التالي.

<data:post.body/>

بعد شرح الكود كاملا يمكنك الحصول عليه من صندوق الاكواد يمكنك اضافة هذا الكود في مكان معين لقالب المدونة ليضهر في اسفل صفحة المقالات ابحث عن هذا الوسم لاخبرك ان تخصخي خذا الزر فقط تفاعلي داخل المقالت لقد قمت بتخصيص الكود عن طريق هذا الوسم <b:if cond='data:view.isPost'> لي هر الزر فقط في المشاركات لن يظهر في الصفحة الرئيسية للمدونة او الصفحات الثابتة بدون اختيارك.

<b:if cond='data:view.isPost'>
       <p><strong>قيم هذا الموضوع</strong></p>
<!--[ 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>

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

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

شرح CSS

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

تفكيك كود css

/* Clap button CSS by Techandfunzone */
@keyframes clap {...} /* تحديد تأثير التصفيق */
@keyframes pulse {...} /* تأثير النبض عند التحويل */

.claps_button {...} /* تصميم زر التصفيق */
.drK .claps_button {...} /* تخصيص تصميم زر التصفيق في الوضع الليلي */
.claps {...} /* تصميم العداد */
.clpN {...} /* تصميم الظل النيومورفيك (neumorphic) */
.drK .clpN {...} /* تخصيص الظل النيومورفيك في الوضع الليلي */

بعد ان تم توضيح كود css سيمكنك الان تخصيصه حسب رغبتك اذا كنت تجد صعوبة في تحصيل الكود بدون اخطاء لا تقلق يمكنك الحصول على الكود من صندوق الاكواد اسفله.

/* react post */
/* Clap button CSS by elhizazi*/ 
@keyframes clap {0% {opacity: 0;transform: scale(0);}60% {opacity: 1;transform: translateY(-100px) scale(1);}80%{transform: translateY(-190px) scale(0.6);}100% {opacity: 0;}}@keyframes pulse {0% {box-shadow: 0 0;}70% {box-shadow: 0 0 5px 10px rgba(255, 255, 255, 0);}100% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);}}
.claps_button {border-radius: 50%;background-color: #fff;border: 1px solid;color: #299e94;width: 50px;height: 50px;outline: 0;cursor: pointer;filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.05));transform: scale(1);transition: all .1s ease-in;z-index: 1;fill: #299e94;pointer-events: visible;}
.drK .claps_button{background-color: #2d2d30}
.claps {border-radius: 50%;background-color: #299e94; color: #fff;position: absolute;width: 50px;height: 50px;border: none;z-index: 0;}button.is_clicked ~ button.claps {animation: clap 1s ease-in-out forwards;}button.claps_button:hover {border-color: #299e94;color: #299e94;fill: #299e94;animation: pulse 2s infinite;}.clpN{box-shadow: 0 0 25px rgb(0 0 0 / 7%); padding:15px 15px; border-radius:10px}
/* Clap neumo */ .clpN{box-shadow: 0 0 25px rgb(0 0 0 / 7%);  padding:15px 15px; border-radius:10px}
.drK .clpN{background:#2d2d30;box-shadow:none}

تستطيع تغيير اللون على حسب رغبتك يكفي ان تغير رمز التعريف الهيكس برمزك برمز لونك الفضل سانبهك بتأشير الرمز الخاص باللون الذي استخدمه و يمكنك تغييره على حسب رغبتك.

بعد حصولك على الكود ابحث في قالبك عن ]]</b:skin> و الصق كود css اعلاه فوقه مباشرة، لكي لا تقع فاخطاء النسخ واللصق او حصول تعارض في كتابة الاكود يمكنك تعليم تعريف مخفي للكود /* كود رياكشن التسفيق */ و من الافضل تغلقه بنفس الطريقة /* نهاية كود رياكشن التسفيق */

شرح JavaScript

الكود الـ JavaScript هو ما يجعل زر التصفيق يعمل بشكل سلس. يتم استخدامه لتحديث عداد التصفيقات وتنفيذ تأثير التصفيق عند النقر. تأكد من فهم كيف يتم تخزين عدد التصفيقات في ذاكرة التخزين المحلية.

تفكيك الكود

وسم <b:if cond='data:view.isPost'> يتم استخدامه في Blogger لفحص ما إذا كان المشهد الحالي يعرض صفحة منفصلة لمقالة أو ليس.

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

<b:if cond='data:view.isPost'>
  <!-- أضف هنا الأكواد التي تريد أن تظهر عند عرض مقالة -->
</b:if>

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

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

<script>
    /*<![CDATA[*/
    /* Clap button JS by Techandfunzone */
    var claps_button = document.querySelector(".claps_button"),
        claps = document.querySelector(".claps");

    // تعيين نص التصفيق إلى القيمة المحفوظة في localStorage أو القيمة الافتراضية 0
    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
        localStorage.setItem("claps", count1);

        // تحديث نص التصفيق
        claps.innerText = "+" + count1;

        // إضافة/إزالة الفئة "is_clicked" للزر لتحسين تجربة المستخدم
        claps_button.classList.toggle("is_clicked");

        // إزالة الفئة بعد 1000 مللي ثانية (1 ثانية)
        setTimeout(() => claps_button.classList.remove("is_clicked"), 1000);
    }
    /*]]>*/
  </script>

شرح السكربت

var claps_button = document.querySelector(".claps_button"), claps = document.querySelector(".claps");:
هنا يتم اختيار زر التصفيق وعنصر عرض عدد التصفيقات باستخدام document.querySelector.
claps.innerText = "+" + (localStorage.getItem("claps") ? localStorage.getItem("claps") : 0);:
يقوم بتحديث نص التصفيق إلى القيمة المحفوظة في localStorage أو القيمة الافتراضية "0" إذا لم تكن هناك قيمة محفوظة.
let count1 = Number(localStorage.getItem("claps")) ? Number(localStorage.getItem("claps")) : 0;:
إعداد متغير count1 لتخزين قيمة التصفيق.
function clap(t) { ... }:
دالة =clap تقوم بزيادة قيمة التصفيق، تحديث قيمة localStorage، وتحديث عنصر العرض وتعديل الفئات لتحسين التفاعل.
setTimeout(() => claps_button.classList.remove("is_clicked"), 1000);:
يزيل الفئة "is_clicked" بعد مرور ثانية واحدة للتحكم في التأثيرات المرئية.

تجميع الجافا سكربت

بعد توضيح الكود بشكل كامل يتم تجميعه ليصبح على هذا الشكل.

<b:if cond='data:view.isPost'>
<script>/*<![CDATA[*//* Clap button JS by elhizazi*/ 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>

بعد حصولك على الكود ابحث في قالبك عن </body> و الصق كود JavaScript اعلاه فوقه مباشرة، لكي لا تقع فاخطاء النسخ واللصق او حصول تعارض في كتابة الاكود يمكنك تعليم تعريف مخفي للكود  بداية الكود و نهايته

إضافة الأكواد إلى قالب Blogger

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

الخطوات

تسجيل الدخول إلى حساب بلوجر:
أولاً وقبل كل شيء ، قم بتسجيل الدخول إلى لوحة التحكم بلوجر.
انتقل إلى "لوحة التحكم" واختر "المظهر".
انقر فوق رمز السهم هذا بجوار الزر "تخصيص".
اختر تعديل HTML
قم بلصق كود الـ HTML والـ CSS والـ JavaScript في المكان المناسب، في المقالة ستجد تحت كل صندوق اكواد فقرة توضح المكان الذي يمكنك وضع الكود الخاص به.
ابحث عن المكان الذي تريد أن يظهر فيه زر التصفيق وقم بوضع كود HTML المناسب هناك.
بمجرد لصق الكود، احفظ التغييرات بالنقر فوق هذا الرمز

الآن، يمكن للجمهور التفاعل مع مقالاتك باستخدام زر التصفيق الجديد!

الختام

منشورات ذات صلة

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

شكرًا لمساعدة ChatGPT في إعداد هذا المقال

صوانˣʸᶻ

ميزة رياكشن الجمهور: اضافة زر التصفيق تحت المقالات

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

كود html لزر التصفيق

لنبدأ بتقديم زر التصفيق. يتم ذلك باستخدام الكود التالي:

عنصر الفقرة

وسم <b:if cond='data:view.isPost'>

شرح الكود

كود زر التصفيق

ايقونة زر التصفيق و كود الايقونة Clap.SVG

إغلاق وسم <b:if>

إستدعاء محتوى المقال

شرح CSS

تفكيك كود css

شرح JavaScript

تفكيك الكود

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

شرح السكربت

تجميع الجافا سكربت

إضافة الأكواد إلى قالب Blogger

الخطوات

الختام

عن المؤلف

تعليق واحد

قالب Plus UI الرسمي مجانا

معالجة أخطاء تثبيت Playwright: حلول عملية لـ npx playwright install

TypeScript: تحديات متقدمة في قيود الأنواع، حل الوحدات، واستنتاج العموميات

معالجة مشكلة Node.js: تجميد مطابقة الملفات الديناميكية في الحلقات غير المتزامنة

React.js و TypeScript: التوافق الأمثل لتطوير الواجهة الأمامية