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 />

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 req...

Baca selengkapnya »

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...

Baca selengkapnya »

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 />

X-Ray Goggles

X-Ray Goggles Remix, make and share webpages instantly. In order to use the goggles, you need to have JavaScript enabled. Please enabl...

Baca selengkapnya »