Les nouveautés et Tutoriels de Votre Codeur | SEO | Création de site web | Création de logiciel

seo Protect all images in your Blog jquery trick 2013

Seo Master present to you:
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

<script type='text/javascript'>
//<![CDATA[
$(function(){
$(".post-body img:nth-child(1)").after("<img src=\"http:\/\/i.imgur.com\/eYKPf7b.png\" alt=\"NetOopsblog protected image\" style=\"margin-left: -212px; opacity: 0; position: relative; top: 0;\" \/>");
});
//]]>
</script>

Protect all images in every post

<script type='text/javascript'>
//<![CDATA[
$(function(){
$(".post-body img").after("<img src=\"http:\/\/i.imgur.com\/eYKPf7b.png\" alt=\"NetOopsblog protected image\" style=\"margin-left: -212px; opacity: 0; position: relative; top: 0;\" \/>");
});
//]]>
</script>
I think you liked this article...please like and share..
 
2013, By: Seo Master

seo How to Add Yahoo Smileys on Blogger Threaded Comments? 2013

Seo Master present to you:
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

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.
<script src='https://netoopscodes.googlecode.com/svn/branches/Js files/ysmiley threaded comments-min.js' type='text/javascript'/>
  •   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 == &quot;item&quot;'>
<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;'>
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-*
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =((
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/> #:-S
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/> :-c
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)]
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/> :-h
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/> 2):)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!!
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^#(^
</div><a href="http://www.matrixar.com"></a></b:if>

  • 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...
2013, By: Seo Master

seo Awesome Stylish 404 Error Pages For Blogger 2013

Seo Master present to you:
Custom 404 Error Page for Blogger
404 Error or Page Not Found Error generated by Blogger when a user enters an invalid URL or 404 Error is an HTTP status code that means the page you are trying to reach on your Blog couldn't found or Page not exist in the Server.
By Default Blogger shows Error page message in a box and its not look Style.
Here I am saying about how to Customize it much better...




Only Custom message [No Style]

If you want to show only a custom message then First Go to updated Blogger Interface
Then Go to Setting->Search Preferences

Error Message with Stylish 404 images

If you want Colorful Stylish  404 page do the following.
  • Go to Design->Edit HTML
  • Find </head> and copy the below code just above it.
<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}</style>
</b:if>
  • Save the Template

Error Page Style 1

Custom 404 error page for blogger 1

  •  Go to Setting->Search Preferences
  • Copy below code in Custom Page Not Found section [as shown in fig. first]
<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="http://www.matrixar.com/-3_mjW7aMWMo/T22zQQHn-sI/AAAAAAAAAMQ/f-biNvAo1-Y/s1600/404+error+page+1.jpg"/>

Error Page Style 2

Blogger custom Error page
  • Go to Setting->Search Preferences
  • Copy below code in Custom Page Not Found section [as shown in fig. first]
<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="http://www.matrixar.com/-oGC6zPGYpDk/T22zRTPEHkI/AAAAAAAAAMY/_QDDN_HW40A/s1600/404+error+page+2.jpg"/>

Error Page Style 3


  • Go to Setting->Search Preferences
  • Copy below code in Custom Page Not Found section [as shown in fig. first]
<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="http://www.matrixar.com/-ldrwg_L3hPw/T29ZifhYlUI/AAAAAAAAAMo/wdhPPVcNEDM/s1600/404+error+page+4.jpg"/>

Error Page Style 4

blogger custom 404 error page
  • Go to Setting->Search Preferences
  • Copy below code in Custom Page Not Found section [as shown in fig. first]
<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="http://www.matrixar.com/-gdd8Nj5zNqg/T29ZjfvDjYI/AAAAAAAAAMw/vwwjnuqR1Ro/s320/404+error+page+6.jpg"/>

Error Page Style 5


  • Go to Setting->Search Preferences
  • Copy below code in Custom Page Not Found section [as shown in fig. first]
