Clap Button Like Counter Widget
ဒါကတော့မိမိရဲ့ Website ကိုလာ ရောက်ကြည့်ရှုတဲ့ Customers အ နေနဲ့မိမိတင်ထားသမျှ Post တစ်ခုချင်းစီရဲ့ အချက်အလက်ကို ကြိုက်နှစ်သက်တယ်ဆိုရင် Like ပေးလို့ရ အောင်ပြုလုပ်ထားတဲ့ Clap Button Like Counter Widget လေးဖြစ်ပါတယ်။
No(1) မိမိ blog site ကို account အရင်ဝင်ပါ
No(2) dashboard ထဲက Theme ကိုနှိပ်
No(3) Customize ဘေးက 🔻ကိုနှိပ်
No(4) Edit HTML ကိုနှိပ်
No(5) ]]></b:skin> ကိုရှာ တွေ့ပြီဆိုရင်အောက်က CSS code တွေအဲဒီ ]]></b:skin> အပေါ်ကနေကပ်လျက်ထည့်ပေးပါ။အဲလိုမလုပ်ချင်ဘူးဆိုရင်အဲဒီ ]]></b:skin> အောက်က နေအခုလို <style> <---css code---> </style> အဲလိုထည့်လဲရပါတယ်
/* Clap button CSS*/
@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: #41B375;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: #41B375;pointer-events: visible;}
.drK .claps_button{background-color: #2d2d30}
.claps {border-radius: 50%;background-color: #41B375; 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: #41B375;color: #41B375;fill: #41B375;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}
No(6) <data:post.body/> ကိုရှာတွေ့ပြီဆိုရင် အောက်က HTML code တွေကိုအဲဒီ <data:post.body/> အောက်က နေကပ်လျက်ထည့်ပေးပါ
<b:if cond='data:view.isPost'>
<center>
<p><strong>Rate This Article</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>
</center>
</b:if>
No(7) </body> ကိုရှာတွေ့ပြီဆိုရင် အောက်က Java/Script code တွေကိုအဲဒီ </body> အပေါ်ကနေကပ်လျက်ထည့်ပေးပါ။ပြီးပါပြီ
<b:if cond="data:view.isPost">
<script>/*<![CDATA[*//* Clap button JS*/ 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>