Wednesday, August 24, 2011

Adding Facebook Like Button to Your Blog or BlogPost !!


Hi guys,
Another tutorial for my fellow Readers, Hope you "like" it  :).
Now in this tutorial I will Show you how to add the famous Facebook like button to your blog or particular BlogPost. Follow this simple steps and you will be able to add this button and Even customize it to your likes.


Step 1 . Adding the Code
Button Code Below

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
</b:if>
Where to Add it ?

Login to your blogger account > design > Edit Html >Before doing any thing you must check Expand Widget Templates box.
And find the next Code By Ctrl + F.

<div class='post-header-line-1'/>
And after it paste the Button Code.
If you cant find this Code which I seriously doubt you wont.
Find this code By Ctrl + F

<data:post.body/>
And am Sure you will find this one. Paste the Button Code Before this code.
Click on Save Template and you Are done.

-------------------------------------------------------------------------------------------------------------


Now Customizing Part >

in the above code you can customize 3 parts. and i’ve colored them to make it easy for you to recognize,
in the above code change the following parts,
  • like this part controls the verb that appear on your button, keep it as you see or change it to recommend if you want.
  • arial this part controls the font type, keep it or change it to one of the following,
    lucida+grande
    segoe+ui
    tahoma
    trebuchet+ms
    verdana
  • light this part controls your button color theme, and you have three options, light, evil, or dark
  • Update, How to make it appear on your home page.
in the button code there are two parts you’ll need to remove to make this button appear on your home page, the first line and the last line, if you still don’t under stand, please see the following parts and delete it before pasting the code to your template,
<b:if cond='data:blog.pageType == &quot;item&quot;'>
</b:if>
Here is the Demo

Enjoy and hope you all Like it :)

Sunday, August 7, 2011

How To Add Random Post With Thumbnail !!



Hi Readers !!
Today I am going to show you another trick in which you could add a Widget which will show random thumbnail of your posts. This thumbnails are arranged according to your labels. The demo you can see is at the bottom of my blog. This is one of the easiest widget to set up.
As usual just follow this steps. :


1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget --> Choose Html/java script
3. Then, add the code below




<style text-type="CSS">
img.label_thumb {
float:left;
padding:3px;
background:#CCC;
border:1px solid #A4A4A4;
width:100px;
height:75px;
margin-right:10px;
margin-top:10px }

img.label_thumb:hover {
opacity:0.8;
filter:alpha(opacity=80);
-moz-opacity:0.80;
-khtml-opacity:0.8 }
</style>

<script type='text/javascript'> 
//<![CDATA[ 
function labelthumbs(json){document.write('<div>');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;} 
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}} 
var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error) 
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;} 
else thumburl='';} 
document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>'); 
if(i!=(numposts-1)) 
document.write('');} 
document.write('</div>');} 
//]]> 
</script>

<script type='text/javascript'>var numposts = 4;</script> 
<script type="text/javascript" src="/feeds/posts/default/-/Blogging+Tips?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>


=> The red code is the number of the post that you want to show
=> The Blue code is the name of the blog label (The alphabet must be same and if there is more than 1 word in the label then add + sign between the two instead of space.)



Cheers 


Image and video hosting by TinyPic

Saturday, August 6, 2011

How To Add Cool Signature Below Every Post !!

Howdy Readers !
Let me show you how to add a cool signature below ever blogpost. Its like a trade mark that your blogpost is registered to you.  This trick is useful for bloggers who want to create a signature for his blog, so his blog will has a uniqueness. Uniqueness always attracts more visitors. Now dont worry it wont be that difficult. If you ask me this would be more easier than any other blogging widgets implementation.
Follow this steps as usual :


1. Go to My Live Signature
2. Then click "Click Here To Start"
3. After that, you can choose "Using the signature creation wizard"
4. Now, enter your name, if finished, click "Next Step"
5. Then, select your font and your size.
6. Next, you can choose the colour and the background of your signature.
7. After that, you can set your signature slope
8. Finish! Now you must click "Want to use this signature?"
9. Now, you can click "Generate HTML code", then choose "Generate a code for my handwritten signature"
10. After that, you will get the code.

Go to Blogger account go to Settings --> Formatting. And find "Post Template" (at the bottom), you can put the signature's code in the box. And your signature will appear automatically when you create a post. 

Hola! You have a great signature for yourself. 
Enjoy it


How to Create a Sticky Post on Blogger !!

Howdy Fellow Readers


Sticky posts are intact stagnant post that will appear on your homepage on the top even if you post new articles after it. There could be many reason you want a sticky post. Some of your post might become popular and you want that post on the top of all the other posts. So this tutorial will help you make a sticky posts.
Creating Sticky post is very easy and you don't even need any coding to be done for it. 
Just follow this 2 Steps and you are done :




