Как добавить виджет звездного рейтинга с помощью CSS в Blogger

Виджет звездного рейтинга с помощью CSS в Blogger

Здесь я предоставлю краткое руководство по установке виджета с оценкой звездного рейтинга с помощью CSS в Blogger. Если вы заинтересованы в его установке, вы можете ознакомиться с установкой в следующем руководстве.

Подсчет звездного рейтинга позволяет оценивать статьи в Интернете. С помощью него мы можем дать оценку, указав количество звезд. Этот виджет также оснащен счетчиком, который может хранить количество пользователей, которые дали свою оценку.

Как установить виджет «Счетчик звездочек» в Blogger

1. Войдите в свою учетную запись Blogger — Темы — Редактировать HTML.

2. Скопируйте и вставьте приведенный ниже код стиля CSS непосредственно перед кодом

  ]]></b:skin> или </style>.

<style type=’text/css’>
/* Rating Count Star */
#wpac-rating:before {content: «Apakah artikel ini bermanfaat?»;top: -15px;text-align: center;position: relative;width: 100%;}
#wpac-rating .wp-stars .wp-star:hover:before{z-index: 999;padding: 3px 11px;background: #1a1d23f0;color: #fff;font-size: 12px;border-radius: 2px;white-space: nowrap;position: absolute;line-height: 1.4;text-align: center;-ms-transform: translateX(-30%);-moz-transform: translateX(-30%);-webkit-transform: translateX(-30%);transform: translateX(-30%);top: 100%;margin-top: 9px;}
</style>

3. Затем вставьте код виджета, показанный ниже. Вы можете отрегулировать размещение его.

Например, здесь я поместил его в конец статьи, который вставляется сразу после кода <data:post.body/>.

 

<div id=»wpac-rating»></div>
<script type=»text/javascript»>
wpac_init = window.wpac_init || [];
wpac_init.push({widget: ‘Rating’, id: 21697});
(function() {
if (‘WIDGETPACK_LOADED’ in window) return;
WIDGETPACK_LOADED = true; //true ubah ke False
var mc = document.createElement(‘script’);
mc.type = ‘text/javascript’;
mc.async = true;
mc.src = ‘https://embed.widgetpack.com/widget.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(mc, s.nextSibling);
})();
</script>

 

4. Сохранить тему.

5. Готово.

Виджет звездного рейтинга с CSS , установленный в Blogger.

 

<style type='text/css'>
/* Rating Count Star */
#wpac-rating:before {content: "Apakah artikel ini bermanfaat?";top: -15px;text-align: center;position: relative;width: 100%;}
#wpac-rating .wp-stars .wp-star:hover:before{z-index: 999;padding: 3px 11px;background: #1a1d23f0;color: #fff;font-size: 12px;border-radius: 2px;white-space: nowrap;position: absolute;line-height: 1.4;text-align: center;-ms-transform: translateX(-30%);-moz-transform: translateX(-30%);-webkit-transform: translateX(-30%);transform: translateX(-30%);top: 100%;margin-top: 9px;}
</style>

 

Рейтинг
( Пока оценок нет )
Загрузка ...