<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xml:base="http://www.blogher.com" xmlns:dc="http://purl.org/dc/elements/1.1/">
<channel>
 <title>BlogHer - How2Blog: Adding Code to Sidebars - Comments</title>
 <link>http://www.blogher.com/node/14736</link>
 <description>Comments for &quot;How2Blog: Adding Code to Sidebars&quot;</description>
 <language>en</language>
<item>
 <title>How2Blog: Adding Code to Sidebars</title>
 <link>http://www.blogher.com/node/14736</link>
 <description>&lt;p&gt;&lt;em&gt;Please note that the large screenshots required to illustrate the points in this post, are all hosted at How2Blog, so feel free to read &lt;a href=&quot;http://www.troll-babygraphics.com/archives/33&quot;&gt;the entire article&lt;/a&gt; there if you need the visual aids.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;a target=&quot;_blank&quot; href=&quot;http://www.blogher.com/&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;http://img.photobucket.com/albums/v493/karenrani/how2blogbutton.jpg&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;First off, thank you to everyone that wrote in to How2Blog with their questions.  An even bigger thank you to Mir at &lt;a href=&quot;http://wantnot.net&quot;&gt;Want Not&lt;/a&gt; (and of &lt;a href=&quot;http://wouldashoulda.com&quot;&gt;Woulda Coulda Shoulda&lt;/a&gt; Fame) for spreading the word.  Many of the questions came in from that helpful site.  Thanks, pretty lady!&lt;/p&gt;
