Cara Membuat Emoticon Jquery Pada Blog - Dengan menambahkan emoticon, maka blog akan lebih bagus penampilannya.
bukan hanya itu tapi ini juga bisa mempermudah para pengunjung blog untuk mencari emot yang cocok untuk mengexpresikan dirinya. 
yuk langsung aja liat demonya dibawah ini

• Taruh kode dibawah ini diatas kode </body>

/* Emoticon jQuery Blogsiryan.blogspot.com */
<style>
.emoWrap {
  background-color:#EEDE86;
  border:2px solid #D3BA59;
  padding:10px 14px;
  color:black;
  font:normal bold 12px/normal Tahoma,Verdana,Arial,Sans-Serif;
  text-align:center;
}

.emo,
.emoKey {
  display:inline-block; /* Penting! */
  *display:inline;
  vertical-align:middle;
}

.emoKey {
  border:1px solid #ccc;
  background-color:white;
  font:normal bold 11px/normal Arial,Sans-Serif;
  padding:1px 2px;
  margin:0 0 0 2px;
  color:black;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
    putEmoAbove = "#comment-editor",
    emoMessage = "Untuk menyisipkan emoticon setidaknya Anda harus menambahkan satu spasi di awal simbol.";
//]]>
</script>
<script src='http://dte-project.googlecode.com/svn/trunk/jquery-emoticons.js'></script>

• Save template
• gimana mudah kan? cuma itu aja loh :D

Oke sekian dari saya semoga bermanfaat bagi anda. Terimakasih

How to 

.buttonx{
float:left;
list-style:none;
text-align:center;
width: 100%;
margin:5px 0;
padding:0;
font-size:14px;
clear:both;
}

.buttonx ul {
margin:0;padding:0
}

.buttonx li{
display:inline;
margin:0;
padding:0
}

.demo {
border: none;border-radius:2px;
padding: 8px 19px !important; 
background: #E55E48; 
color: #fff !important;
text-align: center; 
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color .4s ease-out 0s;
}

.download {
border: none;border-radius:2px;
padding: 8px 19px !important; 
background: #2ecc71; 
color: #fff !important;
text-align: center; 
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color .4s ease-out 0s;
}

.demo:hover { 
background: #454242;
text-decoration:none 
}

.download:hover { 
background: #454242;
text-decoration:none 
}

.download:before { 
content : "\f019"; 
font-family : FontAwesome; 
font-weight : normal; 
padding :11px 11px 9px !important; 
background : #27ae60; 
margin-left : -19px; 
margin-right : 6px; 
border-radius : 3px 0 0 3px; 
font-size : 16px; 
}

.demo:before { 
content : "\f06e"; 
font-family : FontAwesome; 
font-weight : normal; 
padding : 11px 11px 9px !important; 
background : #c0392b; 
margin-left : -19px; 
margin-right : 6px; 
border-radius : 3px 0 0 3px; 
font-size : 16px; 
} 

<div style="text-align: center;">
<ul class="buttonx">
<li><a class="demo" href="http://hollabacktexas.blogspot.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://hollabacktexas.blogspot.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

Sekian dari saya semoga bermanfaat. Terimakasih

Share Postingan ke Google Plus

Share Postingan Ke Jejaring Social

Submit Ke Google Webmaster

Submit Ke Bing Webmaster

Semoga semua ni dapat bermanfaat bagi anda. Terimakasih

Step

<a href="http://www.alexa.com/siteinfo/umpanmu.blogspot.com">
<script type="text/javascript" src="http://xslt.alexa.com/site_stats/js/s/a?url=umpanmu.blogspot.com"></script>
</a>