<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="http://www.matrixar.com/-VazK8ZIMIo0/T29ZktlwCVI/AAAAAAAAAM4/Fb4VUpCh2LY/s1600/404+error+page+7.jpg"/>

Error Page Style 6


  • Go to Setting->Search Preferences
  • Copy below code in Custom Page Not Found section [as shown in fig. first]
<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="http://www.matrixar.com/-unUiQAZJDZM/T29ZhgrSbnI/AAAAAAAAAMg/7KLym2snYbI/s1600/404+error+page+3.jpg"/>

Then Click Save..That all..
First thanks to Bloggerplugins.com for the custom error page code, visit here. Then i made some changes and add beautiful 404 images that i was inspired from HongKiat .

I thinks this article helped you..If any bugs of doubts don't hesitate to ask..do comment...
Like and share...
2013, By: Seo Master

seo Remove Threaded Comments in Blogger Easily 2013

Seo Master present to you:
remove threaded comments blogger
This is a simple article explaining How to remove Blogger 's New Threaded commenting system easily.There are some problems with it,Many users report that when a user click on post link,it takes control to the bottom of the page(to the comment section).Would you think that Threaded commenting system is not Good for Blog? Then you can remove it.
I am not going to say too much about Threaded commenting System,because i hope you know about it.
Follow the instructions below carefully.


Before Editing Template,you must Backup your template(How to Backup Template?)

  • Go to Design-> Edit HTML
  • Tick on Check box  Expanded Widget Templates
  • Find the code data:post.showThreadedComments easily using ctrl+F
  • You will found code snippet like this
<b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
  • Replace it carefully with the following code [Note: You will find the above code twice,replace it twice]
<b:include data='post' name='comments'/>
          </b:if>
               <b:if cond='data:blog.pageType == &quot;item&quot;'>
                     <b:include data='post' name='comments'/>
      
        </b:if>
  • Save it ,
No longer Threaded commenting appear on your blog.Normal commenting will back.
Cheers..!

2013, By: Seo Master

seo Awesome Random Posts Widget for blogger Blog 2013

Seo Master present to you:
random posts widget
Random Posts widget is an awesome widget for your Blogger Blog.Most important feature of this widget is it lets your Blog visitors to surf more blog posts in your blog.Surely it increases your Blog's internal links that lets your blog higher traffic.
Its let your users to spend more time in your Blog.






Install Random posts widget

Make sure you are Sign In to your Blogger Account.

If you are a beginner in Blogger Editing ,use our one click Widget
  • Click the below Add to Blogger Button to install

Manually Add Random posts Widget

  • Sign In to your Blogger Account.
  • Go to Design->Page Elements
  • Click on Add Gadget and look for HTML/Javascript take it
  • Give the title as you need(eg:Random Posts)
  • Copy and paste the below code to the content section
<style type="text/css">
.noop-random-posts ul li {
    list-style-image: url("http://www.matrixar.com/-90ErnmngIVo/TyPTnufu8cI/AAAAAAAAADs/ndQtxxa6kkI/s1600/tick+list+style.png");
}
</style>
<div class="noop-random-posts"><script type="text/javascript">
    var randarray = new Array();var l=0;var flag;
    var numofpost=5;function nooprandomposts(json){
    var total = parseInt(json.feed.openSearch$totalResults.$t,10);
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
    document.write(item);}}
    }document.write('</ul>');}
    </script>
<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=nooprandomposts"></script></div>
Click on Save and its Done...If you have any doubts don't hesitate to ask.Please Comment.
I hope you had enjoyed this post.Leave Comments...
2013, By: Seo Master

seo Beautiful Page Navigation for Blogger Blog 2013

Seo Master present to you:

page navigation for blogger
Blogger Page Navigation is an awesome trick to navigate your Blogger Blog Pages.It allows your users to Navigate Blog pages like Book,By using this your blog visitors can easily go to an appropriate page.By default Blogger allows Older Posts and Newer Posts link to Navigate between Blog pages.It is very difficult for your users to navigate deeper into your Blog's Posts, so the Page Navigation helps us to solve this problem.
 Let's see how to install it.Follow the steps below.

1.How to install Page Navigation Widget

  • Log In to your Blogger Account
  • Go to Design-> Page Elements(Shown in the Picture)
  • Click on Add Gadget (anyone) and look for HTML/Javascript take it.
  • Leave the Title as Blank(as shown in the figure)
  • Copy and paste the below code in it.
<style type='text/css'>
#blog-pager{height: 28px;
    padding: 10px 0 0;
overflow:hidden;
text-align:center;
}
.showpageArea a {text-decoration:underline;
font-size: 16px;
       text-align: center;}
.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}

.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}

.showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}
.showpage a:hover {text-decoration:none;background: #cccccc;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style>
<script style='text/javascript'>var pageCount=7; 
var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script>
<script style='text/javascript' src='http://netoopscodes.googlecode.com/svn/netoops-page-nav-v2.js'></script>
you can change Red Highlighted texts when you need. pageCount=7;  determines how many Blog posts in each pages. you want to display in each pages.(Note:if you change this value '7' goto Settings->Formatting and change value of Show at most as you given in PageCount)
And displayPageNum=5 determines how many additional Page Navigation numbers display on the page.
  • Click on save,You are almost clear.
  • Then Change the position of the Widget ,place under the Blog posts.(shown in the figure)
  •  
  • Done..your blog had a page navigation bar.
The Page Navigation had been developed by Muhammed Rias and it was a good presentation.There are some bugs in that and Abu Farhan had solved it.Give them a big thanks for giving us a Beautiful Page Navigation Solution.
2013, By: Seo Master

seo How to add Search engine Friendly Title to Blogger Blog 2013

Seo Master present to you:


This article will help new blogger blog owners and all bloggers to make their blog search engine friendly Titles.By default Blogger blog titles are not search engine friendly.Page Title is group of text that appears on top of your browser.It is more important in showing your blog/blog posts on Search engine results.The Page title is the most important element in your blog in terms of higher ranking in search results.
Here is example,the figure shows the title of our blog post,the blog title is displayed first and after that the post title has been displayed.





Google only displays 70 characters on Google search results and in case of Yahoo display bit more.So your blog posts will not display or you will not get as much rank in Search Results.Let us think about reversing of position of the blog title and post title,Giving the first priority to Post title and it will works.
It will appears like the following figure.
This
Lets see how to optimize your blogger blog titles Search engine friendly.
  • Go to Design->Edit HTML
  • find the following 
<title><data:blog.pageTitle/></title>
  • Replace the it with the following code
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - NetOops Blog</title>
</b:if>
Replace the red text by your blog's Name
Done..! you have an SEO friendly page title.
2013, By: Seo Master

seo Head Banner changing trick for blogger 2013

Seo Master present to you:

Today i am saying about an interesting thing .Head banner changing trick for blogger
This is a simple blogger hack.when you add this, your blogger blog's header image will change after RELOAD the webpage on your browser.
 Follow the instructions :)

  • Sign In to your blogger account.
  • Goto Design->Edit HTML
  • Find ]]></b:skin> and paste the following code before it.
#header {
background: url("your head image url") no-repeat left bottom;
margin:0;
padding:2px;
}
  • Then copy the below script  and place it inside the <head> tag:

<script type="text/javascript">
var banner= new Array()

banner[0]="1st image url"
banner[1]="2nd image url"
banner[2]="3rd image url"
banner[3]="4th image url"
banner[4]="5th image url"
var random=Math.round(4*Math.random());

document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>
you are done...:)
If any problem with this blogger trick please leave comment,don't hesitate to ask,we are happy to help you:)
2013, By: Seo Master
Powered by Blogger.