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

1Và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>

2Tì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>

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm