Cara membuat food reaction di blog

Kali ini saya akan memberikan tutorial cara membuat food reaction di blog,reaction ini gunanya untuk memberikan voting pada postingan kita,biasa nya kalau di wordpress menggunakan plugin,tapi bukan food reaction,di wordpress menggunakan emoticon reaction untuk memvoting nya,kalau di blogger kita juga bisa membuat nya cuma manual,hanya perlu menggunakan css,javascript,dan html untuk membuat nya



sebenar nya food reaction ini tidak terlalu penting untuk di pasang blog,tapi apa salah nya untuk mencoba? membuat blog kamu semakin menarik

cara memasang nya

1. Buka blogger > template > edit html,letakkan kode di bawah ini di atas kode ]]></b:skin>

.center-div {
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 400px;
}

.top-emoji-div {
  float: left;
}

.top-emoji {
  height: 50px;
  margin: 15px;
  margin-bottom: 0px;
}

.top-emoji:hover {
  transform: scale(1.2);
  cursor: pointer;
}

.emoji-count p {
  text-align: center;
  font-weight: bold;
  font-size: 0.9em;
  padding-top: 5px;
  color: #fff;
  font-weight: 400;
}

.emoji-count {
  margin-left: 22px;
  position: relative;
  background: #2c3e50;
  width: 35px;
  height: 28px;
  border-radius: 7px;
}

.emoji-count:after,
.emoji-count:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
}

.emoji-count:after {
  border-bottom-color: #2c3e50;
  border-width: 6px;
  left: 50%;
  margin-left: -6px;
}

.add-answer p {
  float: left;
  margin-top: 23px;
  margin-left: 15px;
  font-size: 1.1em;
}

.add-answer .button {
  margin-top: 7px;
  background-color: #526A80;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  font-weight: bold;
  padding: 5px 22px;
  font-size: 0.8em;
  text-decoration: none;
  margin-left: 10px;
  cursor: pointer;
}

.add-answer .button:hover {
  background-color: #728CA3;
}

.add-answer .cancel {
  background-color: #2C3E50;
  padding-left: 24px;
  padding-right: 24px;
}

.add-answer {
  margin-left: 15px;
  background-color: #F0F2F2;
  height: 80px;
  width: 380px;
  border-radius: 10px;
  float: left;
  margin-top: 20px;
}

.add-reaction-div {
  width: 60px;
  height: 60px;
  background-color: #D6D6D6;
  color: #333;
  float: left;
  margin: 10px;
  border-radius: 10px;
}

.question-text {
  color: #222;
  font-weight: 400;
  text-align: center;
}

.clear {
  clear: both;
  display: inline-block;
}

2. letakkan kode di bawah ini di bawah kode  <data:post.body/>pilih yang kedua

<div class='center-div'>
  <h3 class='question-text'>Food reaction</h3>
    <div class='top-emoji-div'>
      <img alt='' class='top-emoji' onclick='increment(1)' src='http://emojione.com/wp-content/uploads/assets/emojis/1f354.svg'/>
      <div class='emoji-count'>
        <p id='emoji-1'>102</p>
      </div>
    </div>
    <div class='top-emoji-div'>
      <img alt='' class='top-emoji' onclick='increment(2)' src='http://emojione.com/wp-content/uploads/assets/emojis/1f35f.svg'/>
      <div class='emoji-count'>
        <p id='emoji-2'>84</p>
      </div>
    </div>
    <div class='top-emoji-div'>
      <img alt='' class='top-emoji' onclick='increment(3)' src='http://emojione.com/wp-content/uploads/assets/emojis/1f369.svg'/>
      <div class='emoji-count'>
        <p id='emoji-3'>77</p>
      </div>
    </div>
    <div class='top-emoji-div'>
      <img alt='' class='top-emoji' onclick='increment(4)' src='http://emojione.com/wp-content/uploads/assets/emojis/1f368.svg'/>
      <div class='emoji-count'>
        <p id='emoji-4'>43</p>
      </div>
    </div>
    <div class='top-emoji-div'>
      <img alt='' class='top-emoji' onclick='increment(5)' src='http://emojione.com/wp-content/uploads/assets/emojis/1f37b.svg'/>
      <div class='emoji-count'>
        <p id='emoji-5'>24</p>
      </div>
    </div>
  <div class='clear'/>
</div>

3. lalu,letakkan kode di bawah ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
function increment(id) {
    var divName = "emoji-" + id;
    var count = document.getElementById(divName).innerHTML;
    count = parseInt(count);
    count = count + 1;
    document.getElementById(divName).innerHTML = count;  
}
//]]>
</script>

simpan template dan lihat hasil nya

sekian postingan kali ini