Wednesday, 18 July 2012

Animated gif image: How to change size


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/AVvXsEgb0HyhBg2jSlfcSnvIme_wrgvN_Np4M9Y5vCLQTcanQCWwaackw7ogrmxd4Lq7-7mBwq-cQ0P-wXoDLFpWX6fi1z8BtCGYCNgmWNoBo5PUGvIzxoA8TzifEv0gqCgI5BHRoIXwOUlhI2o/s1600-h/starandbird.gif"><imgstyle="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb0HyhBg2jSlfcSnvIme_wrgvN_Np4M9Y5vCLQTcanQCWwaackw7ogrmxd4Lq7-7mBwq-cQ0P-wXoDLFpWX6fi1z8BtCGYCNgmWNoBo5PUGvIzxoA8TzifEv0gqCgI5BHRoIXwOUlhI2o/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/AVvXsEgb0HyhBg2jSlfcSnvIme_wrgvN_Np4M9Y5vCLQTcanQCWwaackw7ogrmxd4Lq7-7mBwq-cQ0P-wXoDLFpWX6fi1z8BtCGYCNgmWNoBo5PUGvIzxoA8TzifEv0gqCgI5BHRoIXwOUlhI2o/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/AVvXsEgb0HyhBg2jSlfcSnvIme_wrgvN_Np4M9Y5vCLQTcanQCWwaackw7ogrmxd4Lq7-7mBwq-cQ0P-wXoDLFpWX6fi1z8BtCGYCNgmWNoBo5PUGvIzxoA8TzifEv0gqCgI5BHRoIXwOUlhI2o/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:

gif image uploaded direct from Blogger post editor

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/AVvXsEgb0HyhBg2jSlfcSnvIme_wrgvN_Np4M9Y5vCLQTcanQCWwaackw7ogrmxd4Lq7-7mBwq-cQ0P-wXoDLFpWX6fi1z8BtCGYCNgmWNoBo5PUGvIzxoA8TzifEv0gqCgI5BHRoIXwOUlhI2o/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/AVvXsEgb0HyhBg2jSlfcSnvIme_wrgvN_Np4M9Y5vCLQTcanQCWwaackw7ogrmxd4Lq7-7mBwq-cQ0P-wXoDLFpWX6fi1z8BtCGYCNgmWNoBo5PUGvIzxoA8TzifEv0gqCgI5BHRoIXwOUlhI2o/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:

gif image uploaded direct from Blogger post editor

How to redirect blogger blog to blogspot.com address

It is not a new thing since few days that your blogspot.com blog may redirect to a country based
domain. Perhaps it is worldwide. Every blogger blog owner may have the same problem of automatic
redirection. So here in this post, we have a tweak that enables your blog to stay on blogspot.com URL.

Well, first of all let’s answer the question. Why a .com redirect to a ccTLD (Country Specific Top Level
Domain) URL may hurt you? This is because according to MR. Search Engine Optimizer’s law, you can’t
host the same content on different domains. If you are using blogger on your own top level domain,
then there is no point of worry. But if your blog has a .blogspot.com address in its tail, then it may hurt
you.

So, let’s get into the answer now. Here is the simplest JavaScript code (Pretty short too!) that you can
use to save your blog from being redirected:

if ((window.location.href.toString().indexOf('.com/'))=='-1') {
window.location.href =

window.location.href.toString().replace('.blogspot.in/','.blogsp
ot.com/ncr/');
}


Sign into www.blogger.com (Dashboard), click the down arrow Blogger dashboard down arrow drop down menu, select TEMPLATE,

Blogger Dashboard Settings Template

click on EDIT HTML to open the template editor,

Blogger Dashboard Settings Template Edit HTML template editor

and place the given code in the Header section, for example, just before the </head> tag and your blog will no longer have that country specific address and will instead remain as, for example, blog.blogspot.com and not blog.blogspot.in anymore.

Demo

Note: This code is for stopping .blogspot.in redirects. You need to change it to your own country’s TLD.

Black Beauty Blogger Template


Black Beauty Template

Easily downloadable Black Beauty Blogger Template


TEMPLATE FEATURES 
Black Beauty template is a free magazine style blogger template for any content blog with many feature, such as :
  • 3 column blogger template with right sidebar
  • Magazine style blogger template with green color
  • Automatic featured slider, ads ready, 
  • Pagination for blogger ready
  • Navigation dropdown menu
  • Related post ready in the bottom of every post, and many more. 
  • Static page ready
  • And many more

Template Name : Black Beauty Template
Author : Maskolis
Url Instruction : Creating Website
Designer : Creating Website

Johny Sompret Blogger Template


Johny Sompret

Easily Downloadable Johny Sompret Blogger Template
TEMPLATE FEATURES

Johny Sompret was a simple template with magazine style. There's no specific feature in this template. It's a white, blue and black color with 3 column blogger in there, easy loading with elegant style, 1 right sidebar, 3 columns footer, navigation menu, ads ready, pagination for blogger ready, clean design template, and more. This template suitable for all type of content blog especially for daily blogs, but you can use it for your site anything you like to. I hope you enjoy it and happy blogging.

Template Name : Johny Sompret
Author : Maskolis
Url Author : Creating Website
Designer : Creating Website

Johny Jazzytube Blogger Template


Johny Jazzytube

Easily Downloadable Johny Jazzytube Blogger Template
TEMPLATE FEATURES

Johny Jazzytube was made for video content only from Youtube. There's no specific feature in this template. It's a white, black and blue color with 4 column blogger in there, easy loading and SEO friendly with elegant looks, 1 right sidebar, 3 columns footer, navigation menu, ads ready, pagination for blogger ready, clean design template, and more. This template suitable for video content blog with daily updates only from Youtube. But you can use it for any gallery content for your blog. This is how to make a post in this template :
http://www.youtube.com/watch?v=K4Di2rvigVkendofvid

[starttext]
Your description here..........
[endtext]
You can grab URL from Youtube just like you see in this picture below, and you must closed with this code endofvid (with no space)


Or this picture


And the final result to make a post should be like in this picture :



And if you want to use this template in image gallery, you can download here

Template Name : Johny Jazzytube
Author : Maskolis
Url Author : Creating Website
Designer : Creating Website

Johny Joss Blogger Template


Easily Downloadable Johny Joss Blogger Template
TEMPLATE FEATURES


Johny Joss template it was made especially for online store only but you can use it for any content gallery, cause there's no shopping cart feature in this template. Design with magazine style blogger template with 4 column blogger template and one left sidebar, 3 column footer, automatic featured content slider, pagination for blogger ready, dropdown menu, tooltip image, clean design template, and more. This template designed for online store with daily updates. 

Johny Ganteng Store Blogger Template


Easily Downloadable Johny Ganteng Store Blogger Template

TEMPLATE FEATURES
Simply blogger online store template with no shopping cart feature in this template. Johny Ganteng Store was designed with magazine style blogger template with 4/5 column blogger template and one right sidebar, 4 column footer, automatic featured content slider, pagination for blogger ready, dropdown menu, tooltip image, clean design template, and more. This template designed for online store with daily updates but you can use it for any content gallery. 

Johny Crott Blogger Template


Easily Downloadable Johny Crott Blogger Template


The original demo was deleted by Google because violation privacy image. This is a new one for this template

TEMPLATE FEATURES

Another template blogger for your online store from Creating Website. Names Johny Crott,magazine template that was made especially for online store. Design with magazine style blogger template with 4 column blogger template and 1 column siderbar in left, 3 column footer, shopping cart for e-commerce blogger with cart, automatic featured content slider, pagination for blogger ready, dropdown menu, tooltip image, clean design template, and more. This template designed for online store only with daily updates.

Template Name : Johny Crott
Author : Maskolis
Url Instruction : Creating Website
Designer : Creating Website

Johny Crottube Blogger Template


Johny Crottube

Easily Downloadable Johny Crottube Blogger Template Blogger Template

TEMPLATE FEATURES

Johny Crottube template is Johny Crott series that was made for video content only from Youtube. There's so many feature in this template. It's a white and black color with 5 column blogger in there, easy loading with elegant looks, 1 left sidebar in homepage and 1 right sidebar in post page, 3 columns footer, navigation drop down menu, grid and list style, pagination for blogger ready, clean design template, and more. This template suitable for video content blog with daily updates only from Youtube. But you can use it for any gallery images content for your blog.

Template Name : Johny Crottube
Author : Maskolis
Url Instruction : Creating Website
Designer : Creating Website

Johny Kenthir Blogger Template


Johny Kenthir

Easily Downloadable Johny Kenthir Blogger Template

TEMPLATE FEATURES
This is another magazine template blogger for news content from Johny, Johny Kenthir blogger template is a free magazine style blogger template for portal news blog with automatic recent per category. It's a 4 column blogger template with right sidebar, 3 column footer, magazine style blogspot template, 1 right sidebar, automatic featured content slider, automatic slider carousel, ads ready, pagination for blogger ready, dropdown menu, tab view menu, clean design template, and more. This template designed for portal news blog with daily updates. New feature : Static Pageready.

Template Name : Johny Kenthir
Author : Maskolis
Url Instruction : Creating Website
Designer : Creating Website