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.

15 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
  4. HP printer support helpline Toll-free number
    HP printer tech support, hp printer troubleshooting, hp printer not printing, Printer problems, hp printer support number, hp printer support phone number, hp printer support Canada, HP printer support in Canada, HP printer technical support in Canada, hp wireless printer setup, Wireless printer setup, hp printer help support, hp printer customer service number, Printer not printing, HP printer Costumer care number, HP printer help support number, HP printer toll-free number in Canada,
    HP printer support Customer service

    ReplyDelete
  5. Nice Blog!
    SEO means Search Engine Optimization- SEO Services Provider Company in Ghaziabad. We offer professional SEO services in Ghaziabad that serve websites increase their organic search score drastically in progression to compete for the highest rankings — still when it happens to very competitive keywords.
    SEO services in Noida
    SEO services in Delhi NCR

    ReplyDelete
  6. Thank you for sharing this informative Blog!
    A website is a need for a business, whether big or small. If you have a business and don't have a website, you are reasonable missing many opportunities for your business and we are the website design and development company in Ghaziabad to gives on separate design, development, and individuality.
    website company in Noida
    SEO services in Noida
    SEO services in Delhi NCR

    ReplyDelete
  7. Need assistance regarding Website Designing Company in Noida. WebAbridge Solution Pvt Ltd is ready to provide the most catchy and responsive Website Designing. We are Website Designing Company in India.

    ReplyDelete
  8. Need assistance regarding Website Designing Company in Noida. WebAbridge Solution Pvt Ltd is ready to provide the most catchy and responsive Website Designing. We are Website Designing Company in India.

    ReplyDelete
  9. We can learn a lot about Why Deep Learning Works by studying the properties of the layer weight matrices of pre-trained neural networks. And, hopefully, by doing this, we can get some insight into what a well trained DNN looks like–even without peaking at the training data.
    MACHINE LEARNING training in chennai

    ReplyDelete
  10. WebAbridge Solutions is a professional website development company in Ghaziabad providing custom website development services. Our web development firm aim is to offer you a website that reflects your business target and which will be an exclusive platform for your visitors and potential buyers.

    ReplyDelete
  11. SQream Technologies provides you with a state of the art software which combines modern GPU technology (Graphic Processing Units) with the best practices in today’s Big Data platforms, providing up to 100x faster insights from data.
    Bigdata Training in Chennai OMR

    ReplyDelete
  12. WebAbridge Solutions is such a web development company in Ghaziabad, providing the best tailor-made service .We are the only web development company in Delhi that is placed steadily in today’s competitive world markets. It has a very creative and impressive group that are experts in not only creating and creating websites but also holding their current consumer base. Their concentrate depends on providing 100% customer satisfaction.
    https://www.webabridgesolutions.com/

    ReplyDelete
  13. Thanks for this useful blog!
    Hire which use latest technology for web development. Visit foremost Website Development Company in Ghaziabad, India.


    seo services in ghaziabad

    ReplyDelete

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