2

اضافة شريط تفاعل جذاب لقالب بلوجر

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

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

اضافة  شريط تفاعل جذاب لقالب بلوجر
اضافة شريط تفاعل جذاب لقالب بلوجر

قم بإضافة شريط تفاعل جذاب لنمط واجهة المستخدم إلى قالب مدونتك

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

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

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

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

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

كيفية إضافة شريط تفاعل جذاب إلى قالب مدونتك

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

 ثم انقر على خيار الموضوع.

 الخطوة 2: انقر على أيقونة القائمة المنسدلة بالقرب من خيار التخصيص.

 الخطوة 3: اضغط على خيار تحرير HTML.

 الخطوة 4: ابحث عن ]]></b:skin> والصق ملف CSS التالي فوقه مباشرة أو يمكنك لصقه فوق علامة <head/> بإضافة <style></style> .

/* Reaction Bar */.reaction-by-samir {display: flex;align-items: center;margin: 10px 0;box-shadow: 0 0 25px rgb(0 0 0 / 7%);padding:10px; border-radius:10px}.reaction-btn-by-samir {display: flex;align-items: center;margin-right: 10px;cursor: pointer;transition: all 0.3s ease;}.reaction-btn-by-samir:hover {transform: scale(1.1);}.reaction-btn-by-samir:active {transform: scale(0.9);}.reaction-btn-by-samir .icon {font-size: 20px;margin-right: 5px;}.reaction-btn-by-samir .label {font-size: 7px;font-weight: bold;}.like-btn .icon {color: blue;}.love-btn .icon {color: red;}.laugh-btn .icon {color: orange;}
الخطوة 5: ابحث الآن عن نص نشر البيانات والصق ما يلي فوقه مباشرة أو يمكنك لصقه فوق
  <data:post.body/>.
<!-- HTML Code Made By SAMIR Do Not Remove Credit -->
<div id='samir'>
<a href='www.itz-txs.com' id='samir'></a></div>
<div class="reaction-by-samir">
  <div class="reaction-btn-by-samir like-btn">
    <div class="icon">
      <i class="far fa-thumbs-up"></i>
    </div>
    <div class="label">
      Like
    </div>
  </div>
  <div class="reaction-btn-by-samir love-btn">
    <div class="icon">
      <i class="far fa-heart"></i>
    </div>
    <div class="label">
      Love
    </div>
  </div>
  <div class="reaction-btn-by-samir laugh-btn">
    <div class="icon">
      <i class="far fa-laugh-squint"></i>
    </div>
    <div class="label">
      Haha
    </div>
  </div>
