MatrixAdapt | Logiciel de gestion d'Entreprise, Création et référencement des sites web

Seo Master present to you: If you have ever visited a WordPress blog, you might have noticed that the blog pager on these blogs displays the actual post titles, not just links to the older and newer posts that you find at the bottom of your Blogger blog. This links are parts of the so-called blog pager which helps readers navigate between pages and posts.

If you want to increase your page impressions, one of the ways is to replace the older/newer posts links with the Blogger post titles.

How To Add Post Titles Instead of Older Post/Newer Post Link

Step 1. Log in to Blogger, go to Layout and click on "Add A Gadget" link


Step 2. From the pop-up window, choose "HTML/JavaScript"


 Step 3. Paste the following code into the empty field of the HTML/JavaScript gadget:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" h3:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link:first").text();
$("a.blog-pager-older-link").text(olderLinkTitle);
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" h3:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text(newerLinkTitle);
});
</script>

Note: The line in red is for acquiring jQuery framework. If you have acquired jQuery in your template, then you can just delete this part.

Step 4. Now Save the Widget and drag it under the Blog Posts section.


Step 5. Click on Save arrangement.


Now view your blog and see the older/newer posts link, replaced with your post titles.

For any questions, leave a comment below.


2013, By: Seo Master

Seo Master present to you:
In the past tutorials ( See: Social Media Buttons beside Adsense ads & Adsense inside Blogger Header ) i've shared several tricks for Adsense ads placement that may help you to increase your adsense earnings. Now, i will show you how to add Google Adsense above your header, for instance just above the title of your Blogger blog. This can be done by adjusting your template to give you the option of adding more than one widget to the header area.

Add a new element to Blogger header

1. If you are using the old Blogger interface: 

• Go to Dashboard - Design - Edit HTML - (make a backup) Expand Widget Template 

If you are using the new Blogger interface: 

• Go to Dashboard - Template - Edit HTML - Proceed - (make a backup) Expand Widget Template 

2. Next try to find (CTRL + F) this piece of code:

<div id='header-wrapper'>

...if you can't find that one, search for this one:

<div class='region-inner header-inner'>

3. Immediately after one of these lines, you'll see this code:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

4. Replace the values in red like in this example below:

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

5. Save the Template.

Adding the Adsense ad unit above the Blogger header

1. Navigate to Design > Page Elements and view the new option to add a gadget to the header area



2. Click on Add a Gadget link and select the Google Adsense gadget.

Choose the type of ad unit you want. For this example I chose a new linked 728x15 ad unit from the dropdown format menu for an AdSense ad that would sit above the blog title. Configure colors if necessary. Color blending is usually done automatically by Blogger according to the color schema of your template.

3. Click Save

Now View your Blog to see your new Google Adsense unit. If all is going well, your new AdSense ad unit should appear something like in the image below:



This is a very good Adsense placement, i'm sure you're gonna like it

If you have a any questions, please feel free to ask below.
2013, By: Seo Master

Seo Master present to you:
It has often been said that a picture says a thousand words, so in the struggle for the attention of the reader, we can add a picture or an icon to our post title, as I have put in the title of the post in the screenshot above.

Show Image Icon before Blogger Post Title

Step 1:

First thing first you have to do is to prepare an image. After that you'll need a direct link to an image before you proceed further. You can upload it to tinypic.com and copy the URL located in the Direct Link for Layouts box. Also, make sure your image is sized appropriately. You don't want to see a huge image next to your post title.

Step 2: Go to Dashboard - Template - Edit HTML - Proceed if needed

Step 3. Click anywhere inside the code area to find (using CTRL + F) the following code:

<b:includable id='post' var='post'>

Step 4. After you found it, click on the left arrow next to it to expand the widget's code


Step 5. Then delete it until you reach to <div class='post-header'>:

              <b:includable id='post' var='post'>
  <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>

    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

The code to be deleted:


Step 6:

Paste the following code in the place of the deleted code in Step 5:

