Swebit SEO and Blogger Tricks

Showing posts with label pictures. Show all posts

Saturday, April 21, 2012

Vertical pictures turned horizontal - solution

Bloggers are complaining that when they upload vertical pictures to Blogger post, these vertical pictures are turned horizontal which is not what they want.

The solution is to go to the picture in Picassa Web Album and rotate it:

Continue reading →

Wednesday, February 8, 2012

Animated gif image: How to change size

Posted by admin at 10:17 PM 0 comments

animated images HTML Images photos pictures

This in response to a question in Uploading animated .gif image to Blogger post which asked: "please tell me how to change height and width of that image?"

The answer is very simple if you just know a little of HTML. To display a picture on the web, an image tag <img> is used. Thus:

<img src="image URL" />
(just concentrate on img leaving aside src if you are not familiar with HTML)

To change the size, just add the attributes width="some number" and height="some number" (Note: the picture will be distorted {aspect ration changed) unless you keep the ratio constant. The task will be made easier if you just add the width attribute only leaving out the height and the height will be adjusted accordingly.

For example, in the HTML to display the animated gif image in Testing uploading animated gif image (image replicated below),

gif image uploaded direct from Blogger post editor

the following code is used:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm2KZ2cJ4qLyyUXs-lhKNKABK2Vk-sg0__wXuLDM0z1MiOMU5bk_TfyQI6tcwx2YkNYHbBR3m9NCg3jzN_sfAg2Mt_od_gqNX8fW1JgLXBdLJJUYS2XvpduJQ01Y_Xjt5TVzRWWPb3knA/s1600-h/starandbird.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm2KZ2cJ4qLyyUXs-lhKNKABK2Vk-sg0__wXuLDM0z1MiOMU5bk_TfyQI6tcwx2YkNYHbBR3m9NCg3jzN_sfAg2Mt_od_gqNX8fW1JgLXBdLJJUYS2XvpduJQ01Y_Xjt5TVzRWWPb3knA/s400/starandbird.gif" border="0" alt="gif image uploaded direct from Blogger post editor"id="BLOGGER_PHOTO_ID_5108675258397126626" /></a>

Now when I add width="350" to the img tag as shown below (note: just concentrate on img and ignore the rest):

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm2KZ2cJ4qLyyUXs-lhKNKABK2Vk-sg0__wXuLDM0z1MiOMU5bk_TfyQI6tcwx2YkNYHbBR3m9NCg3jzN_sfAg2Mt_od_gqNX8fW1JgLXBdLJJUYS2XvpduJQ01Y_Xjt5TVzRWWPb3knA/s1600-h/starandbird.gif"><img width="350" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm2KZ2cJ4qLyyUXs-lhKNKABK2Vk-sg0__wXuLDM0z1MiOMU5bk_TfyQI6tcwx2YkNYHbBR3m9NCg3jzN_sfAg2Mt_od_gqNX8fW1JgLXBdLJJUYS2XvpduJQ01Y_Xjt5TVzRWWPb3knA/s400/starandbird.gif" border="0" alt="gif image uploaded direct from Blogger post editor"id="BLOGGER_PHOTO_ID_5108675258397126626" /></a>

the image is enlarged as in the image below:

Update: Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).

Tip: Downsizing a large image with the height and width attributes forces a user to download the large image (even if it looks small on the page). To avoid this, rescale the image with a program before using it on a page.

Source: W3schools: HTML width Attribute.

Now to make it smaller, the attribute width="50" is added instead as in

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm2KZ2cJ4qLyyUXs-lhKNKABK2Vk-sg0__wXuLDM0z1MiOMU5bk_TfyQI6tcwx2YkNYHbBR3m9NCg3jzN_sfAg2Mt_od_gqNX8fW1JgLXBdLJJUYS2XvpduJQ01Y_Xjt5TVzRWWPb3knA/s1600-h/starandbird.gif"><img width="50" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm2KZ2cJ4qLyyUXs-lhKNKABK2Vk-sg0__wXuLDM0z1MiOMU5bk_TfyQI6tcwx2YkNYHbBR3m9NCg3jzN_sfAg2Mt_od_gqNX8fW1JgLXBdLJJUYS2XvpduJQ01Y_Xjt5TVzRWWPb3knA/s400/starandbird.gif" border="0" alt="gif image uploaded direct from Blogger post editor"id="BLOGGER_PHOTO_ID_5108675258397126626" width="50"/></a>

