About The widget
These days the people are in a race to increase their reach and SEO and the best way to increase the reach is comments.Through comments,people are able to express themselves and you are able to know what people think about you.People comment only on the blog's on which they are able to find comment system on which they don't need to login/signup or are easier to use,so today I will provide you a tutorial to add a multiple in one comment system to blogger same as you can see on my blog.Indirectly through comments only ,search engines come to know about the fact that how much the website is reached and it's reactivity, so it affects blog's SEO
Steps To Add The Widget:-
- Go to Template Section Of Your Blog
- Click on Edit Html button
- Find <head> tag in your blog's html.You can use Ctrl+F to easier your work
- Add the following code just below the <head> tag of your html:-
<meta content='Your facebook app id' property='fb:app_id'/> <meta content='your facebook username' property='fb:admins'/>
- Now go to the place in your html code where you want to add the comments for example <data:post.body> or post-footer-line post-footer-line-1 etc.
- Add the following set of codes below the code where you want the comments to appear:-
<!--Comments by http://technopcarea.blogspot.com/ Start--> <b:if cond='data:blog.pageType == "item"'> <script src='http://code.jquery.com/jquery-1.9.1.js'/> <script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'/> <script> $(function() { $( "#tabs" ).tabs(); }); </script> <fieldset> <legend> Open Up Yourself,To Comment Use... </legend> <style> fieldset { color:#3d3d3d; background:#ebebeb; border-radius:10px 10px 10px 10px; -moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; width:auto; padding:20px 43px; cursor:pointer; margin:0 auto; } .fieldset:active{ cursor:pointer; position:relative; top:2px; } } .legend:active{ cursor:pointer; position:relative; top:2px; } legend { font:normal 19px Sniglet; font-style:normal; color:#000000; background:#e0e0e0; border:0px solid #ffffff; text-shadow:0px 0px 3px #524b52; box-shadow:-1px 4px 7px #000000; -moz-box-shadow:-1px 4px 7px #000000; -webkit-box-shadow:-1px 4px 7px #000000; border-radius:26px 10px 26px 10px; -moz-border-radius:26px 10px 26px 10px; -webkit-border-radius:26px 10px 26px 10px; padding:8px 29px; cursor:pointer; margin:0 auto; } .legend:active{ cursor:pointer; position:relative; top:2px; } /* jQuery for Multi comment Tab */ .ui-tabs { position: relative;/* position: relative "fixed") */ padding: 0em; } .ui-tabs .ui-tabs-nav { margin: 0; padding: 0em 0em 0; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0; margin: 1px .2em 0 0; padding: 0; white-space: nowrap; } .ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; } .ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px; } .ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-tabs-loading a { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXh7P4FuTKdCyuEGkcBIca-dJUuzsHDeDLehBfVH5pRXxVdX-0XPHgl2LwnpOMcE-1YERyh7YKsC-zDUJGbAdopNlcDjKlEJndMuBdnMHpKmOiHOJQOfPvi3J0-CnCcHKnvLwGXVNoUU/s1600/bg-tab.png") repeat-x scroll left top rgb(85, 149, 37); color: rgb(255, 255, 255); font-weight: bold; border-width: 1px ; border-style: solid solid none; border-color: -moz-use-text-color; -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; } .ui-tabs .ui-tabs-nav li a, /* first selector... */ .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a { cursor: pointer; font-size: 13px; color: #ffffff; font-family: Sniglet; font-size: 13px; } .ui-tooltip { position: relative; color:#fff; padding:0.6em 1.3em; line-height:1em; text-decoration:none; text-align:center; white-space: nowrap; } .ui-tabs.small span { font-size:12px; } .ui-tabs.medium span { font-size:14px; } .ui-tabs.large span { font-size:18px; } .ui-tabs.small span { font-size:12px; } .ui-tabs.medium span { font-size:14px; } .ui-tabs.large span { font-size:18px; } .ui-tabs.black { background-color: #333333; } .ui-tabs.gray { background-color: #666666; } .ui-tabs.white span{ color: #666666; } .ui-tabs.red { background-color: #e62727; } .ui-tabs.orange { background-color: #ff5c00; } .ui-tabs.magenta { background-color: #3b5998; } .ui-tabs.yellow { background-color: #ffb515; } .ui-tabs.blue { background-color: #00ADEE; } .ui-tabs.pink { background-color: #e22092; } .ui-tabs.green { background-color: #91bd09; } .ui-tabs.rosy { background-color: #F16C7C; } .ui-tabs.brown { background-color: #804000; } .ui-tabs.purple { background-color: #FE2E2E; } .ui-tabs.cyan { background-color: #46C7C7; } .ui-tabs.gold { background-color: #D4A017; } </style> <div id='tabs'> <ul> <li> <a class='ui-tabs small magenta' href='#tabs-1'> Facebook </a> </li> <li> <a class='ui-tabs small blue' href='#tabs-2' id='disqus-comments' onclick='load_disqus()'> Disqus </a> </li> <li> <a class='ui-tabs small orange' href='#tabs-3'> Blogger </a> </li> <li> <a class='ui-tabs small purple' href='#tabs-4'> Google+ </a> </li> </ul> <div id='tabs-1'> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <fb:comments expr:href='data:post.url' num_posts='10' style='' width='500'/> </div> <div id='tabs-2'> <br/> <div id='disqus_thread'/> <div id='disqus_loader' style='text-align: center'> <script> function load_disqus() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = "http://technopcarea.disqus.com/embed.js"; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); var ldr = document.getElementById('disqus_loader'); ldr.parentNode.removeChild(ldr); } </script> </div> </div> <div id='tabs-3'> <div class='comments' id='comments'> <a name='comments'/> <h4> <data:post.commentLabelFull/> : </h4> <div class='comments-content'> <b:if cond='data:post.embedCommentForm'> <b:include data='post' name='threaded_comment_js'/> </b:if> <div id='comment-holder'> <data:post.commentHtml/> </div> </div> <p class='comment-footer'> <b:if cond='data:post.allowNewComments'> <b:include data='post' name='threaded-comment-form'/> <b:else/> <data:post.noNewCommentsText/> </b:if> </p> <b:if cond='data:showCmtPopup'> <div id='comment-popup'> <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'> </iframe> </div> </b:if> <div id='backlinks-container'> <div expr:id='data:widget.instanceId + "_backlinks-container"'> <b:if cond='data:post.showBacklinks'> <b:include data='post' name='backlinks'/> </b:if> </div> </div> </div> </div> <div id='tabs-4'> <script src='https://apis.google.com/js/plusone.js'/><link href='http://googledrive.com/host/0B52nnG4Ig6FzVHQyUWtnV2FjZ0U' /> <div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='500' expr:data-href='data:post.url'> </div> </div> </div> </fieldset> </b:if> <!--Comments by http://technopcarea.blogspot.com/ End-->
- Now preview your blog before saving the template and you are done.
Customizations
- Go to line 216 and replace my disqus username with yours.It's written ""http://technopcarea.disqus.com/embed.js"" ,replace technopcarea with your username
Comments With Link Not Related To Post Are Deleted