Cara Membuat Widget Like Post Di Blogger

Hallo semua, pada artikel ini saya akan mencoba membagikan Bagaimana cara membuat widget Like pada blogger. Widget ini akan memberikan kesan profesional pada blog kita dikarenakan pada blogger fitur ini tidak tersedia.

Widget ini berfungsi untuk meng-counter jumlah like pada postingan kita. Widget ini dibuat oleh blog wendycode.com dengan memanfaatkan api dari https://countapi.xyz/. Terimakasih Mas Wendy yang sudah membuatkan script ini.

Widget ini sudah menggunakan script localStorage yang artinya pengunjung tida dapat melakukan like sebanyak 2x selama cookie browser belum dihapus oleh pengunjung.

Namun script ini hanya dapat melakukan Like dan tidak dapat melakukan Unlike. Untuk demonya silahkan klik tombol demo di bawah ini.

Untuk yang tertarik, tutorialnya berada di bawah ini,

Script Widget Like Post Di Blogger

NOTE:
Widget ini hanya untuk blogger/blogspot.

Biasakan untuk meng-backup terlebih dahulu Tema kalian sebelum melakukan pengeditan.

1. Silahkan masuk pada Dashboard blogger, lalu pilih Tema ➤ Edit HTML.

2. Salin kode berikut dan letakan di atas kode ]]></b:skin> atau kode </style>.

   /* widget like shared by www.siapngoding.my.id made by wendycode.com */
   .wc-like-btn{position:relative;padding:20px 20px;background:#f89000;font-size:18px;border-radius:5px;color:#fff;outline:none;border:none;display:flex;align-items:center;justify-content:center}
   .wc-like-btn::after{content:'';position:absolute;padding:20px 20px;background:#f89000;bottom:-15px;transform:rotate(45deg)}
   .wc-like-btn svg{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5;width:25px;height:25px;margin-right:5px;z-index:2}
   .wc-like-btn svg.like{fill:#fff;stroke:#fff}
   #wc-liked{margin-top:5px;z-index:2}
   #wc-liked::before{content:attr(data-klik)}
   #wc-liked::after{content:attr(data-teks);margin-left:5px}
   .wrap-center{display:flex;justify-content:center}

3. Terakhir, letakan kode berikut di atas kode <data:post.body/>. Jika sudah klik Simpan.

   <div class="wrap-center">
   <button class="wc-like-btn">
   <svg viewBox="0 0 24 24"><path d="M23,10C23,8.89 22.1,8 21,8H14.68L15.64,3.43C15.66,3.33 15.67,3.22 15.67,3.11C15.67,2.7 15.5,2.32 15.23,2.05L14.17,1L7.59,7.58C7.22,7.95 7,8.45 7,9V19A2,2 0 0,0 9,21H18C18.83,21 19.54,20.5 19.84,19.78L22.86,12.73C22.95,12.5 23,12.26 23,12V10M1,21H5V9H1V21Z" /></svg>
   <span id="wc-liked" data-klik="0" data-teks="Like" data-after="Liked"></span>
   </button>
   </div>
   
   <script>
   var sharedBy = "www.wendycode.com"; // credit
   var viewBlogId = "<data:blog.blogId/>";
   var viewPostId = "<data:post.id/>"; 
   
   /*<![CDATA[*/
   function _0x4adf(){var _0x19739d=['zgf0ys1RBgLR','W60mWQBdSCozW5CFsH0V','f3CcsaxcOZNcG3a','y2XPy2S','D2nmAwTL','D8k7WRDIW7hcVgbaW5e','DMfSDwu','WRxcSSoKW5NcTXHbWP/cKN/cRue','bmkrW6hdNmkcfmogyGnmESkj','ws/cKH5cWQPDF8o4BHFcKCkF','W4xcPSo7WP/dKMaclSoGWPxcLa','c8kgW7ddUW','WPtcLSo+W5ZdLmkLWP1sW7O','mtj2uwDPEgS','B3bLBG','Dg9gAxHLza','CMvZCg9UC2u','W5ldQCkVWOpcI1KVb8oR','zgf0ys10zwTZ','WPGAkCk/qudcIbq','r0vu','wrnXm8olWPKzBYimW4BdRqC','C2v0qxr0CMLIDxrL','W5bSbYuIW4RdNa','mty4nezlq3LTAa','C2vUza','Fu7cPsNcVCkMaa','B25SB2fK','z2v0qxr0CMLIDxrL','W5TPW6LZnfddSrtcGwCeWQ0','WP0/WR8V','W53cKtLhW6ZcG1VdGCkXW5ZcHmot','ESoQWRLbBIxdRcyU','BgvUz3rO','W6nsWRnDFuFcGt5znGbGbG','WQSJvbD+W7XD','WQSaWOGcW5PAwSo1chddHa','CxvLCNLtzwXLy3rVCG','d8kRW7NdRSkMFCo7yIGxWPeNW5G','wMWafHRcHJVcLsKpW6GIemk6W4Oj','WQhcImkMW78hW4e0cSkKW7O','W5T0W7xdSNVcHmkQjSoBW5X/','W587WQ4','W60mWQBdSCozW4avvaa','WQKkW6u1W4Xes8kozuhdRu/dQXNdQLBcKmkbWOFcHmkOWRldVdTCENtcPdVdGSkJjvPXphBdKSoZB8ksW58GW53cPmofteBcJe7dSmoHWRFcVMhdMeZdThvTWQZcTs7dRYFcHq','pCk2f2j+C1LEWOPtyJ8t','W7pdR8kGWPJdRsz0WRBcQulcQG','F8o3ELFcLZe','W5OUec8','CMvZCg9UC2vuExbL','ANnVBG','zgf0ys1HzNrLCG','oduWntjnsvnWzLO','W7pdN8k3W7PnW6m/kW','WRBcOSoYW5VcOsvxWPBcO2xcQuVdUa','WQJcP8oYW4C','nZiZqvLzBuLg','WQ0NW50jWRtdKCkjWQNdQ8oPWRpcHW','kCkaWOuyWPyLWPNcUSkD','ywrK','WOBdVCkaW4FcJfu','WPhcK8oUW7JcJ8kRWP9pW517W4ZcK2KlWQyo','nZyXndG4q3fguMv3','ndG4ntjVrvD6q3K','BKZcO8o7W7ylANVcMCkzW73dSmkf','W75AW5Dv','C2v0sxrLBq','C3bSAxq','tYpcNmoxB8k9W4zTWQ0iW70'];_0x4adf=function(){return _0x19739d;};return _0x4adf();}(function(_0xd2eb2f,_0x3b1a03){var _0x55b2ca=_0xd295,_0x4f21fd=_0x30b6,_0xa62003=_0xd2eb2f();while(!![]){try{var _0x2c04a8=parseInt(_0x4f21fd(0x174,'WZE&'))/0x1*(parseInt(_0x55b2ca(0x158))/0x2)+parseInt(_0x55b2ca(0x13e))/0x3*(-parseInt(_0x55b2ca(0x163))/0x4)+parseInt(_0x4f21fd(0x155,'woUC'))/0x5*(-parseInt(_0x4f21fd(0x180,'rhE$'))/0x6)+parseInt(_0x4f21fd(0x14a,'k30w'))/0x7+-parseInt(_0x4f21fd(0x13f,'WJMy'))/0x8+parseInt(_0x4f21fd(0x168,'VW6T'))/0x9+parseInt(_0x4f21fd(0x140,'C4$U'))/0xa*(parseInt(_0x55b2ca(0x17f))/0xb);if(_0x2c04a8===_0x3b1a03)break;else _0xa62003['push'](_0xa62003['shift']());}catch(_0x445663){_0xa62003['push'](_0xa62003['shift']());}}}(_0x4adf,0x29b06));function _0x30b6(_0x53144c,_0x1600ba){var _0x4adfb7=_0x4adf();return _0x30b6=function(_0xd295bb,_0x3ef18f){_0xd295bb=_0xd295bb-0x13e;var _0x2119c4=_0x4adfb7[_0xd295bb];if(_0x30b6['WCnvhO']===undefined){var _0x344044=function(_0x503003){var _0x31051d='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';var _0xedf76f='',_0x25fa9='';for(var _0x5e6605=0x0,_0x243e7f,_0x2b717a,_0x11c361=0x0;_0x2b717a=_0x503003['charAt'](_0x11c361++);~_0x2b717a&&(_0x243e7f=_0x5e6605%0x4?_0x243e7f*0x40+_0x2b717a:_0x2b717a,_0x5e6605++%0x4)?_0xedf76f+=String['fromCharCode'](0xff&_0x243e7f>>(-0x2*_0x5e6605&0x6)):0x0){_0x2b717a=_0x31051d['indexOf'](_0x2b717a);}for(var _0x522ac1=0x0,_0xae4cda=_0xedf76f['length'];_0x522ac1<_0xae4cda;_0x522ac1++){_0x25fa9+='%'+('00'+_0xedf76f['charCodeAt'](_0x522ac1)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x25fa9);};var _0x30b6bb=function(_0x5eeb5e,_0x205648){var _0x2015b3=[],_0x49ef51=0x0,_0x529a0f,_0x1b42fb='';_0x5eeb5e=_0x344044(_0x5eeb5e);var _0x781b04;for(_0x781b04=0x0;_0x781b04<0x100;_0x781b04++){_0x2015b3[_0x781b04]=_0x781b04;}for(_0x781b04=0x0;_0x781b04<0x100;_0x781b04++){_0x49ef51=(_0x49ef51+_0x2015b3[_0x781b04]+_0x205648['charCodeAt'](_0x781b04%_0x205648['length']))%0x100,_0x529a0f=_0x2015b3[_0x781b04],_0x2015b3[_0x781b04]=_0x2015b3[_0x49ef51],_0x2015b3[_0x49ef51]=_0x529a0f;}_0x781b04=0x0,_0x49ef51=0x0;for(var _0x589c19=0x0;_0x589c19<_0x5eeb5e['length'];_0x589c19++){_0x781b04=(_0x781b04+0x1)%0x100,_0x49ef51=(_0x49ef51+_0x2015b3[_0x781b04])%0x100,_0x529a0f=_0x2015b3[_0x781b04],_0x2015b3[_0x781b04]=_0x2015b3[_0x49ef51],_0x2015b3[_0x49ef51]=_0x529a0f,_0x1b42fb+=String['fromCharCode'](_0x5eeb5e['charCodeAt'](_0x589c19)^_0x2015b3[(_0x2015b3[_0x781b04]+_0x2015b3[_0x49ef51])%0x100]);}return _0x1b42fb;};_0x30b6['aTZygj']=_0x30b6bb,_0x53144c=arguments,_0x30b6['WCnvhO']=!![];}var _0x106822=_0x4adfb7[0x0],_0x2c1fbf=_0xd295bb+_0x106822,_0x4df1ab=_0x53144c[_0x2c1fbf];return!_0x4df1ab?(_0x30b6['PPxgYt']===undefined&&(_0x30b6['PPxgYt']=!![]),_0x2119c4=_0x30b6['aTZygj'](_0x2119c4,_0x3ef18f),_0x53144c[_0x2c1fbf]=_0x2119c4):_0x2119c4=_0x4df1ab,_0x2119c4;},_0x30b6(_0x53144c,_0x1600ba);}function wendyLikePost(){var _0x480578=_0xd295,_0x2fcfc6=_0x30b6,_0x2b717a=_0x2fcfc6(0x177,'fja@')[_0x480578(0x149)]('');if(sharedBy===_0x2b717a[0x16]+_0x2b717a[0x16]+_0x2b717a[0x16]+'.'+_0x2b717a[0x16]+_0x2b717a[0x4]+_0x2b717a[0xd]+_0x2b717a[0x3]+_0x2b717a[0x18]+_0x2b717a[0x2]+_0x2b717a[0xe]+_0x2b717a[0x3]+_0x2b717a[0x4]+'.'+_0x2b717a[0x2]+_0x2b717a[0xe]+_0x2b717a[0xc]){var _0x11c361=_0x2b717a[0x7]+_0x2b717a[0x13]+_0x2b717a[0x13]+_0x2b717a[0xf]+_0x2b717a[0x12]+':'+_0x2b717a[0x3f]+_0x2b717a[0x3f]+_0x2b717a[0x0]+_0x2b717a[0xf]+_0x2b717a[0x8]+'.'+_0x2b717a[0x2]+_0x2b717a[0xe]+_0x2b717a[0x14]+_0x2b717a[0xd]+_0x2b717a[0x13]+_0x2b717a[0x0]+_0x2b717a[0xf]+_0x2b717a[0x8]+'.'+_0x2b717a[0x17]+_0x2b717a[0x18]+_0x2b717a[0x19]+_0x2b717a[0x3f];function _0x5eeb5e(_0x205648){var _0x5dae6d=_0x480578,_0x225fe9=_0x2fcfc6;if((_0x205648=_0x205648['toString']()[_0x225fe9(0x162,'8kp1')](/[^0-9.]/g,''))<0x3e8)return _0x205648;let _0x2015b3=[{'v':0x3e8,'s':'K'},{'v':0xf4240,'s':'M'},{'v':0x3b9aca00,'s':'B'},{'v':0xe8d4a51000,'s':'T'},{'v':0x38d7ea4c68000,'s':'P'},{'v':0xde0b6b3a7640000,'s':'E'}],_0x49ef51;for(_0x49ef51=_0x2015b3[_0x5dae6d(0x16c)]-0x1;_0x49ef51>0x0&&!(_0x205648>=_0x2015b3[_0x49ef51]['v']);_0x49ef51--);return(_0x205648/_0x2015b3[_0x49ef51]['v'])[_0x5dae6d(0x15a)](0x2)['replace'](/\.0+$|(\.[0-9]*[1-9])0+$/,'$1')+_0x2015b3[_0x49ef51]['s'];}var _0x522ac1=new XMLHttpRequest();_0x522ac1[_0x2fcfc6(0x182,'50%y')]('GET',_0x11c361+'get/'+viewBlogId+'/'+viewPostId+_0x480578(0x14f)),_0x522ac1[_0x2fcfc6(0x152,'50%y')]=_0x480578(0x17d),_0x522ac1[_0x480578(0x166)]=function(){var _0x594db3=_0x2fcfc6,_0x28713d=_0x480578;document['querySelector']('#wc-liked')[_0x28713d(0x161)](_0x594db3(0x157,'x[@D'),_0x5eeb5e(this['response']['value'])),document[_0x594db3(0x181,'50%y')]('#wc-liked')[_0x28713d(0x161)](_0x594db3(0x14c,'fxg]'),this[_0x28713d(0x15b)][_0x28713d(0x151)]);},_0x522ac1[_0x480578(0x164)]();var _0xae4cda=document[_0x2fcfc6(0x154,'wKw%')]('.wc-like-btn');localStorage[_0x2fcfc6(0x16e,'IORN')](_0x480578(0x14f))===viewPostId&&(document[_0x2fcfc6(0x178,'#MAP')](_0x2fcfc6(0x172,'t%J&'))['classList'][_0x2fcfc6(0x175,'9eaG')]('like'),document[_0x2fcfc6(0x146,'Oa#r')]('#wc-liked')[_0x480578(0x161)](_0x2fcfc6(0x176,'fxg]'),document[_0x2fcfc6(0x160,'ZoWP')](_0x2fcfc6(0x150,'@9LP'))['getAttribute'](_0x480578(0x17e)))),localStorage[_0x2fcfc6(0x165,'fcWi')](_0x2fcfc6(0x17a,'Gkjj'))!=viewPostId&&_0xae4cda[_0x2fcfc6(0x143,'x[@D')](_0x480578(0x14e),function(){var _0x2212e2=_0x2fcfc6,_0x2ede91=_0x480578,_0x529a0f;(_0x529a0f=new XMLHttpRequest())[_0x2ede91(0x159)](_0x2ede91(0x15f),_0x11c361+_0x2212e2(0x17b,'GBt&')+viewBlogId+'/'+viewPostId+_0x2ede91(0x14f)),_0x529a0f[_0x2ede91(0x17c)]='json',_0x529a0f[_0x2ede91(0x166)]=function(){var _0x1a37eb=_0x2212e2,_0x586ac3=_0x2ede91;localStorage[_0x586ac3(0x148)](_0x1a37eb(0x142,'woUC'),viewPostId),document[_0x1a37eb(0x171,'b8pW')]('.wc-like-btn\x20svg')[_0x1a37eb(0x14d,'t%J&')][_0x586ac3(0x141)](_0x1a37eb(0x147,'9fb$'));let _0x1b42fb=document[_0x1a37eb(0x16d,'x*l7')](_0x1a37eb(0x16b,'SgHF'))[_0x586ac3(0x167)]('data-count');document[_0x586ac3(0x170)]('#wc-liked')['setAttribute'](_0x586ac3(0x14b),_0x5eeb5e(Number(_0x1b42fb)+0x1)),document['querySelector'](_0x1a37eb(0x15c,'woUC'))[_0x586ac3(0x161)](_0x586ac3(0x15d),document[_0x586ac3(0x170)]('#wc-liked')[_0x1a37eb(0x153,'8KCr')](_0x1a37eb(0x173,'rhE$')));},_0x529a0f[_0x2212e2(0x169,'VW6T')]();});}else window[_0x2fcfc6(0x15e,'urbi')][_0x2fcfc6(0x156,'8KCr')]=_0x2b717a[0x7]+_0x2b717a[0x13]+_0x2b717a[0x13]+_0x2b717a[0xf]+'://'+_0x2b717a[0x16]+_0x2b717a[0x16]+_0x2b717a[0x16]+'.'+_0x2b717a[0x16]+_0x2b717a[0x4]+_0x2b717a[0xd]+_0x2b717a[0x3]+_0x2b717a[0x18]+_0x2b717a[0x2]+_0x2b717a[0xe]+_0x2b717a[0x3]+_0x2b717a[0x4]+'.'+_0x2b717a[0x2]+_0x2b717a[0xe]+_0x2b717a[0xc]+'/'+_0x2b717a[0xf]+'/'+_0x2b717a[0x2]+_0x2b717a[0x11]+_0x2b717a[0x4]+_0x2b717a[0x3]+_0x2b717a[0x8]+_0x2b717a[0x13]+'.'+_0x2b717a[0x7]+_0x2b717a[0x13]+_0x2b717a[0xc]+_0x2b717a[0xb];}function _0xd295(_0x53144c,_0x1600ba){var _0x4adfb7=_0x4adf();return _0xd295=function(_0xd295bb,_0x3ef18f){_0xd295bb=_0xd295bb-0x13e;var _0x2119c4=_0x4adfb7[_0xd295bb];if(_0xd295['Ochwff']===undefined){var _0x344044=function(_0x30b6bb){var _0x503003='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';var _0x31051d='',_0xedf76f='';for(var _0x25fa9=0x0,_0x5e6605,_0x243e7f,_0x2b717a=0x0;_0x243e7f=_0x30b6bb['charAt'](_0x2b717a++);~_0x243e7f&&(_0x5e6605=_0x25fa9%0x4?_0x5e6605*0x40+_0x243e7f:_0x243e7f,_0x25fa9++%0x4)?_0x31051d+=String['fromCharCode'](0xff&_0x5e6605>>(-0x2*_0x25fa9&0x6)):0x0){_0x243e7f=_0x503003['indexOf'](_0x243e7f);}for(var _0x11c361=0x0,_0x522ac1=_0x31051d['length'];_0x11c361<_0x522ac1;_0x11c361++){_0xedf76f+='%'+('00'+_0x31051d['charCodeAt'](_0x11c361)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0xedf76f);};_0xd295['QjCwZR']=_0x344044,_0x53144c=arguments,_0xd295['Ochwff']=!![];}var _0x106822=_0x4adfb7[0x0],_0x2c1fbf=_0xd295bb+_0x106822,_0x4df1ab=_0x53144c[_0x2c1fbf];return!_0x4df1ab?(_0x2119c4=_0xd295['QjCwZR'](_0x2119c4),_0x53144c[_0x2c1fbf]=_0x2119c4):_0x2119c4=_0x4df1ab,_0x2119c4;},_0xd295(_0x53144c,_0x1600ba);}wendyLikePost();
   /*]]>*/
   </script>

Akhir Kata

Ok, sampai di sini tutorial Cara Membuat Widget Like Post Di Blogger. Semoga bermanfaat dan Terimakasih.

Script Source:
www.wendycode.com