and as expected, the animated picture is now smaller:

Continue reading →

Friday, October 28, 2011

Will old images disappear when changing to custom domain?

Posted by admin at 6:54 PM 0 comments

custom domain Images photos pictures

The answer is no. Images will remain as long as the Google/Blogger account they are associated with is not deleted. I have checked one of my oldest post - How to change the date and time of your post which has a screen shot and which is dated Monday, May 01, 2006, way before I converted the blog to custom domain.

Continue reading →

Friday, October 14, 2011

Upload text and picture direct from computer

Posted by admin at 7:03 PM 0 comments

Images photo album photos pictures

There are bloggers who want to be able to prepare their posts including text and photos in their computer and upload it direct to Blogger. Some have tried using copy-paste from Microsoft WORD which obviously will not work.

Here is a solution - Windows Live Writer. To add a photo while in Windows Live Writer, either click the photo icon or use the INSERT drop-down menu as shown in the screen shot below:

If you wish, you can also add an album. Click PHOTO ALBUM. For this, you will have to have a Window Live ID and be logged in. Once logged in, click ADD PHOTO and browse to the photo in your computer you want to add to the album. Then click OPEN and the photo will be added to the album.

I have tested this at Test uploading photo from Windows Live Writer and found that it works well.

RELATED POSTS:
Easily publish tables with Windows Live Writer

Windows Live Writer plugin

Continue reading →

Monday, September 20, 2010

Make images uploaded via Blogger unclickable

Posted by admin at 9:24 AM 0 comments

graphics HTML Images pictures

Many bloggers want their uploaded images not clickable probably because they don't want their images especially the enlarged version to be copied. Previous post How to make images not clickable (not enlarge) provided a method in varying circumstances may not work.

Here is a more efficient method and failsafe method. All one need to do is after uploading an image via Blogger image upload icon to switch to Edit HTML mode if one is not already in this mode.

Now depending on which post editor you had use, the HTML codes used to display images that Blogger generate upon uploading is different. We will deal with the old post editor (my preferred post editor) first as it is easier to explain and deal with the new updated post editor later:

CODES FOR THE OLD POST EDITOR:

Please note that only the code in black is needed to display the image. Those highlighted in red are not needed to display the picture and can be removed safely leaving only

<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 178px; height: 67px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigNRUPJuLGSIYOCO9ZPMYyRLjkoIpJhKdfri1lBoo_3i0NOWrP6Vt0RqF8l9jgPxuyvqaGIYJ7XWPcM2NcIbl21dSKpsT-mzpwm_mFducqOTQo5MrTO6SV-tSJ0_qJ_DVgM0An2xuH_Zbe/s400/BlogStar.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5373085274943228530" />.

Thus to make the image not clickable, all you need to do is just to delete those codes highlighted in red. I have tested that successfully over at Test to make images uploaded via Blogger not clickable.

New post editor

We will now deal with the new post editor which is not my preferred post editor. The codes to display the uploaded image generated by Blogger with the new post editor is as follows, again with the code to display the image in black while the codes in red are to make the image clickable to display an enlarged image. The codes in blue is to center the picture and can either be removed or left in place (note: center will be replaced by left or right if you had elected to float the image to the left or right but that will not affect the explanation to make the image not clickable):

Again, only the code in black is needed to display the image while those in red are used to make the image clickable to enlarge the image while those in blue is meant to center the image. Thus if you want the image not clickable, just delete those highlighted in red (<a....> and </a>) and those highlighted in blue too leaving those in black intact and the image will still be displayed. Alternatively we can just delete those codes in red to make the image unclickable while leaving those in blue intact to center (or float) the image.

Continue reading →

Wednesday, October 28, 2009

Updated post editor: remove image border

Posted by admin at 7:34 PM 0 comments

Images photos pictures

First thing to note is that with the Blogger updated post editor, you can only upload pictures in the compose mode. To remove border from uploaded photo, you will need to edit the HTML used to display the photo and that you can only do in the Edit HTML mode where in place of the photo, you will see this script:

Now one would think that the attribute border="0" would ensure that the displayed picture would not have a border, but it does, as you can see in that photo of kimchi (Korean version of sauerkraut or fermented cabbage) above.