1) Go To “Edit Posts” for the post that you want to make sticky.
2) Click on “Post Options”. You will see options as shown in this screenshot.
3) Change the “Post date” to any future date.
4) You are done.



You will See that the post which you have made sticky would stay on top until the date you specified has passed and you posted new blogpost after that. till then enjoy.


Cheers
Image and video hosting by TinyPic








Next Tutorial Will be how to create signature As you can see above.

Friday, August 5, 2011

How To Add Cool Subscription Email Form To Your Blog !!

Hi guys,

Happy April fools Day. Hehehe, No this post is not regarding April fool but Its just regarding some good tutorial. Now in this post I will help you form a good cool Feed Subscription form, So that visitors can subscribe to your feeds.
Now As usual this is going to be Simple and easy all you have to do is follow this few steps and you will have a cool Subscription form added to your site.

Now follow this simple steps as usual.
  • Log in to your bloggers account.
  • Go to Design > Page element > add a gadget.
  • choose HTML/Javascript
  • And paste the below code
<a href='http://feeds2.feedburner.com/GetPaidForEverythingYouDo' 
rel='alternate' title='Subscribe now to avail the unthinkable'
type='application/rss+xml'><img alt='' border='0'
src='http://img801.imageshack.us/img801/6769/panda1x.png' style='
padding-bottom:20px; margin: 0pt 10px 10px 0pt; float: left;
width:150px;
;height:150px;'/></a><p><br/><br/><br/><a
href='http://feeds2.feedburner.com/GetPaidForEverythingYouDo'
rel='alternate' title='Subscribe to my feed'
type='application/rss+xml'/>Join the team! <span style='color:
#FFFFFF; font-weight: bold;'>By Submitting your email
address:</span></p>

<style>

input.mbt1 {

color:#fff;

font: bold 10px Arial, sans-serif;

background:#F39100;

border:0;

padding:3px;

}

input.mbt1hov {

color:#fff;

font: bold 10px Arial, sans-serif;

border:2px solid #F39100;

padding:3px;

}

</style>

<form action='http://feedburner.google.com/fb/a/mailverify'
method='post'
onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=GetPaidForEverythingYouDo&apos;,
&apos;popupwindow&apos;,
&apos;scrollbars=yes,width=550,height=520&apos;);return true'
style='padding: 5px; ' target='popupwindow'><input name='email'
style=' color:#5C6AA4; background: #fff; border:2px solid #5C6AA4;
width: 200px;' type='text'/><input name='uri' type='hidden'
value='GetPaidForEverythingYouDo'/><input name='loc' type='hidden'
value='en_US'/> <input class='mbt1'
onmouseout='this.className=&apos;mbt1&apos;'
onmouseover='this.className=&apos;mbt1 mbt1hov&apos;'
type='submit' value='GO!'/></form><br/>
Now You see some of the codes are in different color. Now every color has come changes to be done.

Now everything that is highlighted in Red is you feed address. go to your feed burner and check out your feed address. 
Go to feed burner and then click on Edit feed details you will get something like this :
 This is your feed ID repace everything in Red with your Feed Id.

Now the Orange one is the Image link. Can you see my Subscription form and the panda on the side that's the image. You can find other cool images on Google and just replace this image link. if you dont want then dont do it.

Next is Green The test marked in green is the color codes. You can change the color codes according to your template and blend it to your template color. Find the color does on Google.
Just type Html color chat.

Now next is Purple this is just and extra part if you want to edit then only do it. The purple part is the width and the height  of the form. blend it according to your template.

If you still have any problem just contact me through comments I will definetly help you out.

Guys it seriously takes a lot of time and effort to post this tutorials.
A word of thanks would be appreciated.

Regards

Thursday, April 21, 2011

Adding Table of Content To Your Blog !!


Howdy Readers,

A table of content is a list displaying all the posts on your blog in a clean easy to navigate format for readers. In this post i will show you a table of content that is extremely easy to set up and can be added to your blog in minutes. The recent addition of static pages to blogger provides a great way to display the table containing your complete archive.

This is in fact the table of content I'm currently using on My blog. I have it in a post as the static pages were not available when i first created it. All the posts are sorted by labels and you can see it here : Blog Content

The code that creates the table is actually very simple but you will first need to create a post or static page for your blog. Here's the three steps required to create a table of contents and add it to your blog.


Here is the code :
<link rel="stylesheet" href="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css" type="text/css" media="screen" />

<script style="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/daftarisiv2.js"></script>

