A long day after , I have been came back to blogging. Today , I'm discussed an advanced gplus comment system for blogger. In this plugin use click jquery function to enable gplus comment system.
I had been discussed before 'New tabbed Social Share , subscribe and connect widget' for Blogger and finally decide to on user request to integrate this widget with gplus comment system.
 |
| gplus comment system |
Apply First your blogger : How To Add Google Plus Comment System in Blogger?
See this given below tutorial carefully and apply your Blogger Blog system step by step -
How does It Worked?
How to Add this widget on Blogger
- Go To Blogger Dashboard >Template >Edit HTML.
- Now Search (CTRL + F) for this code: ]]></b:skin>
- Paste the below code just above ]]></b:skin>
/* dhi social share subscribe and connect widget css code----------------------------------------------- */.dhi_menu,.dhi_menu ul,.dhi_menu li,.dhi_menu a { margin: 0; padding: 0; border: none; outline: none;}.dhi_menu { height: 40px; width: 304px; background: #b8b8bc; background: -webkit-linear-gradient(top, #b8b8bc 0%,#38383a 10%); background: -moz-linear-gradient(top, #b8b8bc 0%,#38383a 10%); background: -o-linear-gradient(top, #b8b8bc 0%,#38383a 10%); background: -ms-linear-gradient(top, #b8b8bc 0%,#38383a 10%); background: linear-gradient(top, #b8b8bc 0%,#38383a 10%); } .dhi_menu:hover { height: 40px; width: 304px; background: #4c4e5a; background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 10%); background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 10%); background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 10%); background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 10%); background: linear-gradient(top, #4c4e5a 0%,#2c2d33 10%); }.dhi_menu li { list-style: none; float: left; display: block; height: 40px;}.dhi_menu li a { display: block; padding: 0 14px; margin: 6.3px 0; line-height: 28px; text-decoration: none; border-left: 1px solid #393942; border-right: 1px solid #4f5058; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: #f3f3f3; text-shadow: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in-out; transition: color .2s ease-in-out;}.dhi_menu li:first-child a { border-left: none; }.dhi_menu li:last-child a{ border-right: none; }.dhi_menu li:hover > a { color: #8fde62; }.dhi_menu ul { position: absolute; left: 0; opacity: 0; background: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; -webkit-transition: opacity .25s ease .1s; -moz-transition: opacity .25s ease .1s; -o-transition: opacity .25s ease .1s; -ms-transition: opacity .25s ease .1s; transition: opacity .25s ease .1s;}.dhi_menu li:hover > ul { opacity: 1; }.dhi_menu ul li { height: 0; overflow: hidden; padding: 0; -webkit-transition: height .25s ease .1s; -moz-transition: height .25s ease .1s; -o-transition: height .25s ease .1s; -ms-transition: height .25s ease .1s; transition: height .25s ease .1s;}.dhi_menu li:hover > ul li { height: 36px; overflow: hidden; padding: 0;}.dhi_menu ul li a { width: 75px; padding: 4px 0 4px 40px; margin: 0; border: none; border-bottom: 1px solid #353539;}.dhi_menu ul li:last-child a { border: none; }.dhi_menu a.twitter { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwsr9P1azUn5KSVMgKCWkhxfag-_F6Stb_J-OeGpmLBVClGhvQPcWd21Y8VNaW8vkQqi2F-Fqg1cJKjihs0uM-twCF5Q6P8NxVGzFdL4FPDR0o_OxaY06qsC1C0VaF99gPMmUpFl2zf20/s1600/03-twitter-20.png) no-repeat 6px center; background-color:#0ba6f7; }.dhi_menu a.comment { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqb02zvDs921NsRpokbrer4aDPH_7XMZpU2qbS111jsK1GMDV0ehMn1oycT9YPr0KGeLvm8cX3W8fNTH8YE3VHkLMEeWj7Y8TRupe8fP9nq5hRz28L97Y9MUxhTakNPVtIoO7hr2QC3zg/s1600/bubble-24-20.png) no-repeat 6px center; background-color:#1950bf; }.dhi_menu a.share { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgACFlADJNsDWSQDuskBqqwROV_R9qV_Zkb2QryhyphenhyphenBMv66qTnldATBvHjCnzcCV8wn1EVGvnXD6b14o5UK9SSs4DphCUqtpPAOOD0LWCwsjaaFv1xDy2fqTj5J_dL7vUdHM8kOhe583t2k/s1600/06-facebook-20.png) no-repeat 6px center; background-color:#3b3c3c; }.dhi_menu a.plus { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtv1G-7PdT3M2xfTTPt4Pwnv1m7weaMVLEGoz7bGXDKAYQNKFVxlo448G0LKW-BPfwvF461fKi775AM4VNFK0urVJrH7adDoOam3oLRE4uPLo-2FBkQRHKT7kQbej9wprvD3ipTbUCymA/s1600/40-google-plus-20.png) no-repeat 6px center; background-color:#dc311b; }.dhi_menu a.rss { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvXMDDNeQYXOBfsVwFHd29iv1BfXeTi_OUK06S4eTyBQUSRG2Itx34Bh983wgGrs_Jm2TlOMrO2uryfXoyMSB8XC6kmL6XxDng9nwpWWOC0aMTr13Sa3BNC1Sg9UJ7jlLtUzZROng4uXI/s1600/60-rss-20.png) no-repeat 6px center; background-color:#dc311b; }.dhi_menu a.newsletter { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaViAihComUv2aF2lxBKoB16HBs9cJEM-72wBQwiJRa30aLr2MVkOEeWrxHnjMH-6V5q_jULZOQZ50qD0DsnZ6GbD0UIIzL4Ni6kGycIjySGUWYK-Kgc79bgzetE40nZxDs3MqTfpIhSI/s1600/Black_Email.png) no-repeat 6px center; background-color:#3b3c3c; }.dhi_menu a.faq { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ZT3hUxOzAL7fqtsaYlDCiCx8FZrwrp9Hetgv1aqd_5dHrHh6HebxLAxsEhjcUc7P5moSHy5_66IXkUZmt2whGAar4WQ8X7Ekw1Qtfc9fvk3wXLWHiVvNCb5FGq6ZgwAhotjTIDXP7sI/s1600/question-faq-128.png) no-repeat 6px center; background-color:#1950bf; }.dhi_menu a.follow { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwsr9P1azUn5KSVMgKCWkhxfag-_F6Stb_J-OeGpmLBVClGhvQPcWd21Y8VNaW8vkQqi2F-Fqg1cJKjihs0uM-twCF5Q6P8NxVGzFdL4FPDR0o_OxaY06qsC1C0VaF99gPMmUpFl2zf20/s1600/03-twitter-20.png) no-repeat 6px center; background-color:#0ba6f7; }.dhi_menu a.fanpage { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgACFlADJNsDWSQDuskBqqwROV_R9qV_Zkb2QryhyphenhyphenBMv66qTnldATBvHjCnzcCV8wn1EVGvnXD6b14o5UK9SSs4DphCUqtpPAOOD0LWCwsjaaFv1xDy2fqTj5J_dL7vUdHM8kOhe583t2k/s1600/06-facebook-20.png) no-repeat 6px center; background-color:#1950bf; }.dhi_menu a.youtube { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb8oIn6cfFda8M9M1u1dLSXWOqQ-a1RRyui41ufRIZ5RVDQZopZhDQFkQfCrmEZgd51nfOirehmdTgqy_F25R3gn27pSlEyP9SUrUEt_t8sldS0Gli6Kh4zwzwgDq3nsPPUT84NKx4wFQ/s1600/18-youtube-20.png) no-repeat 6px center; background-color:#0b6fdf; }.dhi_menu a.google { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtv1G-7PdT3M2xfTTPt4Pwnv1m7weaMVLEGoz7bGXDKAYQNKFVxlo448G0LKW-BPfwvF461fKi775AM4VNFK0urVJrH7adDoOam3oLRE4uPLo-2FBkQRHKT7kQbej9wprvD3ipTbUCymA/s1600/40-google-plus-20.png) no-repeat 6px center; background-color:#dc311b; }li a.cmtloaded {display: none !important;}
- Now Search the following code: <div class='post-footer'> OR <div class='post-footer-line post-footer-line-1'>
- Just after <div class='post-footer-line post-footer-line-1'> , copy and paste the below code :
<b:if cond='data:blog.pageType == "item"'><!--social button--><!--dhi social share subscribe and connect widget code By Digital Hub Inc--> <ul class='dhi_menu'> <li> <a href='#'> share ▼ </a> <ul> <li> <a class='twitter' data-via='blogsfunda' expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank' title='Tweet This!'> twitter </a> </li> <li> <a class='share' expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank' title='Share this on Facebook'> share </a> </li> <li> <a class='comment' href='#comments1' id='cmtbtn'> comment </a> </li> <li> <a class='comment' href='#comments2' id='comments-gplus'> plus </a> </li>
</ul> </li> <li> <a href=''> subscribe ▼ </a> <ul> <li> <a class='rss' href='http://feeds.feedburner.com/blogsfunda' target='_blank'> rss </a> </li> <li> <a class='newsletter' href='http://feedburner.google.com/fb/a/mailverify?uri=blogsfunda' target='_blank'> newsletter </a> </li> <li> <a class='faq' href='#faq' target='_blank'> faq </a> </li><li> <a class='plus' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&imageurl="' rel='nofollow' target='_blank' title='Post on GoogleBuzz'> plus </a> </li> </ul> </li> <li> <a href='#'> connect ▼ </a> <ul> <li> <a class='follow' href='http://twitter.com/blogsfunda' target='_blank'> follow </a> </li> <li> <a class='fanpage' href='http://facebook.com/blogsfunda' target='_blank'> fanpage </a> </li> <li> <a class='youtube' href='https://www.youtube.com/user/Windows8Tech' target='_blank'> youtube </a> </li> <li> <a class='google' href='https://plus.google.com/116441114801311321617/' target='_blank'> google </a> </li> </ul> </li> </ul> <br/> </b:if>
- Now Search the following code: </body>
- Just above it </body> , copy and paste the below code :
<script type='text/javascript'>(function($) { $('#comments-gplus').click(function(){$(this).text('Loading...');$.getScript('https://apis.google.com/js/plusone.js', function() {$('#comments-gplus').addClass('cmtloaded');});$(this).unbind('click');});})(jQuery);</script>
- Now Search the following code: <b:includable id='nextprev'>
- Just above it <b:includable id='nextprev'> , copy and paste the below code :
<div id='gcontainer'><div id='gcomments'/></div><script src='http://apis.google.com/js/plusone.js'/><script>gapi.comments.render('gcomments', { href: window.location, width: '545', first_party_property: 'BLOGGER', view_type: 'FILTERED_POSTMOD'});
$('#comments-gplus').click(function(){ // switch to google plus comments displaying $('#comments').css('display','none'); $('#gcontainer').css('display','block'); $('#comments-gplus').addClass('comment-on'); $('#comments-gplus').attr('src','http://lh3.googleusercontent.com/-oNlD347wl3k/UXVi7AiBdHI/AAAAAAAAILc/NxAyb8fwEfI/s50/plus_on.png');});
$('#comments-gplus').hover( // switch to gplus comments displaying function(){ if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','http://lh3.googleusercontent.com/-oNlD347wl3k/UXVi7AiBdHI/AAAAAAAAILc/NxAyb8fwEfI/s50/plus_on.png');} }, function(){ if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png');} });</script><style>#gcontainer { display: none;}#comments-gplus {} #gcontainer {}</style>
- Save the template.That's it:)
How to customize this widget
1. If you want to use for comment moderation for blogger comment and disqus comment (Use for activate comment box).
<a class='comment' href='#comments1' id='cmtbtn'>comment</a>
2. Replace the feedburner id : blogsfunda
3. Replace the twitter follow id :blogsfunda
4. Replace the facebook page id : blogsfunda
5. Replace the google plus page id : 116441114801311321617
6. Replace the youtube page id : Windows8Tech
See More Tutorials on :
Blogger Blogger Widget TutorialsATTENTION: This widget and its coding are solely generated by Ghanshyam Singh. However, anyone can share this widget on his blog until or unless he gives proved credits to Digitalhubinc.com and blogsfunda.com . It’s a warmhearted request from our Team.
If you like this tutorial drop your valuable comment and Please share & like this post.
