Check for Updates below this guide.
Latest update dated – 2008-08-23SAT.
If like me you are using DISQUS for your blog or site commenting comments system, then maybe you’ve encountered a problem with integrating it to your custom theme/template. In this simple tutorial, I will show you which code-bits to edit to successfully integrate DISQUS into your Google Blogger/BlogSpot XML-based template. (Basically it’s the same with any theme/template regardless of blog platform or CMS.)
But if you have a Classic Template, then read: HOW TO: Integrate DISQUS on Blogger/BlogSpot Classic Template instead.
Update (2008/08/23SAT): Changed /{YOUR-DISQUS-URL}/ to /DISQUS-SHORT-URL/ to avoid confusion (thanks to hackcrack ^_^ ).
Update (2008/05/26MON): Chinese version (Taiwan) by Blacktale.
WARNING: Be sure to backup your working template before attempting to overwrite it! And this is recommended only if you are comfortable with HTML editing.
DISQUS on the Official HighStreet5 Community Blog, CSS customized
With that said, let’s begin!
Follow up:
======== STEP 1 ========
Step 1: Add this to your CSS area or CSS file
Code:
// Depending on your template, sometimes on some browsers, disqus doesn't auto-width 100% // |
|
#disqus_thread, #disqus_thread #dsq-content { |
|
width: 100%; |
|
} |
======== STEP 2 ========
Step 2.1 Look for:
(this is for: 0 Comment; 1 Comment; 10 Comments. It shows up on your main page)
Code:
|
|
|
|
|
Step 2.2 Change to:
Code:
|
|
|
|
|
|
|
|
View Comments » |
|
|
|
|
======== STEP 3 ========
Step 3.1: Look for:
(this is for: the 0 Comment; 1 Comment; 10 Comments. This shows up when viewing a specific post.)
(Note: Some templates do not have this, so if you can’t find it, don’t bump your head instead, skip to the next step.)
Code:
|
|
1 |
|
|
|
|
|
|
Step 3.2: Change to:
Code:
|
|
|
|
|
|
|
|
|
|
Comments: |
======== STEP 4 ========
Step 4.1: Look for:
Code:
|
Step 4.2: Usually, above that bit (Step 4.1) you will find this:
Code:
|
|
|
|
|
* Note #1: It may be enclosed on a DIV instead of a P element
* Note #2: Sometimes its arranged differently, just look for any bits as shown on Step 4.1, also be sure it looks closely similar.
Step 4.3: Once you find it, change it to:
Code:
|
|
|
|
|
======== STEP 5 ========
Step 5.1: Look for:
Code:
|
Step 5.2: Above it add:
Code:
|
|
|
|
|
|
|
|
|
|
var disqus_url = ' |
|
var disqus_title = document.getElementById('disqus_post_title').innerHTML; |
|
var disqus_message = document.getElementById('disqus_post_message').innerHTML; |
|
|
|
|
|
|
|
blog comments powered by Disqus |
|
|
Note: If above the code-bit on Step 5.1 there is , then put the Step 5.2 code BEFORE . If it isn’t there (there are some templates that doesn’t have it in that position), then just add it up.
Step 5.3: From the Step 5.2 code, change the DISQUS-SHORT-URL to well, your blog’s DISQUS URL.
Example: If your DISQUS URL is LibreSoftware.disqus.com then change DISQUS-SHORT-URL to LibreSoftware, there are two to change!
======== STEP 6 ========
Step 6.1: Look for:
Code:
|
5 responses to “How-To: Add DISQUS Manually on Blogger/BlogSpot”
Reversible interruption of Erb B2 function by trastuzumab Herceptin has been shown to inhibit MAPk and reduce MAPk mediated transcription through cyclin D1 60mg priligy In just a few years, HTC was beaten by the Big Four, Samsung, Apple, and even her grandmother could not recognize it
cost generic cytotec for sale Improved medical treatment in secondary prevention of stroke
Migliorati, S where to buy lasix water pill
I don’t think the title of your article matches the content lol. Just kidding, mainly because I had some doubts after reading the article.
Your point of view caught my eye and was very interesting. Thanks. I have a question for you.