<script src="http://earn-faster.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
Now Follow these simple steps to implement the above codes in your Blogspot Blogs :


  1. Create a static page (under Posting)
  2. Copy the above code into the text box of your static page and give it a title (such asTable of Contents)
  3. Replace this earn-faster.blogspot.com with your own blog url
  4. Save.

    With this code, you will have a clickable button on your page tab and when it is clicked, your viewers will see something like the following TOC:


The other reason you should Add this to your blog is that it helps increase you traffic to your blog as google can crawl through your blog easily

Enjoy and If you get any problem Leave a comment I will surely help you out.

Wednesday, April 13, 2011

Recycle Your Old Contents - Make It Better !!

Hi Readers !!


Now in this post we are going to see how to recycle your old blog post and make it better and repost it.
You should always write article which would last forever those are the articles which could be re-written or recycled after few months or so. Lets say you write a article about todays weather or todays hot news, these types of article would be hot for few weeks but after few months no one is ever going to visit this article and even if they land on this article they would immediately move away. So try to write article withing your blog's topic and articles which can be recycled.
Now lets first see how to recycle and article and then we will see what are the uses of recycling an article.

How to recycle your old blog post:

  • Now locate all the article/articles that you want to recycle, mostly the ones which are quite old.
  • Read the article carefully and make the changes as per needed, change the title of the article, add and delete the content in the article, just don't change the title and repost it, work out your brain a little and think what needs to be changed and what needs to be deleted or added. mostly make it a little modern and up to date article.
  • You can create a report or an analysis out of your old article and share it with your readers. this would definitely give them a good idea or a better knowledge about the topic.
  • You can also create a ebook out of your old articles and share it with your readers. this can help you build a good amount of readers as well as a big email list.
  • Add new ideas and your new experience to the blog post and make it even better than before.
So Uses or recycling and old blog post :

  • Saves Good amount of time : Now when you need to write a new article you will need to do a lot of research and thinking. But when you have an article ready and you just need to modify some thing than the job gets lots easier right. Just take the old topic modify here and there and you are done.
  • Increases the page rank : Old articles which has already been in market for quite some time and has good page rank can be modified in some ways and can be brought back to first page to increase your site page rank and also helps your new visitors to browse through it easily.
  • Builds up a new relationship : The old blog post has already build a relationship with your old readers, but what about new. Few of your post were quite successful and your readers were quite impress so use that successful blog post and bring them back to live and build a new relationship with your new blog readers.
  • Attract more visitors : Some of your articles were horrible or bad or average and hardly received any views right? So read through those article make the changes required and re-publish it and see the visitors flow back to your site.
So guys I hope you have already started to find your old articles and already reading to republish them right, because I am going to start doing this right away.

Monday, April 11, 2011

How To Become A Better Blogger / Start Blogging !! Part 4 v2



Howdy readers !!


This is the version 2 of part 4 of how to become a better blogger. Now marketing is a vast subject so it wont get over in just version 1 or 2 so we will continue util we cover most of the part of marketing the blog.


Now you can have a look at my previous post which was part 4 version 1. Now lets get started with version 2, In this part we will mostly see how to promote your blog to social networking communities. Who in this world doesn't know what social networking sites are. Right ?? there are more than 500 million users on facebook, 300 million + in myspace and many other social networking sites including youtube which has the even higher number than we can imagine.



Let get started with it right away.


Facebook, Myspace, Orkut, Hifi, Friendster, ETC


Now promoting on social networking site will be the easiest way  right, yaa it is seriously. Create an account which you might already have. Add as many friends as possible let say Add a close to 300 friends and ask them to visit your blog. Create a fan page and ask you friends to join the page. Even if half of them join in let say out of 300, 200 like your page, then your page is going to spread like virus and more and more connected people will join in and you will start to get inormous traffic to your blog. 


Join different groups which is related to your niche, or somewhat related to your blog them or articles.
Join bloggers groups and start promoting your site there, start discussion and you will get followers.
Use networkedblogs on facebook has more than 1 million users and it is specially for bloggrs.


Youtube :- 


You tube can be quite effective to drive good amount of traffic though its little difficult but once you get started in youtube you will have a huge amount of potential visitors to your blog.
Create a video of your site with a video creator software (google it you will find a lot of them.), 
Upload it on youtube, share it with your social networking friends and start getting views to your video. once it gets viral you will start getting thousand and thousands of visitors daily.


Now try this and let me know the result.
Next part will be part 4 version 3 with the great info and a good software to submit your site to unlimited number of directories with page rank 5 and 6. 


Regards







Find me on Bloggers

Hatim - Find me on Bloggers.com