For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Membuat rating artikel di blogger

Hello sobat Icloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya membuat rating artikel di blogger menggunakan local storage terbaru dan terkeren pastinya

Info: Baiklah sobat ICloudzer jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Rating Artikel

Rating artikel merupakan suatu fitur untuk memberikan penilaian terhadap suatu artikel di dalam postingan, atau dalam kata lain rating artikel merupakan cara dalam memberikan pendapat, dan memberikan dukungan atau meluapkan perasaan terhadap artikel tersebut

Local storage

Menariknya fitur rating artikel tersebut menggunakan local storage? bagi kamu yang belum mengetahui local storage itu apa? secara singkatnya local storage adalah chache yang di simpan pada suatu browser, chache yang dimaksud adalah data kecil atau sedikit informasi yang disimpan di dalam browser, sehingga nilai storage itu akan tetap atau sama saat tampilan website di refresh, sungguh menakjubkan

Menggunakan Animasi

Selain memakai local storage fitur rating artikel website tersebut juga menggunakan tampilan animasi saat rating artikel di klik, nilai rating akan berubah disertai tampilan animasi yang mempesona saat di klik, penggunaan animasi tersebut cukup di buat menggunakan kode CSS saja, sedangkan perubahan pada nilai rating artikel tersebut menggunakan kode javascript

Contoh Tampilan

Sebagai pelengkap dalam membahas cara membuat rating artikel di blogger tersebut, mimin juga memberikan contoh tampilannya, silahkan kamyu periksa menggunakan tombol di bawah ini ya

Info: Bagiamana sobat terlalu mempesona untuk di nikmati ya...

Cara pembuatan

Baiklah sobat IClouzer setelah berbasa basi sekarang saatnya adin bakalan menjabarkan mengenai cara pembuatan rating artikel di blogger tersebut, harap baca kemudian ikuti setiap arahan yang admin jabarkan di bawah ini

Kode CSS

Langkah pertama seperti biasa silahkan salin dan tempelkan kode CSS di bawah ini sebelum atau diatas kode ]]></b:skin>

/* Rating Artikel button */
@keyframes clap {0% {opacity: 0;transorm: 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);}}
.rahRate_btn {border-radius: 50%;background-color: #fefefe;border: 1px solid;color: #de3535;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: #de3535;pointer-events: visible;}
.rahRate {border-radius: 50%;background-color: #de3535;color: #fff;position: absolute;width: 50px;height: 50px;border: none;z-index: 0;}button.is_clicked ~ button.rahRate {animation: clap 1s ease-in-out forwards;}button.rahRate_btn:hover {border-color: #de3535;color: #de3535;fill: #de3535;animation: pulse 2s infinite;}.rahRate35{box-shadow: 0 0 25px rgb(0 0 0 / 7%); max-width:100%;padding:15px 15px; border-radius:10px} 
/* Dark mode */
<!--[ sesuaikan class mode dark dengan template sobat ]-->
.dark-mode .rahRate_btn{background-color: var(--rahdarkBa);}
.dark-mode .rahRate35{background:var(--rahdarkBa);box-shadow:none} 
.dark-mode button.rahRate_btn:hover{border-color: var(--rahdarkU);color: var(--rahdarkU);fill: var(--rahdarkU)} 
.dark-mode .rahRate_btn{fill: var(--rahdarkU); border: 1px solid;color: var(--rahdarkU)} .dark-mode .rahRate{background:var(--rahdarkU)}

Info: Atau sobat ICloudzer bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas

Kode HTML

Langkah selanjutnya sobat bisa menyalin dan menggunakan kode HTML di bawah ini, kemudian letakkan di bawah kode <data:post.body/>

<b:if cond='data:view.isPost'>
<!--[ Rating Artikel button ]-->
<div class='rahRate35'>
<b:if cond='data:post.labels any (label =&gt; label.name in [&quot;Product&quot; , &quot;Label_1&quot;])'>
<h2 class='title dt'>Rate this product</h2>
<b:else/>
<h2 class='title dt'>Rate this article</h2>
</b:if>
<span class='rateRah'><button class='rahRate_btn'><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='rahRate'/></button></span>
</div>
</b:if>

Info: Sebagai informasi bahwa kode <data:post.body/> pada setiap template berbeda, jika <data:post.body/> lebih dari satu, silahkan cari kode <data:post.body/> yang menampilkan artikel postingan, atau kamu bisa mencoba menaruh kode HTML diatas satu persatu di bawah kode <data:post.body/> jika terdapat kode lebih dari satu

Kode Javascript

Berikutnya silahkan salin dan kemudian gunakan kode Javascript di bawah ini kemudian letakkan di atas kode </body>

<script>/*<![CDATA[*/
 var _0x185c=["\x2E\x72\x61\x68\x52\x61\x74\x65\x5F\x62\x74\x6E","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72","\x2E\x72\x61\x68\x52\x61\x74\x65","\x63\x6C\x69\x63\x6B","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x69\x6E\x6E\x65\x72\x54\x65\x78\x74","\x2B","\x72\x61\x68\x52\x61\x74\x65","\x67\x65\x74\x49\x74\x65\x6D","\x73\x65\x74\x49\x74\x65\x6D","\x69\x73\x5F\x63\x6C\x69\x63\x6B\x65\x64","\x74\x6F\x67\x67\x6C\x65","\x63\x6C\x61\x73\x73\x4C\x69\x73\x74","\x72\x65\x6D\x6F\x76\x65"];var rahRate_btn=document[_0x185c[1]](_0x185c[0]),rahRate=document[_0x185c[1]](_0x185c[2]);rahRate_btn[_0x185c[4]](_0x185c[3],rateRah),rahRate[_0x185c[5]]= _0x185c[6]+ (localStorage[_0x185c[8]](_0x185c[7])?localStorage[_0x185c[8]](_0x185c[7]):0);let count1=Number(localStorage[_0x185c[8]](_0x185c[7]))?Number(localStorage[_0x185c[8]](_0x185c[7])):0;function rateRah(_0x6bc9x5){count1+= 1,localStorage[_0x185c[9]](_0x185c[7],count1),rahRate[_0x185c[5]]= _0x185c[6]+ count1,rahRate_btn[_0x185c[12]][_0x185c[11]](_0x185c[10]),setTimeout((()=>{return rahRate_btn[_0x185c[12]][_0x185c[13]](_0x185c[10])}),1e3)}
 /*]]>*/</script>

Info: Kode javascript di atas sudah di enskripsi, jika ingin mengenkripsi kode gunakan tools Icloudice yang telah disediakan, silahkan klik disini untuk menggunakan



Rate this article


About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.