What tutorial do you want for the next article! Request Here!

Cara Membuat Widget Rating Artikel Otomatis di Blogger

Cara Membuat Widget Rating Artikel Otomatis di Blogger

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat Star Rating Widget.

Banyak orang ingin menambahkan Peringkat Artikel ke situs web mereka sehingga pengunjung dapat menilai artikel dan meningkatkan konten mereka sesuai dengan peringkat tetapi mereka gagal menambahkannya karena Blogger saat ini tidak memiliki Widget atau Gadget Rating Artikel .

Pada artikel ini, kita akan menambahkan Widget Peringkat Artikel ke Situs Web Blogger mana pun. Pengunjung dapat menilai artikel Anda melalui widget ini. Anda juga tidak perlu menambahkan kode lagi dan lagi di HTML artikel karena widget ini akan ditambahkan secara otomatis ke semua artikel Anda.

untuk demonya kalian bisa melihat melalui tombol di bawah ini

Cara Membuat Widget Rating Artikel Otomatis?

Step 1: Silahkan Kalian Masuk Blogger

Step 2: Pilih Tema Dan Edit Html

Step 3: Cari Kode ]]></b:skin> dan letakan Kode CSS berikut tepat di atasnya

Jika template Anda memiliki fitur dark mode, dan jika Anda menginginkan warna yang berbeda saat dalam mode gelap, Anda dapat menyesuaikan kode sesuai kebutuhan Anda. Setiap template memiliki class yang berbeda, jadi silakan sesuaikan, Anda dapat mengganti class yang ditandai dengan class dark mode template Anda.

.pRate{display:none;padding:30px 0 10px 0}
.pRateC{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}
.pRateC .ld{display:inline-flex;align-items:center;font-size:13px;opacity:.8}
.pRateC .ld svg{width:18px;height:18px;margin-right:5px;stroke:none !important;fill:#08102b}
.pRateS{background:#fff;position:absolute}
.drK .pRateC, .drK .pRateS{background:#252526}
.drK .pRateC{box-shadow:0 10px 40px rgba(0,0,0,.2);color:#fefefe}
.drK .pRateC .ld svg{fill:#fefefe}

Step 4: Letakan Html Berikut Tepat Di Bawah Kode <data:post.body/>

<b:if cond='data:view.isPost'>
  <div id='pRating' class='pRate'>
    <div class='pRateC'>
      <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>Getting Info...</div>
      <div id='wpac-rating' class='pRateS'></div>
    </div>
  </div>
</b:if>

Step 5: Sekarang tambahkan Kode JavaScript berikut tepat di atas untuk </body>menandai. Jika Anda tidak menemukannya, mungkin sudah diurai yaitu <!--</body>--></body> atau &lt;/body&gt;

Berikut adalah JavaScript Lazyload, jadi jangan khawatir tentang Lighthouse, Performa, dan Kecepatan Pemuatan. Apa pun tidak akan terpengaruh.

<b:if cond='data:view.isPost'>
  <script>/*<![CDATA[*/  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:32139}),function(){var t,e;'WIDGETPACK_LOADED'in window||(WIDGETPACK_LOADED=!0,(t=document.createElement('script')).type='text/javascript',t.async=!0,t.src='https://embed.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>

Jika Anda telah menambahkan Widget Rating dengan Paket Widget di situs web Anda dan Anda akan menggantinya dengan Widget ini, ganti ID Rating yang ditandai dengan ID Rating Widget lama atau buat ID Widget Rating baru di sini . Tetap apa adanya jika Anda tidak mengetahuinya karena kami tidak ingin Anda menghadapi kesulitan.

Step 6: Terakhir,Klik Icon Simpan

ok jadi sekian Cara Membuat Rating Artikel Di Blogger semoga bermanfaat, dan terima kasih sudah berkunjung.

Referensi:
https://blog.fineshop.eu.org

Post Tags

blogger Widget

About the Author

Content Creator, Graphic Designer, UI / UX Designer

2 komentar

  1. Saya sudah mengikuti cara anda namun tidak berhasil hanya loading dan tidak muncul widget rating
  2. Saya punten ambil javascript di source code website ini. Soalnya yang ada di postingan ini salah.
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.