Create and add Custom Favicon for Blogger blog

If your blog is powered by blogger then the default favicon should be a orange-white logo.A favicon basically an icon associated with a particular website, and typically displayed in the address bar of a browser viewing the site.

you can see blogger default favicon in your address bar or in your bookmark toolbar.

Like this

Now you can see my own custom favicon

Now I will explain how to add this custom favicon to your blog.It is very easy , just follow the steps given below.

Step 1:Create your Favicon

First of all you need to create your own favicon.

For animated fevicon just like me goto one of this sites.

Animated Favicon

Favicongenerator

If you dont want that scrolling text then dont enter any word in that area and your fevicon will be a static pic.

For ready made fevicon you should go to one of this sites

Iconbarn

clickfire

you just need to remember that a size of a favicon should be 16 X 16 pixel.

Step 2: Upload your Favicon

So your own favicon is generated.Now you need to upload your favicon to a image hosting site.

So i recommend you to upload your image one of this sites

Imageshack

Imageboo

Step 3: Add your favicon to your blog template


Go to Layout and then goto Edit HTML and download your current template.


after that press ctrl+F and find

</head>

Immediately before this line,add one of this code depending on your Image type [.gif,.png,.ico] and replace FAVICON-URL with the URL where your favicon is hosted:

For gif image [.gif]

<link href='FAVICON-URL' rel='shortcut icon' type='image/gif'/>

For Icon [.ico]

<link href='FAVICON-URL'  rel='shortcut icon' type='image/ico'/>

For png [.png]

 <link href='FAVICON-URL'  rel='shortcut icon' type='image/png'/> 

Step 4:Save your template and refresh to see your new favicon

Read More

Add " Read more " button in blogger post

Want to have a read more feature just like my blog?

Want to have a professional look for your blog posts?

Believe me you can add this feature in your own blog in a minute.

Dont worry its really very very easy,just follow the steps given below


Step 1. Goto your blog Layout and then goto Edit HTML.Download your current template.



Step 2: Now press ctrl+f and find </head> tag,then copy and paste the code given below just before the </head> tag and save the template.

<SCRIPT type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 500; summary_img = 580; img_thumb_height = 320; img_thumb_width = 247; </SCRIPT> <SCRIPT src='http://www.yourjavascript.com/45031411101/readmore.js' type='text/javascript'/><style type='text/css'>a.linkopacity {    display:block;    width:139px; height: 27px;    background-image: url(http://img197.imageshack.us/img197/4875/readmore29885263.png);    background-repeat: no-repeat;    background-position: 0 0;    }a.linkopacity:hover {    background-image: url(http://img46.imageshack.us/img46/8212/readmore19911462.png);    }</style> 

Step 3: Now click Expand Widget Templates press ctrl+f and find <p><data:post.body/></p> tag and replace it with the code given below and save the template.

<p> <b:if cond='data:blog.pageType == &quot;item&quot;'><p><data:post.body/></p><b:else/><DIV expr:id='&quot;summary&quot; + data:post.id'><p><data:post.body/></p></DIV> <SCRIPT type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</SCRIPT> <div style='clear: both;'/> <div style='border:0px;padding-top:5px;;float:right;text-align:right;'><span class='readon'><a class='linkopacity' expr:href='data:post.url' rel='bookmark'/></span></div></b:if></p>

you are done,check your blog.

Customize the code to suit your template :
Look at the code given at step 2.you can always customize the code to suit your template.

summary_noimg = 500;

If your post contains no image then 500 characters will be shown.you can change 500 to any thing to suit your template.


summary_img = 580;

If your post contains image then 580 characters will be shown.You can change 580 to any thing to suit your template.

img_thumb_height = 320;

This will decide the height of the thumbnail to be shown in the post. You can change 320 to any thing to suit your template.

img_thumb_width = 247;
This will decide the width of the thumbnail to be shown in the post. You can change 247 to any thing to suit your template.

This is all.Hope Everything is cleared.If you have any problem to understand above steps,please feel free to ask any question in comment section.

Download Full Tutorial as a PDF

Download from rapidshare

Read More

Prevent or disable copy of your blog content

How Do You Feel When Someone Copies and Pastes Your Post?

ya i know how do you feel.. sometimes people just don't understand simple manner to give credits to the original posters .

so what to do?

Yesterday I was just surfing net and suddenly saw this java script to prevent copy of content and then I added it in my blog and it works perfectly for me.

Steps:

Step 1. Goto your blog Layout and then goto Edit HTML.Download your current template.



Step 2: Now press ctrl+f and find </head> tag,then copy and paste javascript given below just before the </head> tag,save the template

<script type="text/javascript">var omitformtags=["input", "textarea", "select"]omitformtags=omitformtags.join("|")function disableselect(e){if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)return false}function reEnable(){return true}if (typeof document.onselectstart!="undefined")document.onselectstart=new Function ("return false")else{document.onmousedown=disableselectdocument.onmouseup=reEnable}</script>

This is all.Hope Everything is cleared.If you have any problem to understand above steps,please feel free to ask any question in comment section.

Download Full Tutorial as a PDF

Download from rapidshare

Read More