Page Jumps

Hi Annie! Just wondering.. how would you make a link in a blog which in it will take you to that part in a blog? Don't get it? Here's what I mean..
For example, "Steps on Baking Pastry:" There will be list of the steps first then, the steps. For ex., you click "Step 8: Putting it in the Microwave", it takes you to:
"Step 8: Putting it in the Microwave
Put it there for 3-5 minutes until...."
?? Just wondering.. Would be glad if you answer back!


Instead of reinventing the wheel, I found this wonderful tutorial.
Jumping Inside Pages - HTML Tutorials

Chicklets...a blast from the past

Hi!

I just commented on your post, Optimize your blog for mobile devices, and read a couple of your other articles. As a blogger myself, I am impressed.

I also just added your I Love BlogU button to my brand new Hacker Study (http://www.hackerstudy.com) blog.

Could I trouble you for the info, how or where did you make that button? I have several Blogger hosted blogs and I would really like to provide these buttons for my readers as well.

Considering that you have lots of tweaks for Blogger, I will be visiting you on a regular basis.

Sincerely,

Tom


Well, this is the little button he was talking about.   I made it ages ago when I was in love with Chicklets. A Chicklet is an 80x15 button. Very exact on the size. If it's not 80x15, it is not a chicklet! I had a gazillion in my cellar on BlogU. But, I have since house cleaned and left only this one little chicklet to give away to anyone that wants it.

If, you want a Chicklet to brand your site, or profess your love for clouds, Firefox, trees, iPhones...or whatever...these are the sites you can go to make them.

1. Brilliant Button Maker By the way, this is the one I used to make my Chicklet because it allows an image to be used.
2. Just another button maker
3. Adam Kasly Button Maker This site has a nice clean design, which may appeal to you.

And this is just a collection of Blogger Badges a.k.a. antipixel buttons, chicklets

so you can see what all can be done with these little snazzy buttons.

Hyperlink image to open new window

How do I make the picture link to an external site, but have it open into a new window?
 
Some think this is not a good idea. This post is not addressing that. This is simply a post on how to open an image that is linked to another site in a new window.

This is the code that does that:

<a href="URL" title="TITLE"><img src="IMAGE URL" border="0" width="xx" height="xx" alt="Description"></a>

And here is the code with the information plugged in:

<a href="http://seaside-sharon.blogspot.com/" title="Seaside Sharon"><img src="http://farm4.static.flickr.com/3117/2489901121_35e9239f99.jpg" border="0" width="254" height="45" alt="Seaside Sharon header"></a>

Here is the result of using that code.

Where to put the blockquote code

where to put the code?


I had a question regarding where to place the blockquote code from this post, Pretty Blockquotes.

You insert this code within your post where you want the blockquote to appear. (using the Edit HTML window).

<blockquote>PLACE QUOTE TEXT HERE</blockquote>.

How to remove a border from around a photo

How to completely REMOVE the border that appears around a posted photo within a post on Blogger??



This is easy to change! You will look for the code that you wish to change, which is .post img code in the CSS style sheet.

This is the code in my template (a modified Blogger Minima template):

.post img {
padding:4px;

border:0px solid $bordercolor;

}

Or it could look something like this:

.post img {
margin: 5px;
padding: 5px;
background: $imagebgColor;

border: 1px solid $imageBorderColor;

}

Change this line to read:

.post img {
padding:4px;

border:none;

}

If you have difficulities in finding the correct code in your CSS template, keep in mind you are looking for .post img.

No more borders around your images!!

Add a double line border

How do you get it to make it a double line? I tried experimenting but I'm not sure which fields should be changed. Thanks, this site is awesome!


This is an easy thing to change. You will look for the code that you wish to change. If it is the post, you look for the post code in the CSS style sheet. If it is the sidebar, you look for the sidebar code. As a matter of fact, anything in the CSS style sheet that says border can be changed.

This is the code in my template (a modified Blogger Minima template) for the post:

.post {
margin:.5em 0 1.5em;
border:1px dashed $bordercolor;
padding: 5px;
padding-bottom:0px;
}

This is the line we are interested in changing. See where mine says dashed? That gives me the dashed line around my posts. Change that to double. You may want to also change the 1px to something a little thicker, like 3px or 4px just to make it stand out better.

Actually, there are other styles you can use. Here is a list of them:

1. dotted
2. solid
3. dashed
4. double
   
5. outset
6. inset
7. groove
8. ridge

There may be more, but I'm not aware of them.

And here is another little tip. You can apply a different border to each side. For instance if you want a double border on the bottom only, you would change the above code to:

.post {
margin:.5em 0 1.5em;
border-bottom:3px double $bordercolor;
padding: 5px;
padding-bottom:0px;
}

See where I added -bottom? That same line can be changed for all sides using:

1. -top
2. -right
3. -bottom
4. -left

Or if you want it on the bottom and right only do this:

.post {
margin:.5em 0 1.5em;
border-bottom: 3px double $bordercolor;
border-right: 3px double $bordercolor;
padding: 5px;
padding-bottom:0px;
}

You get the idea. There are a million ways to play with this. It is just a matter of what look you want.

A Program to Create Your Own Tab Menu Graphics

Hi Annie!
Wanted to tell you I found a free download of a software to create tabbed menus, which generates the code too. It's really neat. I used it to make all the tabs.


My friend, hillgrandmom, from Life on a Hill, sent me a link to CSS Tab Designer. So, I took a look at her blog. It made lovely little tabs. After you make your new tabs to match your blog, you can add them using this tutorial: A Tab Menu for Your Very Own. How exciting is that?

Widen the Post Section

Thank you so much for the tips!
it really helps :]
and do you know how to enlarge the postings column? Because my posting column is kinda too small somehow in my blog .
Thanks :]


