Multi Choice Comments For Blogger

Increasing competition between blogs and social networking, in fact it is very profitable for bloggers. Because, it led to fierce competition from providers of blogs and social networks should continue to improve its quality. Unfortunately, blogs and social networking is something separate. Few party capable of uniting them. The main interactions that occur among the users of the blog is through the comments field. And to strengthen the interaction between the users of your site, then we make a tutorial about multi choice comments for bloggers.

---

Review

Previously, we have discussed about making a multi-tab and facebook comment. Live demo of the tutorial you can see from the comment section, we purposely did that so that users can easily keep abreast of all our tutorials. So you are easy to understand. We expect it. The difference is, you must replace the entire contents of <div id='first'>, <div id='second'>. Replace contents with the comment blogger and facebook. And for <div id='third'> you can delete.

---

Practice

(Caution: we use standard templates from blogger.com) The first step is to put the javascript code in the code below before . Or, you can also do it in (of course you already know the Edit HTML tab on bloggers, right).

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script> <script charset="utf-8" type="text/javascript"> $(function () { var tabContainers = $('div.tabs > div'); tabContainers.hide().filter(':first').show(); $('div.tabs ul.tabNavigation a').click(function () { tabContainers.hide(); tabContainers.filter(this.hash).show(); $('div.tabs ul.tabNavigation a').removeClass('selected'); $(this).addClass('selected'); return false; }).filter(':first').click(); }); </script>  

Step two, put the following css code before ]]></b:skin> you can change the model and color, how to replace it you can learn through the tutorial css.

ul.tabNavigation { list-style: none; margin: 0; padding: 0; } ul.tabNavigation li { display: inline; } ul.tabNavigation li a { padding: 3px 5px; background-color: #00FFFF; color:black; text-decoration: none; } ul.tabNavigation li a.selected, ul.tabNavigation li a:hover { background-color: #0000FF ; color: #fff; padding-top: 7px; } ul.tabNavigation li a:focus { outline: 0; } div.tabs > div { padding: 5px; margin-top: 2px; border: 1px solid #C0C0C0; } div.tabs > div h2 { margin-top: 0; } #first { background-color: white; } #second { background-color: white; } #third { background-color:white; }  

The third step, find the following code

<b:includable id='comments' var='post'> <div class='comments' id='comments'> <a name='comments'/> . . . bla bla bla . . . <b:if cond='data:post.showBacklinks'> <b:include data='post' name='backlinks'/> </b:if> </div> </div> </div> </b:includeable> </b:widget>  

That code is for display the comments bloggers, replace that code with the following code

<b:includable id='comments' var='post'> <!--multi tab--> <br/> <b:if cond='data:blog.pageType == "item"'> <div class='tab'> <!--multi tab--> <ul class='tabNavigation'> <li><a href='#first'>Comment via blogger</a></li> <li><a href='#second'>Comment via facebook</a></li> </ul> <div id='first'><br/> <div class='comments' id='comments'> <a name='comments'/> . . . bla bla bla . . . <b:if cond='data:post.showBacklinks'> <b:include data='post' name='backlinks'/> </b:if> </div> </div> </div> <!--multi tab--> </div> <div id='second'> <!--multi tab--> <!--facebook--> <b:if cond='data:blog.pageType == "item"'> <br/> <fb:comments-count expr:href='data:post.url'/> awesome comments <fb:comments colorscheme='light' data-num-posts='3' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='550'/> </b:if> <!--multi tab--> </div> </div> </b:if> <!--multi tab--> </b:includable> </b:widget>  

then save. Look at your handiwork. Now you have two choices for comment. It's like a yahoo site that has two commentary options. One thing you must know, we design this tutorial for each post. So it will not show if page is not on a post page. Make sure, that you have choose Comments (on Setting tab -> Comments) is Show, Comment Form Placement is Embedded below post.