18 February 2008

Creating the sticky notes, your way

1. Login to Dashboard.
2. Click on Layout of the blog for which you want to create a sticky note.
3. Click on Edit HTML tab.
4. Add the following code just below the #header-wrapper code
#sticky-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#sticky-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

5. Now search for following code snippet in the code window;
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Customizing blogger (Header)' type='Header'/>
</b:section>
</div>

6. And add these lines of code just below the above code;

<div id='sticky-wrapper'>
<b:section class='sticky' id='sticky' maxwidgets='2' showaddelement='yes'>
</b:section>
</div>

7. Now click on SAVE TEMPLATE.
8. Click on the Page elements tab and then click on Add a Page Element link.
9. A new window will open, select HTML/JavaScript and click on ADD TO BLOG.
10. A window will open where you can insert your sticky note.
11. Click on SAVE CHANGES.
12. See your sticky for yourself!

NOTE: You can customize you sticky as well in this HTML/JAVASCRIPT window, with your choice of HTML tags.

Background Image for Blogger Template

With this guide, you will be able to
1. add a background image or picture to entire blog or to the posts only or to your sidebar only.
2. add a static background image that stays in place when you scroll through the contents of your blog.
3. customize the position of your image.

All you need to have is an image readily hosted in some image-hosting websites like flickr, picasa or any picture that you'll find on the net(googling).
Goto your image hosting site and take note of the picture URL.
Next, log in to your Dashboard click Layout and click Edit HTML, and search for the following code in the code window;
body {
background:$bgcolor;

and add the following code;
body {
background-image: url(URL address of your image);

Remember to insert the URL address of your image in the brackets.
Insert the URL of your image in the above brackets and Click Preview to see the feel of your blog.
If you like the page feel, save the template.

Background for sidebar:
You can also have a background image just for your sidebar. Locate the following code-snippet and add the background image code accordingly.
#sidebar-wrapper {

#sidebar-wrapper {
background-image: url(URL address of your image);

Background for posts:
For a background image to your main post body only, find the code-snippet #main-wrapper { and add the background-image code like the way I've done below;

#main-wrapper {
background-image: url(URL address of your image);

Repeating background image:
By default, the image is repeated to fill up the entire background of the page. If you have a small or tile-sized image, it will appear like a print pattern in the background. Sometimes, you dont want to have the image repeated. In such cases add the following code snippet in the place where you have added the above mentioned code;
background-repeat: no-repeat;

Alternatively, to repeat the image horizontally. The code is;
background-repeat: repeat-x;

To repeat the image vertically, the code is;
background-repeat: repeat-y;

Positioning background image:
If you dont want your image to be repeated and you want to specify the exact position of this image on your page, the code that to be inserted is;
background-position: top left;

The image will appear at the top left corner of your page. The other possible values that you can use to replace 'top left' are;
top center;
top right;
center left;
center center;
center right;
bottom left;
bottom center;
bottom right;

If you do not want it entirely left, right or center, you can also define the horizontal and vertical alignments either in percentage or in pixels. Use either of these values instead, with x being the horizontal value and y being the vertical value.
x% y%;
xpx ypx;

Static background image:
You can also make the background image to remain in a fixed position when the contents of your blog are scrolled. By default, the picture scrolls with your content. To make image pinned down while your text scrolls, the code you have to add is;
background-attachment: fixed;


Putting everything together
The final code that you will have for your customized template after altering according to this guide would look like;
body {
background-image: url(image url);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

You can also combine the attributes into one line and the shorthand code will look like;
body {
background: url(image url) no-repeat center center fixed;

Removing the sidebar from your template

1. Go to Dashboard.
2. Click on Layout of the blog for which you want to remove the sidebar.
3. Click on Edit HTML.
4. In the template code, search for #main-wrapper code, which will look like this:
#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 */
}
5. Remove the entry width: 410px; and save the template by clicking SAVE TEMPLATE.
6. Voila! you are done.

17 February 2008

Adding widgets everywhere

Go to Dashboard, choose your blog and click on Layout. Click on Page Elements. Now click on Add Page Elements. A new window appears which shows the page elements. Choose the type you want to make and click on it. This opens a new window where the new Page Element is shown ready to accept your data. Do not enter any data at present. Choose Save and the window closes after adding the Page Element to your blog.
Now click on Edit HTML tab under the Layout. Put a checkmark in Expand Widget Templates checkbox. This expands the template HTML widget code. Beta Blogger is arranged in Sections called Header, Sidebar, Main and Footer. Each section can contain one or more Page Elements/widgets. The code for each section is enclosed in tags similar to:

<b:section class="'header'" id="'header'" maxwidgets="'1'" showaddelement="'no'">

Above code is for the Header section. If you want to add a page element to this section, make the changes as; maxwidgets='2' and showaddelement='yes'. Save the Template.

Template tweaking process

Learning how to hack the beta blogger template will help you making your blog customized and unique across blogosphere.
Beta Blogger Templates are made of XML/XHTML. There are five main parts to the template as described in Parts of the Template.

The CSS in the beta Blogger are :
body
outer-wrapper
wrap2
header-wrapper
header section
content-wrapper
main-wrapper
main section
sidebar-wrapper
sidebar section
footer-wrapper
footer section

A simple approach to hack the template is to delete the XML declarations and add <style> tags and then load them into any web editor. This also has its drawbacks as beta blogger may not recognize and accept them in certain cases.
But the best approach is to use the facilities provided by Beta Blogger itself. To use this approach follow these steps :

* Login to Dashboard and select Create a Blog.
* Create a blog with any name and post/publish it.
* Go to Pick New Template subtab under Template tab.
* Pick the Template which most closely resembles the design you have in mind.
* Save Template.
* Go to Edit HTML subtab under Template tab.
* Save the default template in your machine by clicking Download Full Template link.
* Scroll down in Edit Template text box.
* Look for the code you want to change.
* Click on PREVIEW at bottom to see the effect of the change.
* If you like the change click on SAVE TEMPLATE, else click UNDO to discard the changes.

Removing the blog title

Though this tweak is not recommended, for it hampers the blogger engine's capability to sort and search the blogs, but still you can employ this hack and remove the title.
Login to dashboard and click on Layouts for the blog you wish to remove the title. Click on Edit HTML subtab of Template tab at the top. First backup your template to PC by clicking on Download Full Template link. Then scroll down till you come to the following code :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'/>
</b:section>
</div>

Change locked='true' to locked='false' in the above code and SAVE TEMPLATE. Click on Page Elements subtab at the top to switch to Layouts view. Click on Edit link in the header Title section. In the new popup window click on Remove Link and confirm it.

NOTE:
The Remove link is not available before you "unlock" the title widget by changing true to false in the code.

Ground Zero

Now that I've been using blogger for quite sometime, I think I should blog about the blogger hacks that I've come across while customizing my posts.
Here I plan to bring all the tweaks and hacks under one roof.
For, knowledge is good only if it is shared.
Hope you all will find it valuable.
Cheers

14 February 2008

Friday, the fifteenth of February '08

The brigade road tamasha


About the picture: While coming back from The Rice Bowl, where we had team-lunch, this was taken in Brigade road. Dunno whether that car was for real, looking at the size it shouldn't, but they were driving it in the live traffic, that too in notorious Brigade Road traffic. Looking at the logo, it was a VolksWagen...

Of ads and jingles

Sometimes when I'm down, bored or upset, I dont feel like talking, I curse each and every object, alive or dead and even then satisfaction eludes me. The last resort is the idiot box, for it wont retort back even if you say something nasty about it. Yes I mean it, the idiot-box, and I dont like soaps, the reality shows or the movies that the airing channels boast of, but one thing about it that always cheers me up are advertisements. It's the ads I watch TV for... :)
Indian ads have come a long way from the time, when Jaaved Jaafri jumped out of the office breaking the window in Humdard ka Cinkara and "Raju tumhare daant toh moti jaise chamak rahein hain". The widest variety of ads that they air in each channel are treat to watch and amuses me to an extent undefinable. Some are funny, some are stupid, some are vulgar, some are outrageously ridiculous and some are meaningful, yet they all have same effect on me, they relieve pressure off me. I've many favorites and the list keeps changing, rather keep getting appended in my long list of favorites. These ads came and went by, but the dont stop me from amusement.
My personal favorite these days is Vodafone Astrology alerts, where a guy waits for this partner-to-be in a lift the whole day.
I remember my old days when I was barely six or seven, television had just hit the scene and sunday used to be the day when Doordarshan used to telecast everything good that used to be in its kitty. So our neighbours used to come to our place to watch Mahabharata, it used to start from 9AM. It was a fine sunday for everybody, pleasant weather, doordarshan tuned TV and we the viewers, but not for my uncle, who was watching it relishing with equal enthusiasm, oblivion of the question that would hit him like no other. After the first session of Mahabharata got over, TV screen was flooded by a flurry of ads. And then came an ad.... "Pyaar hua, ikraar hua hai, pyaar se fir kyon darta hai dil...." I as an avid ad fan, hadn't been able to get hold of this ad, the more I watched the more anxious I used to become, so finally I had to give answers to my anxiety, the answer I dint have, so I asked my all-knowing uncle, what this ad was about! So I asked, all that followed was a deep silence. After few gasping uncomfortable(for everybody except me) moments, my uncle said-"You'll know it when the time comes...". The time flew by, doordarshan got replaced but myriad new channels, that particular ad went out of broadcast, and I've come of an age where I can make out the messages that ads want to deliver across the consumers, but still I can't forget that particular incident!
And did I tell you, my time came and I knew it all ?!

13 February 2008

Happy Valentine's Day

Happy Valentine's Day! Did u hear that from somebody? did u? Okie, did u wish somebody? Well... I did. :)
This Valentine's Day brings me the vivid memories of my college life, and I'm all smiles. Valentine's day used to be amusement for us, me and my bunch of friends. All set from a week or two before, plans in place, targets locked(each of our ladies chosen), we used to wait for this day to come, revising and re-devising the plan, trying to change the targets and swapping them. Wonderful memories! At that time, our innovation always used to be at its best, creativity oozing out from everyone of us. How would one approach to his valentine-to-be, what choicest of words one would be saying, attacks and counter-attacks. It used to be no less than a chess match, the only difference was we were players and we ourselves were the set-pieces. The long awaited day, 14th of February, would come, we used to raid the town, fully loaded with emotions, sometimes we used to hit targets and other times(well most of the times) we used to return empty-handed, emotionally drained. But still our valentine's day would continue for another one week or so. There's a different kind of joy when good things lengthen, get stretched. So we used to stretch the V-day too. And why shouldn't we? After all those days of preparation.
And gradually all would fade away... some happy with their targets, some happy without them, waiting for another V-day to come.
But as they say, life has to move on and so did I, and now I've come a long way from those days, and I'm into a relationship, that too a steady one, I still miss those days, the thrill, the anticipation, acceptance, rejection, happiness, gloom, everything.
I long to go back in those days where Valentine's Day used to be a 2 weeks' affair, preparation, execution and aftermath. I know I can't, but still I long to...
Anyways, memories remain, to cherish! This retrospection gave me a really happy feeling. Thank you guys, without you those days wouldn't have been such enjoyable.
Cheers!

11 February 2008

Tuesday, the twelfth of February, 08

Lady who wanted to be immortal


About the picture: Dont remember the exact date when this picture was taken but it was during my Puttaparthy trip with my family and friends. Came across a lot of revelations during the trip, of which I have a blog here. This was taken on the second day of our stay, when we(me, my cousin and his friend) aimlessly wandered the in the narrow lanes of the place. Our ambling came to a halt when we saw hot coffees being sold along with dosas and idlis to boot. I found the place a paradise for the spendthrifts, particularly because nothing is expensive there. So while having the coffee, the lady of the shop wanted to have a picture of her preparing a dosa, and that was the pose she gave when I clicked the picture. After I showed her the picture, she wanted to have more of it, in various poses, making tea, serving tea, serving dosa, speaking, returning change and all that... :)
I think I washed away few of my sins, making some of her wish fulfilled by taking her pictures...

Monday, the eleventh of February '08

Bulbs, bulbs and more bulbs


About the picture: Long long time ago, I used to read a lot of comics(not that I lost interest now, but can't buy one owing to various factors which are irrelevant in this context), and there the bulb used to signify an idea. A bulb in some kinda of balloon near a character meant the character had come out with some idea to tackle the problem s/he was facing. Ahh ! how wonderful were those days, when the only thing that worried me was studies, ow.. the pain to go through each lesson, homeworks and blah blah...
But the same studies used to work as anti-dote for every crime I used to commit. Quarrel with a classmate and bring home a good test score and you were forgiven. I wish I could go back in time and relive those moments.
Aaahhh... I always get diverted from the original topic. Yup, about the picture, it was taken in Brindavan gardens. Before we reached there, the dusk had and was waiting for us. :) And we thought, collectively, we should have come a bit earlier to enjoy its scenic beauty. But even then, we roamed around the garden and had good amount of memories collected( and of course a good number of photos taken). That's when I saw these bulbs, the comics came into my mind and with that came the memories of the childhood, when ignorance was bliss.

09 February 2008

Sunday, the tenth day of February '08

The man with a Gandhi cap


About the picture: This one was taken when we were on Mysore visit. We were dead-tired after visiting the interiors of the Mysore palace, bare-footed! And while watching the carvings in the interiors, a passing thought came, only if I was allowed to take the camera inside. My japanese syndrome was itching like scabies....:)
Anyways, we came out and got this opportunity to click this one. There were several of those who were wearing gandhi topi, but the person(one nearest to the frame) hid others. Those white caps were making a speaking distinction in the crowd, and I couldn't resist myself from capturing the distinction.

