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

Seo Master present to you: The comments are an essential part of a blog because in them is reflected the readers' opinions regarding a post or our blog, so it is important to spend a little of our time to make this part looking more presentable, accessible and neat.

To set in order our comments, it is necessary to make each comment easy to identify, therefore to know from where it begins and to where it ends, otherwise it becomes a jumble of letters of which the reader can run away. Here are some ways to make some order by separating each comment.

- Add a Separator To Blogger Comments
- Add a Divider Below Comments in Blogger
- Fully Customize Your Blogger Comments By Changing The Background Color and Border

The first method is the easiest, and is about how to put a border below our comments, this is to separate each blog comment in a simple but effective way.



Step 1. To add a simple separator go to Template > Edit HTML and click on the small arrow on the left of <b:skin>...</b:skin>
Step 2. Click anywhere inside the code area and search using CTRL + F keys, for the following piece of code:

]]></b:skin>

Step 3. Paste the following style just above it:

- If we are using threaded comments (with the reply option):

.comment-block {
border-bottom: 1px solid #000000;
}

.comments .continue {
  border-top: 0px solid $(widget.alternate.text.color);
}

- If we are using previous commenting system (with no reply option)

#comments-block .comment-footer {
border-bottom:1px solid #000000;
}

Note: To change the border's color, replace the bolded color value and to change its thickness, increase/decrease the 1 value.

Step 4. Save the Template.

Instead of a simple border, we can also add a divider/image between our comments.



Step 1. Go to Template > Edit HTML and search (CTRL + F) for the following piece of code:

]]></b:skin>

Step 2. Paste the following just above it:

- If we are using threaded comments (with the reply option):

.comment-block {
background-image:url(http://www.matrixar.com/-YaY5yi0UcbM/UTpA2jWBJFI/AAAAAAAAC_0/UXbviThYl2w/s1600/74.gif);
background-repeat:no-repeat;
background-position:center bottom;
padding-bottom:30px;
margin-top: -10px;
}

.comments .continue {
border-top: 0px solid $(widget.alternate.text.color);
}

- If we are using previous commenting system (with no reply function)

#comments-block .comment-footer {
background-image:url(http://www.matrixar.com/-YaY5yi0UcbM/UTpA2jWBJFI/AAAAAAAAC_0/UXbviThYl2w/s1600/74.gif);
background-repeat:no-repeat;
background-position:center bottom;
height: 50px;
}

Note: The URL that is in blue represents the image that you can change as you like, just remember that at the height must set the height of an image with 30px more, for instance, if the image's height is 50px then the value will be 80px. This is for making sure that the image won't overlap the date of comments. (for threaded comments, increase/decrease the padding 30 value)

Step 3. Save the Template.

But you can still have more styles for each comment, for example adding a background color and a border.


Step 1. Go to Template > Edit HTML and search for the following piece of code:

]]></b:skin>

Step 2. Paste the following just above it:

- If we are using threaded comments (with the reply option):

.comment-block {
background:#F9F9F9; /* Background Color */
border: 1px solid #f1f1f1; /* Border style */
margin-bottom:20px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.comments .comment-thread.inline-thread {
background-color: #FAFAFA; /* Background color behind the replies */
border-left: 4px dotted #E6E6E6; /* Border on the left side of replies */
}

.comment-content {
padding:2px 10px 10px 10px;
color:#444444; /* Font Color in Comments */
}

.datetime a {
font-style:italic;
font-size:9px;
margin-left: 2px;
}

.comments .comments-content .user a{
color:#1982D1; /* Author's name color */
font-size: 12px; /* Author's name size */
padding-left: 10px;
font-weight:bold;
text-decoration:none;
}

.comments .comment .comment-actions a,.comments .comment .continue a{
display:inline-block;
margin:0 0 10px 10px;
padding:0 15px;
color:#B4B4B7;
text-align:center;
text-decoration:none;
background:#F8F8FB;
border:1px solid #C2C2C5;
border-radius:4px;
height:20px;
line-height:20px;
font-weight:normal;
cursor:pointer;
}

.comments .continue {
border-top: 0px solid $(widget.alternate.text.color);
}

.comments .comments-content .icon.blog-author {
background-image: none;
margin-left: -10px;
}

.comments .avatar-image-container{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 40px;
max-height: 40px;
border: 1px solid #F2F2F2;
padding: 1px;
}

.comments .avatar-image-container img{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
max-width: 40px;
height: 40px;
}

Step 3. Save the Template.

- If we are using previous commenting system (with no reply function):

Step 1. Search for this line in your template:

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

Step 2. Then, add the following code just below of it:

<div class='comments-ct'>

Step 3. Look a little further down and you'll see the </b:loop> code and just above it, add this:

</div>

Step 4. Now find this:

]]></b:skin>

