Notifications
All Notifications

Add An Attractive UI Style Reaction Bar To Your Blogger Template l Reaction Bar

Make your blog stand out with an attractive and customizable Reaction Bar. Learn how to add it to your Blogger template in just a few minutes!
Add An Attractive UI Style Reaction Bar To Your Blogger Template

Hello everyone, welcome Itz TxS Website ! If you're a blogger, you know how important it is to have an attractive and engaging website. One way to improve the look and feel of your blog is by adding a reaction bar to your blogger template. A reaction bar is a visual tool that allows your readers to express their emotions about your blog posts. It's a great way to engage your readers and get feedback about your content.

There are many different types of reaction bars available, but one of the most popular is the one that includes emoji icons. With this type of reaction bar, your readers can quickly and easily show their appreciation for your content by clicking on one of the emoji icons. It's a fun and interactive way to engage your readers and keep them coming back for more.

Adding a reaction bar to your blogger template is easy and can be done in just a few simple steps. The first step is to find a suitable reaction bar that matches the look and feel of your blog. There are many free and paid options available online, so take your time and find one that works best for you.

 Add An Attractive UI Style Reaction Bar To Your Blogger Template - Reaction Bar!

Add An Attractive UI Style Reaction Bar To Your Blogger Template

  • First, go to your Blogger dashboard
  • Then click on the Theme option
  • Then click on the drop-down icon near Customize option
  • Then click on the Edit HTML option
  • Then find ]]></b:skin> and paste the following CSS just above it or you can paste it above <head/> tag by adding <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;}
  • Then Now find data post body and paste the following this cdn just above it or you can paste it above <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> 
  • Then Now find <head/> and paste the following this cdn just above it or you can paste it above <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" /> 
  • Now Final Find <body/> and paste the following this Javascript just above it or you can paste it above <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> 
  • Then Save HTML
  • Now Refresh Your Site Than Open Your Post And Boom See Your Reaction Bar

  • In addition to adding a reaction bar to your blogger template, there are other ways to improve the overall look and feel of your blog. For example, you can choose a visually appealing theme that matches the tone and style of your content. You can also add high-quality images and videos to your blog posts to make them more engaging and interactive.

    Another way to improve your blogger template is to make it more user-friendly. This can be done by adding clear navigation menus, using readable fonts, and ensuring that your blog is optimized for mobile devices.


    Conclusion

    Hope this Add An Attractive UI Style Reaction Bar To Your Blogger Template tutorial will be useful to you, if you have any doubts related to this article ask me in the comments, and do share with your friends, Thanks for visiting, Have a nice day!

    Blogger CSS Feature HTML JS Widget
    Itz TxS
    Itz TxS
    Whats up ! My Name is Samir, a expert Web Designer, Telegram Bot Maker,Logo Designer And UI / UX designer in addition to content material writer from Feni,Dagonbhuiyan,Bangladesh. I really like to Code and create interesting things whilst playing with it.
    Join the conversation
    Post a Comment