Wednesday, August 27, 2008

Playing with Widths

Once again assuming that you have the Minima Template (though this one will work for any template):

You may wish to increase (or decrease) the widths of your header, your main post area of your side bar. Here is how to do it:

1. Back up back up back up your template by clicking Layout > Edit HTML > Download Full Template

2. Find

#header-wrapper {
width:1120px;

Change the number (in red) to whatever width you want, experiment and play with it until you get it exactly how you want it! This (not surprizingly controls the width of the header)

3. Find

#outer-wrapper {
width: 1120px;

This is going to control the width of the entire page: The width of the main posts column + the width of the side bar(s)... typically this should be the same as the header width (unless you are planning to do something really funky with the header :))

4. Find

#main-wrapper {
width: 600px;

This controls the width of your main post area

5. Find

#sidebar-wrapper {
width: 400px;

This (obviously) controls the width of your side bar

Again see to it that width of main-wrapper + width of sidebar-wrapper is almost equal to width of outer-wrapper (in my blog i have left a 20 px gap, so they are a bit seperate, you need not and can make it exactly equal)

You can play about with these numbers until you have the widths of your blog exactly the way you want them!

If you have more than one side bar, find #sidebar2-wrapper { to modify the next one... note that the second or more sidebar could be named differently in different templates... so just searching for sidebar and pressing next would work best

Jai Gurudeva!
love
bawa

ps to search (or find) press cmd + F on a Mac or cntrl+ F on a PC (umm... why are you still using a PC anyways? :))

pps btw, a much easier way to add RSS to your blog is to simply add it as a gadget from the Layout > Page Elements > Add a gadget

Friday, August 1, 2008

And the (only) winner is...






Abhay Karnataki!!




Here are two of his posts that are really well written explaining how to put the RSS feed onto your blog and what entrecard is all about:

RSS Feed by Abhay
Entrecard by Abhay

Do remember to enable your RSS feed first and THEN your Entrecard

Congratulations Abhay...

btw, there is a MUCH easier way to get RSS on your blog... can anyone figure it out? :)

Also you can copy paste your Entrecard code into your sidebar, by Clicking on Layout > Add Page Element (on your sidebar) and choosing Add HTML/Javascript and simply pasting what you copied from Entrecard to it and saving it... you will then have Entrecard as a widget on your sidebar...

Jai Gurudeva!
love
bawa

Monday, July 21, 2008

The Header

The Header is perhaps the most distinctive part of your blog at first glance... So, spending some time on making a really nice header goes a long way in improving the look and feel of your blog.

Get rupal (rupal.x@gmail.com) to design you a header. She will make it 1200 pixels wide. You may want to specify the height to her though. Also you will need to give her the colour code you entered for the outer wrapper background. Read about that here.

Of course you could design it yourself or download it from somewhere or whatever...

It should end up as a jgp file on your computer :)

Once you have it, it's very simple:

1. Click customize and get into page elements. Click the edit button on the header element. You will get a pop up like this:

So, choose the appropriate placement, and the shrink to fit button, upload the image there from your computer. Press Save and you are almost done usually.

View your blog... if the header seems a bit out of place, you may need to tweak the outer wrapper width values... (i will post how to do that in a few days, otherwise just play around with the code under edit HTML... it's quite easy to find the numbers you need to change, ALWAYS remember to download and keep a copy of your template, just in case things go wrong) if you like those 2 lines around the header (assuming you are using the minima template) leave them in, or simply change their colour to the background colour from the Layout/fonts and colour change page.

Here are the before and after images for Blog Sutras:







Jai Gurudeva!
love
bawa

Friday, July 18, 2008

RSS and a Competition

It will be great if you guys can burn an RSS feed with feedburner and add it to your blog.

What's RSS? Watch the video, to read more go here:



Competition: A well written tutorial with screen shots etc will get published here with back links to your blog and 50 Entrecard credits to your Entrecard account. What's Entrecard? Find out here. Just remember that you will need an RSS feed from feedburner on your blog before your Entrecard will work for you.

Have a great week!! :) Competition ends in 10 days from now...

Jai Gurudeva!
love
bawa

Wednesday, July 16, 2008

2 Lines of Code

You guys remember how Blog Sutras used to look like right?