Step 5. And just above of it, add this CSS code:

.comments-ct{
background:#F9F9F9; /* Background Color */
border: 1px solid #f1f1f1; /* Bprder Style */
margin-bottom:20px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.comment-body {
color:#444444; /* Font Color in Comments */
padding:10px;
}

.comments-ct a {
padding-left: 5px; /* Link color */
color: #4A9BD8;
}

.comment-timestamp a {
font-style:italic;
font-size:9px;
padding-right:10px;
padding-left:10px;
}

(The rounded edges will not work in Internet Explorer with CSS)

In either case, you can change the background color, border, etc.. in parts with annotations in green.

Step 6. Save the Template.

If you need more help, leave a comment below.2013, By: Seo Master

Seo Master present to you: To get that vintage Instagram effect for your pictures you don't have to use a program, now you can use CSS and get a similar result! We will apply a shadow inside the image, add a border, we will put a color in it, and on top of our image, we will add another semitransparent image with a grunge style that will give a vintage touch.

You can see the example in this picture below, moving the cursor changes to normal but keeps the edge.

2013, By: Seo Master

Seo Master present to you: This tutorial will show you how to make a gadget/widget to appear just below the first Blogger post.

First, you must understand that the usual gadgets provided by Blogger can be added only in the areas where the design section permits. Still, we can show any element, for example, an AdSense ad, an image, a flash file, a video etc.

So what we will do in this tutorial is to display an item under the first post, this means that it will not be visible below the other entries. This is great when you use any automatic summary, although it is not a requirement.

Well, this is easy to do and we will use the isFirstPost conditional tag for that element to show it under the first entry.

Adding An Element Below First Post

Step 1. First, go to your Blogger Template and click on the Edit HTML button:


Step 2. Check the "Expand Widget Templates" box:

Step 3. And find this line:

<b:include data='post' name='post'/> 

Step 4. Just below it add this code:

<b:if cond='data:post.isFirstPost'>
<div align="center" style="margin-top:0px; margin-bottom:10px;">
Here goes the code of the element you want to show
</div>
</b:if>

Note:

- The bolded text indicates to where you should paste the code of the element (eg. AdSense ad, a widget). 

- In red are the top margins (margin-top) and the bottom margins (margin-bottom), this is in case you want the element to move towards or away from the entries, also you can add any style like a background color, border etc..

Step 5. Preview to make sure everything is okay, then Save your Template.2013, By: Seo Master

Seo Master present to you: Now, for those of you who have chosen to use the Blogger's Lightbox View to display the images, you have the option to change its style in a whole different way. We'll be able to change the black color of the screen, the border or shadow of the images and the color of the thumbnails background as well. We can customize the Blogger Lightbox entirely on your taste.

Demo

Take a look at the screenshots below:




After adding our CSS code, the entire look of the modal window will be changed: the background color, the bar showing the thumbnails, the edge of images (border), the text that appears in it, transparency and the close button.


All we have to do is to overwrite the default styles and change them for ours.

How to Change the Blogger's Lightbox Background and Style

Step 1. Go to Template, click on the Edit HTML button (also click on the Proceed button if needed)


Step 2. Search using CTRL + F the following code snippet:

]]></b:skin>

