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

Johny Joss Banget Blogger Template


Johny Joss Banget

Easily Downloadable Johny Joss Banget Blogger Template
TEMPLATE FEATURES

Johny Joss Banget template was designed for gallery content blogger especially for movie review. There's no specific feature in this template. It's a black color with 5 column blogger in there, easy loading with elegant looks, automatic slider Carousel for your recent post, 1 right sidebar, 3 columns footer, navigation drop down menu, grid and list style, pagination for blogger ready, clean design template, and more. This template suitable for gallery content blog with daily updates. But you can use it for any gallery images content for your blog.

If you want this template with pagination in recent post, please donwload here

Template Name : Johny Joss Banget
Author : Maskolis
Url Instruction : Creating Website
Designer : Creating Website

How to find Blogger's blog ID number? And why you may need it

Sign into Blogger. In the list of blogs, click on the blog which ID number you want (see screen shot below):

Blogger Dashboard list of blogs

Look at the address bar with the blog URL at the top of the browser and you will see ID=12345678 as highlighted in blue in the screen shot below:

Blogger blog ID number

Those numbers are your blog ID number.
Sometimes third party services you want to use require you to provide the blog ID number
Also, the blog ID no. is fixed and will not change when you change the blog title or the blog URL. Also sometimes when you require help from someone you may also be required to provide the blog ID number.

Solution for "Another blog is already hosted at this address



Bloggers who wants to convert their blogspot blog to custom domain sometimes get this error message: "Another blog is already hosted at this address".

One solution is to use the Magical Custom Domain Form.

Just type in the custom domain URL into the box as highlighted in the screen shot below:

Gatsby Magical Custom Domain Form

How change Blogger background color

The Blogger Template Designer has now made changing the blog background color very easy. Sign into www.blogger.com (Dashboard), and at the right sidebar, click the down arrow (drop-down menu) Blogger new UI down arrow drop-down menu to get a series of options:

Blogger new UI layout options

Blogger new UI layout template designer ADVANCED settingClick on LAYOUT and then ADVANCED tab and then on the right would be the 3 options to change colors of
1. Outer background
2. Main background
3. Header background


Blogger template designer set background color

