Blogger Tutorials for everyone: May 2012

Create a basic photo gallery image

Saturday, May 19, 2012 at 9:56 AM 0 comments

Let's say you'd like to do something a bit more fancy to your post images, and create something like a photo gallery design. Let's say you'd like to do this to your photo. See example 1.

My image for this tutorial example.

Example 1

Looks nice, doesn't it? So, how did I make it look like this? The first thing I done was to add an image without resizing it or aligning it. Then I clicked on the image and then selected the "Add caption" option. I replaced "Add caption" with the text "Example 1" and highlighted my text and selected the bold option for that text. That was just in the "Compose" tab. I then clicked on the "Edit HTML" tab. In the "Edit HTML" tab there is a caption code for where the "Example 1" text is. It looked like this in the beginning:

<tr><td class="tr-caption" style="text-align: center;"><strong>Example 1</strong></td></tr>

I then copied this code and placed it directly above the <tr></tr> code for the image. I then deleted the text "Example 1" and typed in "My image for this tutorial example." I highlighted those words and selected the italic option. Italic and bold options are best done in the "Compose" section - its just less confusing that way and quicker too. This then gave the entire code 3 table rows with the potential to add more code to each row. Next, in the above captions code example, I added some additional code to the "style" code area. I simply added a background colour, and a font colour to it. I also added a background colour (black which is #000) for the middle row where the image is located. Below is the end result of all the code for my example image (Example 1).

<tr><td class="tr-caption" style="background: orange; color: black; text-align: center;"><strong><em>My image for this tutorial example.</em></strong></td></tr><tr><td style="background: #000000; text-align: center;"><a href="http://4.bp.blogspot.com/-uziXBt2kTAo/TIIhRj8jv5I/AAAAAAAAA8s/QXYMIvrhYlc/s1600/70239.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="256" mda="true" src="http://4.bp.blogspot.com/-uziXBt2kTAo/TIIhRj8jv5I/AAAAAAAAA8s/QXYMIvrhYlc/s1600/70239.jpg" width="320" /></a></td></tr>

<tr><td class="tr-caption" style="background: #000; color: white; text-align: center;"><strong>Example 1</strong></td></tr>

</tbody></table>

As the image's background was not visible I added the number "4" to the entire table's cellpadding. That then displayed the black background behind the image. Everything in bold red is what I added or changed to the above code after the basic first image caption had been added. All these changes were done in the "Edit HTML section" except for the bold and italic options that were added to the captions text. They were done in the compose section. And there we have it. By simply adding a second caption row above the image and adding a bit of additional code to the "style" area and some table padding, we get a nice looking, almost gallery stylized looking image effect.

Customised Pages widgets using table code

Thursday, May 17, 2012 at 2:01 AM 0 comments

There is a live-demo of this widget on this site (right hand column at the very top). Click the expandable/collapsible "Pages" title to view it.

Searching the Internet for ideas is time consuming but I came up with an idea to create this particular widget because sometimes the static pages, the labels widget and the pages tab (standard blogger widgets and features) is simply not enough and are a bit restricting.

With this tutorial you can create a second lot of categories or pages/posts that have specific descriptions or tags. For example, on this site (Blogger Tutorials for everyone) I have a specific set of tutorial labels and the posts are displayed via a separate link list rather than a labels widget. But if you want to create something different for displaying other pages then this tutorial is ideal for that.

On Blogger you are limited to just 20 static pages. That's not many when you might have big ideas about what you want to add to your blog. Using up 20 pages can happen quite quickly, especially if you add things like a contact form page, About Me page, Sitemap page, Videos page, News page, etc. And with the standard Pages tab widget, or some other form of navigation menu bar you might have on your blog (or lack of one), you (and your visitors) might become overwhelmed by all the pages.

So, for something completely different.... I have created two Page widgets that are made from table code that can handle a whole lot of pages listed in them. The widgets (especially the one placed in a main static page) makes your blog less overwhelming and much easier to navigate.

Installing the first widget:

The first widget is placed in the side column of your blog in a HTML/Javascript widget. It displays an image for each page of the two pages listed; and a link plus text for the name of the page. Below each of the two Page's names is more text - an area where you write a brief description of what the page is about. Underneath all of that is a link that will lead you to the main page where all your remaining pages will be listed.

The bottom most link in the widget is then linked to the 2nd widget (the static page widget) using just a url address which is placed in the last lot of table code in the 1st widget. Confused? Don't worry... the instructions are below.

Go to your Design tab and select "Add a gadget". Select a "HTML/Javascript" widget from the basic menu.

Now copy the code below these images and paste it into that widget like in this image.

Hit the "SAVE" button on the Design page

GRAB THE CODE BELOW:

<tr><td style='width:20%;font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; padding:5px;'><img align='left' alt='page 1' height='42' src='http://img845.imageshack.us/img845/5214/pagesv.gif' style='margin:0 1px 0 1px; border:0;' width='35'/></td><td style='width:80%;font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; padding:1px;'><a href='#'><strong style='color:#00ff00; border:none; text-decoration:underline;'>Page name 1</strong></a><p style='margin:0; clear:none; text-decoration:none; color:#00ff00;font-size:10px;'>Add information about this page here .....</p></td></tr>

</table>

<tr><td><td style='font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; padding:5px 5px;'><img align='left' alt='page 2' height='42' src='http://img845.imageshack.us/img845/5214/pagesv.gif' style='margin-right:5px; border:0;' width='35'/></td><td style='font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; padding:5px 5px;'><a href='#"><strong style='color:#00ff00; border:none; text-decoration:underline;'>Page name 2</strong></a><p style='margin:0; clear:none; text-decoration:none; color:#00ff00;font-size:10px;'>Add information about this page here ..... </p></td></td></tr>

</table>

<table border='0' cellpadding='0' cellspacing='0' style='margin:0 5px 5px 10px;'><tr><td style='width:100%;font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; text-decoration:none;padding:5px 5px;'><a href='#"><span style='color:#00ff00;margin-left:10px;'>Click to view more Pages</span></a></td></tr>

</table>

Result: You end up with everything within the blue border anyway.

Installing the second widget:

This is what the second widget will look like

once placed in a static page.

Go to the "Edit Post" page as if you are going to write up a new post. Then click on the "Edit pages" tab. Now click on the blue button to create a new page. Write the title of the new page and then paste all the code below into the contents area and then click on the "Publish" button.

<br />

Here is some text to describe the page.</div>

</td></tr>

</tbody></table>

<br />

Here is some text to describe the page.</div>

</td></tr>

</tbody></table>

Once you have done that create new pages by add the titles for each page and add content to them. Publish each page.

Customising the Page table widget links.

Do not copy and paste the following lots of code below. It is being repeated for reference only!
With this next bit it is most helpful to have two browser tabs/windows open of your blog so you can browse your blog and collect the urls to add to the Page widgets.

Here's the first widget's code again. READ INSTRUCTIONS BELOW THE CODE!

<tr><td style='width:20%;font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; padding:5px;'><img align='left' alt='page 1' height='42' src='http://img845.imageshack.us/img845/5214/pagesv.gif' style='margin:0 1px 0 1px; border:0;' width='35'/></td><td style='width:80%;font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; padding:1px;'><a href='#'><strong style='color:#00ff00; border:none; text-decoration:underline;'>Page name 1</strong></a><p style='margin:0; clear:none; text-decoration:none; color:#00ff00;font-size:10px;'>Add information about this page here .....</p></td></tr>

</table>

<tr><td><td style='font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; padding:5px 5px;'><img align='left' alt='page 2' height='42' src='http://img845.imageshack.us/img845/5214/pagesv.gif' style='margin-right:5px; border:0;' width='35'/></td><td style='font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; padding:5px 5px;'><a href='#"><strong style='color:#00ff00; border:none; text-decoration:underline;'>Page name 2</strong></a><p style='margin:0; clear:none; text-decoration:none; color:#00ff00;font-size:10px;'>Add information about this page here ..... </p></td></td></tr>

</table>

<table border='0' cellpadding='0' cellspacing='0' style='margin:0 5px 5px 10px;'><tr><td style='width:100%;font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; text-decoration:none;padding:5px 5px;'><a href='#"><span style='color:#00ff00;margin-left:10px;'>Click to view more Pages</span></a></td></tr>

</table>

INSTRUCTIONS:

With the first page you have created, let's say you called it "Sitemap", (not the one with the Page widget on it) copy the url for it and open up the Pages widget in the sidebar of your blog. In the code above you will need to highlight and paste the url in where there is the first instance of a blue # symbol. Type in the Page's title (Sitemap) where it says "Page name 1". Then write a brief description of the page where it says"Add information about this page here .....". Repeat this step for a second page you have created.

Lastly, copy the url of the static page where you placed the "Second widget" code. Paste that url where the red # symbol is. Then save the widget.

ALMOST DONE!

With the static pages you have created that do not have these Pages widgets code on it, you need to copy and paste each url into the static page you created that does have the code in it. Simply but carefully add each url and add each title and a brief description of each page. Once you have completed the page, PUBLISH IT.

Some ideas for Pages to add to your new widget on your static page:

About
Contact
Invite a friend
Links/Favorites
Photo Album
Photo Gallery
Main Gallery
Videos
Video categories
Projects
Tutorials
Shop
Website
Disclaimer
Press Releases
Downloads
Giveaways
Polls
Advertise
Guest Book
FAQ's
Favorite Posts
Meet the team
Designs
Blog Followers
Archives
Documents and Files
Sitemap
Table of contents
Comments
Guest Bloggers

Add a simple Pages widget with mouseover background colour effect to your blog

Wednesday, May 16, 2012 at 8:06 PM 0 comments

Ever wondered how to improve the look of a Pages widget? Simply remove the widget Blogger provides us and make your own. I decided to make my own widget for another blog, going on the Facebook look-alike theme. It has your basic links but if you put your mouse over the links the background colour changes as well as the link colour. It is all thrown into a table, and each link has it's own icon. Here's what it looks like (I gave it a border to make the table more visible in this example.):

All the code below can either be placed directly into a HTML/Javascript widget and placed at the very top (or wherever you want to put it) of your sidebar column or it can be directly added to your template in the "edit html" section of the design tab. If you add the code to the "edit html" section of your template, make sure you add it to the very top of the sidebar column, just after the first line of code that states where the sidebar column begins. Alternatively, you can also place the code directly underneath the closing b:section for the entire column; that is to say between the closing /b:section and the closing /div for that side column.

<tr><td class="btnav" onmouseover="style.backgroundColor='#ff0000';"

onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://img21.imageshack.us/img21/8874/postwallicone967396.png" width="20"/><a href="#">Home</a></td></tr>

<tr><td class="btnav"

onmouseover="style.backgroundColor='#ff6600';"

onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://img714.imageshack.us/img714/56/infoicon.png" width="20"/><a href="#">Info</a></td></tr>

<tr><td class="btnav" onmouseover="style.backgroundColor='#00ff00';" onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://1.bp.blogspot.com/-cslm_A-DC20/ToxFNSERvlI/AAAAAAAAEK8/gH7KFGWo19g/s1600/1302325189_TextEdit.png" width="18"/><a href="#">Notes</a></td></tr>

<tr><td class="btnav"

onmouseover="style.backgroundColor='#1f75fe';"

onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://img24.imageshack.us/img24/2038/videoicont.jpg" width="19"/><a href="#">Gallery</a></td></tr>

<tr><td class="btnav"

onmouseover="style.backgroundColor='#7366bd';"

onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://img717.imageshack.us/img717/2828/usersfriendsicone647912.png" width="20"/><a href="#">Friends</a></td></tr>

<tr><td class="btnav"

onmouseover="style.backgroundColor='#8F509D';"

onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://www.animated-gifs.eu/emoticons-hobbies/0026.gif" width="20"/><a href="#">  Watch a movie</a></td></tr>

<tr><td class="btnav"

onmouseover="style.backgroundColor='#cc6666';" onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://bestanimations.com/Sci-Fi/UFOs/UFO-03-june.gif" width="24"/><a href="#"> Animated gifs</a></td></tr>

<tr><td class="btnav"

onmouseover="style.backgroundColor='#cc6666';" onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://a4.rimg.info/8769e59f8eb7ce17ebdfd9e5a936a82a.gif" width="24"/><a href="#"> Avatars - Aliens</a></td></tr>

<tr><td class="btnav"

onmouseover="style.backgroundColor='#cc6666';" onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://www.ufoevolution.com/forums/customavatars/avatar43_3.gif" width="24"/><a href="#">Avatars - UFOs</a></td></tr>

<tr><td class="btnav"

onmouseover="style.backgroundColor='#eceff5';" onmouseout="style.backgroundColor='#ffffff'" width="100%"><img align="left" height="20" src="http://img109.imageshack.us/img109/768/imagescaqragca.jpg" width="24"/><a href="#"> Faceblog Help</a></td></tr>

</table>

In the code for the Pages widget each icon image url is in red. In blue is a hash # symbol. The # symbol you simply replace with your own link. You can add whatever icons you want to add, and whatever links you want to add. This is a very simple, but effective, Pages widget that you can colour to your pleasing.

Okay, the links aren't perfectly aligned in this example. You can simply align the links by adding   as many times as you need, before the beginning of the text link opening bracket. For example:

   <a href="#">Info</a>

....Then remove all examples of   that are to the left of the link text in the code I have given you for the entire Pages widget.

By placing the   before the link (outside the link's code) you will not get that annoying underline to the left of the link. Here is what I mean:

Info

Enjoy!

How to add the PDF24 widget to your blog

at 4:27 PM 0 comments

Live-demo in sidebar on this site!
Click the next link to view an example pdf file created by this widget.

You may have already come across the website PDF24.org but was never able, like me, to locate the widget for turning blog posts into pdfs. It took me months, in reality, to locate this widget and once I did I still could not get a copy of it. Every webpage I went onto ended up at a dead end and there was no code available for this widget at all that I could find on the PDF24.org website. I finally resorted to copying the code from the "View Source" page on my web browser.

After having tested this widget it only sends emails with the attached pdf if you manually type in an email address. Copying and pasting an email address into the submit section fails to send the pdf, even though it says it has sent it. You simply do not receive that email.

Below is the entire code for the widget. Do not alter it in any way except for the words typed in red. You can change those words to suit you own taste. But leave everything else alone. You do not need to add your blog's url anywhere in the code. This widget automatically detects your url, no matter where you place it on your blog. Therefore, you can have this widget on more than one blog, and each PDF24 widget will work separately from each other. So, if you have, for example, added this code to your blog titled "123.blogspot.com" (for example) as well as to your other blog, titled "abc.blogspot.com" (for example) you will have two separate widgets that work independantly of each other. If you type in an email address on the "123.blogspot,com" blog, the pdf that will be created and sent to the email address will only locate the posts on the "123.blogspot.com" blog. These two widgets (if you add the code below to two blogs) will not be able to detect each other or link to each other.

The widget's code (below) can either be added into a HTML/Javascript widget on Blogger or embedded directly into your template in the body section of your template.

Here is the complete code:

.pdf24Plugin-sbp-box {

background-image:url(http://pdf24-blogger-widget.googlecode.com/svn/tags/1.1/bg.gif);

background-repeat: no-repeat;

width:190px;

height:125px;

position:relative;

margin: 0px 0 0 -11px;

padding:4px;

font-family: Verdana, Arial

}

.pdf24Plugin-sbp-title {

position:absolute;

left: 10px;

top: 4px;

text-align:left;

width:110px;

color:#fff;

font-size: 14px;

font-weight:bold

}

.pdf24Plugin-sbp-sendto {

position:absolute;

left: 10px;

top: 71px;

}

.pdf24Plugin-sbp-sendto input {

width: 169px;

height: 17px;

border:1px solid silver

}

.pdf24Plugin-sbp-submit {

position:absolute;

right: 15px;

top: 100px;

}

.pdf24Plugin-sbp-submit input {

background-color: #66A4DA;

border:0px;

border-left: 1px solid silver;

border-bottom: 1px solid silver;

color:#fff;

font-weight:bold;

padding:1px;

cursor: pointer

}

.pdf24Plugin-sbp-backlink {

position:absolute;

left: 11px;

top: 103px;

font-size:11px;

}

</style> <script language="javascript" src="http://pdf24-blogger-widget.googlecode.com/svn/tags/1.1/script.js"></script>

<div class="pdf24Plugin-sbp-title">Send articles as PDF to</div>

</form>

<div class="pdf24Plugin-sbp-backlink"><a href="http://en.pdf24.org" target="_blank" title="PDF | PDF Creator | PDF Converter">PDF Creator</a></div>

</div>

To use this widget go to the page you want created as a pdf (via a direct link or by using a blog archive or labels search) then simply type in your email address in the space provided, click on the send button and the pdf converter will display a pop up window. It then begins converting the article to a pdf then sends it straight to your email address. The PDF24 widget will only convert the post or page you want turned into a pdf. It WILL NOT ADD the sidebar, header, footer or other content to the pdf, just the post title and content itself or the page itself. This is the best widget around for converting your posts into pdfs, and believe me I've tried many of them! Disadvantage: This widget does not like any type of code, whether it be css, HTML or Javascript and it will not print the code. So avoid printing any posts that have code on it.

How to add and make a 'Go to bottom' button work on Blogger

at 3:38 PM 0 comments

Live-Demo of this button is at the top right corner of this blog.

Let's say you already have a 'Back to top' button and want to add a "Go to bottom" button as well. I just tried doing this and after many attempts I finally found a way to make it work. I cheated a bit but it works on Internet Explorer, Google Chrome (the button is a bit sticky in Google Chrome - you need to scroll down from the top of the page a tiny bit before the button works properly) and Firefox web browsers. It is a really simple solution too. Normally you are supposed to write #footer as the link url or #bottom but none of those commands work. Various other combinations also don't work. What did work was I made the link url go to the bottom most widget on my blog. I located the widget's ID added the standard # symbol before it and pasted them both into the link url section.

Here is the code for the go down to bottom button code:

<a href='#Attribution1' style='display:scroll;position:fixed;top:4px;right:2px;'><img alt='Scroll to Bottom' height='31px' src='https://lh6.googleusercontent.com/-YHprowZgco4/T02ddR_PNeI/AAAAAAAAF7U/q3eCtClIbDM/s16/button_down16.gif' width='31px'/></a>

The red text in the code above is what you need to change and the only thing you need to change in the code. All that you do is scroll down and locate the bottom most part code for your footer.
For example:

<b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>
</div>
</div>
<div class='footer-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</footer>

Do NOT copy the footer code displayed above this text. You are ONLY supposed to be locating it in your own template. In the above footer code the widget's ID is in blue. That is the widget ID code you need to look for, with whatever widget is at the very bottom of your footer. It is the same code you need to copy and paste into the link url section.

Where to put the code in your template.
When you copy the top lot of code above go to your edit template page. Do NOT tick the expand box. Scroll all the way down to the bottom of the template and you should see:

</body>
</html>

If you don't see the </body> at the very bottom don't panic. Paste the code directly before the </html> tag.

In other words, the code needs to go AFTER the </body> tag and DIRECTLY BEFORE the </html> tag. Every template is different so you need to find at least one of those closing tags at the bottom of your template. Paste the code into your template then click on "Save template".

That's it. Feel free to use the above code on your own blog.
I've hosted both the button images on my Picasa Web Album so you don't have to host it if you don't want to.

There is a matching "back to top" button if interested. The code for it is below.

REMEMBER: IF YOU FORGET TO ADD THE # SYMBOL BEFORE THE WIDGET'S ID AS THE URL, THE GO TO BOTTOM BUTTON WILL NOT WORK.

Blogger Tutorials for everyone

Labels

Recent Comments

Talking Avatar

Manual Page Navigation

Create a basic photo gallery image

Customised Pages widgets using table code

Add a simple Pages widget with mouseover background colour effect to your blog

How to add the PDF24 widget to your blog

How to add and make a 'Go to bottom' button work on Blogger

Scrollbox codes

+ / - Pages

+ / - Links

+ / - Off site links

Offsite tutorials

+ / - Useful websites

+ / - Feeds

+ / - Blogroll

Twitter feed

Blog Archive

Visitors

PDF post creator

Followers

Logo

Categories

Quick links

Links 1

Links 2

Blogger Tutorials for everyone