<b:includable id='post' var='post'>
  <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>

    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <table><tr>
        <td class='posttitle'>
           <img src='IMAGE-URL'/></td>
        <td><h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
        </td>
        </tr></table>
     
      <style>
        h3.post-title {
          margin: 0px !important;
        }
      </style>
   
    </b:if>

Step 7:

Replace the IMAGE-URL text in blue color from above with the URL address of your image (the one that you've gotten from Step 1).

Step 8: Save the Template and that's it! Enjoy :)2013, By: Seo Master

Seo Master present to you: If you want to get rid of those annoying shadows and borders around blogger images, then follow the next steps (see the difference in the screenshot below):
If you are using the old Blogger interface:

• Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you are using the new Blogger interface:

• Go to Dashboard - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}

Now your blogger images should appear without any border or shadow. Cheers!

Update:

If the above method doesn't work for you, do the following:

- Go to Blogger's Dashboard > Design (Layout) > Edit HTML
- Thick the "Expand widget templates" checkbox;
- Search (CTRL + F) for the following code:
2013, By: Seo Master

Seo Master present to you: Newer Post, Home and Older Post are links that appear on the bottom of the posts. When a visitor click on one of these links, they will take him to the page with the list of your previous posts.
The number of the posts on these pages will be the same as the number of the posts on your main page.


What we can do:

A. Change the text of Newer, Older, Home links
B. Place a picture beside them (a small icon, arrow, or whatever...)
C. Add an image instead of the links

So let's start customizing them...

1. Log in to your Blogger Dashboard, go to Template > Edit HTML

2. Click anywhere inside the code area and find - using CTRL + F keys - the following code:

    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

Or find in this code the following fragments which corresponds to each page links

• <data:newerPageTitle/> represents Newer Posts link
• <data:olderPageTitle/> represents Older Posts link
• <data:homeMsg/> represents Home link

Now change these fragments of codes as it follows:

A. Change the text of Newer Posts, Older Posts and Home Links

You need to REPLACE following parts in original code with ANY TEXT you like:

• replace <data:newerPageTitle/> with, for example NEXT POST 
• replace <data:olderPageTitle/> with, for example PREVIOUS POST
• replace <data:homeMsg/> (only the first one) with, for example HOMEPAGE

B. Place a picture beside Newer Posts, Older Posts and Home links

Add the below code just at the beginning of each of the colored fragments of codes from step 2.
<img src="URL Address"/>

So it should look like this:

<img src="URL Address"/><data:newerPageTitle/>

Note: Replace URL Address text with the url address of the image you want to appear

C. Replace Older Posts, Newer Posts and Home links with an image/picture

You can place any kind of picture you want All you have to do is use this code for the pic:

<img src="URL ADDRESS"/>

...just replace URL ADDRESS, with the URL of your hosted picture
...and in code, REPLACE the original link code for text with picture code

• replace <data:newerPageTitle/> with the pic for newer (next) posts
• replace <data:olderPageTitle/> with the pic for older (previous) posts
• replace <data:homeMsg/> (only the first one) with the pic for homepage

3. That's it! Preview and Save the Template.2013, By: Seo Master

Seo Master present to you: In this tutorial i will show you how to replace the 'Post A Comment' text that appears above the comment form with an image. Also, I will make available to you a few cool images or you can add your own image if you like... so let's get started.



How to replace Post a Comment with an image

To replace  "Post A Comment" message in your Blogger / Blogspot blog follow the next steps:

Step 1. Log in to Blogger, go to your Blogger Dashboard >> Design >> Edit HTML

Step 2. Tick the "Expand Widget Templates" checkbox.

Step 3. Now search (CTRL + F) for the code marked in red:

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>

...and for this one too:

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

Step 4. Replace <data:postCommentMsg/> with one of the below images codes:

<img src="http://www.matrixar.com/-DuwsWbCqRag/T3Mxtrye2zI/AAAAAAAABkA/AqMIP-ybAWQ/s1600/leave+a+comment.png" />

<img src="http://www.matrixar.com/-gQV9PoM4FeA/T3M1tOg6C3I/AAAAAAAABkI/OTq4DAbkEPo/s1600/Post+a+comment+blogger.png" />

