D.C.R.U.S.T Murthal: Blogger Tricks

Showing posts with label Blogger Tricks. Show all posts

Saturday, 9 June 2012

Protect all images in your Blog jquery trick

Here is a most important trick every blogger need. This trick is about how to protect all your images in your blog with a transparent image covered on it. I recently posted an article about How to protect images? .This article about to protect all images.

Related Articles
How to protect images in your blog?
Do you want to see demo? Try to save picture in this blog.
----------------------------------------------------------
What's inside this article

Step 1: Add jQuery plugin (if your blog have a jquery plugin,ignore this step)

Go to Template->Edit HTML [A dialog box appears click Proceed]
Copy and paste the below code <head> and save it

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Go to Blogger Account
Template->Edit HTML [Click Proceed]
Copy the code above </head>

Protect only First image in every Post

Protect all images in every post

I think you liked this article...please like and share..

Friday, 8 June 2012

How to Add Yahoo Smileys on Blogger Threaded Comments?

Yahoo smileys for Blogger Threaded Comments

I 'm going to say about how to add yahoo smileys to Blogger Threaded comments. This is an awesome trick was scripted by an Indonesian Blogger Kang Ismet and I think he did a very good job for us. This Blogger hack works with New Blogger Threaded commenting system.
Follow the instructions Below..

To see demo :
Go to Comments OR Click Here

What's inside this article?

How to Add yahoo smileys to Blogger Threaded comments in 3 steps..?

Go to Blogger Account
Go to Template -> Edit HTML [click Proceed]

Add CSS code

Find ]]></b:skin> [easily find Ctrl + F]

img.bhacksmly {
    height: auto !important;
    vertical-align: middle !important;
    width: auto !important;
    border:0px !important;
}

Add Javascript code

Find </body> and copy the below code just above it.

Save the template
Save Template

Add HTML code

Check Expand Widget Templates
Find <div class='post-footer-line post-footer-line-3'>
Find the next </b:includable> and copy the code above it

Example
</div>
.
Place code here

</b:includable>

Copy the below code above </b:includable>

<b:if cond='data:blog.pageType == "item"'>
<div class='netoopsblogysmile' id='ysmile' style='

background: -moz-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(50%,#bfe8f9), color-stop(51%,#9fd8ef), color-stop(100%,#2ab0ed));background: -webkit-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: -o-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: -ms-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);border-radius: 3px;width:100%; padding:10px; height:65px;'>

Save the Template
That's all

We proudly introduced our new yahoo smileys to Blogger threaded comments...Please Check it and feel it...Click HERE
We will post like our Yahoo smileys soon...

If you liked this article please Join via Google Friend Connect,Share,Like us to get Stronger...

Sunday, 27 May 2012

Optimize your post title to H1 tags better SEO Blogger Hack

This is an important SEO Blogger trick to increase SEO. Heading tags have a great importance in Search engine results, Heading tags helps Search engines to recognize what is important in your blog.Heading are form H1 to H6 .H1 tags have higher priority.So we are going to hack blogger template by changing H3 tags to H1 tags. By default blogger post title is in H3 tag,here is a trick to change it to H1 tag for more SEO.

Go to Blogger Account
Select Template -> Edit HTML [click Proceed]
Find the code like below [Find easily using Crtl+F]
Or simply find <H3

and Change it with <H1 [Change all H3 to H1]
Change all H3 tags with H1 tag
Done ..Wait for few weeks you can find the change in Google SERP.
Your Blog pages will show in Google Search Page.

I think you enjoyed this ..if so please share...

Saturday, 26 May 2012

Protect Your Blog posts from Copying Blogger Trick

Copying blog posts or articles from sites/blogs on internet is a usual thing.Here i am going to share you how to protect your blogger posts/articles form getting Stolen.This is a trick to lock your text and the visitors of your blog can't select the text only they can read the text. If they cracked that method and select the text there is another trick to disable right click menu,so they can't copy text.. Enjoy...

To view Demo click the link below:- Open this link and try to select text..Or do a right click..

View Demo

Copy the Following CSS codes to your Blog

Go to Blogger Dashboard
Select Template->Edit HTML click Proceed [or Use Alternate Way to copy CSS code]
Find ]]></b:skin>
Copy the following code and save