Step 3. Copy and paste the following code just above it:

/* Blogger Lightbox
----------------------------------------------- */

/* Background Color */
.CSS_LIGHTBOX_BG_MASK {
background-color: #ffffff !important;
background-image: url(image-url-address) !important;
opacity: 0.8 !important;
filter: alpha(opacity=90) !important;
}

/* Images Border */
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #fff !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
}

/* Close Button */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(image-url-address) no-repeat !important;
width: 24px !important;
height: 24px !important;
}

/* Thumbnails Bar Color */
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #eaeaea !important;
}

/* Text Color */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {
color: #000 !important;
}

/* Index Info (number of images) */
.CSS_LIGHTBOX_INDEX_INFO {
color: #555555 !important;
}

Note:

- The text in green explains to which part the code belongs (it doesn't need to be modified)

For example, the / * Background Color * / part can change the background color or even the LightBox background color to an image. If you want to do that, then change this line by replacing the red text with the url address of your image:

background-image: url(image-url-address) !important;

- The opacity is just below, if you add a lower value ( 0.8 ) the background will become more transparent.

- To change the icon for close button, you have to replace the text in red from /* Close Button */ with the url of your image. (you can host image at tinypic or upload it into a blogger draft and then Copy the Link Location)

- To change the text color of images, replace the #555555 value from /* Index Info (number of images) */

- The border of the images can be changed as much as we want: you can change the borders' roundedness, shadow, etc... but remember this is CSS3 so older versions of Internet Explorer will not see it.

Step 4. Click on Save Template and you're done! 2013, By: Seo Master

Seo Master present to you: Maybe you have wondered how to wrap text around an Adsense block. You may have noticed that many Wordpress blogs have ad units embedded in top left or right corner of the post content as shown in the picture below:


The main advantage of this Adsense ad placement is that it has the highest CTR on most of the blogs. Adding this ad unit is very simple and requires a code snippet before and after your regular Adsense ad script.

If you want to add a ad unit in top right corner of your post, then include the red lines below in your ad code:

<div style="float:right;">

Your Adsense ad script

</div>

If you want to place ad unit at left corner, change the float tag to "left":

<div style="float:left;">
Your Adsense ad script
</div>

The most appropriate for this ad placement is 250×250 square ad unit. Placing AdSense unit in the middle of the post, may disturb the reading flow, so I'd recommend to have ad units at the beginning of the post.

If you have any query adding this ad unit in your blog post, just leave a comment below. 2013, By: Seo Master

Seo Master present to you: To change your blog's date header color and font style, you can do it with a very simple CSS adjustment that will make the date header to float on the left side of your post and to be partially out of the structure like a banner with a colorful appearance.
See the result in the image below:


How to do it

Step 1. Login into your Blogger Dashboard, select Template option > click on Edit HTML 


Step 2. Select Expand Blogger Template and search (CTRL + F) for the following code:

date.header

Or...

.date-header

Step 3. Add the following code snippet just below of it

background:white;
border-bottom: 1px solid #000000;
font-size:12px;
margin-left:-105px;
padding:3px 3px 3px 3px;
width:90px;
word-wrap:break-word;
float:left;
}

Putting it all together, it should look something like this:

.date-header span {
background:#FFD465;
border-bottom: 2px solid #cc0000;
color:#000000;
font-size:12px;
margin-left:-105px;
padding:3px 3px 3px 3px;
width:90px;
word-wrap:break-word;
float:left;}

To modify the style, replace the above bold/colored codes...

to change the background color:

• #FFD465: replace with the hex code of the color you want

to change the border style:

• delete -bottom if you want border all around
• change: 2px to a higher or lower value
• change: solid with dotted if you want a dotted line
• change:  #cc0000 with the hex code of border color

to change the font size and date color:

