Tạo tiện ích Phản hồi bài viết cho Blogger

Post Survey Plugin for Blogger

Đây thực chất là một Plugin của WordPress, giúp cho độc giả đánh giá tính hiệu quả của bài viết và sẽ gửi trả kết quả về Google Analytics. Hôm nay

Iris Tips

sẽ hướng dẫn các bạn thực hiện thủ thuật trên Blogger.

Tuy nhiên do không phải hàng "chính chủ" nên tính năng sẽ khá hạn chế. Chủ yếu để cho đẹp bài viết thôi. :)

Cách thực hiện

1

Vào

Mẫu >> Chỉnh sửa HTML

và dán đoạn code bên dưới vào

trước

thẻ

</head>

<style type='text/css'>

.survey-zone{color:#6B1616;padding:10px;border:2px dashed red;line-height:15px!important}

#survey{text-align:center!important}

#thanks{clear:both;display:none}

.show{display:inline!important}

#survey b,#thanks b{font-size:20px;display:block;margin-bottom:20px}

.surveyGrid{width:48%;margin:10px 0;display:inline-block}

.surveryA{text-align:right}

.surveryB{text-align:left}

.surveryA a{background:#3498db;box-shadow:0 6px #2980b9}

.surveryA a:active{background:#2980b9;box-shadow:0 0 #2980b9}

.surveryB a{box-shadow:0 6px #c0392b;background:#e74c3c}

.surveryB a:active{box-shadow:0 0 #c0392b;background:#c0392b}

.irtb{font-family:'Open Sans',cursive,font-size:16px}

.surveryButton{display:inline-block;border-radius:3px;margin:10px 10px 10px 10px;padding:15px;text-align:center;text-decoration:none;font:14px "Open Sans",sans-serif;color:#ecf0f1!important}

.surveryButton:active{position:relative;top:6px}

</style>

<script type="text/javascript">

function rankPage(value)

{

ga('send', {

'hitType': 'event',

'eventCategory': 'Page',

'eventAction': 'Rank',

'eventValue': value

});

}

document.addEventListener('DOMContentLoaded', function()

{

[].forEach.call(document.querySelectorAll(".surveryButton"), function(el) {

el.addEventListener("click", function() {

document.getElementById('surveyBlock').style.display = 'none';

document.getElementById('thanks').classList.add('show');

});

});

});

</script>

2

Tìm đến đoạn code

<div class=’post-footer-line post-footer-line-1′>

hoặc

<div class=’post-footer’>

và dán đoạn code bên dưới vào

sau

1 trong 2 đoạn code đó.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class="survey-zone">

<div id="survey">

<div id="surveyBlock">

<div class="irtb">

<b>Bài viết này có hữu ích cho bạn không?</b></div>

<div class="surveyGrid surveryA irtb"><a href="#gsvyes" class="surveryButton" onclick="rankPage(1)"><i class="fa fa-thumbs-up"></i> Có, cảm ơn!</a></div>

<div class="surveyGrid surveryB irtb"><a href="#gsvno" class="surveryButton" onclick="rankPage(-1)"><i class="fa fa-thumbs-down"></i> Không thật sự</a></div></div>

<div id="thanks"> <b class="irtb">Cảm ơn!</b><p class="irtb">Phản hồi của bạn đã được ghi nhận<br/><br/><i class="fa fa-smile-o fa-4x"></i></p></div></div>

</div>

</b:if