08 February 2008

Eighth day of February 2008

Tomatoes


About the picture: This one was taken on one of numerous indolent saturday mornings, when I hardly come out of bed before 10.30, but that day, somehow I had completed my morning chores before 10. And I was just wondering about trivial facts of life with tea-filled cup in my hands, I saw these red tomatoes being carried away on a cart and sold to the people in the narrow bylanes that has a dead-end just a few meters away from out place. I couldn't resist the idea of capturing a few frames. I wonder how may of those were rotten....

07 February 2008

Seventh day of February '08

Some wise men had said, never be satisfied with what you have done. I think that applies to me. So here I'm with a completely new set of ideas about the blogging.
From now on, I plan to blog a picture and a brief narration about the picture.
My first entry....


About the picture: The place where I live in has nothing extra-ordinary, but has its own significant neighbours, and this is one of them. Located exactly in front of our balcony(well not exactly in front, a bit to left), this is a temple's dome. I have never entered the temple, still I guess it isn't big. And this dome happens to be in centre of my camera's lenses, well, most of the time. Whenever this Japanese syndrome lays its hands on me, I run for the dome, figuratively. :)
And this one was taken during one the several instances when I wanted to click pictures but had no subject. :)
And the time I took this foto, it was on a transition phase, from a white-washed, plain looking one to bright-colored but still plain looking dome. Now a days, it's multicolored, but still doesn't look as attractive as it was before.