Create your own shortcut icon/ address bar icon

Stumble del.icio.us Reddit MyWeb! Facebook Google bookmark

Are you fed up of the generic/common blogger icon that appears on every other blog when you open it in the browser ?



Well, assuming that the Blogger terms of service are not violated if we try to change the shortcut icon (or FavIcon as it's well known), here is a series of steps on how to accomplish this with any of the templates that the blogger provides:
[YOU ARE ADVISED TO "DOWNLOAD FULL TEMPLATE" BEFORE YOU MESS WITH ANYTHING.]

1. If you already have an icon somewhere on the web, goto step 7. Otherwise for uploading a new icon, click on new post.
2. On the Compose or Edit Html tab, click on "Add Image" button on the text toolbar.
3. Click browse under the "Add an image from your computer" text and select the image you want as icon. Be sure that you choose only the formats specified by Blogger. It should be one of jpg, gif, bmp and png images, 8 MB maximum size. Though, you can upload upto 8MB of image, but it won't be wise to do so. Choose an image which is not beyond 4-8 Kb size or a 20x20 or 32x32 pixel size will be sufficient. The larger the images, the slower your pages will load.
4. Once uploaded, Click "Done", and come back to the New Post page.
5. Now from the "Edit HTML" tab, select the src="http://www.blogger.com/......png etc" within the <img tag. Copy just the url/link of image.
6. Click on "save as draft" button. Keep this post as draft forever.
7. Now go to Customize -> Layout -> Edit HTML, then click "Expand widget templates" checkbox.
8. Scroll down until you find ]]></b:skin> or </head>.
9. Paste the full url of the image you just uploaded or the image url where you have your icon in the following format just above the </head> part as shown.
   

10. 
    < href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPBYIXunMn2FBIUnJdFS3mVP2f_ScLkYyMgYLRhSv3mftWAggyT8y9v9liBxNKwW5YEWB5D_QyLxo_XKnH3gku4QBAWk_YR2pvGTCd4qlNOskyd3JjOw1_ZLXw43f_2stf8dDHcQCbDkA/s320/Pinto.jpg' rel='SHORTCUT ICON'/> </head>

    
    
    The highlighted url will be your url image. The one shown here is mine.
    
11. Click Save template and enjoy!
    

Continue >>

Resizing your page or blog

Stumble del.icio.us Reddit MyWeb! Facebook Google bookmark

The default size for the blog when you create it is usually 660px in most of the blog templates that the blogspot has. It's easy to change the size of the blog (width etc) if you want. Just goto customize -> Layout tab -> Edit Html. Click on Expand Widget Templates and then follow the following.

YOU ARE ADVISED TO "DOWNLOAD FULL TEMPLATE" BEFORE YOU MESS WITH ANYTHING.

The default settings are as defined here:

Under the header section, you will see the following css class definitions:

/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Look for #header-wrapper. This defines the header width(the block that contains your blog title and description). So you might like to change the width from 660px to say 800px or more if you want, so that it becomes:

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:800px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Similarly, look for all other css styles with width of 660px and change them to 800px. Specially look for #header .description, #outer-wrapper, #footer.

You might see the following in NOT particularly the same order:

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:660px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Now after you have changed all 660px to 800px, is the time to change the main blog post width to fit the page.
The sidebar width is usually defined at 220px as shown below: (Specially look for #sidebar-wrapper)

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}

So we have to have the width of post as 800-220 = 580px. So look for the following in your css definitions: #main-wrapper

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

Change 410px or whatever is defined there to 580px. And Voila after you save the settings, you are flying with a new more spacious blog of yours. :)
Enjoy!!

Continue >>

The blog hackers

Stumble del.icio.us Reddit MyWeb! Facebook Google bookmark

I created two blogs

• AskJha.BlogSpot.com
  
• mycomponent.blogspot.com

And then I had to re-configure them as per my design choices. So I thought, okay..it's time to create a blog where I can compile everything I do for my blogs so other users can also use them.

I am a programmer by CHOICE. So you will find everything here that you want to re-design your blog.
Happy hacking !!!

Continue >>