Cara Membuat Rating Bintang di Blogger

Duta Bloger - Halo sobat Duta, kembali lagi dengan admin yang pada kali ini akan membagikan cara membuat rating bintang di blogger . apa keuntungan menggunakan widget rating Bintang ini?

Daftar Isi

Pengunjung situs web, dapat menilai artikel sobat ,dan sobat bisa mengetahui seberapa besar mereka menyukai artikel sobat. widget rating bintang ini dibuat menggunakan script widgetpack.com. Ini akan berfungsi ketika pengunjung menyentuh icon bintang contoh pengunjung menyentuh bintang 5 maka artikel mendapat 5 bintang jika pengunjung menyentuh bintang 4 artikel akan mendapatkan 4 bintang.

Membuat Rating Bintang di Blogger

1. Silahkan Sobat duta Login ke Blogger.

2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.

3. Kemudian sobat cari kode berikut ini ]]></b:skin>  atau </style> dan pastekan kode css dibawah ini tepat DIATAS kode tersebut.

/* Rating Bintang */
.dutaRate{display:none;padding:30px 0 10px 0}
.dutaRateC{display:flex;max-width:400px;margin-top:30px;padding:25px 17px;line-height:25px;background:#fff;border-radius:5px;box-shadow:0 5px 35px rgba(149,157,165,.3);font-size:16px;font-family:inherit;color:#08102b;text-align:center;justify-content:center}
.dutaRateC .ld{display:inline-flex;align-items:center;font-size:13px;opacity:.8}
.dutaRateC .ld svg{width:18px;height:18px;margin-right:5px;stroke:none !important;fill:#08102b}
.dutaRateS{background:#fff;position:absolute}
.darkMode .dutaRateC, .darkMode .dutaRateS{background:#252526}
.darkMode .dutaRateC{box-shadow:0 10px 40px rgba(0,0,0,.2);color:#fefefe}
.darkMode .dutaRateC .ld svg{fill:#fefefe}

4. Silahkan sobat cari <data:post.body/> dan tambahkan kode html dibawah ini tepat DIBAWAH kode <data:post.body/>.

<!--Rating Bintang-->
<b:if cond='data:view.isPost'>    
<div class='dutaRate' id='pRating'>
<div class='dutaRateC'>
<div class='ld'><svg viewBox='0 0 50 50' x='0px' y='0px'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z'><animateTransform attributeName='transform' attributeType='xml' dur='0.6s' from='0 25 25' repeatCount='indefinite' to='360 25 25' type='rotate'/></path></svg>Please wait...</div>
<div class='dutaRateS' id='wpac-rating'/></div></div>
</b:if>

5. Setelah itu sobat cari kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; dan tambahkan javascript dibawah ini tepat DIATAS kode tersebut

<b:if cond='data:view.isPost'>
  <script>/*<![CDATA[*/ /* Rating Bintang Script (Lazyload) */ var lazyrs=!1;window.addEventListener('scroll',function(){(0!=document.documentElement.scrollTop&&!1===lazyrs||0!=document.body.scrollTop&&!1===lazyrs)&&(!function(){wpac_init=window.wpac_init||[],wpac_init.push({widget:'Rating',id:33379}),function(){var t,e;'WIDGETPACK_LOADED'in window||(WIDGETPACK_LOADED=!0,(t=document.createElement('script')).type='text/javascript',t.async=!0,t.src='https://cdn.widgetpack.com/widget.js',(e=document.getElementsByTagName('script')[0]).parentNode.insertBefore(t,e.nextSibling))}();document.querySelector('#pRating').style.display='block';}(),lazyrs=!0)},!0); /*]]>*/</script>
</b:if>

6. Silahkan SIMPAN TEMA dan Selesai.

Nah, itulah tutorial Cara Membuat Widget Rating Bintang di Blogger Menggunakan script widgetpack.com . Jika ada yang ingin ditanyakan, silahkan berkomentar dibawah sini, Terima kasih.

Pin Share