This was from sararocks. This is a easy little fix. You have to make two little changes in your CSS style sheet. Look for this piece of code:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Then make changes to the width. Add the same amount of to each area like this:

#outer-wrapper {
width: 860px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 610px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Here I added 200px to each area. All that is left to do is save your work!

Post Title With an Image

First off, I love your blog! You do so many cool things with it! I was looking at some of the blogs you have done for other people. I particularily like http://christyann-photography.blogspot.com/search/label/baby. After looking at I was wondering, how did you do the image and fonts for the Post Title? I thought you did an excellent job! If you have time, I would love to know how. If not it is ok. Thanks!

--
Carrie Jo


Pretty easy to accomplish! You must locate the .post h3 part of your CSS style sheet. Before doing anything, remember to save your template!

.post h3 {
background:url(YOUR POST IMAGE) no-repeat;
padding: 20px;
margin: 20px;
margin-top:.25em;
margin-left: 0px;
margin-bottom: 20px;
border-top:1px dashed #42c4de;
border-bottom: 1px dashed #42c4de;
padding:10 0 4px;
font: normal normal 100% Georgia, Times, serif;
font-size:240%;
font-weight:bold;
line-height:1.4em;
color: #49331c;
text-transform:uppercase;
text-align: center;
}

This is the line of code that you add to the .post h3 section.

Depending upon the size of your image (I would recommend keeping it small...around 20-30 px square.) you will adjust these values. Now, this will be different for each blog...each image. So trial and error will see you through.

If you want some sort of border, this is the code. And here are some values that you can use instead of dashed:

1. dotted
2. solid
3. double
4. groove
5. ridge
6. inset
7. outset

Save your work and you have a cute little image in your post title!

Drop Down Menu for Labels

Hi Annie
I've just successfully used your instructions on adding tabs to my blog and have seriously cleaned up my sidebar, for which I sincerely thank you but, I would like to go a bit further. My Label list is pretty long and I would like to have a scroll bar or drop down menu for it. Trouble is, I can't see how I can get the scroll bar instructions on BlogU to work with the Label page element 'cos there's nowhere to enter the code given and I can't find anything about a drop-down (unless I've passed over it) on your blog.
Just thought it was worth an email to ask advice and to say thank you for the info I've already used successfully. I've recommended your site to a friend and put a link on my blog list ....


My readers are keeping me on my toes! Here is another request...this time for a drop down menu for labels. Here are the steps to accomplish this.

Step 1 - find this code in your template:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

Step 2 - replace that line with this:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br/>

<select onchange='location=this.options[this.selectedIndex].value;' style='width:200px'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
</option>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

There are a few places in this code to customize it. Change this number to change the width of the box to fit in your sidebar. Change the wording that shows in the first line of your drop down box...to whatever you like.

Now you have a sweet little drop down menu to corral those labels that are getting out of hand. Go now and label with reckless abandon!!!

EDIT: 08/16/08 - In order for this to work, you have to have a label widget in place. And you have to have posts labeled. So, go to your dashboard | layout | page elements | add a gadget | Labels before trying this code.

EDIT: 08/21/08 - If you want to display the label count {trees (5) birds (9) flowers (3)} after each label use this code in Step 2:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br/>

<select onchange='location=this.options[this.selectedIndex].value;' style='width:200px'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

EDIT 09/07/08: Here is an example of the drop down box before expanded and after:

HTML Code Box

Hi,
I did a Google search on how to put a box with html code to "grab a button" in a blog post or somewhere else on the blog and yours came up.
I see that you have just what I am looking for close to the bottom of your blog (under the posts).
I have a button and all I need to do is put the code into a box so that people can copy and paste it to put the button on their blog. How can I add the same thing to my blog?
Your help would be very much appreciated.
Regards,
Gerri


Occasionally you want your readers to be able to copy code. Just how to get that code on your blog with out it doing it's little html magic first? Put it in a little box like this:
I'm a visual person, so the best way for me to explain this is with the exact code that I used for the above box:

<center>Grab this button:</center><center><img style="border: 0px none ;" alt="BlogU Button link" src="http://farm4.static.flickr.com/3092/2505649265_9cb03e574d_o.png" title="Steal my button!" width="80" height="15" /></center>
<center><textarea id="code-source" rows="3" cols="28" name="code-source"><a href="http://bloggeruniversity.blogspot.com/"><img border="0" src="http://farm4.static.flickr.com/3092/2505649265_9cb03e574d_o.png" /></a></textarea></center>

And here is the code showing what you need to change:

<center>TEXT EXPLAINING WHAT IS IN BOX</center><center><img style="border: 0px none ;" alt="LINK TITLE" src="IMAGE URL" title="LINK TOOLTIP TITLE" width="XX" height="XX" /></center>
<center><textarea id="code-source" rows="3" cols="28" name="code-source"><a href="LINK"><img border="0" src="IMAGE URL" /></a></textarea></center>

The pink code is where you can adjust the size of the box. All that is left to do is place it in a HTML/Javascript widget!

Add a border to your posts and sidebar

I was wondering if you knew the code you had to place in the HTML so that all of your posts and your sidebar are in separate boxes.


This is a fairly simple task. I'm working from the Minima template, so your template terminology may be slightly different. You will be looking for the sidebar area in your CSS style sheet.

Look for this in your template.

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .Blog {
border-bottom-width: 0;
}

Then you will replace it with this code:

.sidebar .widget, .main .widget {
background:#ffffff;
margin:1.5em 0 1.5em;
padding:8px 8px 8px;
border:1px solid $bordercolor;
border-bottom:1px solid $bordercolor;
border-width:1px 1px 1px;
border-bottom:1px line $bordercolor;
}

.main .Blog {
background:#ffffff;
margin:1.5em 0 1.5em;
padding:8px 8px 8px;
border:1px solid $bordercolor;
border-bottom:1px solid $bordercolor;
border-width:1px 1px 1px;
border-bottom:1px line $bordercolor;
}

That will give you a nice border around your posts and your sidebar widgets!

Remove - Subscribe to: Posts (Atom)

Hi annie,I was just just wondering if there is a code on how to remove the feed link at the bottom of a post, the one which says Post (Atom). Without affecting anything.

1. Go to dashboard/ template/ edit HTML
2. Click the 'Expand Widgets Templates' box
3. Find:

<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>

Remove this line:

<b:include data='feedLinks' name='feedLinksBody'/>

That should remove Posts (Atom).

Unique Background Images for Widgets

I also wanna know, is it possible to assign a different background image to each widget?



Gelo, yes, it is possible! As you can see in the images below. Top is the normal widgets. Bottom is the same widgets with background images in place.

Widget without background image

Widget with background image

To achieve this takes a little sleuth work. Each widget has a unique name. In this example, I have three widgets:

1. LinkList1
   
2. Text1
   
3. BlogArchive1

You can find the unique names of your widgets by searching your template for <b:widget id=

My search turned up: <b:widget id='LinkList1' locked='false' title='link widget' type='LinkList'/> So, my unique ID here is LinkList1.

After you find and identify each widget's unique ID, you will do a little work in the CSS Style Sheet. It doesn't make any difference where you actually place this code, but for neatness sake you can make a new group called Widgets.

/* Widgets
----------------------------------------------- */

Of course, you could have LinkList2, LinkList2, Text2, HTML1, etc.

For each widget that you want to add an image to, add the code as I have below to the CSS Style Sheet.

#LinkList1{
background: #fff url(IMAGE URL) no-repeat;
}
#Text1{
background: #fff url(IMAGE URL) no-repeat;
}
#BlogArchive1{
background: #fff url(IMAGE URL) no-repeat;
}

And, that is that.

Add a Widget Beside Your Header

Hey Annie!

Thanks for the tutorials on this blog. They're a big help.

I would like to know, is there a way to add content to the right of my header? Sort of like another sidebar? My blog is HERE. Please take the time to visit. It's still under construction though.

Thank you and more power.



There is a way, and it can be done with creating a widget. First you will make a couple of changes to your CSS style sheet. You will want to find the Header section. Look for something like this:

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Basically what we are doing is dividing the header up. I'm going to make each side equal, but you can use any proportion you want allowing for the margins. So, replace that code with this:

#header {
width: 300px;
float: left;
margin: 5px;
text-align: center;
color:$pagetitlecolor;
}
#header-right {
width: 300px;
float: right;
color: $pagetitlecolor;
margin: 5px;
padding: 5px;
}

You can adjust these values to fit your template. (It should not equal more than your outer-wrapper.) Almost done! Find this code in your template:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE (Header)' type='Header'/>
</b:section>
</div>

And replace it with this:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header-right' showaddelement='yes'>
</b:section>
</div>

Take a look at your page element page and you will see your new widget.

Click for larger image

You can now add content to that widget. For my example, I added my profile. Here is a screen shot before:

Click for larger image

and here is after:

Click for larger image

You don't have to do anything where it says YOUR BLOG TITLE. Your title will automatically fill in. Now you can add whatever you like in that widget, from your profile to a picture!