Nach Bildung

“Die arbeitenenden Klassen streben nach Bildung, weil sie sie für ihren Sieg brauchen”

Labour and knowledge is a source of success in every profession. If you have no talent, then—learn, read, study, practice and work as much as you are able. It really helps to succeed.

Thursday 6 December 2012

Add Disqus Comments widget easily to Blogger

Preface

I already wrote in past about adding Disqus comments box, however I decided to add a few words and show how to do that really fast and easy.

To be honest, Blogger default comment box is... well, pretty ugly. Worst thing is that it is iframe and there is no access to its styles. So, what ever you will do in your custom css it will not affect comment box look. Hence, there are should be some alternative. Disqus is a good one. It is styled very well by default and you can modify styles yourself if you want.

Disqus has Blogger widget and by two clicks you can add it to your current Blogger blog. First thing to do is naturally, to sign up to Disqus. Enter your blog URL, its name, click on Blogger icon, confirm and that's it, you are done. Disqus widget automatically landed onto your layout widgets area in Blogger.

In custom templates layout maybe (and likely) is rebuilt and reconstructed by designer. Therefore Disqus widget may land absolutely not in that place where you want it to be. You will want it under blog post definitely while widget may be found in Blogger section class .sidebar.

First of all you need to find it inside your xml file and then move it to proper place. While you are in Blogger dashboard, click Template–Edit HTML–Proceed. Code of your template is in front of your eyes. Find this line of code:

 

You can use ctr+f to find it faster. Next thing is to find actually your blog posts block. It is this very line of code:




Well, what is left to do is to move the line of Disqus comments code under the line of blog posts code. Naturally, you will need to copy comments code line, delete it and paste under id Blog1. And your code will look this way:




 
Disqus comment widget

Further you can go to your css file and define some styles for #disqus_thread.For example it may look this way:

/* ------------------------------------------------------------------------------------
--  post: Disqus comments (#HTML3)
------------------------------------------------------------------------------------ */
#disqus_thread{
float:left;
padding:4%;
width:91.8%;
background:#f0f0f0;
margin-top:20px;
border:1px solid #fff;
}

Naturally, id of your Disqus widget may vary, depends how many HTML/Javascript widgets from Blogger gadgets list are already placed onto the blog. That's it, as simple as that.

0 comments:

Post a Comment