&lt;p&gt;There are many questions to get to, but some of you wanted to know the simplest of things, and what did Julie Andrews sing in The Sound of Music?&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Let&#039;s start at the very beginning&lt;br /&gt;
A very good place to start&lt;br /&gt;
When you read you begin with A, B, C&lt;br /&gt;
When you sing, you begin with Do-Re-Mi&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;And then she broke into song.  Again.&lt;/p&gt;
&lt;p&gt;Many of you wrote asking about how to add links, how to add images, and how to add links that are clickable images to your sidebars.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Laurie&lt;/strong&gt; from &lt;a href=&quot;http://notjustaboutcancer.blogspot.com/&quot;&gt;Not Just About Cancer&lt;/a&gt; wrote:&lt;/p&gt;
&lt;p&gt;&lt;em&gt;&lt;strong&gt;When I switched to blogger beta, I lost all the buttons on my blog, including sitemeter, which I really miss. Is there a way to get them back or do I have to start all over again?&lt;/strong&gt; &lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Laurie, allow me to let you in on a little secret: never, ever sign up for anything Beta.  I can&#039;t tell you the number of times I&#039;ve signed up for Beta and lost everything, including my mind trying to make it work.&lt;/p&gt;
&lt;p&gt;Needless to say, Blogger Beta is now The New Blogger, so what&#039;s done is done.  So the sad fact is, yes, you need to re-install the codes for all of your sidebar fun.  &lt;/p&gt;
&lt;p&gt;Go to &lt;a href=&quot;http://sitemeter.com/&quot;&gt;Site Meter&lt;/a&gt; and sign in, get your html code and plug it in where you want it.  (The code at &lt;a href=&quot;http://sitemeter.com/&quot;&gt;Site Meter&lt;/a&gt; is found under the Manager tab, and although there is an option for adding the code to your Blogger blog, among others, we&#039;re going to do this the old fashioned way.)&lt;/p&gt;
&lt;p&gt;So here&#039;s a sample code from &lt;a href=&quot;http://sitemeter.com/&quot;&gt;Site Meter&lt;/a&gt;:&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;&lt;div class=&quot;codeblock&quot;&gt;&lt;code&gt;&lt;!-- Site Meter --&amp;gt;&lt;br /&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;&amp;lt;/script&amp;gt;&lt;br /&gt;&amp;lt;noscript&amp;gt;&lt;br /&gt;&amp;lt;a xhref=&amp;quot;http://s26.sitemeter.com/stats.asp?site=s26subwhispers&amp;quot; mce_href=&amp;quot;http://s26.sitemeter.com/stats.asp?site=s26subwhispers&amp;quot; target=&amp;quot;_top&amp;quot;&amp;gt;&lt;br /&gt;&amp;lt;img xsrc=&amp;quot;http://s26.sitemeter.com/meter.asp?site=s26subwhispers&amp;quot; mce_src=&amp;quot;http://s26.sitemeter.com/meter.asp?site=s26subwhispers&amp;quot; alt=&amp;quot;Site Meter&amp;quot; border=&amp;quot;0&amp;quot; /&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;&amp;lt;/noscript&amp;gt;&lt;br /&gt;&lt;!-- Copyright (c)2006 Site Meter --&amp;gt;&lt;/code&gt;&lt;/div&gt;&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;Click the images to enlarge the steps for adding your code to Wordpress, Old Blogger and New Blogger (Beta.)  &lt;/p&gt;
&lt;p&gt;Old Blogger:&lt;br /&gt;
&lt;a title=&quot;Adding Code to Old Blogger Sidebar&quot; rel=&quot;lightbox&quot; href=&quot;http://www.troll-babygraphics.com/wp-content/uploads/adding-code-to-old-blogger-sidebar.jpg&quot;&gt;&lt;img width=&quot;160&quot; height=&quot;160&quot; alt=&quot;Adding Code to Old Blogger Sidebar&quot; src=&quot;http://www.troll-babygraphics.com/wp-content/uploads/adding-code-to-old-blogger-sidebar.jpg&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;New/Beta Blogger Tutorial (Slide 1 of 3)&lt;br /&gt;
&lt;a title=&quot;Adding Code to New Blogger Sidebar 1&quot; rel=&quot;lightbox&quot; href=&quot;http://www.troll-babygraphics.com/wp-content/uploads/adding-code-to-new-blogger-sidebar1.jpg&quot;&gt;&lt;img width=&quot;160&quot; height=&quot;160&quot; alt=&quot;Adding Code to New Blogger Sidebar 1&quot; src=&quot;http://www.troll-babygraphics.com/wp-content/uploads/adding-code-to-new-blogger-sidebar1.jpg&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;New/Beta Blogger Tutorial (Slide 2 of 3)&lt;br /&gt;
&lt;a title=&quot;Adding Code to New Blogger Sidebar 2&quot; rel=&quot;lightbox&quot; href=&quot;http://www.troll-babygraphics.com/wp-content/uploads/adding-code-to-new-blogger-sidebar2.jpg&quot;&gt;&lt;img width=&quot;160&quot; height=&quot;160&quot; alt=&quot;Adding Code to New Blogger Sidebar 2&quot; src=&quot;http://www.troll-babygraphics.com/wp-content/uploads/adding-code-to-new-blogger-sidebar2.jpg&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;New/Beta Blogger Tutorial (Slide 3 of 3)&lt;br /&gt;
&lt;a title=&quot;Adding Code to New Blogger Sidebar 3&quot; rel=&quot;lightbox&quot; href=&quot;http://www.troll-babygraphics.com/wp-content/uploads/adding-code-to-new-blogger-sidebar3.jpg&quot;&gt;&lt;img width=&quot;160&quot; height=&quot;160&quot; alt=&quot;Adding Code to New Blogger Sidebar 3&quot; src=&quot;http://www.troll-babygraphics.com/wp-content/uploads/adding-code-to-new-blogger-sidebar3.jpg&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Wordpress:&lt;br /&gt;
Click to enlarge the steps for adding your code to Wordpress:&lt;br /&gt;
&lt;a title=&quot;Adding Code to Wordpress Sidebar&quot; rel=&quot;lightbox&quot; href=&quot;http://www.troll-babygraphics.com/wp-content/uploads/adding-code-to-wordpress-sidebar.jpg&quot;&gt;&lt;img width=&quot;160&quot; height=&quot;160&quot; alt=&quot;Adding Code to Wordpress Sidebar&quot; src=&quot;http://www.troll-babygraphics.com/wp-content/uploads/adding-code-to-wordpress-sidebar.jpg&quot; /&gt;&lt;/a&gt;&lt;br /&gt;
Wordpress Tutorial (1 slide)&lt;/p&gt;
&lt;p&gt;&lt;em&gt;&lt;br /&gt;
Most other Content Management Systems would be similar to either of these, but drop me a line if there is a specific CMS you want me to cover, and I will do so in an upcoming post.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;You can install HTML or Javascript code for images or for clickable images in the same fashion.  For just an image:&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;&lt;code&gt;&amp;lt;img src=&amp;quot;http://www.troll-babygraphics.com/%E2%80%9DURL%E2%80%9D&amp;quot; /&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;(URL = the url of the image you want to show)&lt;/p&gt;
&lt;p&gt;So if your image is on Flickr, you&#039;ll need to sign into your account, go to the desired picture and click &quot;All Sizes&quot;.  Then click the size you want.  At the bottom of that page, there will be code for your picture, depending on the size you&#039;re looking for, like this:&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;&lt;code&gt;&amp;lt;img src=&amp;quot;http://farm1.static.flickr.com/126/349784055_98ceafcc1d_m.jpg&amp;quot; /&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;For a clickable image, like the one &lt;a href=&quot;http://www.coolmompicks.com/&quot;&gt;Cool Mom Picks uses:&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;&lt;code&gt;&amp;lt;a href=&amp;quot;http://www.troll-babygraphics.com/%E2%80%9DLINK&amp;quot;&amp;gt;&amp;lt;img src=&amp;quot;http://www.troll-babygraphics.com/%E2%80%9DURL%E2%80%9D&amp;quot; /&amp;gt;&amp;lt;/a&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;(LINK URL is the url of the page you want the image to link to and â€˜URLâ€™ is the image location, whether it be from Photobucket, Flickr, or your own host or server).&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;&lt;code&gt;&amp;lt;a href=&amp;quot;http://www.coolmompicks.com/&amp;quot;&amp;gt;&amp;lt;img width=&amp;quot;155&amp;quot; height=&amp;quot;40&amp;quot; border=&amp;quot;0&amp;quot; alt=&amp;quot;Cool Mom Picks&amp;quot; src=&amp;quot;http://www.coolmompicks.com/images/button_cmp.gif&amp;quot; /&amp;gt;&amp;lt;/a&amp;gt;&lt;/code&gt;&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;(CMP has added a width of 155 pixels, a height of 40 pixels and a border of 0, to be specific on how they want their button to render.  The &quot;alt&quot; part tells users what is missing if the graphic does not show up.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;That&#039;s it for today!  Send your questions to:&lt;/strong&gt;&lt;br /&gt;
&lt;a target=&quot;_blank&quot; href=&quot;mailto: how2blog@gmail.com&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;http://img.photobucket.com/albums/v493/karenrani/how2blog_gmail.png&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Contributing Editor &lt;a href=&quot;http://www.blogher.com/member/karen-rani&quot;&gt;Karen Rani&lt;/a&gt; also blogs at:&lt;br /&gt;
&lt;a href=&quot;http://www.troll-baby.com/&quot;&gt; Troll Baby&lt;/a&gt; | &lt;a href=&quot;http://www.troll-babygraphics.com/&quot;&gt;How2Blog&lt;/a&gt;&lt;br /&gt;
&lt;a href=&quot;http://www.themotherless.com/&quot;&gt;Motherless&lt;/a&gt; | &lt;a href=&quot;http://www.parishiltonwatch.com/&quot;&gt;Paris Hilton Watch&lt;/a&gt;&lt;/em&gt;&lt;br /&gt;
and works at &lt;a href=&quot;http://www.swankwebstyle.com/&quot;&gt;Swank Web Style&lt;/a&gt;&lt;/p&gt;
</description>
 <comments>http://www.blogher.com/node/14736#comments</comments>
 <category domain="http://www.blogher.com/blogher-topics/arts">Arts</category>
 <pubDate>Mon, 22 Jan 2007 20:51:12 -0600</pubDate>
 <dc:creator>Karen Rani</dc:creator>
 <guid isPermaLink="false">14736 at http://www.blogher.com</guid>
</item>
</channel>
</rss>
