Selasa, 28 Mei 2013

Menambahkan Emoticon Pada Komentar Blogspot

Gusti Ardias Riantono Mei 28, 2013 Tutorial 7 comments

Menambahkan Emoticon Pada Komentar Blogspot - Hay sobat blogger, apa kabar? Semoga sehat-sehat saja ya :). Oke pada kali ini saya akan memberikan tutorial kecil Bagaimana Menambahkan Emoticon Pada Komentar Blogspot kalian. Kurang lebih seperti ini:

Nah bagaimana cara membuatnya? Ayo ikuti langkah-langkah berikut :D

1. Kalian login ke Blogger.com.
2. Pilih menu Template dan kemudian pilih Edit HTML.
3. Cari kode </body>, Untuk mempermudah gunakan CTRL+F kemudian cari </body>.
4. Copy kode dibawah ini tepat diatas kode </body>.
5. Kemudian cari kode ]]></b:skin>, Gunakan CTRL+F untuk mempermudah pencarian. 6. Copy kode dibawah ini tepat di atas ]]></b:skin>.

.emoWrap {
  position:relative;
  padding:10px;
  margin-bottom:7px;
  background:#fff;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* Opera */
background-image: -o-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #FFFFFF), color-stop(1, #FFF9F2));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to left, #FFFFFF 0%, #FFF9F2 100%);
  border:3px solid #860000;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  -moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  -webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  font-weight:normal;
  color:#333;
}
.emoWrap:after {
  content:"";
  position:absolute;
  bottom:-10px;
  left:10px;
  border-top:10px solid #860000;
  border-right:20px solid transparent;
  width:0;
  height:0;
  line-height:0;
}

7. Kemudian simpan template dan lihat hasilnya. Walaa, mudah bukan? :) Jika emoticon turun kebawah buka link ini.