-moz-user-select:none;
-webkit-user-select:none;
-khtml-user-select:none;
-ms-user-select:none;
user-select:none;

Disable Right Click

Copy the following code inside <head>

I think this article will surely help you...if you liked this please share...

Thursday, 17 May 2012

Optimize Blog Post Title With H2 Tag - Increase Traffic

What are Heading Tags?

H means "Heading" tags. They starts from H1 to H6 in descending order of importance. The words written in H1 tags are most important words in our whole blog and the search robots give first search priority to these H1 Tags. H2 tag are less important than H1 and so on to H6. These tags plays very important role in our SEO. They are used to tell the search robots about the most important words in our blog which should be crawl first. Headline tags are also used to organize our posts. They are very useful for our posts visibility in search engines.

How To Use Headline Tags In Your Blog?

As already said, H1 tag is the most important tag in our whole blog, so it should be used only once per page of your blog to avoid duplicate contenting. In every blog (including Blogger), H1 tags are used as Blog's title. Search robots also consider the words written in H1 tag as your blog's title. So the most important thing after Blog's title is your Posts Title which should be written under H2 tags. But, I noticed that most of the Bloggers are using H3 tag as post title which is tremendously reducing the post visibility in search engines.

Convert Your Posts From H3 to H2 Tag

1. Go to Blogger Dashboard >> Your Blog >> Template.

2. Backup your template.
3. Now click Edit HTML and check the box of expand widget template.
4. Search for h3.post-title.
5. Now replace it with h2.post-title. (Replace all h3.post-title in your template).
6. Now find the following code:

<h3><data:title/></h3>

7. And replace it with the following:

<h2><data:title/></h2>

Now you've successfully completed the job!

Tuesday, 17 April 2012

How To Find and Redirect Broken Links In Blogger?

Blogger is being optimized day by day and giving more features to webmasters and making them easy. Now it has introduced a new feature with which you can redirect broken links in your site to any other link in your site. Suppose many sites are linking to a post on your site and you suddenly deleted that post. Then Blogger will show a page not found 404 error page. Then all links to your post are useless and search engines will mark your site with broken links and this will decrease your ranking very much. All your PR juice of that post will be destroyed. But with this new feature, you can redirect your deleted post with the updated one on your blog so people won't leave your blog and search engine too does not leave your blog and you can pass your Page Rank to the next post. In this way you will save your traffic and Page Rank.

What are Broken Links?

In simple words, the link which points to a page that no longer exists is called a broken link. When anyone clicks the broken link, a page appears which is called a 404 error page. That page tells the robots and the visitors that the page they are looking for is not available.

How To Find Broken Links?

Sometimes you forgot which posts you deleted. It's impossible to check all the links in your blog to find broken links. No matter how many broken links your website/blog has, you can easily find those links by Google Webmaster Tools which allows you to manage your website in search engines. Before proceeding make sure that you have a Google Webmaster Account and your site is verified in your account.

Follow the steps to find broken links in your website:

1. Sign in to Google Webmaster Tool.

2. Select your blog.

3. Now on the left side, click Diagnostics and click Crawl Errors.

4. Now click Not found box under URL Errors.

5. Now you will see a list of broken links in your whole blog.

That links are pointing to a page that no longer exists. After clicking that links you will see a 404 error page. Now you have to redirect all those links to the related post links which are working. If you do not have any related post, then you can redirect the links to your blog's homepage to save your Page Rank.

Redirect Broken Links

In this step, I will teach you how to redirect these links to the related post or your homepage. I will redirect the following broken link:

http://freshtips.blogspot.com/2011/03/make-contact-form-for-blogger.html

to the related post link which is working:

http://freshtips.blogspot.com/2011/10/how-to-create-contact-me-page-in.html

It will pass the page rank juice to the redirected page. So follow the steps to successfully redirect the broken link to a working one.

1. In the broken links list, click the broken link which you want to redirect.
2. Now the full link will appear. All the pages containing that broken link will also appear under the "Linked From" tab. You can delete the links from the pages which contains that broken link or you can also redirect them to the related post. I recommend you to redirect.