Choose your selected color by clicking on the colored box or type in your HTML color code (eg #a1b2c3).

Blog as website and self hosted blogs

Blog as website and self hosted blogs
One frequent request from bloggers using blogspot (www.blogger.com) is to get rid of the year and month in a post permalink and just have relevant keywords in the post URL. This is not possible with blogspot blogs but is possible with self-hosted Wordpress blogs. (Update: Blogger updated post editor now gives in the options a way to customize permalinks)

Affiliate marketeers who use blogspot blogs as landing page for their affiliate products run a serious risk of having their blogs deleted. For such purpose, a self-hosted Wordpress blog is preferable.

One more reason why a self-hosted blog is preferable to blogspot blog is direct access to the server possible with self-hosted blog but impossible with blogspot blogs. There are various things you can do such as creating pop-ups or pop-unders which is only possible by hosting the blog yourself and not let Blogger host it for you.

However, one big disadvantage of self-hosted blog is the need to find reliable web host provider plus worries over security issues and other issues such as sufficient bandwidth, cost, uptime, etc.

Having a web host review site such as Top 100 Web Hosting will help with selection of a suitable webhost for your self-hosted blog as they have used various criteria to rank web host providers using criteria such as availability of unlimited web hosting, reputation, features, users rating, green environmental issues, reliability, speed, 

you can read up, for example, Web Hosting Review HostGator before you make up your mind about which web host to use.

If cost is an important issue, there are tips on How to save Money on Web Hosting.

To make your money go further, you can also find Web Hosting Coupons & Promotion Codes for further discounts and get exclusive deals.

Top 100 Web Hosting help you save by highlighting exclusive deals, providing coupons and promotional codes to copy-paste to get discounts when ordering and secret links which are only available in their website.

New Blogger Custom Domain

New Blogger Custom Domain
The New Blogger has recently rolled out its latest feature - custom domain. With custom domain, you can have your own domain name like myblog.com and have your blog hosted with Blogger for free. You may also choose to host your blog with a third party web host or even on your own, but you will have to grapple with various issues like the hassle of publishing your posts via FTP (File Transfer Protocol). A big disadvantage of hosting on your own is that many of the new features of the New Blogger like drag-and-drop Layout, Label List, etc., will not be available to you as you will have to use the old classic Blogger template.

Others who don't use custom domain will have to live with sub-domain like myblog.blogspot.com. Some don't like it because they say the sub-domain does not belong to them, but to Blogger. In addition, some are of the opinion that sub-domain are command less respect from surfers, rather like using a home as an office. 

If you want to use custom domain, the first thing you need is to register a suitable domain name. The problem is, the Internet has been with us for quite some time already, and many of the more desirable domain names have probably been already taken. This is where services likewww.buydomains.com can come in handy. www.buydomains.com have many domain desirable domain names that you may want to use for your blog. There is a search box into which you can type in keyword/s and search for your desired domain name. They also have Advanced Search to help you narrow down the search.

If you have a domain name which you think may be saleable, you can also put up the domain for sale through www.buydomains.com. You may also start a blog with custom domain (which means that the domain belongs to you, and not to blogger, and you may do whatever you want with it). You take care to choose a desirable domain name with good keywords in the URL, publish posts regularly, get the blog indexed by search engine, and get a high PageRank which will make your domain name more valuable.

You may even join the Google AdSense Program and put contextual ads, search boxes and referral links on your blog and work on it to produce revenue. There may be people who are looking for AdSense ready blogs to buy as then they can start earning straight away rather than starting from scratch.

Create sub-domain with custom domain

If you are just interested to know how to create sub-domain, skip directly toHow to create sub-domain

A blogger's complaint that the static page he created has unwantedexpandable post summary (if I understand him correctly is the push I needed to finally write this post on sub-domain. He suspect it may have something to do with the fact that he is using a template with built-in expandable post summary (again if I understand him correctly. He may be right but it looks that the static page one created via Blogger uses the same template.

Anyway I figure his solution might be to abandon blogspot and upgrade tocustom domain and create a sub-domain instead as the sub-domain can use any template which may or may not be the same as the original. It is practically a separate independent website. Look at the one I created recently faq.bloggertipsandtricks.com/ (still under construction). If you go toBT&T FAQ which is the title of that sub-domain, you may see me using the same template, but the blog title, sidebars, etc are different from Blogger Tips and Tricks.

A bit more rambling. While for a long time, Blogger.com was negatively compared with Wordpress, since it abandoned the old classic template and forced everyone to upgrade to the new Blogger xml templates, Blogger has improved by leaps and bounds. Not only that, now coupled with Google Apps, you have a very easy "content management system" to create many things without getting too technical. In fact, I know that Google (here in Malaysia anyway) is working with a students from a University to help SME (Small and Medium Enterprise) using Blogger and Google Apps to create >websites for businesses.


HOW TO CREATE SUB-DOMAIN



First you must upgrade to custom domain and I would suggest you not register directly your domain using other domain registra but do it via Blogger.com and Google Apps and you will find lots of what you need to do is automated for you by Blogger.com. No need to struggle with CNames, etc. etc.

Once you have a custom domain, make sure you create an administrator account (email). Instructions should be emailed to you. Once you have created that administrator account, either log into that email or log into https://www.google.com/a/cpanel/yourdomain.com, making sure to replaceyourdomain with the actual URL of your blog. If you ever forgot your admin password, refer to Google Apps "forgot password". (I somehow prefer to sign into my admin email, then click "Manage this domain" to get into the CPanel).

In Google Apps Control Panel, click the Domain Settings tab (or click Domain names):

Google Apps Control Panel highlighting Domain Settings

and in the following window, click Domain Names tab:

Google Apps Domain Setting tab highlighted

In the window after clicking the Domain Settings tab, the name of your domain registra will be shown. Below that, there will be an Advanced DNS Settings link. Click it 

Domain Settings showing domain registra

Click "Advanced DNS Settings" and the next screen will give you the password and username of your domain registra which will likely be Godaddy or eNom: 

username and password for Advanced DNS Settings

Click "Sign into DNS Console" and in the next window will be the login page of your domain registra's:


or
eNome Domain Management
eNom Domain Management sign in



Copy-paste the username and password, click "Secure login" and presto, you are signed into the Advanced DNS Settings of your respective domain registra:

GODADDY



Click the particular domain to which you want to add a sub-domain, and in the next window:



Click "Total DNS Control" and in the next window, under "CNames Aliases", click "Add New CName record"



then type in the sub-domain (eg. faq.yourdomain.com), and for Points to Host Name: enter ghs.google.com, click OK and you are done. Congrats, you have created a sub-domain for your blog.

ENOM

For eNom, in the HOST RECORDS section, click EDIT at the bottom right of the section:

eNom Host Records

and the section instantly turned editable where you can edit the Host Names, their Addresses and Host Types (A record or C Name). In your case, you want to create a new sub-domain, so click ADD NEW and a new row open at the bottom for you to type in a new host name, address and record type:

eNom add new how record

Thus for Host Name, type in the name of your sub-domain. For example, if I want to create forum.bloggertipsandtricks.com, I will type just "forum". For the address, type or copy-paste ghs.google.com and for Record Type, choose CName (Alias).

When done, just click SAVE and you are done.