Wednesday, 4 March 2015

Comment Composer widget for blogger

Preview your comments before publishing comments on blogger post. This widget allow you to insert emoticons and code snippets as well.

Comment composer widget for preview comment before publishing
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.

Preview comment in blogger

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.

4 Discussion

  1. Thanks for this post dear. Keep posting. Cheers!!

    Regards
    Vashikaran specialist baba

    ReplyDelete
  2. Tushar,

    Your blog is on one the best that I've seen and I would really love to have my comment section set up like yours. I've entered the coding as instructed, but nothing is showing. :facepalm:

    Can you please help? www.sexysandrad.com

    ReplyDelete
  3. Thanks for this blog. provided great information. All the details are explained clearly with the great explanation. Thanks for this wonderful blog. Step by step processes execution are given clearly.Know the details about different thing.
    Digital Marketing Company in Chennai

    ReplyDelete

Note : All comments will be moderated. Do Not Spam.