<img src="http://www.matrixar.com/-wX61ZaQ1piI/T3M3FKUaGhI/AAAAAAAABkQ/y409edvuAQA/s1600/animated+comment+arrow.gif" />

<img src="http://www.matrixar.com/-bIOcD7FxKXw/T3M4LpQ0XFI/AAAAAAAABkg/z_sHmmnKwgs/s1600/leave+a+comment2.png" />

<img src="http://www.matrixar.com/-0j9qVbZuAtc/T3M6HP2tT6I/AAAAAAAABkw/imDcGGmxOiU/s1600/comment.gif" />

You can use your own image instead. Just upload your image on Blogger, switch to Edit HTML tab, copy the image code and replace <data:postCommentMsg/> with your code.

UPDATE! Step 5. The first steps will replace the text only when there are no comments available. To show the image each time new comments are added, we should add the code of the image we want to appear after the 4th of the below code (search 4 times for it):

<p><data:blogCommentMessage/></p>

Thats it! I hope you like your new comment form !2013, By: Seo Master

Seo Master present to you: The Attribution gadget is the gadget in the footer that says "Powered By Blogger". If you have tried to remove this then you may of noticed this gadget is locked into you blog. To unlock it, follow the next steps:

Step 1. Log in to your Dashboard, go to Template > Edit HTML


Step 2. Check the "Expand Widget Templates" box


Step 3. Search (CTRL+ F) for this code:

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

Step 4. Replace true with false

Step 5. Click on the Save Template button

Now attribution gadget is unlocked and it can be removed. Just go to:

• Layout and click on the edit link from Attribution gadget:

• Click on the Remove button - as you can see in the screenshot below:

That was all !2013, By: Seo Master

Seo Master present to you: Maybe you have seen that many blogs have AdSense Units or other ads and widgets in the header section of the blog, the most popular format being the AdSense 468x60 ad unit - see in the screenshot below:

But how we can add something inside blogger header - be it a Adsense unit, a search bar, social media buttons or a widget? By simply adding a section in the header. First off, to give space for the extra gadget to fit in, our blogger header should be resized.

A. Resize blogger header

Step 1: Go to Blogger Dashboard > Template > Edit HTML and backup your template

Step 2: Click anywhere inside the code area and open the search box by using the CTRL + F keys:

Step 3: Search for this piece of code:

/* Header
----------------------------------------------- */

Note: If you can't find it, search only for the first line:

/* Header

Step 4: Replace it with this code:

/* Header
----------------------------------------------- */
.header-left{
display: inline-block;
height: 35px;
width: 350px;
float: left;
}
.header-right {
display:inline-block;
float:right;
}

Change the pixels in red with the image's height and width of your blogger header and change float: left; to float: right; if you want to change the position of your logo.

Step 5: Find the below code:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Step 6: Replace it with:

<b:section class='header header-left' id='header' maxwidgets='1' showaddelement='no'>

Now "Preview" your template, you will find that the background color of Blogger's header is not visible or it's missing. To bring it back, you need to add some more snippets:

Step 7. Find the following code:

    </div>
    </div>
    <div class='header-cap-bottom cap-bottom'>
      <div class='cap-left'/>

Step 8. Just above it, paste this:

<div style='clear:both;'/>

Note: if you can't find the code from step 7, search for this instead:

      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
</b:widget>
</b:section>

... and paste the code from step 8 just below it.

B. Add extra gadget/widget section to Blogger Header

Let's go one step forward and add an extra gadget section within Blogger header in new template designers.

Step 9. Just below the code from step 8, paste this codejust before/above it:

<b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'/>

Step 10. Now find:

]]></b:skin>

Step 11. Paste just above it, this CSS code:

.header-right {
display:inline-block;
float:right;
width:400px;
}

Change the width that is marked in red color. Increase or decrease the pixels according to your needs and positioning new header section.

Step 12. Save the Template.

Step 13. Now all you have to do is to go to Layout and Add a Gadget to the newly created extra header section in Blogger.


The widget now should appear side by side.

2013, By: Seo Master

