How to add social bookmark links to blogger

Today im going to show you how to add social bookmark text links below your blog post so people can bookmark it or whatever. So first save a backup copy of your template before editing now you will need to expand widget templates and look for the following code in the screenshot below



next copy the following code
Continue reading »

How to create expandable post summaries on blogger

Today im going to show you how to create expandable post summaries on new blogger this is a great trick for those who have lots of long articles on their blog and would like to show a certain amount of text/images from the beginning of that post on the main page with a read more link at the bottom. So lets get started first i recommend you download a backup copy of your template so if anything goes wrong you can always restore from that. Next we need to make sure we have post pages enabled so go to Settings > Archiving and change Enable Post Pages to yes like mine in the following screenshot below Continue reading »

Copyright infringement

Today I'm a victim of plagiarism the owner of this http://hellohello100.blogspot.com/ site has copied my whole blog and the content like a big fool and he has even pointed me to his profile page here http://www.mybloglog.com/buzz/members/fauzirassull/?fs=2007080618174203 on my bloglog and here http://profiles.friendster.com/fauzirassull so just to let my visitors know he has stole my content and I'm waiting to get his site shut down here is a screenshot of my sitemeter Continue reading »

How to make a 4 column blogger template

In this tutorial we will be making a 4 column blogger template based on a two column originally designed by Douglas Bowman so i recommend you create a new blog for this tutorial using the following template



Now we have our template we need to find the header-wrapper CSS code and change the width from 660px to 100% or 990px like ive done below
Continue reading »

Create a nice feed icon in Photoshop

Today I'm going to show you how to create a nice Rss Feed icon below is my final result



First create a new document width 200px height 200px background colour white


Continue reading »

How to add a navigation bar

Today i will show you how to add navigation links just below your blogs header like mine above and it depends what template you are using but it will fit most so always use a test blog before you apply it to your current blog as I'm not responsible if you mess your template up and there is lots of different styles you could have but I'm going to show you how to add a simple set of navigation links so first we need to copy the following CSS code



/* navigation links css code
----------------------------------------------- */
#topnav {
height:40px;
}
#topnav ul {
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
#topnav a {
padding:3px 7px 3px 7px;
float:left;
text-decoration:none;
color:#000;
margin:9px 10px 0 0;
}
#topnav a:hover {
color:#666;
}
#topnav li {
display:inline
}


Now paste it like i have done just below the closing skin tag



Now you need to copy the following XHTML code changing the red parts to where ever you are pointing your links to. The first part with the / points to your blogs homepage



<div id='topnav'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Link 3</a></li>
<li><a href='#'>Link 4</a></li>
</ul>
</div>


and paste it just below the header closing div tag like I've done 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 »

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

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



#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

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)


<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.



#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 »