How to Composer Comments in blogger

It all started with implementing emoticons in comment, since the emoticons can’t be seen before publishing the comment. It become quite important for me to provide my readers with this widget in order to comment their problem much effectively.

Therefore I made this tool so as to provide readers preview their comments before publishing it. It not only makes the commenting easy but also add value to the blog post. It will give readers to preview comment with both emoticons and code snippets as shown in below images. 

This widgets uses Prism syntax highlighting to highlight code snippets. Feel free to edit the core code as per your desire. I have removed the ability to insert images in comment since its dependent on the external source of the image. This widget we have provided contain ten variant according to the types of emoticons. 

 How to add comments composer widget in Blogger?

1: Add this below CSS code inside and above ]]></b:skin>. Feel free to edit the below CSS.

/*----- Tabs -----*/
.tabs {
    width:100%;
    display:inline-block;margin-top:10px;
}
 
    /*----- Tab Links -----*/
    /* Clearfix */
    .tab-links:after {
        display:block;
        clear:both;
        content:'';
    }
 
    .tab-links li {
        margin:0px 5px;
        float:left;
        list-style:none;
    }
 
        .tab-links a {
            padding:9px 15px;
            display:inline-block;
            border-radius:3px 3px 0px 0px;
            background:#fff;
            font-size:16px;
            font-weight:600;
            color:#4c4c4c;
            transition:all linear 0.15s;
        }
 
        .tab-links a:hover {
            background:#F09797;
            text-decoration:none;color:#fff !important;
        }
 
    li.active a, li.active a:hover {
        background:#7FB5DA;
        color:#fff !important;
    }
 
    /*----- Content of Tabs -----*/
    .tab-content {
        padding:15px;
    }
 
        .tab {
            display:none;
        }
 
        .tab.active {
            display:block;
        }


.conemo {
  display: block;
  background-color: #FFF;
  border: 5px solid #eee;width: 100%;
}

#emoWrap {
  font: normal bold 12px/normal Tahoma,Verdana,Arial,Sans-Serif;
  text-align: center;
  padding: 10px 14px;
}

.emo,.emoKey {
  display: inline;
  vertical-align: middle;
}

.emoKey {
  border: 1px solid #ccc;
  background-color: #fff;
  font: normal bold 11px/normal Arial,Sans-Serif;
  color: #000;
  margin: 0 0 0 2px;
  padding: 1px 2px;
}


#codes {
  width: 98%;
  height: 200px;
  display: block;
  background-color: #fff;
  font: 400 12px;
  transition: all .5s linear;
  margin: 7px 0 10px;
  padding: 5px;
}

  #comwr{
width: 98%;
}
  .align-left{float:left}
  .align-right{float:right}
  .align-center{float:center}

#codes:focus {
  background-color: #fff;
  color: #666;
  border: 1px solid #ddd;
  outline: 0;
  transition: all .3s linear;
}

.codtext {
line-height:1.5;
font-family:monospace,consolas,sans-serif;
font-weight:400;
font-style:normal;
background-color:#E5E5E5;
color:#000;
padding:0 8px;
}

2: Choose any one of the below code and insert above </head>. Here edit the emocode variable and allow on those emoticons which you want to display. If you want see the emoticons how they look see this articles. Here emo1 is Rice Balls emoticons and so on. 

<!--Choose any one of the below emoticons-->
<!--emo1 - Rice Balls-->
<script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap, #predata",
    pwb = "iframe#comment-editor",
 emocode = " :| ^o^ :@ :-} :s %OD :&#39;( :-! (frown) :o xD (halo) <3 8| :-* 8-0 :D :-# $-) >:-> 8-| >:O P-( :-> +o( :) :p (N) (Y) :&#92; :-{{ ;) (yum) ";
//]]>
</script>
<script type="text/javascript" src="https://blogeutectics.googlecode.com/svn/postfiles/post26/emo1.js"></script>

<!--emo2 - Fancies-->
<script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap, #predata",
    pwb = "iframe#comment-editor",
 emocode = " ^o^ :@ (B) :-} (bomb) (Z) :s 8| :'( >:-> %-6 :/ >:) (X) :D =) <3 (mac) 8-| <:o) P-( :( 8-0 +o( :-# |-) :) (stop) O.O :&#92; (N) (Y) :p x> ;) ";
//]]>
</script>
<script type="text/javascript" src="https://blogeutectics.googlecode.com/svn/postfiles/post26/emo2.js"></script>

<!--emo3 - Trollicons-->
<script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap, #predata",
    pwb = "iframe#comment-editor",
 emocode = " :-Z :-{{ |-( :-V :s :> :O >:) I:| ):-) (fkyeah) |< :-O =) :/ :-| :) :-)) :| 8-| %-} (P) 8| :@ :-@ =D :( :&#39;( @:-) :p (*0*) O.O :-! :-p :< :? :-(0) ";