Seo Master present to you: This hack will summarize content and show only summary in Home page, Archives Page and Label Page using Automatic Read More simple script in your template. Using automatic read more on your blog will make your blog load faster by showing few post instead of the full post on the homepage.
Automatic read more for blogger posts can be done by inputting some code into your blog templates.

How to install Automatic Read More Hack for Blogger

There are two options you can choose from:


Step 1. Find (CRTL + F) this code:

<data:post.body/>

Step 2. And replace with this:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div>
   <b:if cond='data:post.thumbnailUrl'>
    <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
   </b:if>
   <data:post.snippet/>
  </div>
  <div class='jump-link'>
   <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
  </div>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

2. Read more only for older posts (your latest post will appear normal):

Find (CTRL + F) and replace <data:post.body/> with:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
    <data:post.body/>
     <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
       <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a> 
      </div>
     </b:if>
   <b:else/>
    <div>
     <b:if cond='data:post.thumbnailUrl'>
      <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
     </b:if>
     <data:post.snippet/>
    </div>
    <div class='jump-link'>
     <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
   </b:if>
  <b:else/>
   <div>
    <b:if cond='data:post.thumbnailUrl'>
     <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
    </b:if>
    <data:post.snippet/>
   </div>
   <div class='jump-link'>
    <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
   </div>
  </b:if>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

Settings:

A. If you want the thumbnail to appear on the left:

Step 1. Find (CTRL + F) the following piece of code:

]]></b:skin>

Step 2. Just above it, paste this code:

.post-thumbnail{float:left;margin-right:20px}

B. If you want the thumbnail to appear on the right,

Paste above ]]></b:skin> this code:

.post-thumbnail{float:right;margin-left:20px}

Click Preview and if it works, click Save Template.

That's it, enjoy!2013, By: Seo Master

Seo Master present to you: The Blogger Threaded commenting system allows a reader to reply to other reader comments on that post. Blogger supports threaded commenting with two levels - the original comment, and the replies to that comment. If you want remove threaded comments from your blogger blog, follow these steps:


Step 1. Go To Blogger Dashboard > Template > Edit HTML (click on Proceed button if needed)


Step 2. Select "Expand Widget Templates" (back up your template)


Step 3. Search (using CTRL + F) for the following code:

<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>

