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
Wednesday, August 27, 2008
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
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
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
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
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
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
Subscribe to:
Posts (Atom)
Posts