In order to make the border disappear you can add this attribute style="border:none;" to the <img> tag like this:

and the result of that edit is this photo minus the border:

Update: As a result of test removing border from images uploaded via Blogger I have found out that the attribute style="border:none;" must be placed before src="photo URL" and not after.

Update 2: "Hi Peter, How about adding an image border? Simply changing border="0" to border="5" or "10" and making sure my colors were correct didn't cut it. Please help."

My response: Since Blogger add border to images as a default, I suppose one does not need to do anything to have border with images and to prove that, I uploaded 2 photos, first with the updated post editor, then with the old post editor, both without editing the codes. As you can see below, both are framed with a border:

Continue reading →

Tuesday, October 20, 2009

Images and the Blogger updated post editor

Posted by admin at 6:04 PM 0 comments

Images photos pictures

Previously with the old Blogger post editor, when you upload images, Blogger adds an alt="" tag for you to complete as seen in an example below:

Now with the updated post editor, you will only have the image upload icon in the COMPOSE mode and Blogger also inserts codes different from the above example to display the image (visible only in the Edit HTML mode) illustrated by the example below:

The code which actually display the image is highlighted in green above. Although in this case, Blogger wasn't as considerate to add the alt tag for you, you can still add it in yourself together with the title tag if you wish like the example below:

Note: You can switch between the old post editor and the updated post editor by signing into Dashboard, SETTINGS > BASIC and near the bottom of the page, you will see this for your selection:

Continue reading →

Monday, September 28, 2009

Picture to link to label page or any webpage

Posted by admin at 9:21 AM 0 comments

HTML Images photos pictures

"I have a picture on my side bar, I would like to link it to all labels containing say books. There are five post under that label, and when my guest push the picture of the books, I would like the page to pop up only the posts with the label, Books."

Well, that is easily done. First you have to be familiar with hyperlink, namely using <a href="URL of target webpage">anchor text (some text descriptive of target webpage)</a>. And since you want the link to go to the label page "Books", that URL will be the URL of the label page of "Books" which you can get by right-clicking on the label "Books" in the sidebar and selecting "Copy link location".

You also need to be familiar with uploading pictures to the web and getting the picture URL like what is described in Using Blogger to host pictures.

Now the required codes are

<a href="URL of target webpage"><img src="picture URL" /></a>

and if that is not clear enough, ask.

Continue reading →

Tuesday, September 15, 2009

Display images in larger sizes

Posted by admin at 7:27 AM 0 comments

HTML languages photos pictures

"why is it that my images are big but when i upload them they become so small?"

When you use Blogger's photo upload icon to display images, you can chose 3 different default sizes - large, medium and small. If your image is very large, Blogger will shrink it to a smaller size for display. However, if you are in the COMPOSE mode, you can use your mouse to grab the edge or the side and drag-drop it to create a displayed image that can be larger or smaller than the default.

Alternatively, you can use the HTML image tag <img src="photo URL" /> to display it in the original size or use that tag with a width attribute <img src="photo URL" width="some number" /> to display it in whatever size you choose.

Related posts:
Using Irfanview photo editor for your blog

How to add caption to photos

New Blogger template for posting large photos

Bubbleshare, another way to display photo album

How to make clickable (hyperlink) pictures

Put photo of authors in post footer

Putting author's photo in center bottom of post

Add series of photos in blog footer

More later.

Continue reading →

Saturday, August 29, 2009

Using Blogger to host images for various purposes

Posted by admin at 5:47 PM 0 comments

Images photos pictures

Summary: Upload photo via photo upload icon, publish. Open post. Click on photo, press ctrl+U to display source code, copy photo URL from source code.

Nearly all bloggers would be familiar with uploading photo via Blogger photo upload icon

. However, you can only display the photo in 3 limited sizes - small, medium and large. (Update: this is referring to uploading photo in the old post editor, not the new updated post editor, but what follows still remain true). Clicking on such images generally result in a larger image displayed.

You cannot directly use such uploaded images, say, to put in the sidebar, for your Blogger profile photo or to use the image as a link to another webpage or to display images side by side. For such purposes, the photo need to be uploaded to a webhost which allows inline linking or hotlinking (also called leeching, piggy-backing, direct linking, offsite image grabs and bandwidth theft).

