#Label1 ul li a:hover{color:#fff;text-decoration:none} #Label1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding-top: 10px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #Label1 ul li:first-child:after, #Label1 ul li:first-child + li:after, #Label1 ul li:first-child + li + li:after, #Label1 ul li:first-child + li + li + li:after, #Label1 ul li:first-child + li + li + li + li:after, #Label1 ul li:first-child + li + li + li + li + li:after, #Label1 ul li:first-child + li + li + li + li + li + li:after, #Label1 ul li:first-child + li + li + li + li + li + li + li:after, #Label1 ul li:first-child + li + li + li + li + li + li + li + li:after, #Label1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #Label1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #Label1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #Label1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #Label1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #Label1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #Label1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #Label1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #Label1 ul li:first-child + li + li + li + li + li:after{content:"6"} #Label1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #Label1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #Label1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #Label1 ul li:first-child + li + li + li + li:after{content:"5"} #Label1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #Label1 ul li:first-child + li + li + li:after{content:"4"} #Label1 ul li:first-child + li + li{background:#ffde4c;width:90%} #Label1 ul li:first-child + li + li:after{content:"3"} #Label1 ul li:first-child + li{background:#ff764c; width:90%} #Label1 ul li:first-child + li:after{content:"2"} #Label1 ul li:first-child{background:#ff4c54 ;width:90%} #Label1 ul li:first-child:after{content:"1"} #Label1 ul{margin:0;padding:0px 0;list-style-type:none} #Label1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px} -->
Subscribe For Free Updates!

We'll not spam mate! We promise.

Tuesday, July 30, 2013

Display Smiley Emotions Above Blogger Comment Box


Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find ]]></b:skin> by pressing Ctrl + F

Step 4 Copy the below code and Paste it Before/above ]]></b:skin> and Save the templates.


/*Widget By www.bloggerspice.com*/
.BSemoWrap {
  background-color:#fff;
  width: Auto;
  border:2px solid#000000;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
  padding:10px 14px;
  color:black;
  font:bold 12px Tahoma,Arial,Sans-Serif;
  text-align:center;
}
img.emo, input.BSemoKey {
  display:inline-block; /* Penting! */
  *display:inline;
  vertical-align:middle;
}
input.BSemoKey {
  border:1px solid #ccc;
  background-color:white;
  font:bold 11px Arial,Sans-Serif;
  padding:1px 2px;
  margin:0px 0px 0px 2px;
  color:black;
}


Step 5 Now again Find </head> by pressing Ctrl + F

Step 6 Copy the below code and Paste it Before/above </head> and Save the templates.


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.BSemoWrap",
    putEmoAbove = "iframe#comment-editor",
    emoMessage = "To insert emoticon you must added at least one space before the code.";
//]]>
</script>
<script src=' http://bloggerspicebd.googlecode.com/files/BSEmoticons.www.bloggerspice.com.js' type='text/javascript'/>

Customization:

  • If you found this code http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js then paste the code  only this line <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>