so first go to edit html tab and you will need to tick expand widget templates see screenshot below
Continue reading »
Free email post icons
Today i will show you how you can change the little email post icon seen at the bottom of the post I've made a few free icons with different colours for anyone who wants to change theirs here are the actual icons right click and choose save picture as
so first go to edit html tab and you will need to tick expand widget templates see screenshot below
Continue reading »
so first go to edit html tab and you will need to tick expand widget templates see screenshot below
Continue reading »
add a space between header and post
today I'm going to show you how you can create some space in between the header and the post so i recommend you use a new blog until you understand how this works then you could apply it to your current blog as I'm not responsible if you mess your template up now it depends what template you have but most of them already have this bit of code so you will need to make sure you have the following code
if you cant find it on your template don't worry just add it after the header like i have done above and make sure you add a closing div tag at the bottom like below
now you need to look for the following CSS code again it depends what template you have if you cant find it you will need to add it but without the padding:0 16px; value
once you have found it or added it you need to add the highlighted code to the content-wrapper you just found or added and you can change the 50px value to whatever you want it depends how much space you want between the blogs header and the post
once done preview your template before saving to see the space you just created then save or change the 50px value if you need more or less space
if you cant find it on your template don't worry just add it after the header like i have done above and make sure you add a closing div tag at the bottom like below
now you need to look for the following CSS code again it depends what template you have if you cant find it you will need to add it but without the padding:0 16px; value
once you have found it or added it you need to add the highlighted code to the content-wrapper you just found or added and you can change the 50px value to whatever you want it depends how much space you want between the blogs header and the post
once done preview your template before saving to see the space you just created then save or change the 50px value if you need more or less space
add an image to blogs header
Today another friend of mine at blogcatalog asked me how to add an image to the blogs header so I'm going to show you how to add an image to the blogs header just like mine now there is two ways you can do it the first you may already know so for those who don't know go to your page element tab and look for the following edit link highlighted in red
now click that and you will see the following image browse for the image you would like to add as the blogs header it can be on your computer or hosted on another server
Now if you would like to add it the other way go to the edit html tab and find the following CSS code it depends what template you have this is based on the one from my previous tutorial which can be found HERE.
and add the code Ive highlighted below of course change the URL to where ever you have the image hosted also you may need to change the height and width depends what size your image is and you may need to optimize it for the web so your site loads faster
so now you know how to add an image to the blogs header
UPDATE: i have notice lots of people's blogs header has shrunk i have managed to come up with a fix which works for some depends what template you have first make sure you download a copy of your template next add the following CSS code you may need to alter the height and width to whatever you need
if this helped dont forget to leave your comment and let me know
Update: i have wrote a new fix here
now click that and you will see the following image browse for the image you would like to add as the blogs header it can be on your computer or hosted on another server
Now if you would like to add it the other way go to the edit html tab and find the following CSS code it depends what template you have this is based on the one from my previous tutorial which can be found HERE.
and add the code Ive highlighted below of course change the URL to where ever you have the image hosted also you may need to change the height and width depends what size your image is and you may need to optimize it for the web so your site loads faster
so now you know how to add an image to the blogs header
UPDATE: i have notice lots of people's blogs header has shrunk i have managed to come up with a fix which works for some depends what template you have first make sure you download a copy of your template next add the following CSS code you may need to alter the height and width to whatever you need
#Header1_headerimg {
width:100%;
height:95px;
text-align:center;
}
if this helped dont forget to leave your comment and let me know
Update: i have wrote a new fix here
Blogs Record buttons
UPDATE: I notice the site has now closed down !!
yesterday i decided to make some nice buttons for Blogs Record a new social blog directory here is a screenshot of the buttons
click the image to go over there and join if you would like to meet more bloggers and get your button they also have a forum where you can chat with other members and add your blog for more readers its just another blog directory with a few extras check it out
yesterday i decided to make some nice buttons for Blogs Record a new social blog directory here is a screenshot of the buttons
click the image to go over there and join if you would like to meet more bloggers and get your button they also have a forum where you can chat with other members and add your blog for more readers its just another blog directory with a few extras check it out
Free web 02 Favicons
Hello everyone today i decided to make some free favicon's for anyone who's bored of bloggers standard favicon and for those who don't know what a favicon is it's an icon what appears at the top of your browser window see screenshot below
Below are screenshots of them and not the original ico file so if you would like one chosen from the selection below and click the one you want to download you should be taken to esnips please do not give these out as your own they are made by me a link back is not required although it would be nice if you did
and here is the code you need to add it just before the closing </head> tag replacing only the red coloured text with the url of where ever you are hosting your favicon for example google pages see screenshot below and don't forget the file extension (.ico)
share and enjoy ;-)
Below are screenshots of them and not the original ico file so if you would like one chosen from the selection below and click the one you want to download you should be taken to esnips please do not give these out as your own they are made by me a link back is not required although it would be nice if you did
and here is the code you need to add it just before the closing </head> tag replacing only the red coloured text with the url of where ever you are hosting your favicon for example google pages see screenshot below and don't forget the file extension (.ico)
<link href="www.yoururl.com/purple1.ico" rel="shortcut icon"/>
<link href="www.yoururl.com/purple1.ico" rel="icon"/>
share and enjoy ;-)
Hiding the navbar
Note: This is for users publishing via FTP Only
i am writing this post for one of my friends over at blogcatalogue who has got his own domain name and would like to know how to remove the navbar (it does not completely remove it but hides it)
which is at the top of all freely-hosted blogspot blogs so this is for people who have their own domain name although it works even if you don't have your own domain name but its against blogger Terms of Service (TOS) YOU'VE BEEN WARNED read more about the navbar HERE im not responsible if you remove it and breach the (TOS) like i said it's only for those who have their own domain name so I'd rather leave mine up so here's the code you need to add it anywhere in between the head tags just after the body CSS code.
and for all blogspot users who would like to push their site futher down the page so that it doesn't hit the navbar which is at the top of the page add the following code in between the head tags just after the body CSS code you could change the value which is currently set at 20px to 30px or less depends how far you need to push it.
i am writing this post for one of my friends over at blogcatalogue who has got his own domain name and would like to know how to remove the navbar (it does not completely remove it but hides it)
which is at the top of all freely-hosted blogspot blogs so this is for people who have their own domain name although it works even if you don't have your own domain name but its against blogger Terms of Service (TOS) YOU'VE BEEN WARNED read more about the navbar HERE im not responsible if you remove it and breach the (TOS) like i said it's only for those who have their own domain name so I'd rather leave mine up so here's the code you need to add it anywhere in between the head tags just after the body CSS code.
#navbar{
display:none;
}
and for all blogspot users who would like to push their site futher down the page so that it doesn't hit the navbar which is at the top of the page add the following code in between the head tags just after the body CSS code you could change the value which is currently set at 20px to 30px or less depends how far you need to push it.
#navbar-iframe {
margin:0 0 20px 0;
}
How to make a 3 column template
In this tutorial we will be making a 3 column blogspot template based on a two column originally designed by Douglas Bowman you can see it here so i recommend you create a new blog for this tutorial using the following template
now we have our template lets go to the settings tab and change blog permissions and restrict it so only authors can see it as we dont want anyone viewing it while we are coding or do you ? well you choose
Continue reading »
now we have our template lets go to the settings tab and change blog permissions and restrict it so only authors can see it as we dont want anyone viewing it while we are coding or do you ? well you choose
Continue reading »
Subscribe