Step 4. Now remove it (you'll find this code twice and replace it twice) and paste this code instead:

   <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>

Step 5. Save Template.

That was all!

2013, By: Seo Master

Seo Master present to you: Many of you maybe have wondered if it is possible to post Youtube videos and images into Blogger comments. With this trick it will (: But first of all, you should know that if you have blogger threaded comments activated, it won't work. So if you want to have this feature, firstly, you should remove blogger threaded comments.

Read here on How to Remove Blogger Threaded Comments.

How to add videos/images in Blogger comments

Step 1. Go to Dashboard >> Template >> Edit HTML (click on Proceed if needed)


 Step 2. Select "Expand widget templates" box (make a backup)

Step 3. Find (using CTRL + F) the following tag:

</body>

Step 4. Paste the code below, immediately above/before that tag:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("multimedia");
theText = bodyText.innerHTML;
theText = theText.replace(/\[img\]/gi, "<div style='clear:both'></div><img style='float:left;margin:10px 0;border:1px solid #DDD;max-width:490px;background:#FFF;padding:4px' src='");
theText = theText.replace(/\[\/img\]/gi, "'/><div style='clear:both'></div>");
theText = theText.replace(/\[youtube\]http:\/\/youtu.be/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed");
theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed/");
theText = theText.replace(/&amp;feature=/gi, "?rel=0' '");
theText = theText.replace(/\[\/youtube\]/gi, "?rel=0' frameborder='0' allowfullscreen></iframe>");
theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed/");
theText = theText.replace(/\[\/youtube\]/gi, "frameborder='0' allowfullscreen></iframe>");bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
</b:if>

Step 5. Now find (CTRL + F) this code:

<b:loop values='data:post.comments' var='comment'>

Step 6. Add the following code just above it:

<div id='multimedia'>

Step 7. Now find:

</b:loop>

Note: look for this piece of code after the code on the step 5.

Step 8. Just after, paste this piece of code:

</div>

Step 9. Save template.

Instructions

Now everytime you want to post images & videos in comments, you should add the following tags at the beginning and end of the url of your youtube videos or images you want to share:

For example:

We have this Youtube URL:
www.youtube.com/watch?v=jEgX64n3T7g

• To add a youtube video in blogger comments, we'll have to add the red codes at the beginning and end of the youtube URL of the video:

[youtube]www.youtube.com/watch?v=jEgX64n3T7g[/youtube]

• To add images in blogger comments, add these codes at the beginning and at the end of your image url:

[img]your-image-url[/img]

Note: replace your-image-url with the url address of your image

Settings

To tell your visitors on how to post images and videos into your blogger comments, you can add a message just above your blogger comment form.

Just go to Dashboard >> Settings >> Posts and Comments - and look for the Comment Form Message section, click on "Add" link and add this text:

If you want to post a youtube video or a image in your comment, use <b>[img]YOUR-IMAGE-URL-HERE[/img]</b> for posting images and <b>[youtube]YOUTUBE-VIDEO-URL-HERE[/youtube]</b>

See this screenshot for more info:


Now click on the "Save Settings" button on the top right corner and you're done!

If you enjoy reading this blog, please share and subscribe. For any questions, drop a comment below.

2013, By: Seo Master

Seo Master present to you: In this tutorial we will learn how to highlight the author comments so that they will have a different background color, border, or anything that makes them stand out from the others. To achieve this, we need to add a code in the Blogger's template and to modify the style according to our preferences.
  

How to highlight author comments in Blogger:

Step 1. Go to Template, click on Edit HTML


Step 2. Click anywhere inside the code area and try to find - using CTRL + F keys - this tag:

</body>

Step 3. Just above it, paste the following code:

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(function() {
function highlight(){
$('.user.blog-author').closest('.comment-block')
.css('border', '1px solid #FFA500')
.css('background','#F1F1F2 url("http://www.blogblog.com/1kt/transparent/white80.png")')
.css('color', '#444444')
.css('font-size', '12px')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>

Customizing the Author Comments:

Border:
The line marked in orange represents the border's style.
What it can be done:

• 1px - you can increase the value to change the border's thickness
• solid - change the border's style to dotted, dashed, inset, outset etc.
• #FFA500 - this is the border's color value, change it with your own color

Background:
The line marked in blue represents the background's style. You can use a plain color or an image. By default there's a combination of both (a white transparent image with a gray plain color).
To change/add:

• a different color: replace the #F1F1F2 value with your own (use this tool to find the hex code of your desired color)
• an image: replace the defaul url http://www.blogblog.com/1kt/transparent/white80.png with that of your image

Font Color:
To change the font's color, replace the #444444 color value in green with your own. (you can use this tool to find the hex code of your desired color)

Font Size:
Modify the value in red by increasing/decreasing the "12" value in order to change the size of text.

Step 4. Now Save your Template.

To customize the entire style of threaded comments, please check my previous tutorial on How to Customize Comment's Background, Font Color and Border in Blogger.2013, By: Seo Master

Seo Master present to you: In many Blogger templates there is a "subscribe to: Posts (Atom)" link, so that the blog visitors can subscribe to the Atom feeds. Considering the fact that many readers use RSS for their blog feeds, many of you could find this link pretty useless. Moreover it occupies space at the bottom of the template and it doesn't look nice at all. In this case you might want to remove it.

How to remove subscribe to: Posts (Atom) link? 

Step 1. Go to your Dashboard > Template > Edit HTML (click on Proceed button if needed)


Step 2. Select "Expand Widget Templates"


Step 3. Find (CTRL + F) this line:

<b:include data='feedLinks' name='feedLinksBody'/>

Step 4. Remove it and Save Template.

This should remove subscribe to: posts (atom) link.
2013, By: Seo Master

Seo Master present to you: As some of you may have noticed, all the widgets/gadgets you add to your blog, will be displayed on all the pages by default, including the homepage as well. And I'm sure very few know that AdSense could disable your account in case you've put ad units inside the content of your contact or privacy policy pages. Therefore, hiding certain elements inside your blog pages is not only a matter of design, but it is also a requirement.

To hide (or show) widgets in particular posts, static pages, homepage or archive pages, you can use conditional tags.

Step 1. Go to Blogger's Dashboard > Layout and name the HTML/Javascript gadgets that you have already added. Doing this, it will be easier for you to identify the widgets that you have in your Blogger's template. Give it a unique title so that it does not match with any of the titles of any other widgets already added.

Step 2. Next thing to do is to go to Template and click on Edit HTML



Step 3. Select the "Expand Widget Templates" checkbox.



Step 4. Find the widget's title in the HTML by using Ctrl+F and entering the widget's name in the search box.
Let's say that the title for one of my widgets is "Recent Posts". After searching for the widget's name, I will find a similar code in my template:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>  

This code represents the widget/gadget that I have added in the Page Elements location (Layout).

Step 5. After you've found your widget's code, add the following conditional tags marked with red just below and above to hide the widget from specific pages or posts in Blogger. For instance, in case you want:

To show the widget only in Homepage:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To show Blogger widget only in post pages 

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To show the widget in a specific page
 

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "URL of the page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Note: Replace URL of the page with the address of the page in which you want the widget to appear

To hide a widget only in a particular page

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != "URL of the page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget> 

To show widgets only in static pages

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget> 

To hide widgets in Static Pages

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget> 

To show widgets only in Archive Pages

 <b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget> 

Step 6. After you have added the conditional tags, Save Template and view your blog.

That's it!2013, By: Seo Master

Seo Master present to you: What is Blogger Navbar?
Frist time somebody creates a blog in blogger.com, a bar will show up at the very top of a blog page. This bar is known as the Blogger Navbar (Blogger Navigation Bar) and it usually appears by default at the top of every hosted Blogspot blog.

Blogger navbar functions include:

• [B] (blogger logo): takes you back to blogger's homepage
• Search Blog: you can make searches on the blog and results will appear directly on the page.
• Follow: you can follow the blog you're currently viewing (blog updates will appear on your Blogger dashboard at Reading List - if you're not logged, you'll see a Share link, which allows you to share you favorite blogs on social networks like Twitter, Facebook, Google buzz, and Google Reader)
• Report abuse: you can report a blog if you consider its content objectionable (e.g., pornography);
• NextBlog: takes you to a random, recently-updated Blogger blog.
• email address@: If you are logged in to your account, you'll see your own address here. Other viewers will see their own email addresses, or none at all if they aren't logged in.
• Post: Direct link to the post editor
• Design: this link takes you to Page Elements, where you can add gadgets/widgets for your blog
• Sign In/Out: This displays the appropriate option, depending on whether you're logged in or not.

Blogger navbar is available in several colors, and is configured in the Template tab in Blogger's interface.

It can be useful but the only real disadvantage is visual. If you have customized design, Navbar usually doesn't fit in.

In this tutorial, I'll show you how to remove it or add a peek-a-boo effect.

Removing/Hiding the Blogger Navbar

Step 1. Go to: Dashboard > Template > Edit HTML:


 ... select the "expand widget templates" box



Step 2. Find (CTRL + F) the following line:

]]></b:skin>

Step 3. Just above it, paste this code:

#navbar {
height: 0px;
visibility: hidden;
display: none;
}

Step 4. Save your Template.

There's another way of showing a Navbar. It is called
"Hover Peek-a-boo Blogger Navbar":

The navbar will only appear when you hover around the area on the top. To see it in action, take a look at this demo

Add a Peek-a-Boo Effect to Blogger/Blogspot Navbar


Step 1. Login to your Blogger Dashboard, then go to Design >> Edit HTML > check "expand widget templates"

Step 2. Search for the following piece of code:

]]></b:skin>

Step 3. Add the following code just above it:

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)

Step 4. Save the template... and you're done!

If you have any questions, leave a comment below.2013, By: Seo Master