3. Now copy the full link of the deleted post next to URL. Also go to that link and make sure that it is broken link.
4. Now go to Blogger Dashboard >> Settings >> Search Preferences (In New Blogger Interface).
5. Click edit next to Custom Redirect.
6. Inside the From box, paste the broken link. for example if http://freshtips.blogspot.com/2011/03/make-contact-form-for-blogger.html is the full broken link address, so you have to paste /2011/03/make-contact-form-for-blogger.html in the From box.
7. Inside the To box, paste the new related post link where you want to redirect. for example if you want the broken link to be redirected to http://freshtips.blogspot.com/2011/10/how-to-create-contact-me-page-in.html, then you have to paste /2011/10/how-to-create-contact-me-page-in.html in the To box. Then click Save link and then click Save changes button.

8. Now your links is successfully redirect to the new post. If you will visit the following link which was broken, it will take you straight to the new post link:

http://freshtips.blogspot.com/2011/03/make-contact-form-for-blogger.html

9. After doing this change, you have to wait many days (according to your site rankings) for the not found error to be removed from your webmaster tool.

Monday, 16 April 2012

How To Create 404 Error Page In Blogger

Blogger has introduced new search preferences along with creating your own error page. Now blogger users can create their "custom 404 error page" for their blogs. "404 error page" appears when a visitor clicks a broken links and it tells the visitors and search engines that the page you clicked no longer exists or is deleted. This error page loads inside your blog's body at the place of your posts in a simple grey box called "status bar". By default you can give your users a warning or a message but in this tutorial I will give you an optimized and designed error page.

SEE OUR ERROR PAGE HERE

Creating Error Page

Note: Before proceeding, make sure that blogger status bar is not hidden otherwise the error page will not appear.

1. Go to your Blogger Dashboard >> Settings >> Search Preferences.

2. Now click edit next to: Custom Page Not Found.

3. Now insert the following code in the field:

<div class='freshtips-404-page'>
<p style='line-height: 30px'>
<font color='#418909' size='5'>
Sorry!
</font><font color='#000000'>
It appears that the page you are looking for is deleted or does not exists. Please do one of the followings:
</font></p>
    <li>Go To Our <a href='http://freshtips.blogspot.com'>Homepage</a>
      <br/></li>
    <li><a href='http://freshtips.blogspot.com/p/contact.html'>Report the Problem</a> to us.   </li>
    <li><a href='javascript:history.go(-1)'>« Go Back</a> </li>
</div>

4. Now search for ]]></b:skin>.
5. And just below it, add the following code:

<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
.status-msg-wrap {
    font-size: 100%;
    margin: none;
    position: static;
    width: 100%;
}
.status-msg-border {
    display:none
}
.status-msg-body {
    padding: none;
    position: static;
    text-align: inherit;
    width: 100%;
    z-index: auto;
}
.status-msg-wrap a {
    padding: none;
    text-decoration: inherit;
}
.freshtips-404-error {
background:#FFFFFF;
width:98%;
margin:10px 0px;
padding:20px 10px;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
}
</style>
</b:if>

6. Now save your template and you're done.
7. Now you can view your error at:

http://yourblogurl.blogspot.com/xyz or http://yourblogurl.com/xyz

How To Change Title For 404 Error Page?

Normally the title of your 404 error page will be your blog's url by default and it will affect your SEO and as well as rankings. So you can also edit the title for your 404 error page by following steps:

1. Go to Blogger Dashboard >> Template >> Edit HTML.

2. Now check the box of Expand Widget Template.

3. Now search for the following code:

<b:include data='blog' name='all-head-content'/>

4. Now just below this code, add the following code:

<b:if cond='data:blog.pageType == "error_page"'>
<title><data:blog.title/></title>
</b:if>

5. Now your error page title is set as your blog's title, but you can edit your title by editing the following line in the code:

<title>YOUR 404 ERROR PAGE TITLE</title>

6. Now save your template and you'll see your error page title in your browser's Tab.

Monday, 12 March 2012

Change Older and Newer posts with Post Titles for Blogger

