Manually adding a Disqus gadget to Blogg

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div id="support-main"><br /><br /><br /><div class="article-content"><br />If the <a href="http://disqus.com/admin/blogger">Disqus gadget installer</a> isn't working, you have the option of manually installing the gadget on your Blogger site. This will require editing your Blogger template HTML, so it won't work with Dynamic Views templates.<br /><br /><br /><br /><b> Add a new gadget</b><br /><br /><br /><br /><ol><br /><li>Go to your Blogger "Layout" section and click <b>Add a gadget</b> in the sidebar<br /><br /><br /><br /><img alt="" src="http://dl.dropbox.com/u/13552259/Screenshots/2h3r9~oj9gtu.png" /></li><br /><li>In the Add a Gadget popup, scroll down to find the <b>HTML/Javascript</b> gadget and click the + button<br /><br /><br /><br /><img alt="" src="http://dl.dropbox.com/u/13552259/Screenshots/p91e~aniyct_.png" /></li><br /><li>Enter <i>Disqus</i> as the <b>title</b> and the following code for the <b>content</b>:<br /><br /><pre><code><!-- Disqus comments gadget --></code></pre><br /></li><br /><li>Click save and the window will close</li><br /><li>Click <b>Save arrangement</b> in the Layout viewer</li><br /></ol><br /><br /><br /><h2><br />Add the Disqus code to your template</h2><br /><br /><br /><ol><br /><li>Go to your blog's <b>Template</b> section and then click the "Edit template" button<br /><br /><br /><br /><img alt="Edit template button within Blogger template editor" src="http://disqus-cloudfront.s3.amazonaws.com/docs/install-blogger-edittemplate.png" /></li><br /><li>Click inside the text area and search for the widget you just created in your HTML template by pressing Ctrl-F (Command-F on OSX) then typing <i>Disqus</i>. You should find the following line:<br /><br /><pre><code><b:widget id='HTML1' locked='false' title='Disqus' type='HTML'></code></pre><br /></li><br /><li>Change that line to add <b>mobile='yes'</b> to load Disqus on your mobile template. It will look like this when you're done:<br /><br /><pre><code><b:widget id='HTML1' locked='false' mobile='yes' title='Disqus' type='HTML'></code></pre><br /></li><br /><li>Below that locate and <b>DELETE</b> the following code right before the closing tag. The section you're deleting should look like this:<br /><br /><pre><code><b:includable id='main'><br /> <!-- only display title if it's non-empty --><br /> <b:if cond='data:title != &quot;&quot;'><br /> <h2 class='title'><data:title/></h2><br /> </b:if><br /> <div class='widget-content'><br /> <data:content/><br /> </div><br /> <b:include name='quickedit'/><br /></b:includable></code></pre><br /></li><br /><li>BEFORE the closing <code></b:widget></code> tag, add the following Disqus code (remember to change <b>EXAMPLE</b> to your site's shortname – you should leave both '&#39;' characters on either side of the shortname):<br /><br /><pre><code><b:includable id='main'><br /> <script type='text/javascript'><br /> var disqus_shortname = &#39;EXAMPLE&#39;;<br /> var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;<br /><br /> if (!disqus_blogger_current_url.length) {<br /> disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;<br /> }<br /><br /> var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;<br /> var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;<br /> </script><br /><br /> <b:if cond='data:blog.pageType == &quot;item&quot;'><br /> <style type='text/css'><br /> #comments {display:none;}<br /> </style><br /><br /> <script type='text/javascript'><br /> (function() {<br /> var bloggerjs = document.createElement(&#39;script&#39;);<br /> bloggerjs.type = &#39;text/javascript&#39;;<br /> bloggerjs.async = true;<br /> bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_item.js&#39;;<br /> (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);<br /> })();<br /><br /> </script><br /> </b:if><br /> <style type='text/css'><br /> .post-comment-link { visibility: hidden; }<br /> </style><br /><br /> <script type='text/javascript'><br /> (function() {<br /> var bloggerjs = document.createElement(&#39;script&#39;);<br /> bloggerjs.type = &#39;text/javascript&#39;;<br /> bloggerjs.async = true;<br /> bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_index.js&#39;;<br /> (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);<br /> })();<br /><br /> </script><br /></b:includable></code></pre><br /></li><br /><li>Click <b>Save template</b>. Assuming there are no errors, Disqus should properly show up on your site now.</li><br /><li> (Optional) Verify that the meta tags in your Blogger Template do not force Internet Explorer to load using IE7 standards. For more information see <a href="http://help.disqus.com/customer/portal/articles/666084-troubleshooting-disqus-in-internet-explorer-8-9-10#IE7-standards">Troubleshooting Disqus in Internet Explorer 8/9/10</a><br /><br /></li><br /></ol><br /><br /></div><br /></div><br /><div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"><br /><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=b9b83919-29a1-4dbf-940d-05cbeff21651" style="border: none; float: right;" /></div><br /></div><br />

• 
• 
• 
• 

1. 1
2. 2
3. 3
4. 4

• Previous
• Next

Manually adding a Disqus gadget to Blogg

If the Disqus gadget installer isn't working, you have the option of manually installing the gadget on your Blogger site. This will require editing your Blogger template HTML, so it won't work with Dy…

Read more »

Installing X-Ray Goggles

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><br /><br /><section><br /> <header><h2><br />Installing X-Ray Goggles</h2><br /></header><br /> <div class="content"><br /><noscript><br /> <div class="alert"><br /> <p><br />In order to use the goggles, you need to have JavaScript enabled.</p><br /><p><br />Please enable it or use a browser that supports it.</p><br /></div><br /></noscript><br /><br /> <br /><br /><div class="alert msie-only" style="display: none;"><br />Sorry, but the <a class="zem_slink" href="http://en.wikipedia.org/wiki/Goggles" rel="wikipedia" title="Goggles">goggles</a> don't yet work on <a class="zem_slink" href="http://www.microsoft.com/windows/internet-explorer/" rel="homepage" title="Internet Explorer">Microsoft Internet Explorer</a>.<br /><br />Until they do, please use the latest version of <a href="http://mozilla.org/firefox">Firefox</a>, <a class="zem_slink" href="http://www.opera.com/" rel="homepage" title="Opera">Opera</a>, <a class="zem_slink" href="http://www.google.com/chrome" rel="homepage" title="Google Chrome">Chrome</a>, or <a class="zem_slink" href="http://https//www.apple.com/safari" rel="homepage" title="Safari (web browser)">Safari</a>.</div><br />The X-Ray Goggles are a <i>bookmarklet</i>—a special kind of tool that can augment any <a class="zem_slink" href="http://en.wikipedia.org/wiki/Web_page" rel="wikipedia" title="Web page">web page</a>.<br /><br />Here's how to install the goggles bookmarklet so you can inspect and remix anything you see on the web.<br /><br /><ol class="steps"><br /><li><br /> Enable your browser's <a class="zem_slink" href="http://en.wikipedia.org/wiki/Bookmark_%28World_Wide_Web%29" rel="wikipedia" title="Bookmark (World Wide Web)">bookmarks</a> <a class="zem_slink" href="http://en.wikipedia.org/wiki/Toolbar" rel="wikipedia" title="Toolbar">toolbar</a> by watching this video:<br /><br /><br /> <video controls="" src="http://videos-cdn.mozilla.net/serv/labs/hackasaurus/Toolbar-Win7-FF7.webm" style="width: 100%;" tabindex="0"></video><br /> </li><br /><li><br /> Drag the <a class="button no-arrow" href="javascript:(function(){var%20script=document.createElement('script');script.src='http://webxray.hackasaurus.org/webxray.js';script.className='webxray';document.head.appendChild(script);})();">X-Ray Goggles</a> up to your bookmarks toolbar.<br /><br /><br /> </li><br /><li><br /> Whenever you want to remix any web page you're visiting, just click on the X-Ray Goggles button in your bookmarks toolbar.<br /><br /><br /> </li><br /></ol><br />That's all there is to it. Happy webmaking!</div><br /></section><br /><br /><br /><br /><div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"><br /><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=65c741d5-378a-4401-a4b5-c7f80bd592df" style="border: none; float: right;" /></div><br /></div><br />

Installing X-Ray Goggles

Installing X-Ray Goggles In order to use the goggles, you need to have JavaScript enabled.Please enable it or use a browser that supports it. Sorry, but the g…

Read more »

X-Ray Goggles

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div class="wrapper"><br /><div id="content-header"><br /><b>X-Ray Goggles</b><br /><br /><aside>Remix, make and share webpages instantly.</aside><br /></div><br /><noscript><br /> <div class="alert"><br /> <p><br />In order to use the goggles, you need to have JavaScript enabled.</p><br /><p><br />Please enable it or use a browser that supports it.</p><br /></div><br /></noscript><br /><br /><br /><div class="alert msie-only"><br />Sorry, but the goggles don't yet work on Microsoft Internet Explorer.<br /><br />Until they do, please use the latest version of <a href="http://mozilla.org/firefox">Firefox</a>, Opera, Chrome, or Safari.</div><br /><div class="remix-chamber"><br /><img src="http://hackasaurus.org/images/goggles/supergirl.png" /></div><br /><h1><br />Make your first hack in three easy steps!</h1><br /><ol><br /><li>Copy this URL to your clipboard: <br /> <input autocomplete="off" id="image-url" type="text" value="https://x-ray-goggles.mouse.org/" /><br /><br /><br /> </li><br /><li>Activate the <a href="javascript:(function () {var script=document.createElement('script');script.src='https://x-ray-goggles.mouse.org/webxray.js';script.className='webxray';script.setAttribute('data-lang','en-US');script.setAttribute('data-baseuri','https://x-ray-goggles.mouse.org');document.body.appendChild(script);}())" id="bookmarklet">X-Ray Goggles</a>.</li><br /><li>Move your mouse over the image on the right to see what it's made of, and tap <kbd>R</kbd> to make it point to the URL from your clipboard!</li><br /></ol><br /><div class="secondary"><br /><div class="blurb"><br /><h1><br />… And then, the world!</h1><br /><a href="http://hackasaurus.org/en-US/goggles/install/">Install</a> the goggles into your bookmarks bar and use them to remix <i>any</i> web page!</div><br /><div class="blurb"><br /><h1><br />Share with friends!</h1><br />Tap <kbd>P</kbd> to publish your hacks and share your creations with your friends.</div><br /><div class="blurb"><br /><h1><br />Become a ninja!</h1><br />Tap <kbd>H</kbd> to learn about more awesome powers like undo/redo and computed style editing.</div><br /></div><br /><!--Achievements awarded to users when they fix bugs.--><br /><br /><br /><br /><div class="achievements"><br /><div class="achievement" id="url-hacker"><br /><h3><br />Achievement Unlocked</h3><br />Image Source Hacker</div><br /></div><br /><!--Hints offered to users as they explore the page and UI.--><br /><br /><br /><br /><div class="hints"><br /><div class="remix-dialog-hints"><br /><div class="attr hint"><br />Click on an attribute’s value to edit it.</div><br /></div><br /><div class="remix hint"><br />Tap <kbd>R</kbd> to change the source code of an element.</div><br /></div><br /></div><br /><div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"><br /><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=65c741d5-378a-4401-a4b5-c7f80bd592df" style="border: medium; float: right;" /></div><br /></div><br />

• 
• 

1. 1
2. 2

• Previous
• Next

X-Ray Goggles

X-Ray GogglesRemix, make and share webpages instantly. In order to use the goggles, you need to have JavaScript enabled.Please enable it or use a browser that supports it.Sorry, but the goggles d…

Read more »