If you would like to view the video in full screen simply click on the video to be taken directly to my YouTube channel.
Enjoy~
Sunday, September 23, 2012
How to Write a Blogger Blog Post ~ video
In this post we'll learn how to write a basic blog post in Blogger. I'm trying a new tool out for this by creating a video tutorial which I've inserted below. This is my first (ever) video tutorial so please bear with my nervousness until I get comfortable with this new medium. I will still be creating my written tutorials but they take much longer to create, approximately 4 - 6 hours each, so I will publish them as time permits. In the meantime I hope you find these helpful in trying to navigate Blogger's new interface.
If you would like to view the video in full screen simply click on the video to be taken directly to my YouTube channel.
Enjoy~
If you would like to view the video in full screen simply click on the video to be taken directly to my YouTube channel.
Enjoy~
Sunday, September 16, 2012
How to Add a Favicon to Your Blog
With this tutorial I'll show you how to easily add a favicon to your blog. A faviconis the little icon associated with a website. It can appear in the address bar when you're visiting a website or on a browser's tab or in your browser's favorites or bookmarks area. Blogger's in a large white "B" surrounded by orange as show in the example below...
These icons cater to the part of our brains which absorb symbols and icons, as described by Carl Jung, but we'll save that topic for another day. For bloggers and indie business, they're a great way to personalize your blog and an easily recognizable symbol is you select something simple that personally relates to you and your blog.
Before we begin ~ you'll need to select an image to use for your own favicon. It should be something simple like a flower, butterfly, or any other element and image size should be small and square since favicons are square and you don't want yours to appear cut-off. I've never tested whether there are size limitations and favicons are usually very small at 16 x 16 pixels, so here's a link to generate a free tiny favicon using your own image ~ Dynamic Drive Favicon Generator.
Begin by logging into your blog, then click "Design" link found in the top right corner of your blog...
Next click on the "Layout" link in the left side link area...
Locate the "Favicon" rectangle and click on the "Edit" link...
A pop-up window will appear, click on the "Browse" button to begin locating your favicon image...
Navigate to your image, click on the image and then click "Open"
Now click the "Save" button...
That's it! Your new favicon is now in place...
Congratulations! Often times the actual change won't take affect in your browser until you've closed it and reopened so if it doesn't show up right away in that view just be patient. As long as it shows up in the "Layout" view, your favicon is properly installed.
Enjoy~
How to: Center a Blog Header
In this tutorial we will walk you through the steps for center a blog header (or banner as it is also called). If you need help installing your blog banner then please view this tutorial first: How to Install a Blog Header If you need a banner image I offer several free versions which you can find by browsing through my A-Z Theme List.
Below is an example of a blog banner image in place but obviously set off center. The default setting for most Blogger templates is for the banner image to show up toward the left side of your blog as shown below...
So let's begin...
1. Log into your blog and then click the "Design" link found in the top right corner...
2. In the next window click on the "Customize" button...
3. This will open the Blogger Template Designer which you can see an example of shown below...
4. Click on the "Advance" link in the bottom of the left side list...
5. Using the inner scroll bar...
6. Scroll down to the "Add CSS" link...
7. This is the area where you can add a snippet of CSS code to tell your blog to center the header...
8. Now copy the code below and paste it into the rectangle...
9. Now it should look like this...
Within the code you'll notice the number "900" ~ this is the standard size for all of my wide banners. This size, when used in combination with the "Shrink to Fit" option when uploading a blog is how you can achieve the best fit for your blog. Playing with both of these settings in different combinations will help you achieve the best look.
10. To check your blog width, click on the "Adjust widths" link in the far left link list...
11. In case of my sample blog in this tutorial the blog is set to 860 pixels wide...
12. So I'll jot this number down and return to the "Advanced" area by clicking on that link again...
13. Now, we can change that "900" to "860" as shown in the example below...
14. And preview the changes in the preview area below to see how the changes have taken affect...
15. In the example above it appears the banner has not moved. This is common and you may need to play around with the number a bit until you begin to see the results you're looking for ~ you can see a few examples of making changes in the screen shots below...
16. Now that you have your banner code in place and the image is situated just where you want it, click the "Apply to Blog" button to save your changes...
That's it! You can now click on the "View Blog" link to view your blog and centered banner. Remember to use this tutorial in combination with my "How to Install a Blog Header" to find the right adjustments and fit for your own blog.
Enjoy~
Below is an example of a blog banner image in place but obviously set off center. The default setting for most Blogger templates is for the banner image to show up toward the left side of your blog as shown below...
So let's begin...
1. Log into your blog and then click the "Design" link found in the top right corner...
2. In the next window click on the "Customize" button...
3. This will open the Blogger Template Designer which you can see an example of shown below...
4. Click on the "Advance" link in the bottom of the left side list...
5. Using the inner scroll bar...
6. Scroll down to the "Add CSS" link...
7. This is the area where you can add a snippet of CSS code to tell your blog to center the header...
8. Now copy the code below and paste it into the rectangle...
9. Now it should look like this...
Within the code you'll notice the number "900" ~ this is the standard size for all of my wide banners. This size, when used in combination with the "Shrink to Fit" option when uploading a blog is how you can achieve the best fit for your blog. Playing with both of these settings in different combinations will help you achieve the best look.
10. To check your blog width, click on the "Adjust widths" link in the far left link list...
11. In case of my sample blog in this tutorial the blog is set to 860 pixels wide...
12. So I'll jot this number down and return to the "Advanced" area by clicking on that link again...
13. Now, we can change that "900" to "860" as shown in the example below...
14. And preview the changes in the preview area below to see how the changes have taken affect...
15. In the example above it appears the banner has not moved. This is common and you may need to play around with the number a bit until you begin to see the results you're looking for ~ you can see a few examples of making changes in the screen shots below...
:-----In this example the number is too small so the banner is cut off-----:
:-----In this example the number is too big so the banner is still sitting to the left-----:
:-----In this example the number is just perfect & the banner is centered-----:
16. Now that you have your banner code in place and the image is situated just where you want it, click the "Apply to Blog" button to save your changes...
That's it! You can now click on the "View Blog" link to view your blog and centered banner. Remember to use this tutorial in combination with my "How to Install a Blog Header" to find the right adjustments and fit for your own blog.
Enjoy~
How to: Setup a Decorative Blog Background
Here are some step-by-step instructions to help you navigate your way to installing one of my decorative blog backgrounds to your blog. The process is fairly simple and the best part is once done, you can easily change your background whenever you like.
All of my blog themes are now meant to be used with a modified version of the "Picture Window" template so if you don't have that installed or need help tweaking it you can follow along with this tutorial first: How to: Setup & Adjust the "Picture Window" Template.
Before we begin~
Within each of my designer blog themes and backgrounds are boxes filled with code...
This code is what we use to install a decorative background onto our blogs. To begin you will need to select a background you want to uses. You can peruse my library of blog themes and backgrounds by visiting this link: http://bloggertutorialsforblog.blogspot.com/p/backgrounds-themes.html
Once you've selected a background you will need to copy the code and paste it into a temporary location ~ I like using a text document, such as "Notepad" (Windows users) since it's an easy place to temporarily store a snippet of code or text.
What's behind this? This code is used in a sidebar gadget to tell your blog to load a background image and where to draw that image from. The image itself is stored on a designated location on the internet.
So let's begin...
Begin by logging into your blog, then click the "Design" link in the top right corner of your blog...
Next click on the "Layout" link in the left side link area...
In this next screen we can see a type of skeletal version of your blog layout with rectangular boxes representing different aspects of your blog...
I find it easier to store my decorative background code at the bottom of my blog so that it's out of the way and I don't get it confused with others, so let's scroll down to the bottom and click on the "Add a Gadget" link...
A pop-up window will appear with all the various gadget choices Blogger offers...
We will be using the "Html/Java Script gadget so scroll down to that and select to add it, either by clicking on the title or on the blue + button...
In the next window we see a large empty rectangle under the title "Content"....
This is where we will paste in the background code we have saved from earlier. The code may look slightly different that what's show below, depending upon which of my codes you're using, but go ahead and paste the entire code into the box...
Once you have your code in place you can click the "Save" button...
That's it! You can now check your new blog background by clicking on the "View Blog" button at the top...
?Ta-da!?
You now possess the knowledge to change your blog background whenever the mood (or season) strikes you ~ Congratulations!
Enjoy~
All of my blog themes are now meant to be used with a modified version of the "Picture Window" template so if you don't have that installed or need help tweaking it you can follow along with this tutorial first: How to: Setup & Adjust the "Picture Window" Template.
Before we begin~
Within each of my designer blog themes and backgrounds are boxes filled with code...
This code is what we use to install a decorative background onto our blogs. To begin you will need to select a background you want to uses. You can peruse my library of blog themes and backgrounds by visiting this link: http://bloggertutorialsforblog.blogspot.com/p/backgrounds-themes.html
Once you've selected a background you will need to copy the code and paste it into a temporary location ~ I like using a text document, such as "Notepad" (Windows users) since it's an easy place to temporarily store a snippet of code or text.
What's behind this? This code is used in a sidebar gadget to tell your blog to load a background image and where to draw that image from. The image itself is stored on a designated location on the internet.
So let's begin...
Begin by logging into your blog, then click the "Design" link in the top right corner of your blog...
Next click on the "Layout" link in the left side link area...
In this next screen we can see a type of skeletal version of your blog layout with rectangular boxes representing different aspects of your blog...
I find it easier to store my decorative background code at the bottom of my blog so that it's out of the way and I don't get it confused with others, so let's scroll down to the bottom and click on the "Add a Gadget" link...
A pop-up window will appear with all the various gadget choices Blogger offers...
We will be using the "Html/Java Script gadget so scroll down to that and select to add it, either by clicking on the title or on the blue + button...
In the next window we see a large empty rectangle under the title "Content"....
This is where we will paste in the background code we have saved from earlier. The code may look slightly different that what's show below, depending upon which of my codes you're using, but go ahead and paste the entire code into the box...
Once you have your code in place you can click the "Save" button...
That's it! You can now check your new blog background by clicking on the "View Blog" button at the top...
?Ta-da!?
You now possess the knowledge to change your blog background whenever the mood (or season) strikes you ~ Congratulations!
Enjoy~
How to Add a Post Signature
If you're looking to add a decorative signature to your blog posts this tutorial is for you. Basically we'll be installing a snippet of code so that a signature image will automatically show up each time you write a new blog post. This saves you the step of manually inserting a signature image with each posting.
Before we begin: You will need a signature image - preferably a PNG with a clear background so that any color background show through. You can either create an image using a graphics program like Gimp or Photoshop or you can purchase a signature image from a designer like those I offer in my Etsy shop.
If you make your own you will need to host the image with an online image storage company like Photobucket which will supply you with a direct link to the image. This link will be used in combination with some Html code so that your signature shows up with each blog post. Note that when you purchase a signature from a designer, most will host the image for you and supply you with the completed code.
Now that you have a link to your signature image, let's begin...
1. Begin by logging into your blog, then click "Design" link found in the top right corner of your blog...
2. Next click on the "Settings" link in the left side link area...
3. Now click on the "Posts and comments" link...
4. Within this section, locate the second option down "Post Template" and click on the "Add" link...
A rectangular area will appear, this is where you'll insert the Html code for your image signature.
5. Copy the code below and paste it into the box...
6. The box should now look like this...
7. Then replace the words "SIGNATURE URL" with the address of where your own signature image is stored. I'll insert mine in the example below...
8. With you own link now inserted into the code, you can now save your changes by clicking the "Save settings" button...
9. Your signature image will now appear the next time you go to write a new blog post. To confirm that your signature image is correctly installed you can click the "New Post" button to open the new post screen...
10. There your signature image should appear just as mine can be seen below...
11. If instead you see a broken image symbol...
then the link to your image may not be installed properly. You'll need to return to the "Posts and comments" area and double check each character to be sure the link is correct and none of the code was accidentally left out.
Because the signature image was installed today, it will not appear in any previously written blog posts. If you would like to manually add an image signature to a specific blog post then follow the steps below. If you're happy with the results so far then, Congratulations!
Special Note: At the time I am writing this, Blogger is currently experiencing a technical difficulty with displaying post signatures and preset signatures are showing up as a broken link. If you are experiencing this issue then for the moment you will need to manually install your image signature in individual blog posts which is covered below.
Manually adding a signature image~
To manually add an image signature to a blog posts follow the steps below.
1. Picking up directly from where we left off, click on the "View blog" link at the top of the page...
2. Click you mouse within the box area and then click on the "Insert image" symbol...
3. A pop-up window will appear, click on the "Choose files" button...
4. Navigate to where you have your signature image saved, click on the image and then click...
5. In the next view click on the "Add selected" button...
6. You should now see your signature image inserted into your post...
7. If you want to change the location of your signature, simply click on the image and an option bar will appear....
8. Select where you would like your signature to appear and you image will move to that location...
That's it! Once you've completed writing your blog post you can click either the "Save" or "Publish" button to continue.
Congratulations!
Enjoy~
Before we begin: You will need a signature image - preferably a PNG with a clear background so that any color background show through. You can either create an image using a graphics program like Gimp or Photoshop or you can purchase a signature image from a designer like those I offer in my Etsy shop.
If you make your own you will need to host the image with an online image storage company like Photobucket which will supply you with a direct link to the image. This link will be used in combination with some Html code so that your signature shows up with each blog post. Note that when you purchase a signature from a designer, most will host the image for you and supply you with the completed code.
Now that you have a link to your signature image, let's begin...
1. Begin by logging into your blog, then click "Design" link found in the top right corner of your blog...
2. Next click on the "Settings" link in the left side link area...
3. Now click on the "Posts and comments" link...
4. Within this section, locate the second option down "Post Template" and click on the "Add" link...
A rectangular area will appear, this is where you'll insert the Html code for your image signature.
5. Copy the code below and paste it into the box...
6. The box should now look like this...
7. Then replace the words "SIGNATURE URL" with the address of where your own signature image is stored. I'll insert mine in the example below...
8. With you own link now inserted into the code, you can now save your changes by clicking the "Save settings" button...
9. Your signature image will now appear the next time you go to write a new blog post. To confirm that your signature image is correctly installed you can click the "New Post" button to open the new post screen...
10. There your signature image should appear just as mine can be seen below...
11. If instead you see a broken image symbol...
then the link to your image may not be installed properly. You'll need to return to the "Posts and comments" area and double check each character to be sure the link is correct and none of the code was accidentally left out.
Because the signature image was installed today, it will not appear in any previously written blog posts. If you would like to manually add an image signature to a specific blog post then follow the steps below. If you're happy with the results so far then, Congratulations!
Manually adding a signature image~
To manually add an image signature to a blog posts follow the steps below.
1. Picking up directly from where we left off, click on the "View blog" link at the top of the page...
2. Click you mouse within the box area and then click on the "Insert image" symbol...
3. A pop-up window will appear, click on the "Choose files" button...
4. Navigate to where you have your signature image saved, click on the image and then click...
5. In the next view click on the "Add selected" button...
6. You should now see your signature image inserted into your post...
7. If you want to change the location of your signature, simply click on the image and an option bar will appear....
8. Select where you would like your signature to appear and you image will move to that location...
That's it! Once you've completed writing your blog post you can click either the "Save" or "Publish" button to continue.
Congratulations!
Enjoy~
Subscribe to:
Comments (Atom)