change older posts newer posts with titles

Change posts Navigation Links Newer posts and older posts by the Corresponding Post Titles.This Awesome Blogger Hack lets your blog visitors to Know Newer and Older posts and they can go to that Posts.I got this hack from YABTB blog .This hack is done by MS-potilas of YABTB blog.All credits goes to YABTB. This awesome trick done using some jquery script.

Add Jquery script

Copy and paste the below code before </body>

<br /> <!--Start post title http://netoopsblog.blogspot.com --><br /> <a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDFa-0w6r3a1Oz3MNXd1ZrRRMXDwteuadC9zXLMuMbFEP8VaeaEw4l854ccDb6EQHGyazHVXjPdsU_5hvncNXhFbpuGu5TQyH8BcC0C80C-mscCIcGjFqb4ycg2xbcd9uT8Zxhl6tGI-4/s1600/1x1juice.png'/></a><br /> <b:if cond='data:blog.pageType == &quot;item&quot;'><br /> <script type='text/javascript'>/*<![CDATA[*/var urlToNavTitle={};function getTitlesForNav(d){for(var c=0;c<d.feed.entry.length;c++){var e=d.feed.entry[c];var b="";for(var a=0;a<e.link.length;a++){if(e.link[a].rel=="alternate"){b=e.link[a].href;break}}if(b!=""){urlToNavTitle[b]=e.title.$t}}}document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"><\/script>');function urlToPseudoTitle(a){var b=a.match(/\/([^\/_]+)(_.*)?\.html/);if(b){b=b[1].replace(/-/g," ");b=b[0].toUpperCase()+b.slice(1);if(b.length>28){b=b.replace(/ [^ ]+$/,"...")}}return b}$(window).load(function(){window.setTimeout(function(){var a=$("a.blog-pager-newer-link").attr("href");if(a){var b=urlToNavTitle[a];if(!b){b=urlToPseudoTitle(a)}if(b){$("a.blog-pager-newer-link").html("&lt;&lt; Newer Post<br />"+b)}}a=$("a.blog-pager-older-link").attr("href");if(a){var b=urlToNavTitle[a];if(!b){b=urlToPseudoTitle(a)}if(b){$("a.blog-pager-older-link").html("Older Post &gt;&gt;<br />"+b)}}},500)});/*]]>*/</script><br /> </b:if><br /> <a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDFa-0w6r3a1Oz3MNXd1ZrRRMXDwteuadC9zXLMuMbFEP8VaeaEw4l854ccDb6EQHGyazHVXjPdsU_5hvncNXhFbpuGu5TQyH8BcC0C80C-mscCIcGjFqb4ycg2xbcd9uT8Zxhl6tGI-4/s1600/1x1juice.png'/></a><!--End post title http://netoopsblog.blogspot.com -->

Add CSS code

Add the following css code before ]]></b:skin> (Add CSS code another way)

.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}
#blog-pager{height:100% !important;}

Saturday, 9 June 2012

Protect all images in your Blog jquery trick

Protect only First image in every Post

Protect all images in every post

Friday, 8 June 2012

How to Add Yahoo Smileys on Blogger Threaded Comments?

Add CSS code

Add Javascript code

Add HTML code

Sunday, 27 May 2012

Optimize your post title to H1 tags better SEO Blogger Hack

Saturday, 26 May 2012

Protect Your Blog posts from Copying Blogger Trick

Copy the Following CSS codes to your Blog

Disable Right Click

Thursday, 17 May 2012

Optimize Blog Post Title With H2 Tag - Increase Traffic

What are Heading Tags?

How To Use Headline Tags In Your Blog?

Convert Your Posts From H3 to H2 Tag

Tuesday, 17 April 2012

How To Find and Redirect Broken Links In Blogger?

What are Broken Links?

How To Find Broken Links?

Redirect Broken Links

Monday, 16 April 2012

How To Create 404 Error Page In Blogger

Creating Error Page

How To Change Title For 404 Error Page?

Monday, 12 March 2012

Change Older and Newer posts with Post Titles for Blogger

Add Jquery script

Add CSS code

About Me

Blog Archive