Comments With Emoticon

Comments With Emoticon by Blog Mas Tamvan

by Teja Sukmana

HTML

<script src="https://rawgit.com/mastamvan/backup/master/newcommentsemot.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comments"id="comments"><div class="menu"><div class="back"><i class="fa fa-chevron-left"></i> <img draggable="false"src="https://lh5.googleusercontent.com/-e2_uAWpvXNY/AAAAAAAAAAI/AAAAAAAAAFM/G8JqUdvniZ8/photo.jpg"></div><div class="name">Blog Mas Tamvan</div><div class="last">18:09</div></div><ol class="chat"><li class="other"><div class="avatar"><img draggable="false"src="https://lh5.googleusercontent.com/-e2_uAWpvXNY/AAAAAAAAAAI/AAAAAAAAAFM/G8JqUdvniZ8/photo.jpg"></div><div class="msg"><p><span class="comment-content">Pagi Sayang<p><span class="comment-content">Test Komen emot dolo ah emot0</p><time>20:17</time></div><li class="self"><div class="avatar"><img draggable="false"src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR611PYLpj7DTYnLbTpkvJpI9bNymp8ersluvgzVoNl1Zqsa5zv"></div><div class="msg"><p><span class="comment-content">Pagi Juga Sayang<p><span class="comment-content">Saya juga mau coba comments emotnya emota9</p><time>20:18</time></div><li class="other"><div class="avatar"><img draggable="false"src="https://lh5.googleusercontent.com/-e2_uAWpvXNY/AAAAAAAAAAI/AAAAAAAAAFM/G8JqUdvniZ8/photo.jpg"></div><div class="msg"><p><span class="comment-content">Nanti Sore Ke Taman Yuk emota0</p><time>20:18</time></div><li class="self"><div class="avatar"><img draggable="false"src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR611PYLpj7DTYnLbTpkvJpI9bNymp8ersluvgzVoNl1Zqsa5zv"></div><div class="msg"><p><span class="comment-content">Gak ah yank....</p><time>20:18</time></div><li class="other"><div class="avatar"><img draggable="false"src="https://lh5.googleusercontent.com/-e2_uAWpvXNY/AAAAAAAAAAI/AAAAAAAAAFM/G8JqUdvniZ8/photo.jpg"></div><div class="msg"><p><span class="comment-content">Loh Kenapa yank emotc0</p><time>20:18</time></div><li class="self"><div...

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700);
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);

html, body {
    background: #e5e5e5;
    font-family: 'Lato', sans-serif;
    margin: 0px auto;
}
::selection{
  background: rgba(82,179,217,0.3);
  color: inherit;
}
a{
  color: rgba(82,179,217,0.9);
}

/* M E N U */

.menu {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 50px;
    background: rgba(82,179,217,0.9);
    z-index: 100;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.back {
    position: absolute;
    width: 90px;
    height: 50px;
    top: 0px;
    left: 0px;
    color: #fff;
    line-height: 50px;
    font-size: 30px;
    padding-left: 10px;
    cursor: pointer;
}
.back img {
    position: absolute;
    top: 5px;
    left: 30px;
    width: 40px;
    height: 40px;
    background-color: rgba(255,255,255,0.98);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    margin-left: 15px;
    }
.back:active {
    background: rgba(255,255,255,0.2);
}
.name{
    position: absolute;
    top: 3px;
    left: 110px;
    font-family: 'Lato', sans-serif;
    font-size: 25px;
    font-weight: 300;
    color: rgba(255,255,255,0.98);
    cursor: default;
}
.last{
    position: absolute;
    top: 30px;
    left: 115px;
    font-family: 'Lato', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: rgba(255,255,255,0.6);
    cursor: default;
}

/* M E S S A G E S */

.chat {
    list-style: none;
    background: none;
    margin: 0;
    padding: 0 0 50px 0;
    margin-top: 60px;
    margin-bottom: 10px;
}
.chat li {
    padding: 0.5rem;
    overflow: hidden;
    display: flex;
}
.chat .avatar {
    width: 40px;
    height: 40px;
    position: relative;
    display: block;
    z-index: 2;
    border-radius:...

JavaScript

if(mastamvan=document.getElementById("comments"),mastamvan)for(zx=mastamvan.getElementsByTagName("p"),i=0;i<zx.length;i++)"comment-content"==zx.item(i).getAttribute("CLASS"),mastamvan_emot=zx.item(i).innerHTML.replace(/emot0/gi,"<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot.png' alt='emot0' title='Emot0' class='comment_emo'/>"),mastamvan_emot=mastamvan_emot.replace(/emot1/gi,"<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot1.png' alt='emot1' title='emot1' class='comment_emo'/>"),mastamvan_emot=mastamvan_emot.replace(/emot2/gi,"<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot2.png' alt='emot2' title='emot2' class='comment_emo'/>"),mastamvan_emot=mastamvan_emot.replace(/emot3/gi,"<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot3.png' alt='emot3' title='emot3' class='comment_emo'/>"),mastamvan_emot=mastamvan_emot.replace(/emot4/gi,"<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot4.png' alt='emot4' title='emot4' class='comment_emo'/>"),mastamvan_emot=mastamvan_emot.replace(/emot5/gi,"<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot5.png' alt='emot5' title='emot5' class='comment_emo'/>"),mastamvan_emot=mastamvan_emot.replace(/emot6/gi,"<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot6.png' alt='emot6' title='emot6' class='comment_emo'/>"),mastamvan_emot=mastamvan_emot.replace(/emot7/gi,"<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot7.png' alt='emot7' title='emot7' class='comment_emo'/>"),mastamvan_emot=mastamvan_emot.replace(/emot8/gi,"<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot8.png' alt='emot8' title='emot8' class='comment_emo'/>"),mastamvan_emot=mastamvan_emot.replace(/emot9/gi,"<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot9.png' alt='emot9' title='emot9'...