Here is a picture of it just to remind you :)


Ok, so to go from that look to this one involves just changing 2 lines of code!! Yup, it's true! :)

It's really easy... and you will love the brand new look your blog will sport!

Again, i am assuming you are working with the Minima template and using firefox 3:

First off, we will change the background:

The extremely tough part:

You will need to choose a background for your blog. There are many ways of doing this:

You could go here and choose any image and download it in jpg format (they are already in jpg format on this site). You can search for textured background, or floral background and check out the sites that come up... You could simply scan a pretty paper or crumpled fabric or whatever and save it as a jpg on your computer. It's important to save it as a jpg on your computer. But you should have figured that out by now...

Now go to your account on photobucket. You did create it, didn't you?. If you didn't, create one, store your user name and password somewhere safe, etc etc. Upload the jpg image there. You should have a screen looking something like this one once you upload it:


For Blog Sutras, I have used Wood2 texture. I simply click on the Direct Link box. It will get highlighted and say "copied" next to it. Now you can paste that code wherever you want.

Now we get to the easy part...

1. Click on Customize on your Navigation Bar (Look at the top right of your blog)
2. Click Layout
3. Click Edit HTML
4. Put a check mark on the Expand Widget Templates box (not needed, but its a good habit)
5. Click Download Full Template (ALWAYS do this before attempting anything please)

If you start to scroll down in the box where the HTML stuff is written, after the first section of comments and things you will come across a lot of "Variable Definitions". Directly after that you will see:

body { background:$bgcolor
etc etc (you will not see the etc :))