One of such webhost is the free Photobucket image host. This post will be about using Blogger itself as a host for the images for inline linking.

I prefer to use Blogger for image hosting as I prefer my blog stuff to be stored all in the same host. If you plan to do the same, may I suggest you create a new blog for this purpose, as I have at My Photo Store and upload your photos for profile photo, backround image, etc., there.

When you upload a photo to Blogger using their photo uploading icon

and you are in the EDIT HTML mode, you will see in place of the photo the following HTML code:

Such uploaded photos can be used for inline linking for profile photo, etc.You will see 2 URLs in the code. You can use the second one for inline linking (in red). However, it is better to do the following:

Publish, click on the photo which will take you to a webpage where only the photo will be displayed. Press ctrl+U to open page source and get your photo URL there. I will upload a photo below and use that as an example. You may click on the photo and verify for yourself what I am going to write:

Click on the above photo, you will be taken to a webpage where only the photo of my grandson is displayed. Press ctrl+U and the source code is revealed

<html>
<head>
<title>lewis+apple+5.JPG (image)</title>
<script type="text/javascript">

</script>
</head>
<body bgcolor="#ffffff" text="#000000">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTiDp21j4iCXjSrwUkFsrcluH9EsOl_Qp4t9kyUl4brS0MDpHo14ifmEFqYU-UK2YqXbX1oM9VsxuRBviLcBv8jw3IoweQ84hei4ec3iqEoilXR7OgRjRNs_PgbcYMGlI629jU9cT-6FY/s1600/lewis+apple+5.JPG" alt="[lewis+apple+5.JPG]" border=0>
</body>
</html>

and within the code is the photo URL (in red above) which you can use for inline linking.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTiDp21j4iCXjSrwUkFsrcluH9EsOl_Qp4t9kyUl4brS0MDpHo14ifmEFqYU-UK2YqXbX1oM9VsxuRBviLcBv8jw3IoweQ84hei4ec3iqEoilXR7OgRjRNs_PgbcYMGlI629jU9cT-6FY/s1600/lewis+apple+5.JPG

Continue reading →

Tuesday, July 10, 2007

Change background color or image of main column of blog

Posted by admin at 3:09 PM 0 comments

background customization pictures templates

Update 2011: With the new Blogger Template Designer, changing the background is now a breeze. Just sing into
DASHBOARD > DESIGN > TEMPLATE DESIGNER > BACKGROUND
and change the blog background according either color or image. If this option is not offered you will either have to stick the old method of changing background described below or change to a Template Designer template.

Blog reader asked this question and I figure I might as well answer in a post.

Add/Change background color of main column (posts)

To change the background color of ONLY the main column (posts), sign into Dashboard, click LAYOUT (now called DESIGN) in the section for the relevant blog, click EDIT HTML sub-tab to open the template editor window. Look for this block of codes in the template:

#main-wrapper {
width: 410px;
float: left;
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 */
}

(This is for the standard Blogger Minima template. Wordings may be slightly different for different template but will be mainly similar)

Add any of this to the block of codes:

background:pink;
background:blue;
background:#D4FFFF;
etc.

The last will give you a greater choice of color. For the last example which use HTML color code, you can get much help using the free ColorPic tool. I used it frequently. You can Google for it by typing the search term "colorpic" or "color picker" into the search bar above (tick "Web").

After addition, the block of code may now look something like this:

#main-wrapper {
background:#D4FFFF;
width: 410px;
float: left;
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 */
}

Add background image to main column (posts)

Do exactly as above, but this time, upload the image to the web either using the free Photobucket or use Blogger to host the image as described in this post Use New Blogger to host your pictures for the profile photo, sidebar, blog Header, etc.. Get the photo URL.

Then add this line of code into the blocks mentioned above:

background: url(photo URL);

So the block of codes become:

#main-wrapper {
background: url(photo URL);
width: 410px;
float: left;
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 */ }

If add a background image, you ask yourself if it will increase loading time too much, weather text and other images will be visible or look good with it, etc. Not everyone is on broadband. Some still use dialup

Continue reading →

Friday, June 22, 2007

Add a series of photos in blog footer

Posted by admin at 2:37 PM 0 comments

pictures

A blog reader asked how to put the profile photos of each author in a blog footer. That require a long answer, so I will answer in a post. Actually, the method described can be applied to the Header as well as the footer. You just click the right Add a Page Element in the right section in the LAYOUT.

