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



<p class='bookmark'>

<a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Digg it</a>

<a expr:href='"http://del.icio.us/post?v=4&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Add to del.icio.us</a>

<a expr:href='"http://www.stumbleupon.com/submit?&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Stumble it</a>

<a expr:href='"http://www.facebook.com/sharer.php?&amp;u=" + data:post.url' target='_blank'>Share on Facebook</a>

<a expr:href='"http://technorati.com/signup/?f=favorites&amp;Url=" + data:post.url' target='_blank'>Add to technorati favorites</a>

<a expr:href='"http://reddit.com/submit?&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Submit to reddit</a>

<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?&amp;u=" + data:post.url' target='_blank'>Add to YahooMyWeb</a>

<a expr:href='"http://www.simpy.com/simpy/LinkAdd.do?href=" + data:post.url' target='_blank'>Submit to simpy</a>

<a expr:href='"http://www.spurl.net/spurl.php?v=3&amp;Url=" + data:post.url' target='_blank'>Submit to spurl</a>

<a expr:href='"http://www.furl.net/storeIt.jsp?&amp;u=" + data:post.url' target='_blank'>submit to furl</a>

</p>



and paste it like ive done in the following screenshot



now we will add some CSS code to create some spacing in between each of those links so copy the following CSS code


.bookmark a:link {
margin:0 8px 0 0;
}



and paste it just before the closing skin tag like ive done in the following screenshot below



now if you preview your template before saving you should see some text links like mine in the screenshot below



you can play around with the CSS code to create more spacing also you could change the margin to padding just see what you can come up with.

If you enjoyed this post dont forget to comment and let me know if it worked for you
...Read more!

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



Now go to the edit html tab and tick the box to expand widget templates we are going to use conditional CSS to change how posts display on different pages. So copy the following code



<style type='text/css'>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>



Paste it just before the closing head tag like Ive done in the following screenshot below



Now scroll down and look for the following code



Once you have found it copy the following code



<b:if cond='data:blog.pageType != "item"'>

<a expr:href='data:post.url'>Read more!</a>

</b:if>



And paste it in like ive done in the screenshot below



Now if you preview the template you should see a Read more link at the end of your post like mine in the following screenshot or on the main page of this blog



of course it doesn't have to say read more it can be whatever you want also this link is still visible even when your post is not long. Now you should save the template and go to your post editor now you will need to add this <span class='fullpost'></span> tag around the part of the post you would like to hide like i have in the screenshot below



Now to save time having to enter that in everytime you post you could just go to Settings > Formatting scroll to the bottom and paste it in Post Template like i have below so you do not have to enter it in each time you want to post



i hope you enjoyed reading this post ...Read more!

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

he still has the tracking script in the template

UPDATE: Ive notice the site has been taken down now but i will still name and shame anyone who is caught stealing my content without my permission.

Update: This morning i checked my shout box over at blogcatalog and the cheeky thief has finally admitted to stealing my content here is a screenshot of what he said



...Read more!

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



Now we have that done we need to look for the outer-wrapper code and change the width from 660px to 990px and the padding from 10px to 0 like ive done in the following screenshot



Now find the main-wrapper and change it from 410px to 450px unless you want your main post body to stay 410px wide also ive added a margin of 20px



Now im going to rename the sidebar-wrapper to left-column and change the width to 170px and the float to left because it is going to be a left column although you dont have to rename it but it helps see screenshot below



Now we have that done we need to change the XHTML code for the column so find the following XHTML code and change the name from sidebar-wrapper to left-column also move it above the main-wrapper see screenshot below (click the image for a larger view)



Now that is done we add the CSS code for our new columns so copy the following CSS code



#rightsidebar-left {
margin:0 0 0 10px;
width: 200px;
float: left;
word-wrap: break-word;
overflow: hidden;
}


#rightsidebar-right {
width: 120px;
float: right;
word-wrap: break-word;
overflow: hidden;
}



and paste it just below the left-column CSS code like ive done below



Now copy the following XHTML code




<div id='rightsidebar-left'>
<b:section class='sidebar' id='sidebar2' preferred='yes'/>
</div>


<div id='rightsidebar-right'>
<b:section class='sidebar' id='sidebar3' preferred='yes'/>
</div>



and paste it just after the main-wrapper like ive done below



Save your template if you followed this tutorial right your page elements should look like mine below 4 columns althought if you preview the template you will not see them until you put widgets in them i hope you enjoyed this tutorial. Click Here to see my final results


...Read more!