Alternatively you can search for body{ and it will highlight on your screen. Press command+f on a mac or ctrl+f on a (ugh) PC, and type whatever you want to search for on a page, if it's there, the cursor will jump to that place and highlight it. Nifty trick huh?!

Now you remember that thing we had copied off earlier from photobucket? Paste it in so that it reads as:

body {
background: url(http://i284.photobucket.com/albums/ll26/bawandinesh/wood2.jpg);

Basically you are going to paste in the url of where your image is... The above is to get the same image as Blog Sutras is sporting right now :)

So, the syntax is

body { background: url(http://your-image-hosting-service.com/image.jpg);

Notice that the ( brackets need to close. and remember to put the ; at the end of the line.

And you are done!

If you preview your template now, you will have the background set as the image of your choice tiled without overlap or anything!! BUT Your text will be superimposed on the image. This can be great if you are using a really big picture of some landscape for example. But usually it just becomes unreadable.

Here is what it looked like with Blog Sutras: Pretty and ugly huh? :)


So we go to the next step of changing the background colour of the place where you are posting.

Find #outer-wrapper {

Under it, look for the line starting with the word background, replace it with

background: #CC9966; (this is the current Blog Sutras post background colour)

If that line is not there, simply add the above line right below #outer-wrapper {

So it will look something like this:

#outer-wrapper {
width: 660px;

background: #CC9966;

margin:0 auto;
padding:10px;
text-align:$startSide;

font: $bodyfont;
}


As usual the blue is what was already there, the green is the modification

Note: That #CC9966 is a hexadecimal number (if you don't know what that means, attend a Mathemagic workshop with me) representing a colour. You can use numbers 0-9 and letters A-F to experiment with the different colours it makes, it always has to have 6 characters there though... or you could head here and see what codes are for which colours.

Once you have put in the colour code you want, preview the template and see how it looks. Play around till satisfied...

Save template and voila, a brand new look!!

The final look for Blog Sutras:



Please send me screenshots of before and after from your own blog... You can send them to blogsutras@gmail.com

Next week, we are going to play with making the post area and the sidebar bigger (or smaller)... Do you like the new Header and the expanded size of the post area? Possibly, we will also learn how to make a better header... If you see the changes happening here, know that the tutorials for the changes are coming soon :)

Rupal is ready to design custom headers for your blogs. She will be charging Rs 2000 or USD $7 for it. You need to tell her exactly what you want, and she will do it. She can be contacted at rupal.x@gmail.com

She is the person designing stuff for this blog...

Have a great week!!

Jai Gurudeva!
love
bawa

Monday, July 14, 2008

First Hack: The Vanishing Nav Bar

I am assuming that you have chosen the Minima template...

This is a very simple hack, basically what it does is makes that ugly navigation bar at the top of your blog vanish... but if you hover your cursor near the top, the bar will magically re appear... Try it at the top of this blog and see if you like the effect for your own blog!

Ok, here is what you do:

1. Click on Customize on your Navigation Bar (Look at the top right of your blog)
2. Click Layout
3. Click Edit HTML
4. Put a check mark on the Expand Widget Templates box (not needed, but its a good habit)
5. Click Download Full Template (ALWAYS do this before attempting anything please)

Ok, now if you start to scroll down in the box where the HTML stuff is written, after the first section of comments and things you will come across a lot of "Variable Definitions"

It will look something like this:

/* Variable definitions
====================

type="color" default="#dd9" value="#aa8833">

type="color" default="#333" value="#000000">

type="color" default="#684" value="#ffff66">

type="color" default="#874" value="#ffffcc">

type="color" default="#a83" value="#aa8833">

type="color" default="#c80" value="#ffffcc">

there will be a lot more of this too...

Immediately following this will be:

body {
background:$bgcolor;
margin:0;
color:$textcolor;

and so on...

You need to cut and paste the next 2 lines of code just before body{

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

so that it looks like this:

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

body {
background:$bgcolor;
margin:0;
color:$textcolor;

The green is what you have pasted in, the blue is what was already there...

Just in case you are wondering, you don't need to make it that colour. I have used the colours just to make things clearer :)

Click the Orange button bottom right: Save template

Click View Blog, and voila!! Your Navigation Bar will have started doing it's vanishing act!

I have used this from a hack i saw at Bloggeratto's

Enjoy...

Jai Gurudeva!
love
bawa

Wednesday, July 9, 2008

Starting Up!

Here are some preliminary steps that you could follow:

0. You are going to have decided on content and consistency before you start this. Also some ideas of names for your blog.

1. Download and install firefox 3 on your computer

1. Get yourself a personal gmail account and another gmail account which is basically your blogname@gmail.com (my account for this blog is blogsutras@gmail.com)

2. Get a (digital) photo of yourself so you can use it on the various social networking sites you are going to join... Save it as a JPEG file of low quality (less than 300 kb file size)

3. Go to blogger and register yourself and your blog. Choose the minima template when asked for that. Now you will have a www.yourblogname.blogspot.com URL which you will need for the next few steps...

4. Get yourself registered on Orkut and Facebook, fill in all details, remember to upload your photo, and put in your blogger URL.

5. Now, go and register yourself on all these sites: twitter, Stumble Upon, digg, Delicious, Technorati, Reddit, Mixx There are many more, but these will do for a start. Remember to put your photo in as well as your blogger URL.

6. Finally open an account at picasa and/or photobucket

In the next post we will look into setting up your blogger blog, so that everything runs smoothly for you... You could already post an article or 2 onto your blog, play around with the colours etc and see what suits you. You could also try the looks of other templates, but please switch back to minima... coz all the customisation we will be doing and learning how to do, will be based on that template...

Jai Gurudeva!
love
bawa

Tuesday, July 8, 2008

And the Winner is...

The title of my new blog about blogging is Blog Sutras and the URL is www.blogsutras.blogspot.com. Of course since you are reading this here, you already know that :)... i have just copy pasted this from our other blog Sounds Interesting...

The easiest way to have found it, would have been to simply go into my profile... it shows all the blogs that i am currently contributing to... (Almost all of them are test sites :))... Or you could have searched with google

Now, if you read my original post about the competition it says: "... You have to figure out the name... if you get to the blog and leave some comments on it before Monday morning 10:30 AM India time..."

Note the plural on the comments! I know it's cheeky :), but i myself left 2 comments there as a hint :)...

Though I have 50+ comments there, only the few who left more than 1 comment qualify for the surprise prize :)

Here are the 6 people who qualify: Richa, Kola, Now What???, Ajay, Jyuthika and Monica

Here is the way i am going to choose the winner:

Give numbers to the people who qualify:

1. Richa, 2. Kola, 3. Now What???, 4. Ajay, 5. Jyuthika and 6. Monica

Goto Research Randomiser and ask it to randomize numbers between 1 and 6... finally the winner is the person whose number turns up first in the list generated by the randomizer:


and the winner is:

Ajay!!!!!!!!!

Congratulations Ajay, you win:

1. A Tester pack of completely organic and natural SLES free soaps from Prakriti Network
2. A copy of Sahil's brand new rocking Bhajan CD: I Belong to You (it will be the first copy!) that he has recorded exclusively for Prakriti Network. I don't have the photo of it yet, just got the master yesterday night :)



3. A very small, very cute and very elegant Bhagavad Geeta




Ajay, please contact me: khurshed@gmail.com and we will figure out how to get your prizes to you! :)

and thanks a lot everyone else for participating and making it such fun to launch a new blog!!

Jai Gurudeva!
love
bawa

ps some links on the Prakriti Network site still don't work... but not to worry, Sumeru Software is on to it! So, they should start working sometime real soon... right? everyone at Sumeru?! :)

Jai Gurudeva!
love
bawa

Monday, July 7, 2008

First things first

Here is the first question you have to answer: What do you really want to blog about? Don't worry that people may not be interested in it... The odds are firmly with you! 6 Billion people on the planet means that however unique you think your interests are, some people are going to be passionate about them, and so will love to read about them, and your "take" on them...

What are you passionate about? What would you like to write about consistently for a long time? These questions are important ones to answer... coz CONTENT is the most important aspect of blogging...

Would you be able to inspire interest in the topic of your choice in a person not interested in it? Also would you be able to contribute meaningfully to the already existing content about what you are interested in so that people who love it, find something new to read about it?

Finally, would you be able to do this on a consistent basis? According to me, CONSISTENCY is the second most important aspect to getting recognition in the blogosphere. Can you commit to updating your blog on a regular basis? You will owe that to your readers!

Anyone can blog... there are plenty of zombified blogs out there to prove that :) But, if you want your blog to be a living breathing entity with a great community, you are going to be have to be very, very clear about what you are going to write (Content), and how often (Consistency)...

This Blog will be updated once or twice a week. On Mondays, Wednesdays or Fridays at 10:30 AM of whichever time zone in the world i am. See you next week :)

Jai Gurudeva!
love
bawa

Friday, July 4, 2008

Anonymous Comments

Just so all of you know, no prizes for anonymous comments... or maybe i will add those in the randomiser and if someone anonymous wins, i will keep the prize!

Jai Gurudeva!
love
bawa

2 Questions

What's a Sutra? and What's Jai Gurudeva?

A Sutra is a lifeline... If someone is drowning and a rope or a string just magically appears and they grab it and so are saved... That string is called a sutra.

Usually a sutra is very short and concise, i am going to stretch the definition for this blog... and mean a blog sutra to be an article on how to be a better blogger and/or create a better blog and/or a blogging experience for your readers! It might just make you a better human being as well! :)

Jai Gurudeva is a greeting right from the heart... I have another blog on which i have posted an article on it. It's very nice. Please do read it.

"Jai" means Victory and "Gurudeva" is that latent energy within you which makes you Wise and Playful at the same time... Basically its a salutation and a blessing rolled into one, which means "May you be wise and playful!"

And your blog should be too... Wise and Playful! There are many blogs out there that are very wise and so heavy to read and you just want to close your browser, but feel a bit guilty when you do, coz of all that wise stuff that you didn't read... and then there are the playful ones, the funny ones... they are very light to read, but somehow you miss depth... You know you want something more...

A truly great blog, according to me should be both wise and playful! Just as a truly great human being is both: Wise and Playful! :)

So, may your blog become a Gurudeva type of a blog and may you blossom into a Gurudeva type of a person!!

Jai Gurudeva!!!
Love
bawa

Wednesday, July 2, 2008

Another Blog on blogging?

Yes. Another one.

There are a lot of fantastic blogs out there about how to blog, but really none of them bring everything a beginner needs in one place. This one is going to do just that (hopefully)! You will see... :)

So if you are new to blogging and want to find out more about this fascinating topic, you have come to the right place!

It will also have some things for more advanced users for sure... but that will come later.

This blog will also have a roll of the best "how to blog" blogs that i know of... so it could well become a one stop shop for blogging for almost everyone!

Jai Gurudeva!
love
bawa