</div>
مقالات ذات صلة
الخطوة 6: ابحث الآن عن <head/> والصق ما يلي فوقه مباشرة أو يمكنك لصقه فوق <head/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
الخطوة 7: ابحث عن <body/> نهائيًا والصق ما يلي في Javascript فوقه مباشرةً أو يمكنك لصقه فوق <body/>
<script>/*<![CDATA[*/
var _0x764e=["\x7C\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72\x7C\x6C\x61\x75\x67\x68\x43\x6F\x75\x6E\x74\x7C\x6C\x6F\x76\x65\x43\x6F\x75\x6E\x74\x7C\x6C\x69\x6B\x65\x43\x6F\x75\x6E\x74\x7C\x6C\x61\x62\x65\x6C\x7C\x74\x65\x78\x74\x43\x6F\x6E\x74\x65\x6E\x74\x7C\x6C\x6F\x63\x61\x6C\x53\x74\x6F\x72\x61\x67\x65\x7C\x6C\x61\x75\x67\x68\x42\x74\x6E\x7C\x6C\x6F\x76\x65\x42\x74\x6E\x7C\x6C\x69\x6B\x65\x42\x74\x6E\x7C\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72\x7C\x63\x6C\x69\x63\x6B\x7C\x73\x65\x74\x49\x74\x65\x6D\x7C\x67\x65\x74\x49\x74\x65\x6D\x7C\x70\x61\x72\x73\x65\x49\x6E\x74\x7C\x6C\x65\x74\x7C\x62\x74\x6E\x7C\x64\x6F\x63\x75\x6D\x65\x6E\x74\x7C\x63\x6F\x6E\x73\x74\x7C\x4C\x6F\x76\x65\x7C\x48\x61\x68\x61\x7C\x4C\x69\x6B\x65\x7C\x6C\x61\x75\x67\x68\x7C\x6C\x6F\x76\x65\x7C\x6C\x69\x6B\x65","\x31\x32\x30\x73\x57\x68\x68\x59\x50","\x6A\x20\x61\x3D\x69\x2E\x31\x28\x27\x2E\x70\x2D\x68\x27\x29\x3B\x6A\x20\x39\x3D\x69\x2E\x31\x28\x27\x2E\x6F\x2D\x68\x27\x29\x3B\x6A\x20\x38\x3D\x69\x2E\x31\x28\x27\x2E\x6E\x2D\x68\x27\x29\x3B\x67\x20\x34\x3D\x66\x28\x37\x2E\x65\x28\x27\x34\x27\x29\x29\x7C\x7C\x30\x3B\x67\x20\x33\x3D\x66\x28\x37\x2E\x65\x28\x27\x33\x27\x29\x29\x7C\x7C\x30\x3B\x67\x20\x32\x3D\x66\x28\x37\x2E\x65\x28\x27\x32\x27\x29\x29\x7C\x7C\x30\x3B\x61\x2E\x31\x28\x27\x2E\x35\x27\x29\x2E\x36\x3D\x60\x6D\x28\x24\x7B\x34\x7D\x29\x60\x3B\x39\x2E\x31\x28\x27\x2E\x35\x27\x29\x2E\x36\x3D\x60\x6B\x28\x24\x7B\x33\x7D\x29\x60\x3B\x38\x2E\x31\x28\x27\x2E\x35\x27\x29\x2E\x36\x3D\x60\x6C\x28\x24\x7B\x32\x7D\x29\x60\x3B\x61\x2E\x62\x28\x27\x63\x27\x2C\x28\x29\x3D\x3E\x7B\x34\x2B\x2B\x3B\x37\x2E\x64\x28\x27\x34\x27\x2C\x34\x29\x3B\x61\x2E\x31\x28\x27\x2E\x35\x27\x29\x2E\x36\x3D\x60\x6D\x28\x24\x7B\x34\x7D\x29\x60\x7D\x29\x3B\x39\x2E\x62\x28\x27\x63\x27\x2C\x28\x29\x3D\x3E\x7B\x33\x2B\x2B\x3B\x37\x2E\x64\x28\x27\x33\x27\x2C\x33\x29\x3B\x39\x2E\x31\x28\x27\x2E\x35\x27\x29\x2E\x36\x3D\x60\x6B\x28\x24\x7B\x33\x7D\x29\x60\x7D\x29\x3B\x38\x2E\x62\x28\x27\x63\x27\x2C\x28\x29\x3D\x3E\x7B\x32\x2B\x2B\x3B\x37\x2E\x64\x28\x27\x32\x27\x2C\x32\x29\x3B\x38\x2E\x31\x28\x27\x2E\x35\x27\x29\x2E\x36\x3D\x60\x6C\x28\x24\x7B\x32\x7D\x29\x60\x7D\x29\x3B","\x74\x6F\x53\x74\x72\x69\x6E\x67","\x23\x73\x61\x6D\x69\x72\x20\x61\x5B\x68\x72\x65\x66\x3D\x22\x77\x77\x77\x2E\x69\x74\x7A\x2D\x74\x78\x73\x2E\x63\x6F\x6D\x22\x5D","\x32\x34\x35\x31\x39\x31\x38\x72\x5A\x66\x72\x44\x72","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x74\x65\x78\x74","\x32\x39\x36\x31\x35\x34\x7A\x46\x46\x7A\x71\x42","\x33\x34\x36\x39\x30\x45\x66\x75\x51\x44\x57","\x34\x38\x39\x35\x69\x4B\x61\x53\x5A\x4F","\x61\x23\x73\x61\x6D\x69\x72","\x73\x70\x6C\x69\x74","\x37\x37\x31\x30\x49\x62\x49\x79\x76\x4C","\x61\x74\x74\x72","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x69\x74\x7A\x2D\x74\x78\x73\x2E\x63\x6F\x6D","\x72\x65\x70\x6C\x61\x63\x65","\x36\x30\x31\x30\x4D\x6B\x6C\x43\x6D\x62","\x76\x69\x73\x69\x62\x6C\x65","\x31\x34\x36\x31\x36\x38\x38\x45\x59\x62\x47\x70\x63","\x31\x34\x70\x78","\x23\x66\x66\x66","\x33\x39\x37\x30\x37\x35\x71\x6F\x4D\x6D\x78\x47","\x39\x36\x51\x69\x55\x45\x6F\x74","\x77\x77\x77\x2E\x69\x74\x7A\x2D\x74\x78\x73\x2E\x63\x6F\x6D","\x33\x35\x38\x46\x74\x67\x76\x61\x76","\x73\x68\x69\x66\x74","\x70\x75\x73\x68","\x7C","","\x5C\x77\x2B","\x5C\x62","\x67","\x72\x65\x6C\x61\x74\x69\x76\x65","\x63\x73\x73","\x6C\x65\x6E\x67\x74\x68","\x72\x65\x61\x64\x79"];function _0x13ef(_0x4419x2,_0x4419x3){var _0x4419x4=_0x46a2();return _0x13ef= function(_0x4419x5,_0x4419x6){_0x4419x5= _0x4419x5- 0xbf;var _0x4419x7=_0x4419x4[_0x4419x5];return _0x4419x7},_0x13ef(_0x4419x2,_0x4419x3)}var _0x492a32=_0x13ef;function _0x46a2(){var _0x4419xa=[_0x764e[0],_0x764e[1],_0x764e[2],_0x764e[3],_0x764e[4],_0x764e[5],_0x764e[6],_0x764e[7],_0x764e[8],_0x764e[9],_0x764e[10],_0x764e[11],_0x764e[12],_0x764e[13],_0x764e[14],_0x764e[15],_0x764e[16],_0x764e[17],_0x764e[18],_0x764e[19],_0x764e[20],_0x764e[21],_0x764e[22],_0x764e[23],_0x764e[24],_0x764e[25],_0x764e[26]];_0x46a2= function(){return _0x4419xa};return _0x46a2()}(function(_0x4419xb,_0x4419xc){var _0x4419xd=_0x13ef,_0x4419xe=_0x4419xb();while(!![]){try{var _0x4419xf=parseInt(_0x4419xd(0xce))/ 0x1+ parseInt(_0x4419xd(0xd1))/ 0x2* (-parseInt(_0x4419xd(0xc5))/ 0x3)+ parseInt(_0x4419xd(0xcb))/ 0x4+ -parseInt(_0x4419xd(0xc1))/ 0x5 * (-parseInt(_0x4419xd(0xcf))/ 0x6)+ -parseInt(_0x4419xd(0xd7))/ 0x7+ parseInt(_0x4419xd(0xd3))/ 0x8* (parseInt(_0x4419xd(0xc0))/ 0x9)+ parseInt(_0x4419xd(0xc9))/ 0xa* (-parseInt(_0x4419xd(0xc2))/ 0xb);if(_0x4419xf=== _0x4419xc){break}else {_0x4419xe[_0x764e[28]](_0x4419xe[_0x764e[27]]())}}catch(_0x310d26){_0x4419xe[_0x764e[28]](_0x4419xe[_0x764e[27]]())}}}(_0x46a2,0x46a42),eval(function(_0x4419x10,_0x4419x11,_0x4419x12,_0x4419x13,_0x4419x14,_0x4419x15){var _0x4419x16=_0x13ef;_0x4419x14= function(_0x4419x17){var _0x4419x18=_0x13ef;return _0x4419x17[_0x4419x18(0xd5)](0x24)};if(!_0x764e[30][_0x4419x16(0xc8)](/^/,String)){while(_0x4419x12--){_0x4419x15[_0x4419x12[_0x4419x16(0xd5)](_0x4419x11)]= _0x4419x13[_0x4419x12]|| _0x4419x12[_0x4419x16(0xd5)](_0x4419x11)};_0x4419x13= [function(_0x4419x19){return _0x4419x15[_0x4419x19]}],_0x4419x14= function(){return _0x764e[31]},_0x4419x12= 0x1};while(_0x4419x12--){_0x4419x13[_0x4419x12]&& (_0x4419x10= _0x4419x10[_0x4419x16(0xc8)]( new RegExp(_0x764e[32]+ _0x4419x14(_0x4419x12)+ _0x764e[32],_0x764e[33]),_0x4419x13[_0x4419x12]))};return _0x4419x10}(_0x492a32(0xd4),0x1a,0x1a,_0x492a32(0xd2)[_0x492a32(0xc4)](_0x764e[29]),0x0,{})),$(document)[_0x764e[37]](function(){var _0x4419x1a=_0x492a32;$(_0x4419x1a(0xc3))[_0x4419x1a(0xc6)](_0x764e[6],_0x4419x1a(0xd0))[_0x4419x1a(0xbf)](_0x4419x1a(0xd0))[_0x764e[35]]({'\x76\x69\x73\x69\x62\x69\x6C\x69\x74\x79':_0x4419x1a(0xca),'\x6F\x70\x61\x63\x69\x74\x79':0x1,'\x70\x6F\x73\x69\x74\x69\x6F\x6E':_0x764e[34],'\x7A\x2D\x69\x6E\x64\x65\x78':0x1,'\x66\x6F\x6E\x74\x2D\x73\x69\x7A\x65':_0x4419x1a(0xcc),'\x63\x6F\x6C\x6F\x72':_0x4419x1a(0xcd)}),setInterval(function(){var _0x4419x1b=_0x4419x1a;!$(_0x4419x1b(0xd6))[_0x764e[36]]&& (window[_0x4419x1b(0xd9)][_0x4419x1b(0xd8)]= _0x4419x1b(0xc7))},0x3e8)}))
 /*]]>*/</script>
الخطوة 8: ثم احفظ HTML.
 الآن قم بتحديث موقعك ثم افتح منشورك وشاهد شريط التفاعل الخاص بك
بالإضافة إلى إضافة شريط رد فعل إلى قالب مدونتك، هناك طرق أخرى لتحسين الشكل والمظهر العام لمدونتك. على سبيل المثال، يمكنك اختيار سمة جذابة بصريًا تتوافق مع أسلوب المحتوى الخاص بك وأسلوبه. يمكنك أيضًا إضافة صور ومقاطع فيديو عالية الجودة إلى منشورات مدونتك لجعلها أكثر جاذبية وتفاعلية.
 هناك طريقة أخرى لتحسين قالب مدونتك وهي جعله أكثر سهولة في الاستخدام. ويمكن القيام بذلك عن طريق إضافة قوائم تنقل واضحة، واستخدام خطوط قابلة للقراءة، والتأكد من تحسين مدونتك للأجهزة المحمولة.

خاتمة

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

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

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

عن المؤلف/

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

إرسال تعليق