//]]>
</script>
<script type="text/javascript" src="https://blogeutectics.googlecode.com/svn/postfiles/post26/emo3.js"></script>

<!--emo4 - Onion Club-->
<script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap, #predata",
    pwb = "iframe#comment-editor",
 emocode = " +-( |@ :@ -:| B) :&#39;( |( :? (Y) +_+ :) |) |+) (hi) :f :-( =| :-) <3 X/) :X O.O :-@ :3 :O :( :E |-) :J (stfu) %&lt;) %| o.O (wind) (yawn) ";
//]]>
</script>
<script type="text/javascript" src="https://blogeutectics.googlecode.com/svn/postfiles/post26/emo4.js"></script>

<!--emo5 - Pidgin-->
<script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap, #predata",
    pwb = "iframe#comment-editor",
 emocode = " >-) (A) :< (N) (bye) (mp) (clap) :s B) (^0^) 8*) }:-) :? D: :X (Y) <3 :E :D :b 8-| :-| <:o) :@ ?:| ^:D :( :-> :o +o( :) xD ^.^ &#39;:-) :&#92; :p >:-) >| ;) -_- -o- :| :&#36; (hi5) ({) (}) :-# |-) ";
//]]>
</script>
<script type="text/javascript" src="https://blogeutectics.googlecode.com/svn/postfiles/post26/emo5.js"></script>

<!--emo6 - Simple White-->
<script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap, #predata",
    pwb = "iframe#comment-editor",
 emocode = " ^o^ :@ ^w^ :s B) 8D :&#39;( ;3 }:-) :( :o >) :-) ^_^ ^.^ <3 x| x) 8-D >:D :-3 :-t ^^ +o( :) :| >:) 8) o.O 8( (N) (Y) -_- :p xp :< :/ ;D ;) ;p ";
//]]>
</script>
<script type="text/javascript" src="https://blogeutectics.googlecode.com/svn/postfiles/post26/emo6.js"></script>

<!--emo7 - yolks-->
<script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap, #predata",
    pwb = "iframe#comment-editor",
 emocode = " :@ X| @.@ B) :-Z |D <3 (B) :o x. 8-| :-@ &#39;:) (wtf) +o( |-) o.O :) :D :< -_- +o+ :G O.O xd PD &#39;:| ";
//]]>
</script>
<script type="text/javascript" src="https://blogeutectics.googlecode.com/svn/postfiles/post26/emo7.js"></script>

<!--emo8 - Qip 2005-->
<script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap, #predata",
    pwb = "iframe#comment-editor",
 emocode = " :) :( ;) :p B) :D :&#36; :O :&#39;( 8- d^^b :s |p :-D }:-) B) :-* +o( |^o @^^. (L) (Th) (hi5) <3 (B) (hlp) (Z) 8s :-d 8:@ |-( :-v ;-D d^_^b (nono) d-.-b *^_^* *^O^* ^_^* (bye) (Y) (N) (bang) :-E :-s ";
//]]>
</script>
<script type="text/javascript" src="https://blogeutectics.googlecode.com/svn/postfiles/post26/emo8.js"></script>

<!--emo9 - Wordpress-->
<script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap, #predata",
    pwb = "iframe#comment-editor",
 emocode = " :mrgreen: :arrow: :twisted: :evil: &gt;:D :idea: :oops: :roll: :lol: :cool: :( :) :?  :D :P :o :x :| ;) :!: :?: &lt;3 &gt;-I |_| :burrito: O_o o_O (w) :star: :developer: :bear: ^^&#39; :&#39;( :/ :facepalm: =^-^= :alien: :cat: :dog: :gun: poop :santa: (Y) (N) :victory: ";
//]]>
</script>
<script type="text/javascript" src="https://blogeutectics.googlecode.com/svn/postfiles/post26/emo9.js"></script>

<!--emo10 - Most general forum style-->
<script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap, #predata",
    pwb = "iframe#comment-editor",
 emocode = " :) :( =( :waaa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :yaya: :&#39;( T_T :&#92; :p B) :Q :Ozz 7:( &#92;o/ &#92;m/ **p &lt;3 0:) ^o^ :-a 7:O *fck* xV x@ X@ ~x( &lt;:) &lt;=) (-.-,) *=p =p* &#39;&#39;J :W :bye: :imhere: :cendol: :rolled: *bang* :drummer: :guitarist: :vocalist: ";
//]]>
</script>
<script type="text/javascript" src="https://blogeutectics.googlecode.com/svn/postfiles/post26/emo10.js"></script>

If you like this widget be sure to subscribe us using your email or like/follow on social domains. Thanks for reading.

Share on Google Plus