I will proceed to explain how I put a series of 4 photos in the footer of My photo store. The first thing I did was to find out what is the width of the footer, and to do that, I click the TEMPLATE tab, then the EDIT HTML sub-tab to open the template editor window. I search and found this:

#footer {
width:660px;

That tells me the width of the footer is 660 pixels wide. I plan to put a series of 4 photos in the footer. 660 divided by 4 gives me 165. There are 2 ways to proceed, I will use the method that conserve storage space for my Blogger account and describe a slightly different method later. I will first resize the photos to width 160 using Irfanview (click BACK button to get back to this page). I then uploaded the photos to Photos for footer. I clicked on the photo one by one to get to the webpage that shows only the photo, and for each photo, I click VIEW in the menu bar and chose "View source". I copied the URL of the photo from the source and paste it into a Notepad file for later use. After getting the URLs of all the 4 photos, I then proceeded to the next step.

I clicked the TEMPLATE tab to get to the LAYOUT, click "Add a Page Element" in the footer section (if you want it in the Header, you will click "Add a Page Element" in the Header section), chose HTML/Javascript, then type this HTML for a table:

The actual HTML I used to display the series of 4 photos in the footer in My photo store I give in the scroll box below:

You will have to adjust the method described according to the number of photos you plan to put in the footer.

As promised, I will now described briefly an alternative method with will take up more Blogger storage space. You can upload the photos in its actual size, them for the <img> tag, write the tag as follows:

<img src="photo URL" width="160" />. Of course, if your footer width and/or the number of photos you want to put is different from mine, you will have to adjust the width="W" according.

All about digital photography

Continue reading →

Thursday, May 10, 2007

How to add background picture to the sidebar

Posted by admin at 12:21 PM 0 comments

pictures

A blog reader asked about how to add background picture to the sidebar. This can be done. The first thing you need to do is to upload the picture to the Web, perhaps using the method outlined in this post Getting New Blogger to host the photo for your profile, sidebar, Header, etc. (click BACK button to get back to this page) or use a photo host like Photobucket

What you need to do to to sign into Dashboard, click LAYOUT, then click EDIT HTML and look for this block of codes:

#sidebar-wrapper {
width: 150px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
background:
}

Type this into the block of codes:
url(photo URL);

#sidebar-wrapper {
width: 150px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
background: url(photo URL);
}

You can see the result here: Dummies Test Blog. The links and wordings are a bit hard to see though because of the color. I probably have to choose another photo to demonstrate.

Continue reading →

Saturday, December 16, 2006

How to get rid of the border in images uploaded via Blogger Dashboard

Posted by admin at 4:37 PM 0 comments

Images photos pictures

A reader asked how to remove the border from the image uploaded via Blogger dashboard. At first I thought all one need to do is to edit the attribute border="1" to border="0" in the <img> tag, but that is already the default in all images uploaded via Blogger dashboard, and the image still have a thin border. The only difference will be a thicker border if you put a larger number in border="X". The answer is to add a CSS (Cascading Style Sheet) to the code. Add in the <img> tag the following: style="border:none;" and the border will be gone.

For example, in the post Sibu Island, Johore, Malaysia, there is no border around the image. This effect was achieved by adding style="border:none;" (in red) in the <img> tag. The HTML for the image is in the scroll box below:

NEWER POST

HOME

OLDER POST

Hide image border by merging border with background

A commentator has also suggested editing the template so that the color of the image border merge with the main column background color so that the border becomes invisible.

Continue reading →

Swebit SEO and Blogger Tricks

Pages

Vertical pictures turned horizontal - solution

Animated gif image: How to change size

Will old images disappear when changing to custom domain?

Upload text and picture direct from computer

Make images uploaded via Blogger unclickable

New post editor

Updated post editor: remove image border

Images and the Blogger updated post editor

Picture to link to label page or any webpage

Display images in larger sizes

Using Blogger to host images for various purposes

Change background color or image of main column of blog

Add/Change background color of main column (posts)

Add background image to main column (posts)

Add a series of photos in blog footer

How to add background picture to the sidebar

How to get rid of the border in images uploaded via Blogger Dashboard

Hide image border by merging border with background

Search This Blog

Popular Posts

Blog Archive

Followers

niko apk