tag:blogger.com,1999:blog-330140252024-03-13T04:57:27.709-07:00How Can I Do That?Bonnie S. Calhounhttp://www.blogger.com/profile/11769607640246518804noreply@blogger.comBlogger49125tag:blogger.com,1999:blog-33014025.post-14555111662580733352011-07-14T08:54:00.000-07:002011-09-16T08:49:51.663-07:00Adding A Favicon To Your URL<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-H95AYXfwpZI/Tg-ac5MLe1I/AAAAAAAAD8w/qvQHW_boZus/s1600/favicon.bmp" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-H95AYXfwpZI/Tg-ac5MLe1I/AAAAAAAAD8w/qvQHW_boZus/s1600/favicon.bmp" /></a></div>Alrighty then! A bunch of you have asked...and I have shown...how to add a favicon to your blog URL. If you look up at mine on this page, it's a gun and magnifying glass. It goes along with my website <a href="http://bonniescalhoun.com/">http://bonniescalhoun.com</a>, where I am going to integrate this page like the rest of my blogs.<br />
<br />
(Update: this is still a valid method for your website, but Blogger has now added the ability to your Page Elements page. At the top left corner of the Page Elements layout, click the edit button on the Favicon element, and upload your image...Viola! If you are using a customized template that doesn't have Page Elements, you may still need this method for your blog!)<br />
<br />
LOL...the favicon is that little itty bitty image. They are only 16 pixels by 16 pixels. So when you are creating one use a square image so that it reduces correctly.<br />
<br />
First you are going to decide on what image you want, and using your favorite imaging software I's say reduce it to at least 50px X 50px then you will get an idea of how it is going to look small. Take that image and go over here to <a href="http://tools.dynamicdrive.com/favicon/">Dynamic Drive-Favicon Generator</a> and input the image. It will create a favicon for you.<br />
<br />
Now if you are uploading it to your website (not blog) just follow the directions on the lower portion of the Dynamic Rive page. (no sense rewriting what they have). If you want to use the favicon on your blog in place of Bloggers Orange B, follow these directions.<br />
<br />
Upload the favicon to a blog post, label the post as "Favicon" and save it as a draft. You are doing that to get the image onto the Blogger (Picasa) servers. Now you are going to create the code that you need. Copy this code:<br />
<br />
<link href='<span style="color: #cc0000;">http://3.bp.blogspot.com/-eO5-qj5k9V0/TfJs66ovG3I/AAAAAAAAD64/OlazI7MKM/s1600/favicon.bmp</span>' rel='icon' type='image/x-icon'/><br />
<link href='<span style="color: #cc0000;">http://3.bp.blogspot.com/-eO5-qj5k9V0/TfJs66ovG3I/AAAAAAAAD64/OlazI7MKM/s1600/favicon.bmp</span>' rel='shortcut icon' type='image/x-icon'/><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-JJR-d8VcHuM/Tg-sTgA642I/AAAAAAAAD80/B-nzBzpFNYc/s1600/favicon.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="262" src="http://1.bp.blogspot.com/-JJR-d8VcHuM/Tg-sTgA642I/AAAAAAAAD80/B-nzBzpFNYc/s320/favicon.jpg" width="320" /></a></div>The red links are the part that you are going to replace with your own image link from Blogger. It may be an .ico or a .bmp, that's all right. The one thing that you have to watch for when creating this code is that if you create it in Word.com it will add a bunch of funky coding to it, and even "smart quotes" Blogger...nor the rest of the world like smart quotes, so be sure to create the code in NotePad, and check all the quote marks or apostrophes to be sure that they look like the ones I have in the picture :-) Click on the picture and it will open larger so you can see it clearly.<br />
<br />
Now we are going to add them to your template code. Click the Design Tab, then the Edit HTML link. It will open up the box of code for your template. <br />
<br />
Now right here I must stop you and say, before messing with your template... "BACKUP A COPY" of your template to your computer. Right click on the code box and "select all", then open a NotePad doc (NOT Word.doc) and paste the template into NotePad and save it on your computer where you can find it in case you have a catastrophic failure of your brain connecting with your fingers on the keyboard :-).<br />
<br />
Okay...now that we have that out of the way...use Ctrl-F to open a Find box at the bottom of your screen like in the picture to the right. You are going to type </head> into the find box and click "next". It will light up the word just like it does in the image, Then you are going paste in the code you just created.<br />
<br />
<b>Now...another important point</b>...Click the PREVIEW button to see the change. If the preview shows the Share buttons at the bottom of the post, then close the preview and click Save Template. As long as it gives you a preview of your blog the favicon will show up in a while if it doesn't immediately. So close the Preview and click Save Template!<br />
<br />
If the preview does not open...or the buttons are not there when the preview does open...click DISCARD Edits.<br />
<br />
And start again. If you get stuck...email me.<br />
<br />
<img alt="Sig" height="50" src="http://bonniescalhoun.com/Front-BonnieSCalhoun_sig.png" width="152" /><br />
<div id="fb-root"></div><script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#appId=134068980025096&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><br />
<div class="fb-like" data-href="https://www.facebook.com/bonniescalhounsnarkandsuspense" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>Bonnie S. Calhounhttp://www.blogger.com/profile/11769607640246518804noreply@blogger.com66tag:blogger.com,1999:blog-33014025.post-34791077390190589612011-07-07T11:28:00.000-07:002011-09-15T09:18:01.726-07:00Adding Share Buttons To Your Posts<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-8sdzAr9UEWo/Tg9lcjYYlpI/AAAAAAAAD8Y/btGPbXKW_0k/s1600/sharebuttons.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-8sdzAr9UEWo/Tg9lcjYYlpI/AAAAAAAAD8Y/btGPbXKW_0k/s1600/sharebuttons.jpg" /></a></div>Blogger has created a wealth of standardized templates, and out in the Blogosphere you can find a wealth of Blogger XML templates (Some of my favorites places are in the right sidebar). But I've noticed that a lot of them don't activate the Share Buttons for posts. You can see mine at the bottom of this post.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-znNmzwW5EC0/Tg9-EymPvdI/AAAAAAAAD8g/PiDnWvyOHAs/s1600/BlogEdit.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="135" src="http://4.bp.blogspot.com/-znNmzwW5EC0/Tg9-EymPvdI/AAAAAAAAD8g/PiDnWvyOHAs/s200/BlogEdit.jpg" width="200" /></a></div>This code is built into all XML templates, so all you have to do is activate it. First off let's go check to see if you have the function turned on. Go to your Design Tab. The Page Elements page opens by default. See the edit button on the Blog Post box (#1) in the image to the left here?<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-knNJkHKzg6Q/Tg9-wUawFAI/AAAAAAAAD8k/F6jH2K7SSUo/s1600/ActivateShare.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="http://2.bp.blogspot.com/-knNJkHKzg6Q/Tg9-wUawFAI/AAAAAAAAD8k/F6jH2K7SSUo/s200/ActivateShare.jpg" width="161" /></a></div>When you click there it will open up a "Configure Post" box. That has a plethora of things that you can turn off and on for your posts, and at the bottom of the page it allows you to organize how they are laid out on the page. (Now sometimes that part doesn't work at planned, so that's the reason for the res of this post.)<br />
<br />
Once you have the Share Buttons checked as in the image to the right, go check your blog page. If you see the little list of boxes that I have at the top of this post...or below my signature...then you're good to go! If not *sigh* then we have some more work to do. We're going into the template HTML.<br />
<br />
I know...I know ...this is not for the faint at heart, but I have confidence that you can do it, if you follow the instructions to the letter. First thing, click the Design Tab, Then click on the Edit HTML tab. (You will see that marked as #2 in the image above.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-HpSaFeYHfxQ/Tg-FpK8AdOI/AAAAAAAAD8o/j8oj4MDUxOM/s1600/Sharecode.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="154" src="http://3.bp.blogspot.com/-HpSaFeYHfxQ/Tg-FpK8AdOI/AAAAAAAAD8o/j8oj4MDUxOM/s200/Sharecode.jpg" width="200" /></a></div>When the box of code opens you are going to check the little link above the box that says "Expand Widget Template. Now right here I must stop you and say, before messing with your template... "BACKUP A COPY" of your template to your computer. Right click on the code box and "select all", then open a NotePad doc (NOT Word.doc) and paste the template into NotePad and save it on your computer where you can find it in case you have a catastrophic failure of your brain connecting with your fingers on the keyboard :-).<br />
<br />
Okay...now that we have that out of the way...use Ctrl-F to open a Find box at the bottom of your screen like in the picture to the right. What we are going to look for is the post-footer lines (designated lines at the bottom of a post). There are usually 3 of them. Write <span style="color: #cc0000;">post-footer-line post-footer-line-3</span> in the Find box (like I have circled in green.) It will actually find and highlight those words. Those words are ABOVE the words that are highlighted in blue because I skipped that picture to save space. When you find the footer-line 3...or 2...or 1 (You can experiment where you stick it in those three lines), you are going to insert this section of code:<br />
<br />
<div style="color: #cc0000;"><span class="post-share-buttons">< b:include data="post" name="shareButtons">< /b:include ></span></div><br />
<div class="separator" style="clear: both; text-align: center;"></div>Then insert the code right where I stuck it in the picture. (The piece of code is in blue.)<br />
<br />
<b>Now...another important point</b>...Click the PREVIEW button to see the change. If the preview shows the Share buttons at the bottom of the post, then close the preview and click Save Template.<br />
<br />
If the preview does not open...or the buttons are not there when the preview does open...click DISCARD Edits.<br />
<br />
And start again. If you get stuck...email me.<br />
<br />
<img alt="Sig" height="50" src="http://bonniescalhoun.com/Front-BonnieSCalhoun_sig.png" width="152" /><div id="fb-root"></div><script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#appId=134068980025096&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><br />
<div class="fb-like" data-href="https://www.facebook.com/bonniescalhounsnarkandsuspense" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>Bonnie S. Calhounhttp://www.blogger.com/profile/11769607640246518804noreply@blogger.com1tag:blogger.com,1999:blog-33014025.post-42149036833010534102011-07-02T11:19:00.000-07:002011-09-15T09:18:22.186-07:00Find ButtonHi folks! Yes...I've been remiss at posting here but I've not had enough interesting things to share. That is going to change. I've got a whole new group of people that want to learn to blog, so here we go again.<br />
<br />
This post is going to give you a technique for finding things easily on a page or in HTML code (which is what we mainly work with here). I did know how to use this but someone just pointed out that it would help newbies find the places that I want them to go to in code...much easier than scrolling. (Sheesh...sometimes the simplest things elude me.) ROFLOL...but I can write code like nobody's business :-)<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-I6rjwJ8KM54/Tg9f8AqEawI/AAAAAAAAD8U/X14uTSuQ6kU/s1600/Findbutton.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="246" src="http://4.bp.blogspot.com/-I6rjwJ8KM54/Tg9f8AqEawI/AAAAAAAAD8U/X14uTSuQ6kU/s320/Findbutton.jpg" width="320" /></a></div>Anyhow...just click Ctrl-F (ROFLOL...F is for Find, so that makes it easy to remember). A little light blue bar will appear at the bottom of your screen like in the image to the left.<br />
<br />
I have circled the phrase I inserted in the search box, and you will see where it found the line in the Template HTML. You can make the image larger by just clicking on it! So that way you can see it clearly.<br />
<br />
This neat little trick also works on just regular webpages when you are looking for a particular term or word in a long page of text.<br />
<br />
Oh...and as a shameless plug for myself I have inserted my new signature that I use as a fiction author. ;-) Blessings to you all.<br />
<br />
<img alt="Sig" height="50" src="http://bonniescalhoun.com/Front-BonnieSCalhoun_sig.png" width="152" /><div id="fb-root"></div><script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#appId=134068980025096&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><br />
<div class="fb-like" data-href="https://www.facebook.com/bonniescalhounsnarkandsuspense" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>Bonnie S. Calhounhttp://www.blogger.com/profile/11769607640246518804noreply@blogger.com0tag:blogger.com,1999:blog-33014025.post-42783414780072829502009-12-16T10:20:00.000-08:002011-09-15T09:19:36.940-07:00Creating Blog Buttons<a href="http://1.bp.blogspot.com/_m32TlugOPkM/Syk0EHw59QI/AAAAAAAADO4/EEIBezmcupA/s1600-h/Blogbutton.jpg"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 180px; height: 122px;" src="http://1.bp.blogspot.com/_m32TlugOPkM/Syk0EHw59QI/AAAAAAAADO4/EEIBezmcupA/s320/Blogbutton.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5415917272298026242" /></a><br />
A nice young lady asked me to help her make a Blog Button, so I thought this would be a good learning lesson!<br />
<br />
What we are going to do is use the image that I have created here to the left and turn it into a clickable button in a text box do that people can grab your button to put on their blog<br />
<br />
First create the image, and upload it to a Blogger post, click the box for "No Layout" before you upload it. Save the post as a draft.<br />
<br />
That will be the image that sits on your blog (Your personal image doesn't need to be clickable because it resides on the place that they are going to click to) so we won't add the blog link to yours.<br />
<br />
To make a clickable image in the text box that you put below your personal image so that people can grab the code. Follow these steps:<br />
<br />
We will be using the code for this blog's button for our example!<br />
<br />
Take the image code, remove the blogger address (code highlighted in grey) that is in the first set of brackets You will keep the code that starts with <img...<br />
<br />
<strong id="kchl"><span style="color:#000000;"><br />
<a href="http://1.bp.blogspot.com/_m32TlugOPkM/Sykr5AxBC0I/AAAAAAAADOo/2IkHpAN-Acc/s1600-h/Blogbutton.jpg"></span></strong><img style="cursor:pointer; cursor:hand;width: 186px; height: 126px;" src="http://1.bp.blogspot.com/_m32TlugOPkM/Sykr5AxBC0I/AAAAAAAADOo/2IkHpAN-Acc/s320/Blogbutton.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5415908285347859266" /></a><br />
<br />
<br />
In front of that code you will add the link for the place that you want it to click to...written in this format: <a href="URL of Blog"> (Added in the grey highlighted code).<br />
<br />
<strong id="kchl"><span style="color:#000000;"><br />
<a href="http://howcanidothat.blogspot.com/"></span></strong><img style="cursor:pointer; cursor:hand;width: 186px; height: 126px;" src="http://1.bp.blogspot.com/_m32TlugOPkM/Sykr5AxBC0I/AAAAAAAADOo/2IkHpAN-Acc/s320/Blogbutton.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5415908285347859266" /></a><br />
<br />
<br />
<br />
Then wrap that whole piece of code in a textarea box, using <textarea name="HTML for Picture" rows="4" cols="20"> at the beginning....and </textarea> at the end.<br />
<br />
<strong id="kchl"><span style="color:#000000;"><br />
<textarea name="HTML for Picture" rows="4" cols="20"></span></strong><a href="http://howcanidothat.blogspot.com/"><img style="cursor:pointer; cursor:hand;width: 186px; height: 126px;" src="http://1.bp.blogspot.com/_m32TlugOPkM/Sykr5AxBC0I/AAAAAAAADOo/2IkHpAN-Acc/s320/Blogbutton.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5415908285347859266" /></a><strong id="kchl"><span style="color:#000000;"></textarea></span></strong><br />
<br />
<br />
The rows...and columns (cols) can be changed to change the height and width of the box.<br />
<br />
Then take the original code that you got when you uploaded the image, and add the textarea box underneath it, and viola! It comes out looking like this on your blog:<br />
<br />
<br />
<a href="http://2.bp.blogspot.com/_m32TlugOPkM/Syk0UTyFCOI/AAAAAAAADPA/RJ0Q5LlGIRU/s1600-h/Blogbutton.jpg"><img style="cursor:pointer; cursor:hand;width: 180px; height: 122px;" src="http://2.bp.blogspot.com/_m32TlugOPkM/Syk0UTyFCOI/AAAAAAAADPA/RJ0Q5LlGIRU/s320/Blogbutton.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5415917550402078946" /></a><br />
<textarea name="HTML for Picture" rows="4" cols="20"><a href="http://howcanidothat.blogspot.com/"><img style="cursor:pointer; cursor:hand;width: 180px; height: 122px;" src="http://2.bp.blogspot.com/_m32TlugOPkM/Syk0UTyFCOI/AAAAAAAADPA/RJ0Q5LlGIRU/s320/Blogbutton.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5415917550402078946" /></a></textarea><br />
<br />
<img alt="Sig" height="50" src="http://bonniescalhoun.com/Front-BonnieSCalhoun_sig.png" width="152" /><br />
<div id="fb-root"></div><script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#appId=134068980025096&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><br />
<div class="fb-like" data-href="https://www.facebook.com/bonniescalhounsnarkandsuspense" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>Bonnie S. Calhounhttp://www.blogger.com/profile/11769607640246518804noreply@blogger.com2tag:blogger.com,1999:blog-33014025.post-4178270818437499072009-09-28T20:40:00.000-07:002011-09-15T09:19:55.515-07:00Working with Tablesby<span style="font-size: 130%;"> <span style="color: maroon; font-family: times new roman;"><b><i>Bonnie Calhoun</i></b></span></span><br />
<br />
Hi guys and gals! It's been a while since I had something new to teach you! But I just helped a gentleman with this last night so I thought I'd pass on the info.<br />
<br />
What we're going to learn today is how to customize a table to work in Blogger, and all the cool things you can do with it.<br />
<br />
This particular table that I'm going to show you how to make has three columns (that go across) and five rows (that go down) on the page.<br />
<br />
<style type="text/css">
.nobrtable br { display: none }
</style><br />
<div class="nobrtable"><br />
<table border="1" cellpadding="2" cellspacing="2" style="text-align: left; width: 460px;"><tbody>
<tr> <td>Day</td> <td>Food</td> <td>Child</td> </tr>
<tr> <td></td> <td></td> <td></td> </tr>
<tr> <td>Monday</td> <td>Hot Dogs</td> <td>Mike</td> </tr>
<tr> <td>Tuesday</td> <td>Chicken</td> <td>Mary</td> </tr>
<tr> <td>Wednesday</td> <td>Hamburger</td> <td>Paul</td> </tr>
</tbody> </table><br />
</div><br />
<br />
That is what it will look like, and this is the code that you copy to create it!<br />
<br />
<b id="kchl"><span style="color: black;"><br />
<style type="text/css">.nobrtable br { display: none }</style><br />
<div class="nobrtable"><br />
<table style="text-align: left; width: 460px;" border="1" cellpadding="2" cellspacing="2"><br />
<tbody><br />
<tr><br />
<td>Day</td><br />
<td>Food</td><br />
<td>Child</td><br />
</tr><br />
<tr><br />
<td></td><br />
<td></td><br />
<td></td><br />
</tr><br />
<tr><br />
<td>Monday</td><br />
<td>Hot Dogs</td><br />
<td>Mike</td><br />
</tr><br />
<tr><br />
<td>Tuesday</td><br />
<td>Chicken</td><br />
<td>Mary</td><br />
</tr><br />
<tr><br />
<td>Wednesday</td><br />
<td>Hamburger</td><br />
<td>Paul</td><br />
</tr><br />
</tbody><br />
</table><br />
</div><br />
</span></b><br />
<br />
Now! What you can do to add customization:<br />
<br />
If you want more columns(across) across the table, add more table data units, like this. <b>Note:</b> You must add the same amount to each row!<br />
<b id="kchl"><span style="color: black;"><br />
<tr><br />
<td></td><br />
<td></td><br />
<td></td><br />
<td></td> .....notice extra td unit!<br />
</tr><br />
</span></b><br />
<br />
If you want more rows (going down the page. Add more table rows (tr).<br />
<b id="kchl"><span style="color: black;"><br />
<tr>....this is the beginning of a tr unit<br />
<td></td><br />
<td></td><br />
<td></td><br />
<td></td> <br />
</tr>.....this is the end of a tr unit<br />
</span></b><br />
<br />
If you want the table to be wider or narrower, change the pixel number in the width unit: <b id="kchl"><span style="color: black;"><br />
width: 460px</span></b><br />
<br />
If you don't want a border, turn the border number to zero: <b id="kchl"><span style="color: black;"><br />
border="0"</span></b><br />
<b>Note:</b> the higher the border number, the thicker the border.<br />
<br />
And the cellspacing numbers tell you how many pixels between the cells of the table, while the cellpadding tells you how many pixels between the sides of the cell and the writing that you put in it! <b id="kchl"><span style="color: black;"><br />
cellpadding="2" cellspacing="2"></span></b><br />
<br />
Have at it, and have fun!!<br />
<br />
<img alt="Sig" height="50" src="http://bonniescalhoun.com/Front-BonnieSCalhoun_sig.png" width="152" /><br />
<div id="fb-root"></div><script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#appId=134068980025096&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><br />
<div class="fb-like" data-href="https://www.facebook.com/bonniescalhounsnarkandsuspense" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>Bonnie S. Calhounhttp://www.blogger.com/profile/11769607640246518804noreply@blogger.com25tag:blogger.com,1999:blog-33014025.post-32146221364710446602009-01-23T21:13:00.000-08:002011-09-15T09:20:19.012-07:00Decreasing Your Bounce Rateby<span style="font-size: 130%;"> <span style="color: maroon; font-family: times new roman;"><b><i>Bonnie Calhoun</i></b></span></span><br />
<br />
Hi folks! Another tip has been pulled to the forefront of my memory by an inquiring blogger...the necessity of using <b>target="_blank"</b>.<br />
<br />
LOL...don't look at me like that...I'm not talking dirty :-) Using <b>target="_blank"</b> in an outgoing link on your blog or website causes a new browser window to open when the link is clicked. It is desirable for two reasons.<br />
<br />
First, the visitor is still on your website when they close that window after perusing, and they don't have to navigate back to your page.<br />
<br />
And second, it helps to decrease your "bounce" rate.<br />
<br />
LOL...I knew I'd get your eyes to roll up in your head at least once in this post :-)<br />
<br />
<b>Bounce Rate</b> is defined as how many times a visitor "bounces" away from your site and comes back. If you are involved in increasing your <b>SEO </b> (Search Engine Optimization), the bounce rate on an entry page can help to determine how effective it is at grabbing people's attention.<br />
<br />
Now before you running screaming from the room yelling, "SEO, SEO!" I must add caviar...LOL...I mean...a caveat. Bounce rate is only an SEO factor is you have a site for commerce. If your site is about ordinary stuff like blogging, news or just plain information you really don't have to worry.<br />
<br />
The neat and conclusive reason for adding <b>target="_blank"</b> is to keep people on your page!<br />
<br />
Write your links like this:<br />
<br />
<center> <a href="URL of SITE" target="_blank"></center><br />
<br />
<img alt="Sig" height="50" src="http://bonniescalhoun.com/Front-BonnieSCalhoun_sig.png" width="152" /><br />
<div id="fb-root"></div><script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#appId=134068980025096&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><br />
<div class="fb-like" data-href="https://www.facebook.com/bonniescalhounsnarkandsuspense" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>Bonnie S. Calhounhttp://www.blogger.com/profile/11769607640246518804noreply@blogger.com84tag:blogger.com,1999:blog-33014025.post-12489134019586432272009-01-20T20:20:00.000-08:002011-09-15T09:20:34.669-07:00Adding a New Header Imageby<span style="font-size: 130%;"> <span style="color: maroon; font-family: times new roman;"><b><i>Bonnie Calhoun</i></b></span></span><br />
<br />
Man, oh man! I'm just full of posts lately! *snort-giggle* I've been helping a lot of friends get their blogs redesigned.<br />
<br />
Well here is a problem I've noticed on several of my friends blogs. When they re-install their templates, they can no longer get their header images to show. Well I've come up with a work-around....LOL...and yes...you have to go play with your HTML!<br />
<br />
I'll turn ya'll into template gurus yet!<br />
<br />
This problem is especially prevalent on the Scribe template. When you switch templates the Header gadget should stay, but in the Scribe it doesn't...so go figure!<br />
<br />
Here's how we're gonna fix it. We're going to delete the present Header element from the template and add a new one. LOL...I think the old one has a bad case of the ick! But first we have to allow the Header section to allow another gadget (You will notice that there is no "Add a Gadget" section on the Scribe Header.<br />
<br />
Here's where we go play with HTML. Start at your Dashboard....go to the Layout tab...then click the Edit HTML link. We are going to scroll down to the highlighted section of code in the below image. If you can't read what it says, click on the image and it will open in a larger window.<br />
<br />
<a href="http://4.bp.blogspot.com/_m32TlugOPkM/SXao2cx6HoI/AAAAAAAACmA/XotF0RvQvbw/s1600-h/editgadget.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5293604065412521602" src="http://4.bp.blogspot.com/_m32TlugOPkM/SXao2cx6HoI/AAAAAAAACmA/XotF0RvQvbw/s400/editgadget.JPG" style="cursor: hand; cursor: pointer; display: block; height: 250px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a><br />
<br />
What you are going to do is change the line where it says...showaddelement "no"...to "yes" This will allow the "add a Gadget to show up in the header section of your template. And you are going to remove the <b section that has your bad Header, so that that section looks like this when you are done.<br />
<br />
<a href="http://2.bp.blogspot.com/_m32TlugOPkM/SXao2RmEGbI/AAAAAAAACl4/L3fDLYcHGJM/s1600-h/editgadget2.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5293604062410054066" src="http://2.bp.blogspot.com/_m32TlugOPkM/SXao2RmEGbI/AAAAAAAACl4/L3fDLYcHGJM/s400/editgadget2.JPG" style="cursor: hand; cursor: pointer; display: block; height: 236px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a><br />
<br />
Now you will click "Save Template". It will tell you that you are deleting a Widget, like in the below image. That's okay...click yes!<br />
<br />
<a href="http://2.bp.blogspot.com/_m32TlugOPkM/SXao2GWx1lI/AAAAAAAAClw/JlVMKXrRxLY/s1600-h/deletewidget.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5293604059393152594" src="http://2.bp.blogspot.com/_m32TlugOPkM/SXao2GWx1lI/AAAAAAAAClw/JlVMKXrRxLY/s400/deletewidget.JPG" style="cursor: hand; cursor: pointer; display: block; height: 155px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a><br />
<br />
Now go to your Page Elements page...see the "Add a Gadget" in the Header section. Click it! Scroll all the way to the bottom of the list and pick Page Header.<br />
<br />
When it opens, click for the image to show "instead of the title and description" Then either find your image on the internet at your storage site, or use the top link and upload it from your computer. Then click save! Viola! You have your header back!<br />
<br />
<img alt="Sig" height="50" src="http://bonniescalhoun.com/Front-BonnieSCalhoun_sig.png" width="152" /><br />
<div id="fb-root"></div><script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#appId=134068980025096&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><br />
<div class="fb-like" data-href="https://www.facebook.com/bonniescalhounsnarkandsuspense" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>Bonnie S. Calhounhttp://www.blogger.com/profile/11769607640246518804noreply@blogger.com49tag:blogger.com,1999:blog-33014025.post-84046034861826876152009-01-18T20:07:00.000-08:002011-09-15T09:20:50.660-07:00Adding Color To Your Browser Scrollbarby<span style="font-size: 130%;"> <span style="color: maroon; font-family: times new roman;"><b><i>Bonnie Calhoun</i></b></span></span><br />
<br />
Hi guys and gals! Yes it's me again...twice in one week! Well I'm helping some friends spiff up their blogs, and I've had to re-remember stuff I've done in the past. Okay...today we're going to add color to that pesky browser scroll bar. <br />
<br />
Now before you use this code, I must make you aware that it will not work in Firefox...LOL...they don't like people messing with their colors, so you can only get this to work in Internet Explorer.<br />
<br />
The last caveat that I add to it is that, if you're anal retentive like I am about making my web pages validate this one is going to throw you for a loop because according to W3C...it ain't valid! So you will get an error code for it, but it won't break your page or anything...LOL...unless you have like 5000 other errors!<br />
<br />
Okay...here's what you use:<br />
<br />
<b id="kchl"><span style="color: black;"><br />
<!--[if IE]> <br />
<style type="text/css"><br />
html { <br />
scrollbar-arrow-color:#6E0502; <br />
scrollbar-track-color:#940400; <br />
scrollbar-face-color:#6BE02; <br />
scrollbar-highlight-color:#909400; <br />
scrollbar-3dlight-color:#333333; <br />
scrollbar-darkshadow-color:#473624; <br />
scrollbar-shadow-color:#BFB186; <br />
} <br />
</style><br />
<![endif]--><br />
</span></b><br />
<a href="http://4.bp.blogspot.com/_m32TlugOPkM/SXP__2P_PSI/AAAAAAAACkY/h1sWKXVvou8/s1600-h/scrollbarcolor.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5292855459449879842" src="http://4.bp.blogspot.com/_m32TlugOPkM/SXP__2P_PSI/AAAAAAAACkY/h1sWKXVvou8/s320/scrollbarcolor.JPG" style="cursor: hand; cursor: pointer; display: block; height: 204px; margin: 0px auto 10px; text-align: center; width: 320px;" /></a><br />
<br />
And you scroll down til you get to the end of the <head> section, and you put it right BEFORE the </head><br />
<br />
Viola! You've got a color coordinated browser scrollbar!<br />
<br />
<img alt="Sig" height="50" src="http://bonniescalhoun.com/Front-BonnieSCalhoun_sig.png" width="152" /><br />
<div id="fb-root"></div><script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#appId=134068980025096&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><br />
<div class="fb-like" data-href="https://www.facebook.com/bonniescalhounsnarkandsuspense" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>Bonnie S. Calhounhttp://www.blogger.com/profile/11769607640246518804noreply@blogger.com8tag:blogger.com,1999:blog-33014025.post-83903602809876330382009-01-12T20:16:00.000-08:002009-01-12T21:13:22.079-08:00Creating A Scroll Bar for Your Link Listby<span style="font-size:130%;"> <span style="font-family:times new roman;color:#800000;"><strong><em>Bonnie Calhoun</em></strong></span></span><br /><br /><a href="http://1.bp.blogspot.com/_m32TlugOPkM/SWwdaMPeSDI/AAAAAAAACfg/7xtLWc8jVR0/s1600-h/scrollvisual.JPG"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 231px; height: 242px;" src="http://1.bp.blogspot.com/_m32TlugOPkM/SWwdaMPeSDI/AAAAAAAACfg/7xtLWc8jVR0/s400/scrollvisual.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5290635998053419058" /></a>Hi all! It's been a while since I had something new to tell you, mainly because I've been busy with other projects. <br /><br />One of my friends ask me to help her create a scroll bar for her rather long link list. So I thought I'd share the result with you.<br /><br />It's rather easy to accomplish. As with everything I tell you, make sure you have saved a copy of your template in NotePad before you go farting around with it. And when you add code to your HTML, please....use the "Preview" button to see if that is what you want. If it is not, hit the "Discard Edits" button and you will be back where you started from.<br /><br />Only hit SAVE...when you are sure you have the proper results!<br /><br />Okay...now for the easy part...go to your LAYOUT tab. Click Edit HTML. Scroll down in the code until you see:<br /><br /><strong id="kchl"><span style="color:#000000;"><br />/* Sidebar Content<br />----------------------------------------------- */<br />/* Sidebar Content */<br /></span></strong><br /><br />Right below that add:<br /><br /><strong id="kchl"><span style="color:#000000;"><br />#LinkList1 {<br /> height:150px;<br /> overflow:auto;<br />}<br /></span></strong><br /><br /><a href="http://1.bp.blogspot.com/_m32TlugOPkM/SWwd1Gs2xXI/AAAAAAAACfo/OgZpjJDA-8I/s1600-h/scrollbar.JPG"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 400px; height: 244px;" src="http://1.bp.blogspot.com/_m32TlugOPkM/SWwd1Gs2xXI/AAAAAAAACfo/OgZpjJDA-8I/s400/scrollbar.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5290636460422514034" /></a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />The number '150' in the height tells you how tall the box will be before it show the scrollbar, (illustrated to the left) you can change that number at will!<br /><br />If you only have one link list in your sidebar, this will work as written. But if you add more than one scroll bar you will have to scroll down in your HTML is see what the list is called to create a scrollbar for it. Typically the default names will be LinkList1, LinkList2...and so on. Change the name in the piece of code that you add according to that name that the widget gives it. <br /><br />And add the piece of code for each list that you want to have a scrollbar!<br /><br /><strong>One other NOTE</strong>...your sidebar section in your HTML might not be names exactly the same as mine...it might just say:<br /><br /><strong id="kchl"><span style="color:#000000;"><br /> */Sidebar/*</span></strong><br /> <strong>or </strong> <br /><strong id="kchl"><span style="color:#000000;"><br />/* Typography :: Sidebar<br />----------------------------------------------- */<br /></span></strong><br /><br />Whatever it says, it's just a section name, and I want you to put it in the right section...LOL...only because I'm a neat-freak, and anal-retentive about how the code is organized! *snort-giggle* You could actually put it in any section...but you might forget where you put it...So keep it neat!<br /><br />Happy blogging! Till next time!Bonnie S. Calhounhttp://www.blogger.com/profile/11769607640246518804noreply@blogger.com11tag:blogger.com,1999:blog-33014025.post-50360403184855456892008-03-14T22:07:00.001-07:002011-09-15T09:21:13.623-07:00Wrapping Adsense in Blog Postby<span style="font-size: 130%;"> <span style="color: maroon; font-family: times new roman;"><b><i>Bonnie Calhoun</i></b></span></span><br />
<br />
This is the third in the series of Adsense posts. The other two are <a href="http://howcanidothat.blogspot.com/2007/04/parsing-adsense-html-for-posts.html">HERE</a>, and <a href="http://howcanidothat.blogspot.com/2007/04/inserting-adsense-code-in-posts.html">HERE</a>.<br />
<br />
Today I'm going to teach you how to wrap Adsense code into a blog post. The first example isn't exactly rocket science so even the most novice of bloggers will be able to accomplish this with ease.<br />
<br />
First the glaring question: Why would I want to give myself the heart palpitations that come with messing with the stupid HTML in my template to put in an equally stupid ad?<br />
<br />
LOL...the answer to that: Ads placed within blog posts have been tested and proved to give the maximum in CTR (click thru rate). LOL...this means that you make a lot more money than with other locations on your page.<br />
<br />
Let's first look at the use of the Adsense Widget.<br />
<br />
From your <b>Dashboard</b>, click <b>Layout</b>. It will open on the <b>Page Elements</b> page. Click the <b>Edit</b> link in the Post Box. There is a clickable link in that open Configure box that you can click to put Ads between any number of posts. Read this Blogger Article about <a href="http://help.blogger.com/bin/answer.py?answer=72821">Placing Ads between posts</a>.<br />
<br />
<a href="http://bp3.blogger.com/_m32TlugOPkM/R9thg2cr7QI/AAAAAAAABTU/zJTtaVoVadQ/s1600-h/backup.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5177839413592059138" src="http://bp3.blogger.com/_m32TlugOPkM/R9thg2cr7QI/AAAAAAAABTU/zJTtaVoVadQ/s400/backup.JPG" style="cursor: hand; float: left; margin: 0px 10px 10px 0px;" /></a>From here on, it's going to get a little tougher, so the first thing I would recommend is <b>Backing Up Your Template</b> if you already don't have a copy of it saved in a NotePad file on your own computer. When you open the <b>Layout</b> tab, and click <b>Edit HTML</b> it will give you the Backup link...Please USE IT!!!<br />
<br />
<a href="http://bp3.blogger.com/_m32TlugOPkM/R9tit2cr7RI/AAAAAAAABTc/cs3mrFACM-A/s1600-h/widget.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5177840736441986322" src="http://bp3.blogger.com/_m32TlugOPkM/R9tit2cr7RI/AAAAAAAABTc/cs3mrFACM-A/s400/widget.JPG" style="cursor: hand; float: right; margin: 0px 0px 10px 10px;" /></a><br />
Okay...you're all backed up...now on to putting Adsense in your posts. Check the Expand Widget Templates box above the Edit window. Search for the following lines:<br />
<br />
<b><data:post.body/><br />
or<br />
<p><data:post.body/></p></b><br />
<br />
You will need to <b>Parse Your Adsense Code</b> like I taught you to do in <a href="http://howcanidothat.blogspot.com/2007/04/parsing-adsense-html-for-posts.html">THIS POST</a>. <span style="color: #cc0000;"><b>This is how the post section code will look after you add the Parsed Adsense Code </b></span>and the line to direct the ad to sit <b>left, or right</b>. In this code I have it set for <b>left</b>. To move it to the other side of the post, change the float position to <b>right</b>.<br />
<b id="kchl"><span style="color: black;"></span></b><br />
<blockquote><b id="kchl"><span style="color: black;"><br />
</span></b><br />
<b id="kchl"><span style="color: black;"><br />
</span></b><br />
<b id="kchl"><span style="color: black;"><div class="post-body entry-content"></span></b><br />
<b id="kchl"><span style="color: black;"><div style="float: left;"></span></b><br />
<b id="kchl"><span style="color: black;"><script type="text/javascript"><!--</span></b><br />
<b id="kchl"><span style="color: black;">google_ad_client = "pub-XXXXXXXXXXXXXXXX";</span></b><br />
<b id="kchl"><span style="color: black;">google_ad_width = 468;</span></b><br />
<b id="kchl"><span style="color: black;">google_ad_height = 60;</span></b><br />
<b id="kchl"><span style="color: black;">google_ad_format = "468x60_as";</span></b><br />
<b id="kchl"><span style="color: black;">google_ad_type = "text_image";</span></b><br />
<b id="kchl"><span style="color: black;">google_ad_channel = "";</span></b><br />
<b id="kchl"><span style="color: black;">//--></span></b><br />
<b id="kchl"><span style="color: black;"></script></span></b><br />
<b id="kchl"><span style="color: black;"><script type="text/javascript"</span></b><br />
<b id="kchl"><span style="color: black;">src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></span></b><br />
<b id="kchl"><span style="color: black;"></script></span></b><br />
<b id="kchl"><span style="color: black;"></div></span></b><br />
<b id="kchl"><span style="color: black;"><p><data:post.body/></p></span></b></blockquote><br />
<br />
Click the <b>SAVE TEMPLATE </b>button, and you're done!<br />
<br />
<img alt="Sig" height="50" src="http://bonniescalhoun.com/Front-BonnieSCalhoun_sig.png" width="152" /><br />
<div id="fb-root"></div><script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#appId=134068980025096&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><br />
<div class="fb-like" data-href="https://www.facebook.com/bonniescalhounsnarkandsuspense" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>Bonnie S. Calhounhttp://www.blogger.com/profile/11769607640246518804noreply@blogger.com84tag:blogger.com,1999:blog-33014025.post-25476196440497311422008-03-07T23:56:00.000-08:002009-06-15T21:31:30.253-07:00Creating Your Own Post Taglineby<span style="font-size:130%;"> <span style="font-family:times new roman;color:#800000;"><strong><em>Bonnie Calhoun</em></strong></span></span><br /><br /><a href="http://bp2.blogger.com/_m32TlugOPkM/R9LzM2cr7FI/AAAAAAAABR8/waefu5htVcY/s1600-h/postimage.jpg"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;" src="http://bp2.blogger.com/_m32TlugOPkM/R9LzM2cr7FI/AAAAAAAABR8/waefu5htVcY/s400/postimage.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5175466323901934674" /></a>Hello blogging friends! I haven't been ignoring you *snort-giggle* I just didn't have anything worthy of a post to report. I'm happy to say that I've found something new that could be of service to to, especially to those with team blogs!<br /><br />Recently it has been asked frequently how the members of a team blog could get their image and/or signature on their posts! Well until Blogger comes up with a post editor solution, each team member can accomplish it with just a minor adjustment.<br /><br />Each team member will need to open a "New Post" box. Into that box you are going to enter your name...as a signature. You can see how I accomplished that in the image below. And you are also going to upload an image of yourself. I made the size on this one, 50px X 60px, but that size is up to the individual.<br /><br />Click on the image to open it larger, and in it's own window so you can read what it says!<br /><br /><a href="http://bp3.blogger.com/_m32TlugOPkM/R9L1IGcr7GI/AAAAAAAABSE/hdQ_pwhn0fs/s1600-h/postbox.JPG"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;" src="http://bp3.blogger.com/_m32TlugOPkM/R9L1IGcr7GI/AAAAAAAABSE/hdQ_pwhn0fs/s400/postbox.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5175468441320811618" /></a><br /><br />Now...to get the text to wrap around the image start typing the post right after the closing image mark. The example in the picture is of this specific post, so you can see how it comes out.<br /><br />After each team member has done this in his/her own post, they could save a copy of the signature and image in a file on their own computer to reuse on subsequent posts, or they could save a draft copy of their tagline and label the post with their own name so that they know which one to open...or they could just open up their last post, and copy and paste that part into their next post!<br /><br />Happy blogging!Bonnie S. Calhounhttp://www.blogger.com/profile/11769607640246518804noreply@blogger.com28tag:blogger.com,1999:blog-33014025.post-14716330333650557302007-08-27T21:06:00.000-07:002011-07-04T09:48:55.483-07:00Resetting Blog WidgetHi all! I haven't been ignoring you, I'm just really busy writing...That's right *snort*, I'm a writer (among other things). But that's not why I'm posting today. I usually don't post about how to do something unless I've actually tried it myself, and understand how it works.<br />
<br />
So today I'm going to show you how to reset the Blog post element. Okay, I know you're asking why in the world would you want to do that? Well there could be a couple of reasons. Like if you comment link at the bottom of the post disappears, or the posts won't show...or anything major malfunction of any other part of that particular widget.<br />
<br />
Now...going back to the comment thing for a minute. If your comment link is not showing on your blog posts, check out these three things first to make sure that all of your settings are correct:<br />
<br />
Post Options in post editor...the box at the bottom of the rectangle post box that you write in....click on 'Post Options' and make sure comments are allowed.<br />
<br />
Settings - Comment tab...on the Settings tab, go to comments and make sure they are set to "Show".<br />
<br />
Template - Page Elements - Blog post...and lastly go to your Layout(Template), go to Page Elements, then click on the edit box in the Blog Post element...hint:(it will be the biggest on the page). When the Configure box opens up, make sure comments are checked.<br />
<br />
Okay, after all that your @#%$# comment link is still not showing...LOL...chill! We can fix it.<br />
<br />
LOL...we're going to play in your template HTML...wheeee!<br />
<br />
Go to Template...Edit HTML...scroll down in the code until you find this piece of code (the black highlighted section):<br />
<a href="http://bp2.blogger.com/_m32TlugOPkM/RtOl6ejAtMI/AAAAAAAAAr0/IWL6hLu4rYE/s1600-h/BlogcodeA.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5103605226791810242" src="http://bp2.blogger.com/_m32TlugOPkM/RtOl6ejAtMI/AAAAAAAAAr0/IWL6hLu4rYE/s400/BlogcodeA.JPG" style="cursor: hand; cursor: pointer; float: left; margin: 0 10px 10px 0;" /></a>Okay, select it like I did and cut that puppy out of there. Save the piece in your mouse because you're gonna put it back in a few minutes. And remember where it was, so that you can put it back in the exact same place...LOL! If you're anal retentive like me...copy a whole section of the template...like say five lines before and after the section you're going to cut out and save it on a Notepad page ore WORD page...just so you can see the exact spot to put it back!<br />
<br />
Okay...I digress...cut that highlighted section out of the template and click save...it will be fine...go ahead...click!<br />
<br />
Now...this page pops up:" Warning Will Robinson, Warning...LOL...just kidding, I'm a Lost In Space addict! Anyhow...the page says...Egads, you're about to delete a widget!...LOL...never fear...click that Confirm and Save...with pride! <br />
<br />
<a href="http://bp0.blogger.com/_m32TlugOPkM/RtOnQ-jAtNI/AAAAAAAAAr8/nIKSX8GgbH0/s1600-h/deletewidget.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5103606712850494674" src="http://bp0.blogger.com/_m32TlugOPkM/RtOnQ-jAtNI/AAAAAAAAAr8/nIKSX8GgbH0/s400/deletewidget.JPG" style="cursor: hand; cursor: pointer; float: left; margin: 0 10px 10px 0;" /></a>Okay now that you've deleted the bad bugger, you're going to reset the widget by scrolling down the template to the spot where you deleted the piece of code that is still in your mouse...Remember up above I told you to remember where you took it out of...another thing that you could do to remember the spot, before you take the piece out hit your Enter key a few times before and after the section, LOL...it will leave a big hole in the template, that will be easy to find!<br />
<br />
Okay...mouse pointer in the empty spot...right click...paste....put that baby back and hit Save.<br />
<br />
TaDa!!!! You're all better now, the Blog widget has been reset!Bonnie S. Calhounhttp://www.blogger.com/profile/11769607640246518804noreply@blogger.com186tag:blogger.com,1999:blog-33014025.post-18960015994523950852007-07-03T23:25:00.000-07:002010-08-18T06:29:56.020-07:00Moving Blogs Between Accounts<a href="http://bp2.blogger.com/_m32TlugOPkM/Ros9MNt1ZNI/AAAAAAAAAh0/iwycq6EYu_M/s1600-h/permission.JPG"><img id="BLOGGER_PHOTO_ID_5083223884467365074" style="FLOAT: left; MARGIN: 0px 10px 10px 0px; CURSOR: hand" alt="" src="http://bp2.blogger.com/_m32TlugOPkM/Ros9MNt1ZNI/AAAAAAAAAh0/iwycq6EYu_M/s320/permission.JPG" border="0" /></a> Okay guys and gals...Blogger has finally made it possible for you to really screw up your Googly life...LOL...just kidding!<br />
<br />
They have finally made it possible to move blogs...at will..between accounts. Now I'm not going to create more accounts to give you a show and tell but my Blog*Star buddy <a href="http://bloggerstatusforreal.blogspot.com/2007/06/this-looks-dangerous-2.html">Chuck</a> has a post with a lot of pictures!!<br />
<br />
The steps are relatively easy!<br />
<br />
First...with Google, set up the second account where you want to transfer the blog.<br />
<br />
1.) From your Dashboard, go to Settings, then to the far right tab called Permissions.<br />
<br />
2.) As the original administrator of the blog, invite the second account to be a blog member using the email address of the new account.<br />
<br />
3.) Log into the second mail account and accept the invitation.<br />
<br />
4.) As the original Administrator, make sure both accounts are "Administrators"...just click on the button that says guest and it will change to Administrator.<br />
<br />
5.) Click "Remove" for the account that you want to delete. The account that is left is now the administrator. (Just for ha,ha's I'd leave the first account as a backdoor to get into the blog in case you ever need it, just ignore it 'til then.)<br />
<br />
6.) Log in with the new account and the blog will be on your Dashboard with full administrative access. Voila!Bonnie S. Calhounhttp://www.blogger.com/profile/11769607640246518804noreply@blogger.com25tag:blogger.com,1999:blog-33014025.post-49951812790828914982007-06-21T20:47:00.000-07:002011-07-04T09:13:36.298-07:00How to Save a ScreenshotHi folks! It's been a while since I posted, but I'm trying to only post relevant things here, that people need instruction with.<br />
<br />
This is a new trick I recently learned. Imagine me...learning a new trick...I guess you really can teach old dogs...uh, er...never mind. Anyhow...I used to use a complicated program to do screenshots, and someone taught me an awesome easy way to do it. Now I'm sure you could use any photo manipulation program but the easiest way for people using Windows is to use Microsoft Paint.<br />
<br />
Here's what you do. On the top right-hand corner of your keyboard is a key that says PrtSc...that means Print Screen. Hit that, then open up Paint, click the edit button, when the menu opens click Paste. The picture below is me copying this blog as a screenshot:<br />
<br />
<a href="http://bp0.blogger.com/_m32TlugOPkM/RntIRJlHnQI/AAAAAAAAAfc/3WfeP-1tOSo/s1600-h/Screenshot.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5078732464256949506" src="http://bp0.blogger.com/_m32TlugOPkM/RntIRJlHnQI/AAAAAAAAAfc/3WfeP-1tOSo/s320/Screenshot.JPG" style="cursor: hand; float: left; margin: 0px 10px 10px 0px;" /></a>Then hit Save As...when the box open, give it a name, and below that box use the dropdown menu to save it as a jpg (picture). Now that you've got this shot, you may want to crop the picture. On Paint, see that tools menu running down the left side of the page...see at the top of the menu, the white box with the dotted rectangle in it...that's the crop box.<br />
<br />
<a href="http://bp3.blogger.com/_m32TlugOPkM/RntIX5lHnRI/AAAAAAAAAfk/SaV6Lg-BNnc/s1600-h/Firstcut.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5078732580221066514" src="http://bp3.blogger.com/_m32TlugOPkM/RntIX5lHnRI/AAAAAAAAAfk/SaV6Lg-BNnc/s320/Firstcut.JPG" style="cursor: hand; float: left; margin: 0px 10px 10px 0px;" /></a>Click there...your pointer will turn into a cross-hair. Put the cross-hair where you want to start the cut, hold the left mouse button and drag the cross-hair till you get all that you want of the picture, then let go. (Notice in the picture below, the dotted line.)<br />
<br />
Put the pointer in the box and right click on copy. Open a new Paint workspace (Go to File, click..on the dropdown menu choose New) and hit edit, and then paste...and the rest of the save procedure from above, and you wind up with the small piece below...Viola!<br />
<br />
<a href="http://bp2.blogger.com/_m32TlugOPkM/RntIfplHnSI/AAAAAAAAAfs/Y7KIBUaF5lM/s1600-h/portion.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5078732713365052706" src="http://bp2.blogger.com/_m32TlugOPkM/RntIfplHnSI/AAAAAAAAAfs/Y7KIBUaF5lM/s320/portion.JPG" style="cursor: hand; float: left; margin: 0px 10px 10px 0px;" /></a>Bonnie S. Calhounhttp://www.blogger.com/profile/11769607640246518804noreply@blogger.com21tag:blogger.com,1999:blog-33014025.post-59011448884044847432007-05-14T00:45:00.000-07:002011-07-04T09:14:12.280-07:00Back-up Your BlogOkay so I've been really busy...I haven't been neglecting posting...just posting here. If you notice my cool icon at the top of the left column, I've been designated as a <a href="http://groups.google.com/group/blogger-help-howdoi/browse_thread/thread/9135fb0618116635/#">Blog*Star</a> by the Google/Blogger help boards.<br />
<br />
LOL...This means I officially have no life. That I spend most of my time on the Blogger Help boards dispensing advice to wayward Bloggers that are lost in the maze of Google and Blogger.<br />
<br />
But it's fun! It's a lot of fun to teach someone to do something that they didn't know how to do before. I remember being on that end of the stick. Knowledge is power, and the more you understand Blogger, the greater the fun...so ask away!!<br />
<br />
The purpose of this post is to give you a way to backup your entire blog onto your computer. The singular easiest way is when you make a post make a copy on your computer...Okay, okay, so I'm no fun at all. That's a plain old text post that doesn't look the least bit cute or laid out like your blog page does! <br />
<br />
Sooooo....then you will need another browser...The Mozilla Firefox one! It's always a good idea to have more than one browser installed on your computer anyhow. Internet Explorer get persnickety sometimes and a backup is a good thing.<br />
<br />
<a href="http://bp0.blogger.com/_m32TlugOPkM/Rkh2p7BPHgI/AAAAAAAAAas/FQkOZVASjtI/s1600-h/ScrapBook.jpg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5064428243567713794" src="http://bp0.blogger.com/_m32TlugOPkM/Rkh2p7BPHgI/AAAAAAAAAas/FQkOZVASjtI/s320/ScrapBook.jpg" style="cursor: hand; cursor: pointer; float: left; margin: 0 10px 10px 0;" /></a>Anyhow, on Firefox one of the cool downloads is ScrapBook. You can get it <a href="http://amb.vis.ne.jp/mozilla/scrapbook/#install">HERE</a><br />
<br />
With Scrapbook you can screen capture your whole blog. There are numerous ways of capturing...in fact....a whole page load of capture features <a href="http://amb.vis.ne.jp/mozilla/scrapbook/feature1.php?lang=en">HERE</a>. My favorite way is to choose a month from my Archives. That way it puts a whole month on one page. Then you can save a Web page by right-click > [Capture Page].<br />
Also you can save a Web page by drag-and-drop favicon in the location bar or browser tab into ScrapBook Sidebar.<br />
<br />
The great thing is that ScrapBook is able to save a Web page more exactly than the Firefox standard [Save Page As] (Ctrl+S) feature. The page saved is an exact copy of what you see on the page!<br />
<br />
You can organize collected Web pages in ScrapBook Sidebar as a tree similar to Bookmarks Tree, sorting items by drag-and-drop, creating folder and putting items into it, and so on. <br />
<br />
ScrapBook Notes is a text/HTML edit feature resembling Opera's Notes, which enables you to add plain text items to ScrapBook and edit them in sidebar or browser tab. Major particular specifications are:<br />
<br />
* The first line becomes the title of the note<br />
* You can insert tab with tab key.<br />
* You can insert timestamp with F5 key.<br />
* Saving automatically when you close a note or open another note<br />
* When opening a note in a browser tab, you can preview it as HTML.<br />
* You can customize the template for the preview (note_template.html).<br />
* You can search for notes by the Full Text Search.<br />
<br />
So go and grab Firefox if you don't already have it...and then grab this very functional and cool add-on!Bonnie S. Calhounhttp://www.blogger.com/profile/11769607640246518804noreply@blogger.com9tag:blogger.com,1999:blog-33014025.post-857718365686553102007-04-26T14:13:00.000-07:002008-03-14T23:20:42.677-07:00Inserting AdSense Code in Posts<a href="http://bp0.blogger.com/_m32TlugOPkM/RjEXJrBPHKI/AAAAAAAAAYA/3jQxdcD3i2w/s1600-h/Adsense.jpg"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;" src="http://bp0.blogger.com/_m32TlugOPkM/RjEXJrBPHKI/AAAAAAAAAYA/3jQxdcD3i2w/s320/Adsense.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5057849311447948450" /></a>I've taught you to <a href="<br />http://howcanidothat.blogspot.com/2007/04/parsing-adsense-html-for-posts.html">Parse the HTML</a> of the AdSense code. Now I'm going to give example of placement.<br /><br />This first tutorial of placement is to put the code in the post below the Post Title and above the post body. This will show the Adsense code in the first post on your blog page, but when when a specific post is opened up on its own page, the code will always show up in that post.<br /><br />You will notice the placement in the image to the left. I took a picture just in case I had chosen to change my Adsense placement by the time you were reading this post.<br /><br />You will notice that for this application I chose the small banner, 468 X 60 so that it would take up most of the width of the posting area.<br /><br />To accomplish this place go Dashboard>>>Layout>>>Edit HTML...click on "Expand widget templates". It is in the right corner at the top of the Edit box.<br /><br />Scroll down in the template code until you find this line:<br /><br /><strong id="kchl"><span style="color:#000000;"><div class='post-header-line-1'/></strong><br /><br />Below that line insert your parsed HTML for the Adsense code that I taught you how to make in the last post, and hit SAVE!<br /><br />Always remember to keep a copy of your template safely stored on your own computer in a NotePad file....just in case!<br /><br />In the next tutorial I will teach you how to wrap the AdSense code in a post!Bonnie S. Calhounhttp://www.blogger.com/profile/11769607640246518804noreply@blogger.com33tag:blogger.com,1999:blog-33014025.post-33931463340202381172007-04-25T21:39:00.000-07:002011-07-04T09:15:23.346-07:00Parsing AdSense HTML For PostsI am going to teach you to add AdSense code to your posts. Since it can be an overwhelming process, I'm going to break it down into several posts.<br />
<br />
This post will teach you how to make the code compatible. To use AdSense code inside a post it is necessary to "escape" the AdSense code. The reason: If you put the code into your template just as it is written when you display the source code for the page, the Google data is invisible...that does not make Google happy and it is a TOS violation of AdSense...and they will pull your account for that!<br />
<br />
Adsense does not allow you to alter their code other than "minor" edits. what we are going to do is considered a "minor" edit.<br />
<br />
I contacted AdSense with the following question:<br />
<b id="kchl"><span style="color: black;"><br />
</span></b><br />
<blockquote><b id="kchl"><span style="color: black;">Subject: Wrapping Adsense code in blog post</span></b><br />
<b id="kchl"><span style="color: black;">Date: Wed, 18 Apr 2007 09:12:15 -0700</span></b><br />
<b id="kchl"><span style="color: black;"><br />
</span></b><br />
<b id="kchl"><span style="color: black;">I would like to put the adsense ads inside of a blog post. To make it look EXACTLY like you give it to me (when viewed as a Page source code) it is necessary for a minor alteration. For Blogger to parse the Adsense Code in XML template, the Javascript has to be escaped, using html entities...It looks EXACTLY like you gave it out when viewed by Page source, so is this permissable?</span></b></blockquote><br />
Adsense answered my email with this:<br />
<b id="kchl"><span style="color: black;"><br />
</span></b><br />
<blockquote><b id="kchl"><span style="color: black;">Hi Bonnie,</span></b><br />
<b id="kchl"><span style="color: black;"><br />
</span></b><br />
<b id="kchl"><span style="color: black;">We do permit minor edits to the AdSense code to place inside the blog posts. Please keep in mind publisher may not alter any portion of the code or manually change the layout of the ads. For instance, publishers may not alter the ad height variable to mask the Ads by Google moniker.</span></b><br />
<b id="kchl"><span style="color: black;"><br />
</span></b><br />
<b id="kchl"><span style="color: black;">Thanks for your cooperation.</span></b><br />
<b id="kchl"><span style="color: black;"><br />
</span></b><br />
<b id="kchl"><span style="color: black;">Sincerely,</span></b><br />
<b id="kchl"><span style="color: black;"><br />
</span></b><br />
<b id="kchl"><span style="color: black;">Sean</span></b><br />
<b id="kchl"><span style="color: black;">The Google AdSense Team</span></b></blockquote><br />
So here is how we are going to parse the HTML to make it compatible and when viewed by using the Page Source code, it will look exactly as given to you by Adsense.<br />
<br />
This is an example of a piece of Adsense code as given out by Adsense:<br />
<b id="kchl"><span style="color: black;"></span></b><br />
<blockquote><b id="kchl"><span style="color: black;"><br />
</span></b><br />
<b id="kchl"><span style="color: black;"><script type="text/javascript"><!--</span></b><br />
<b id="kchl"><span style="color: black;">google_ad_client = "pub-XXXXXXXXXXXXXXXX";</span></b><br />
<b id="kchl"><span style="color: black;">google_ad_width = 468;</span></b><br />
<b id="kchl"><span style="color: black;">google_ad_height = 60;</span></b><br />
<b id="kchl"><span style="color: black;">google_ad_format = "468x60_as";</span></b><br />
<b id="kchl"><span style="color: black;">google_ad_type = "text_image";</span></b><br />
<b id="kchl"><span style="color: black;">google_ad_channel = "";</span></b><br />
<b id="kchl"><span style="color: black;">//--></span></b><br />
<b id="kchl"><span style="color: black;"></script></span></b><br />
<b id="kchl"><span style="color: black;"><script type="text/javascript"</span></b><br />
<b id="kchl"><span style="color: black;">src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></span></b><br />
<b id="kchl"><span style="color: black;"></script></span></b></blockquote><br />
You are going to change the (<) to (&lt;) and the (>) to (&gt;) and the quote marks ( " ) to (&quot;) They will all be HTML entities. The code will then look like this:<br />
<br />
<b id="kchl"><span style="color: black;"></span></b><br />
<blockquote><b id="kchl"><span style="color: black;"><br />
</span></b><br />
<b id="kchl"><span style="color: black;">&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--</span></b><br />
<b id="kchl"><span style="color: black;">google_ad_client = "pub-XXXXXXXXXXXXXXXX";</span></b><br />
<b id="kchl"><span style="color: black;">google_ad_width = 468;</span></b><br />
<b id="kchl"><span style="color: black;">google_ad_height = 60;</span></b><br />
<b id="kchl"><span style="color: black;">google_ad_format = "468x60_as&quot;;</span></b><br />
<b id="kchl"><span style="color: black;">google_ad_type = "text_image";</span></b><br />
<b id="kchl"><span style="color: black;">google_ad_channel = "";</span></b><br />
<b id="kchl"><span style="color: black;">//--&gt;</span></b><br />
<b id="kchl"><span style="color: black;">&lt;/script&gt;</span></b><br />
<b id="kchl"><span style="color: black;">&lt;script type=&quot;text/javascript&quot;</span></b><br />
<b id="kchl"><span style="color: black;">src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt;</span></b><br />
<b id="kchl"><span style="color: black;">&lt;/script&gt;</span></b></blockquote><br />
The next post will show you how to place this in your template!Bonnie S. Calhounhttp://www.blogger.com/profile/11769607640246518804noreply@blogger.com22tag:blogger.com,1999:blog-33014025.post-86004514837773285652007-04-17T19:50:00.000-07:002007-04-17T20:28:38.719-07:00Improving AdSense Performance<a href="http://bp2.blogger.com/_m32TlugOPkM/RiWIoh-Rb9I/AAAAAAAAAU4/MaXUNSQMKnU/s1600-h/googleadsenseheatmap.jpg"><img id="BLOGGER_PHOTO_ID_5054596386688954322" style="FLOAT: left; MARGIN: 0px 10px 10px 0px; CURSOR: hand" alt="" src="http://bp2.blogger.com/_m32TlugOPkM/RiWIoh-Rb9I/AAAAAAAAAU4/MaXUNSQMKnU/s320/googleadsenseheatmap.jpg" border="0" /></a>In the real estate industry, there are three things that are the most important about a property...location, location, and...location!<br /><br />1.) So the very first thing that I want you to pay attention to when working to increase your AdSense performance is location! We'll start with the HEAT MAP to the left. The dark spots are the page locations where readers spend the most time looking. Utilize as many of these spots as possible.<br /><br />2.) Place your ads above the FOLD...in newspaper language, this is the face location, or what you see on the page when it opens. Depending on your screen size it could be a little more or a little less than what you see here. But rule of thumb is that ads below the FOLD are seldom seen or clicked!<br /><br />3.) As indicated in the HEAT MAP, the left side of the page is a premiere location. Readers are accustomed to seeing the navigational menu on this side of the page, so move your menu to the right side, like I did, and use the left for your ads!<br /><br />Now the next section of performance enhancement has to do with the Ads themselves.<br /><br />1.) Use lots of Ads! Google gives you ad allowances per page, utilize all that you can. But you must keep track of what you are using and what methods work best. You can keep track of this by...<br /><br />2.) Utilizing the CUSTOM CHANNELS. AdSense gives you the ability to put a name tag on each ad that you make. This will help you to find out which ads work best, according to the fonts, colors, size and placement on the page.<br /><br />A.) Match the FONTS to those on your page, especially if you are wrapping the AdSense in a blog post!<br />B.) Match the COLORS of your Ads to the colors of your website. Visitors will look at them more, especially BLUE LINKS. Blue links have a higher CTR than other color links because people are just used to clicking on blue links!<br />C.) Use Large Ads where possible. The Large Rectangle (336x280) is the best performing ad unit.<br />D.) And get rid of any borders, so your readers eye can wander around the page unimpeded.Bonnie S. Calhounhttp://www.blogger.com/profile/11769607640246518804noreply@blogger.com5tag:blogger.com,1999:blog-33014025.post-73183599556752794092007-04-12T21:02:00.000-07:002011-07-04T09:16:26.324-07:00Uploading a Google Doc or Spreadsheet<a href="http://bp2.blogger.com/_m32TlugOPkM/RfDhvC_81LI/AAAAAAAAAKA/5Ima6FLorAo/s1600-h/tour1a.gif"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5039776181402784946" src="http://bp2.blogger.com/_m32TlugOPkM/RfDhvC_81LI/AAAAAAAAAKA/5Ima6FLorAo/s320/tour1a.gif" style="cursor: hand; cursor: pointer; float: left; margin: 0 10px 10px 0;" /></a>I already did a <a href="http://howcanidothat.blogspot.com/2007/01/docs-spreadsheets.html">TOUR</a> on creating a Google Doc or Spreadsheet. <br />
<br />
So you can go to your <a href="http://docs.google.com/">Google Doc & Spreadsheet</a>, log in with your Gmail account. You get the WELCOME screen. you can then click on New Document or New Spreadsheet, create your sheet and save it.<br />
<br />
So we'll dispense with that tutorial. Let's say that we already have a and you want to embed it in a post that you're making.<br />
<br />
To publish a Document, click on Publish (upper right-hand corner). A new window opens, select Publish to blog. Input your blog provider, then your username and password, click Okay!<br />
<br />
For a spreadsheet, click Publish now, then click "more publishing options". A window opens with more publishing formats, pick "HTML to be embedded in webpage". Specify the range of cells...the whole spreadsheet, one page, specific cells, etc. Click "generate URL". Copy that code into an Edit Post box and publish!Bonnie S. Calhounhttp://www.blogger.com/profile/11769607640246518804noreply@blogger.com9tag:blogger.com,1999:blog-33014025.post-40722553881874924332007-04-12T19:40:00.000-07:002011-07-04T09:17:14.401-07:00SiteMaps<a href="http://bp2.blogger.com/_m32TlugOPkM/Rh79jPfKL4I/AAAAAAAAAT4/3PDXtoGJxSk/s1600-h/searchoptimization.gif"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5052754613850746754" src="http://bp2.blogger.com/_m32TlugOPkM/Rh79jPfKL4I/AAAAAAAAAT4/3PDXtoGJxSk/s320/searchoptimization.gif" style="cursor: hand; cursor: pointer; float: left; margin: 0 10px 10px 0;" /></a><b>What is a Sitemap?</b><br />
A sitemap is a display for the layout of your website. It is an aid to the search engines and to your visitors. Year ago they only consisted of a list of links, but now a sitemap is a descriptive roadmap of your site.<br />
<br />
It is fleshed out with keyword details for each section and subsection to help your visitors enhance their touring experience. And the biggest benefit is that it gives the search engines more fodder!<br />
<br />
<b>To create a good sitemap.</b><br />
<br />
Be sure that it is linked from your HOME page. this forces the search engine to find it right away, and then follow it all the way through your site. If you link it from other pages, and the spider finds a dead link, it will quit the search!<br />
<br />
Small sites can place every page on their list, while larger sites should not because an never-ending list of links causes the search engine to think of you as a link farm. A good sitemap should have no more than 25 to 40 links. It also is easier on your visitors!<br />
<br />
The title of each link should contain a keyword and link to the original page. Also write 10 to 25 words to tell what the page is about. This part contributes to your depth of content with the search engine.<br />
<br />
If you have 15 pages on your site, then every page should be linked to every other page in the sitemap, and PLEASE make sure that all of your links work! When a person or a search engine find a broken link they both lose interest...FAST!<br />
<br />
And just like you can't leave your website to fend for itself...don't neglect your sitemap. Keep it updated and current...Your visitors and the search engines will love you!<br />
<br />
<b>A good sitemap:</b><br />
...gives a quick overview of your site<br />
...gives a concise path for the search engines to follow<br />
...gives a text link for every page of the site<br />
...gives easy to follow paths for visitors<br />
...gives a short description of each page<br />
...uses important keyword phrases<br />
<br />
<b>Why is a SiteMap important?</b><br />
Because it improves the value of your site by getting it indexed. This is your most important SEO <a href="http://en.wikipedia.org/wiki/Search_engine_optimization">(Search Engine Optimization)</a> goal! A sitemap provides a one-stop shopping experience for the spiders, and it can also be invaluable to lost visitors!<br />
<br />
<a href="http://bp3.blogger.com/_m32TlugOPkM/Rh799ffKL5I/AAAAAAAAAUA/xfVEKeS7eco/s1600-h/searchenginenews.gif"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5052755064822312850" src="http://bp3.blogger.com/_m32TlugOPkM/Rh799ffKL5I/AAAAAAAAAUA/xfVEKeS7eco/s320/searchenginenews.gif" style="cursor: hand; cursor: pointer; float: right; margin: 0 0 10px 10px;" /></a><br />
If you wish to delve further, check out <a href="http://www.seochat.com/">SEO Chat</a> for great info on the subject.<br />
<br />
A good place to start is with <a href="http://www.google.com/webmasters/sitemaps/">Google SiteMaps</a>Bonnie S. Calhounhttp://www.blogger.com/profile/11769607640246518804noreply@blogger.com8tag:blogger.com,1999:blog-33014025.post-22196180886562832292007-04-01T19:43:00.000-07:002007-04-10T00:00:48.026-07:00Using Picasa/Blogger Web Albums<a href="http://bp1.blogger.com/_m32TlugOPkM/RhBvkapKVoI/AAAAAAAAAQ0/O4mUKFg31oQ/s1600-h/picasaweblogo-en.gif"><img id="BLOGGER_PHOTO_ID_5048657853700265602" style="FLOAT: left; MARGIN: 0px 10px 10px 0px; CURSOR: hand" alt="" src="http://bp1.blogger.com/_m32TlugOPkM/RhBvkapKVoI/AAAAAAAAAQ0/O4mUKFg31oQ/s320/picasaweblogo-en.gif" border="0" /></a><br /><br /><span style="color:#ff0000;">UPDATE:If your blog folders have vanished, or are not there, set your Language Preference in Picasa Settings to 'English (US)' to keep the blogger folder visible. If you have it set it to English UK, that's why the blog folder vanished.<br /></span><br />Sign in with your present Google account.<br /><a href="https://www.google.com/accounts/ServiceLogin?hl=en_US&continue=http%3A%2F%2Fpicasaweb.google.com%2F&passive=true&service=lh2">Picasa Web Album Sign In</a><br /><br />When you sign in, the first page that comes up is your Albums. Any of the albums that have a little Blogger symbol in the lower hand corner, are your Blogger Albums. If you have access to more that one blog, and have uploaded at least one picture to that blog, there will be an Album cover…you can change this cover later to an actual cover.<br /><br />Under the album is the name of the blog, beside that in parenthesis is the number of pictures in that album…Click on the name and it will open the Album.<br /><br />Any photos that you post to Blogger are included in your Picasa Web Albums storage quota. The number of Blogger photos you can upload is determined by your web albums storage level.<br /><br />Any photos you upload using Blogger’s post editor will automatically appear in Picasa Web Albums under “My Photos”. The title of the Blogger web album will match the title of your blog. Please be advised that album titles cannot be modified in Picasa Web Albums.<br /><br />The album cover will be designated with a small Blogger icon in the corner. Blogger web albums are unlisted when they initially appear (you can make them public later) and aren't searchable on the Picasa Web Albums site.<a href="http://bp2.blogger.com/_m32TlugOPkM/RhBv1qpKVpI/AAAAAAAAAQ8/yQs8LsdCY3E/s1600-h/pwapreview.jpg"><img id="BLOGGER_PHOTO_ID_5048658150053009042" style="FLOAT: right; MARGIN: 0px 0px 10px 10px; CURSOR: hand" alt="" src="http://bp2.blogger.com/_m32TlugOPkM/RhBv1qpKVpI/AAAAAAAAAQ8/yQs8LsdCY3E/s320/pwapreview.jpg" border="0" /></a>Once a photo is posted to Blogger from Picasa Web Albums, future comments or captions made on either site will not be synched with each other. We recommend that you add captions and comments in Picasa Web Albums before posting a photo to Blogger.<br /><br />If you delete a Blogger web album, those photos will also be deleted from your blog. If you delete a specific photo from your Blogger web album in Picasa Web Albums, your blog will not be deleted, though that photo will not appear.<br /><br />Please note that you cannot upload photos directly to a Blogger web album using the Picasa Web Albums site at this time, and only empty Blogger albums can be deleted at this time.<br /><br />You can always purchase extra storage by clicking "Settings" at the top right of your Web Albums page. At the bottom of your Settings page, click the link in the "Storage" section and follow the instructions displayed to purchase additional storage.<br /><br />There are two ways to see how much storage you’re using in Picasa Web Albums:<br /><br />1. Go to your Picasa Web Albums public gallery (the URL of your Public Gallery is http://picasaweb.google.com/username). Your storage information will appear in green beneath your albums. Please note that the username on your Public Gallery is the username that you use to sign into Picasa Web Albums.<br /><br />2. Click "Settings" at the top of your Web Albums homepage to go the “Settings” menu. In the "Storage" section, click "Need more space? Upgrade your storage!" In the window that appears, your current usage amount will display in green.Bonnie S. Calhounhttp://www.blogger.com/profile/11769607640246518804noreply@blogger.com4tag:blogger.com,1999:blog-33014025.post-83886705544577280812007-03-30T00:35:00.000-07:002007-03-29T21:36:25.624-07:00What Is PageRank<a href="http://bp1.blogger.com/_m32TlugOPkM/RgyRYapKVlI/AAAAAAAAAQI/dCxerNw2nHw/s1600-h/pr2.gif"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;" src="http://bp1.blogger.com/_m32TlugOPkM/RgyRYapKVlI/AAAAAAAAAQI/dCxerNw2nHw/s320/pr2.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5047569131030337106" /></a>What is PageRank? Well to start with, it is a trademark of Google, *snort* who else?<br /><br />A PageRank results from a "ballot" among all the other pages on the World Wide Web about how important a page is. A hyperlink to a page counts as a vote of support. <br /><br />The PageRank of a page is defined recursively and depends on the number and PageRank metric of all pages that link to it ("incoming links"). A page that is linked to by many pages with high PageRank receives a high rank itself. If there are no links to a web page there is no support for that page.<br /><br />If you'd really like to read the algorithm particulars, go <a href="http://en.wikipedia.org/wiki/PageRank">HERE</a><br /><br />The maximum amount of PageRank in a site increases as the number of pages in the site increases<br /><br />The only way to increase the maximum is to add more inbound links and/or increase the number of pages in the site. <br /><br />While I recommend creating and adding new pages to increase a site's total PageRank so that it can be channeled to specific pages, there are certain types of pages that should not be added. These are pages that are all identical or very nearly identical and are known as cookie-cutters. Google considers them to be spam and they can trigger an alarm that causes the pages, and possibly the entire site, to be penalized. Pages full of good content are a must. <br /><br />Outbound links are a drain on a site's total PageRank. They leak PageRank. To counter the drain, try to ensure that the links are reciprocated. Because of the PageRank of the pages at each end of an external link, and the number of links out from those pages, reciprocal links can gain or lose PageRank. You need to take care when choosing where to exchange links.<br /><br />To a spider, www.domain.com/, domain.com/, www.domain.com/index.html and domain.com/index.html are different urls and, therefore, different pages. Surfers arrive at the site's home page whichever of the urls are used, but spiders see them as individual urls, and it makes a difference when working out the PageRank. It is better to standardize the url you use for the site's home page. Otherwise each url can end up with a different PageRank, whereas all of it should have gone to just one url. <br /><br />And after all of that info has crossed your eyes, you can check your site's PageRank <a href="http://www.prchecker.info/">HERE</a>. And you can even grab Google's handy code to put the PageRank live on your site!Bonnie S. Calhounhttp://www.blogger.com/profile/11769607640246518804noreply@blogger.com10tag:blogger.com,1999:blog-33014025.post-29542593516369590302007-03-28T22:48:00.000-07:002007-04-03T23:16:54.100-07:00Putting Voice or Music On Your Blog<a href="http://bp3.blogger.com/_m32TlugOPkM/RgtjvKpKViI/AAAAAAAAAPs/OFVL0kpCjCI/s1600-h/T10261623.jpg"><img id="BLOGGER_PHOTO_ID_5047237469360772642" style="FLOAT: left; MARGIN: 0px 10px 10px 0px; CURSOR: hand" alt="" src="http://bp3.blogger.com/_m32TlugOPkM/RgtjvKpKViI/AAAAAAAAAPs/OFVL0kpCjCI/s320/T10261623.jpg" border="0" /></a><br />I don't understand the lure of wanting music on your blog. That's probably because I'm on dial-up and sites that use music take forever to load, and I get three second snippets of music every fifteen seconds until the whole thing has loaded.<br /><br />And music always takes up a lot of bandwidth, which can make the connection timeout on you...but with all that said, if you still want music...<br /><br />If you would like to make digital voice clips, go here to <a href="http://www.gabcast.com">Gabcast</a>.<br /><br />To upload music from like an iPod or MP3 player:<br /><br />First you need to host your music somewhere. I'm a Google nut, so the first place I'd say would be Google Pages. You have to make a GMail account to use the pages and if you don't already have one...BEWARE! Because creating a GMail account will override your email account that has Blogger.<br /><br />If you don't want a GMail account, create a Google Group *snort*...you can be a group of one, but it will give you a whopping 100MB of file space where you could upload all of your music, for free!<br /><br />So you've opened a group, uploaded your music file. Now copy down the URL for the file.<br /><br />Then go Dashboard >>> Layout >>> When the Page element page opens, click on "Add a Page Element. Choose a HTML/JavaScript element.<br /><br />Copy this code into the Page element:<br /><br /><strong id="kchl"><span style="color:#000000;"><br /><embed src="URL of your audio or video file" loop="false" width="400" height="300" autostart="false" type="video/x-ms-asf"></embed ></strong></span><br /><br />The parts of this code are:<a href="http://bp2.blogger.com/_m32TlugOPkM/RgtlE6pKVkI/AAAAAAAAAP8/X3FrD16GJFE/s1600-h/T10546926.jpg"><img id="BLOGGER_PHOTO_ID_5047238942534555202" style="FLOAT: right; MARGIN: 0px 0px 10px 10px; CURSOR: hand" alt="" src="http://bp2.blogger.com/_m32TlugOPkM/RgtlE6pKVkI/AAAAAAAAAP8/X3FrD16GJFE/s320/T10546926.jpg" border="0" /></a><br /><br />The <strong>URL of your music </strong>at the freehost of your choice.<br /><br />Loop can be set to <strong>false</strong>, so the piece doesn't continually repeat. Set it to <strong>true</strong> if you want a particular sound like waves to keep repeating.<br /><br />The height and width which you can change to fit your particular sidebar.<br /><br />Autostart set at <strong>false</strong> lets your visitor start the music themselves...they will love you for this!<br /><br />And the last part, <strong>type</strong>...tells you what kind of file it is. For example:<br /><br />An MP3 file would be: type="audio/x-ms-mp3"<br />A AVI file would be: type="audio/x-ms-avi"<br />A MPEG file would be: type="video/x-ms-mpg" (or what ever they call it)<br /><br />You can also put a Player on your blog, by going to <a href="http://www.google.com/ig/directory?synd=open&num=24&q=MP3+player&btnG=Search+Google+Gadgets">Google Gadgets</a>. They have 12 players from MP3's to YouTube and Podcasts.<br /><br /><span style="font-size:130%;color:#ff0000;">UPDATE:</span> You can have your MP3 Links: <br /><span style="color:#000000;"><strong id="kchl"><span style="color:#000000;"> <a href="my_file.mp">Link</a></strong><br /><br />Automatically turn into a little simple player by adding this code into your HTML:<br /><strong id="kchl"><span style="color:#000000;"><br /><script type="text/javascript" src="http://googlepage.googlepages.com/player.js"></script></strong><br /><br /><br /></span></span></span><span style="color:#000000;"><span style="color:#000000;"><span style="color:#000000;"></span></span></span>Bonnie S. Calhounhttp://www.blogger.com/profile/11769607640246518804noreply@blogger.com17tag:blogger.com,1999:blog-33014025.post-70417399797794431702007-03-25T23:19:00.000-07:002011-07-04T09:19:16.641-07:00Google Spiders Everywhereby<span style="font-size: 130%;"> <span style="color: maroon; font-family: times new roman;"><b><i>Bonnie Calhoun</i></b></span></span><br />
<br />
We've already discussed how to sign up for the <b>search engines</b>, including <b>Google</b>. See the post about Search Engines or click on the Label that I made for it.<br />
<br />
<a href="http://bp2.blogger.com/_m32TlugOPkM/Rgdu6GNhUAI/AAAAAAAAAOs/4Bx52qsdLQk/s1600-h/17_small.jpg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5046123851870720002" src="http://bp2.blogger.com/_m32TlugOPkM/Rgdu6GNhUAI/AAAAAAAAAOs/4Bx52qsdLQk/s320/17_small.jpg" style="cursor: hand; cursor: pointer; float: left; margin: 0 10px 10px 0;" /></a>Today I'm going to go through what it takes to make sure that your site is being <b>crawled correctly by the spiders</b>...LOL...That sounds cool, doesn't it?<br />
<br />
One of the first things you need to be aware of is <a href="http://blogsearch.google.com/ping"><b>Google Blog Search Ping Service</b></a>. You can ping your blog here to get Google to crawl it.<br />
<br />
Then after you ping your blog, go and check for it to register on <a href="http://blogsearch.google.com/blogsearch?hl=en&client=news&q=adsense+referral+beta&ie=UTF8"><b>Google Blog Search</b></a>. Now if it doesn't show up right away, don't worry!<br />
<br />
Go sign yourself up with <a href="http://www.google.com/alerts"><b>Google Alerts</b></a>. When you sign up for this put the URL (address of your blog) in the top box, where it says search terms. The when your blog updates, you can tell how long it takes the spiders to crawl your blog, because Google will send you an email, every time you update!<br />
<br />
Next thing...and I've addressed this in the <b>Search Engine </b>post is your site map. You can set this up with <a href="http://www.google.com/webmasters/"><b>Google WebMaster Central</b></a>. Now I can't say enough good stuff about these tools on this site. You can set up your site map, you can find out if your site is being indexed by Google, a Help Center, and multiple other tools!<br />
<br />
I gave you instructions before on how to setup your <b>site map</b>, but make sure that when your done you get the little (1) on the column that says site map. After you've set up your site map, check the crawl rate.<br />
<br />
Click on the tool for setting up a <b>site map</b>. This will be the page where you get the little (1) under the site map column. Click on the title of your blog and it takes you to the <b>Diagnostics </b>page that tells you all about your crawl rate, the errors, and tools.<br />
<br />
Your crawl rate should be set to <b>normal</b> because it will tell you that at the slower rate: "A slower crawl will reduce <b>Googlebot</b>'s traffic on your server, but we may not be able to crawl your site as often."Bonnie S. Calhounhttp://www.blogger.com/profile/11769607640246518804noreply@blogger.com13tag:blogger.com,1999:blog-33014025.post-6602415164451027832007-03-21T22:56:00.000-07:002007-03-21T23:49:13.483-07:00Don't Lose The WidgetsYou've taken a deep breath and you picked out a new Beta template from one of the cool sites, like the ones in my right sidebar over there. And you're all excited about having a new blogskin. You upload the template.<br /><br />Now mind you, you've been using New Blogger for several months, and you labored over learning how to make widgets, and had a ball dragging and dropping them all over the place. Now you've previewed the new skin....Auhhh, that's sweet! You hit the Save Template button.<br /><br /><strong>WIDGETS ARE ABOUT TO BE DELETED</strong> pops up on the screen!<br /><br />Your brain locks up, your eyes bug out, and you start blubbering like a baby....LOL...believe me I empathize...it happened to me!<br /><br />Hit the CANCEL button and stop shaking! There is a way to save the day!<br /><br />Start by saving a copy of your present template on your own computer.<br /><br />Go Dashboard >>> Layout >>> Edit HTML >>> Your template is in the Edit Template window<br /><br />Whatever you do...Do not use the Download Full Template button, and DO NOT CHECK the box to Expand Widget Templates. <br /><br />Copy the code from the Edit Template box by Right clicking, Selecting All, then Copy. You will open a NotePad file on your computer and copy the template there. Do not use a wordprocessor program like Word or Works. They don't always behave with plain text files. Save it as a .txt file. For example: NewSkin.txt<br /><br />Now, I'm going to assume that you already have a copy of the new template saved on your computer as a NotePad .txt file. Why am I assuming that? Because I've told you before, always save a clean copy of your template on your own hard drive...in case!<br /><br />Okay, open the new template file and look for the place to put your existing widgets. I doesn't matter which sidebar you put them in in the new template because they have the drag and drop function in the template.<br /><br />Your pristine template will look something like this:<br /><strong id="kchl"><span style="color:#000000;"><br /><!-- start right sidebar --><br /><div id='rightbar_wrap'><br /><div class='side'><br /><b:section class='sidebar' id='righttbar' preferred='yes'><br /><b:widget id='Profile1' locked='false' title='About Me' type='Profile'/><br /><b:widget id='Label1' locked='false' title='Labels' type='Label'/><br /><b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/><br /></b:section><br /></div><br /></div><br /><!-- end right sidebar --><br /></strong><br /><br />This is how that same section will be changed after you get rid of some widgets that you don't use and put in others that you were using in your old template.<br /><br /><strong id="kchl"><span style="color:#000000;"><br /><!-- start right sidebar --><br /><div id='rightbar_wrap'><br /><div class='side'><br /><b:section class='sidebar' id='righttbar' preferred='yes'> <br /><b:widget id='HTML11' locked='false' title='' type='HTML'/><br /><b:widget id='HTML10' locked='false' title='' type='HTML'/><br /><b:widget id='HTML2' locked='false' title='' type='HTML'/><br /><b:widget id='Label1' locked='false' title='Labels' type='Label'/><br /><b:widget id='HTML6' locked='false' title='BLOGGING TOOLS' type='HTML'/><br /><b:widget id='HTML5' locked='false' title='' type='HTML'/><br /><b:widget id='Image1' locked='false' title='' type='Image'/><br /><b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/><br /></b:section><br /></div><br /></div><br /><!-- end right sidebar --><br /></strong><br /><br />Be sure to keep the widgets closed (unexpanded) when you save a copy of your old template, because it's too hard when they are expanded to grab allthat extra code. The Blogger computers store this information by just those single lines of data that are connnected with your blog account.<br /><br />Once you have all the widgets placed in the new template and save it.<br /><br />Yo install the new template go Dashboard >>> Template >>> Edit HTML >>> Upload a template from a file on your hard drive >>> Browse >>> Upload!<br /><br />And if you added all of your widgets, you wont get that heart stopping message!Bonnie S. Calhounhttp://www.blogger.com/profile/11769607640246518804noreply@blogger.com2