• for a bigger text, change: 12px to a higher value
• color: replace the hex code (#000000) with the hex of date color

Example:

color: #0000cc;

to change margin-left:
(represents the distance between date and blogger post)

• replace -105px with a bigger/smaller value

float:

• change left to right

2013, By: Seo Master

Seo Master present to you: When there are no comments made to your posts, there's a link that says 'Be the First to comment!' and when there is just one comment it says '1 comment so far'. If you want to make your blog more stylish by replacing these texts with some cute small icons along with the default Author Name, Post Date, Labels and Comments... then just follow the next steps:






Steps:
 
Step 1. From your Blogger Dashboard, click on the Template option, then press the Edit HTML button:


Step 2. Select the "Expand widgets templates" box



Step 3. Search for the below code (press the CTRL + F keys and paste the code in the search box):

<div class='post-header-line-1'>

If you can't find the code above, look for this one:

    <div class='post-header'>

Step 4. Paste the following code below/after the code above:

<font style='background:transparent url(http://www.matrixar.com/--fsYbwHKiKM/T0uOGw-hdTI/AAAAAAAAA-s/QBcDITiSCEs/s1600/author.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(http://www.matrixar.com/-1MEONG9XUgA/T0uOF8ICEdI/AAAAAAAAA-k/VBwTnA8PXbI/s1600/clock_icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(http://www.matrixar.com/-rg64gjlD5Q4/T0uOD1RiFKI/AAAAAAAAA-c/RF7cQMGyO_I/s1600/tag+icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if>
</b:loop>
</b:if></font>
<span class='post-comment-link' style='Float:right;'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(http://www.matrixar.com/-wGMp3jZ7DpU/T0uOrczut7I/AAAAAAAAA-0/F_BnJ5WS9BI/s1600/comment-icon.png) no-repeat;Padding-left:20px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a>
          </b:if>
        </b:if>
      </span>

How to customize:

If you want to change the icons, just replace the URL addresses above colored with:

• Red - Author
• Green - Date
• Blue - Labels
• Violet - Comment bubble

... with the URL address of your image.

Step 5. Save template... and you're done!2013, By: Seo Master

Seo Master present to you:
Many bloggers might find labels below posts (or post titles) unnecessary, as long as they are already in the blog's sidebar. In this tutorial we will learn how to remove them manually. To hide labels from the blogger post footer (or below post title), you could simply uncheck the "Labels" option, however, sometimes this setting might not work properly in certain templates and then we'll have to remove it manually from our template.

How we going do this?

Hide labels from Blogger

Step 1. Click on the 'Template' option and then go to the 'Edit HTML' button.


To ensure that you won't lose or delete something, it is advisable to make a backup of your current template. To do this, click on the Backup/Restore button on the right top corner:

 ...and then click on the Download full template button:



Step 2. After you clicked on the Edit HTML button, select the 'Expand Widget Templates' option for expanding the CSS code.

Step 3. Now find the following code snippet (press CTRL+F and paste the code in the search box):

<b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>

Step 4. And delete it.

Step 5. Click on the Save Template button. You're done ;)2013, By: Seo Master

Seo Master present to you: WHAT IS BLOGGER NAVBAR?
Blogger has got a Navigation Bar that appears by default at the top of every Blogger-powered blog. This navigation bar can be very useful when you are blogging, but sometimes, it can get in the way. The Blogger navbar is usually hidden in most of the third party templates.

The advantages of it are the following:

- when you click on the B icon, it will take you to blogger.com
- a quick link to your Dashboard and "Sign in /Sign out" dialog
- you can easily search for other blogs
- you can "Flag Blog" (if you consider content of a blog objectionable)
- NextBlog - takes you to a random, recently-updated Blogger blog

The only disadvantage is visual. If you have customized design, Navbar just doesn't fit in.

So how we get rid of it? It is very simple. Just follow the next steps...

Removing The Blogger Navbar:

1. Login to your Blogger account, click on your blog name and navigate to Layout;

2. Look for the Navbar text and click on the Edit link as shown in the picture below:


3. When the pop-up window appears, scroll down and select Off, then click on Save button:


You're done. 2013, By: Seo Master