Création des Logiciels de gestion d'Entreprise, Création et référencement des sites web, Réseaux et Maintenance, Conception
seo How to Create Drop Caps (Big First Letters) in Blogger/Blogspot 2013
Seo Master present to you: Here's another way you can customize your Blog. In this case, your Posts and Comment's first letter. The effect is a large first letter stretching down three or four lines with the text wrapped around. The drop cap letter can also use a different font and can be a different color to the rest of the text. You often see this style in newspapers, literature, magazines. In this tutorial i will show you how to apply automatically Magazine text style in Blogger Posts and Comments. So let's start adding it!
-> Add Drop Caps For Blogger Posts
-> Add Drop Caps For Blogger Comments
Big First Letter for your Blogger / Blogspot Posts
Step 1.
Step 2. Search (CTRL + F) for this piece of code:
Step 3. Just above it, add the following:
Customize:
Color - change the color highlighted in blue with the value of your desired color
Size - to change the letter size, increase/decrease the value highlighted in pink.
Step 4. Now search for this code:
Step 5. Then immediately before and after add the red fragments you see in the example below:
Step 6. Save your template.
Important! If the above code is not working, add one of following codes from this example:
Or
Big First Letter For Blogger/Blogspot Comments
Step 1. Log in to your Blogger account, then go to Design (Layout) >> Edit HTML >> check the "Expand Widget Templates" box
Step 2. Search (CTRL + F) for this piece of code (if you have already added this code, skip step 2 & 3):
Step 3. Add the following code just above ]]></b:skin>:
Customize:
Color - change the color highlighted in blue with the value of your desired color
Size - to change the letter size, increase/decrease the value highlighted in pink.
Step 4. Then Search for this piece of code:
Step 5. Add the red codes before and after <data:comment.body/> as you can see in my example below:
Step 6. Save your Template.
That's it! Now you have a cool drop cap first letter on your blog.
If you have any question, leave a comment below!2013, By: Seo Master
-> Add Drop Caps For Blogger Posts
-> Add Drop Caps For Blogger Comments
Big First Letter for your Blogger / Blogspot Posts
Step 1.
- If you are using the old Blogger interface:
- If you are using the new Blogger interface:
Step 2. Search (CTRL + F) for this piece of code:
]]></b:skin>
Step 3. Just above it, add the following:
.capital:first-letter {
float: left;
display: block;
font-family: Times, serif, Georgia;
font-size: 40px;
color: #000000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}
Customize:
Color - change the color highlighted in blue with the value of your desired color
Size - to change the letter size, increase/decrease the value highlighted in pink.
Step 4. Now search for this code:
<data:post.body/>
Step 5. Then immediately before and after add the red fragments you see in the example below:
<div class='capital'><data:post.body/></div>
Step 6. Save your template.
Important! If the above code is not working, add one of following codes from this example:
<p class="capital"><data:post.body/></p>
Or
<span class="capital"><data:post.body/></span>
Big First Letter For Blogger/Blogspot Comments
Step 1. Log in to your Blogger account, then go to Design (Layout) >> Edit HTML >> check the "Expand Widget Templates" box
Step 2. Search (CTRL + F) for this piece of code (if you have already added this code, skip step 2 & 3):
]]></b:skin>
Step 3. Add the following code just above ]]></b:skin>:
.capital:first-letter {
float: left;
display: block;
font-family: Times, serif, Georgia;
font-size: 40px;
color: #000000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}
Customize:
Color - change the color highlighted in blue with the value of your desired color
Size - to change the letter size, increase/decrease the value highlighted in pink.
Step 4. Then Search for this piece of code:
<data:comment.body/>
Step 5. Add the red codes before and after <data:comment.body/> as you can see in my example below:
<p class="capital"><data:comment.body/></p>
Step 6. Save your Template.
That's it! Now you have a cool drop cap first letter on your blog.
If you have any question, leave a comment below!2013, By: Seo Master
seo Numbered comments on threaded comments for Blogger/Blogspot 2013
Seo Master present to you: In a past tutorial, I've been talking about how you can add numbered comments to your blogger blog and today we'll learn how we can add numbered comments along with comment bubbles on the threaded comments as well.
What the following CSS trick will do for you:
Isn't that great? Well, i'm pretty sure many of you have been waiting for this cool trick. So let's begin applying it for our threaded comments system.
Steps to add bubble comments count
Step 1: Go to Dashboard - Template - Edit HTML (click on Proceed if needed)
...Expand Widget Templates:
Step 2: Search (CTRL + F) for this piece of code:
Step 3: Add the following code just above it:
2013, By: Seo Master
What the following CSS trick will do for you:
- When the general block of comments is initiating (.comments-content) a counter called countcomments activates and starts with an initial value of 1.
- Then, each time the code flow goes through a review of any level, either a principal or a reply comment (.comment-thread li), content will bring us in front (:before) of the body of the comment, the number that is the counter at the time.
- Then is incremented in one unit the counter (counter-increment).
See the screenshot:
Isn't that great? Well, i'm pretty sure many of you have been waiting for this cool trick. So let's begin applying it for our threaded comments system.
Steps to add bubble comments count
Step 1: Go to Dashboard - Template - Edit HTML (click on Proceed if needed)
...Expand Widget Templates:
Step 2: Search (CTRL + F) for this piece of code:
]]></b:skin>
Step 3: Add the following code just above it:
.comment-thread ol {
counter-reset: countcomments;
}
.comment-thread li:before {
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: right;
z-index: 2;
position:relative;
font-size: 22px;
color: #555555;
padding-left:10px;
padding-top:3px;
background: url(http://www.matrixar.com/-f6ByQfbwApQ/T4x_8p1FGpI/AAAAAAAAB2A/WJKf-ybmvQk/s1600/comment+bubble2.png) no-repeat;
margin-top:7px;
margin-left:10px;
width: 50px; /*image-width size*/
height: 48px; /*image-height size*/
}
.comment-thread ol ol {
counter-reset: contrebasse;
}
.comment-thread li li:before {
content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
counter-increment: contrebasse;
float: right;
font-size: 18px;
color: #666666;
}
Note:
If you enjoy reading this blog, please share and subscribe. For any questions, leave a comment below.
- for no bubble icon, remove the code in red (including the blue code)
- to change the comment bubble, replace the code in blue with the URL address of your own icon. If you're not sure what icon you should use, you can find some cool icons in my previous posts (see these tutorials here and here)
- to change the position of comments count, increase/decrease the values (3 & 10) from padding-top and padding-left
- to change the position of comments bubble/icon, change the values (10 & 7) from margin-left and margin-top
If you enjoy reading this blog, please share and subscribe. For any questions, leave a comment below.
seo Add Facemoods Emoticons To Your Blogger Comments 2013
Seo Master present to you: Here are some amazingly funny emoticons compatible with your Blogger comments - also with threaded commenting system! If you want to know how to add them, just follow the next steps:
Step 1.
Go to Dashboard - Template - Edit HTML - Proceed
...and select Expand Widget Template (don't forget to make a backup)
Step 2. Search (using CTRL + F) for this code:
Step 3. Add the below code just above it
(for threaded comments, add the code after):
Step 4. Now search for this piece of code:
Step 5. And add the following code immediately above it:
Step 6. Save the Template. Now, enjoy your comments!
2013, By: Seo Master
Step 1.
Go to Dashboard - Template - Edit HTML - Proceed
...and select Expand Widget Template (don't forget to make a backup)
Step 2. Search (using CTRL + F) for this code:
- For previous commenting system:
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
- For threaded comments:
<div class='post-footer-line post-footer-line-3'>
Step 3. Add the below code just above it
(for threaded comments, add the code after):
<b:if cond='data:blog.pageType == "item"'>
<div style=' width: 450px; text-align: left; border: 1px dashed #0084ce; background: transparent; padding: 10px; color:#000000; font-weight:bold; '>
<img border='0' src='http://www.matrixar.com/-zY65UBxSl6w/T67AajI_U6I/AAAAAAAACIc/fCV19C1627Q/s1600/www.matrixar.com(1).gif'/> :a
 
<img border='0' src='http://www.matrixar.com/-M8aBZtLjGqY/T67Ai2d8eAI/AAAAAAAACIk/PrDerObloAw/s1600/www.matrixar.com+(2).gif'/> :b
 
<img border='0' src='http://www.matrixar.com/-HfIjCWOuxwo/T67Ar7HZiHI/AAAAAAAACIs/RgwvdPP4JSc/s1600/www.matrixar.com(3).gif'/> :c
 
<img border='0' src='http://www.matrixar.com/-98YuuiC8MIc/T67AzJ3Xf0I/AAAAAAAACI0/UtaFpgTb_PM/s1600/www.matrixar.com(4).gif'/> :d
 
<img border='0' src='http://www.matrixar.com/-ikCFMFesIrE/T67BAtTQGhI/AAAAAAAACI8/AisqU7R--Yc/s1600/www.matrixar.com(5).gif'/> :e
 
<img border='0' src='http://www.matrixar.com/-VSY5nbsSEIs/T67BK3G-B6I/AAAAAAAACJE/n_fhk-2Ihqc/s1600/www.matrixar.com(6).gif'/> :f
 
<img border='0' src='http://www.matrixar.com/-e9hytPNLXeY/T67BSj27JJI/AAAAAAAACJM/Rwonrid9oiQ/s1600/www.matrixar.com(7).gif'/> :g
 
<img border='0' src='http://www.matrixar.com/-mT-nqGFvXec/T67BZDPxvxI/AAAAAAAACJU/fgTPtQNxMK8/s1600/www.matrixar.com(8).gif'/> :h
 
<img border='0' src='http://www.matrixar.com/-xcMDAiCizIE/T67BfnBeWSI/AAAAAAAACJc/_OqmXLGhjLg/s1600/www.matrixar.com(9).gif'/> :i
 
<img border='0' src='http://www.matrixar.com/-XJUn74vJTwo/T67BrafHO3I/AAAAAAAACJk/B40nJjxUxNE/s1600/www.matrixar.com(10).gif'/> :j
 
<img border='0' src='http://www.matrixar.com/-JgARtAx7IHo/T67B2Db6LjI/AAAAAAAACJs/U1EWgczqOYY/s1600/www.matrixar.com(11).gif'/> :k
 
<img border='0' src='http://www.matrixar.com/--K1Z6RvN57w/T67CCzlaGcI/AAAAAAAACJ0/iF2-osmFALE/s1600/www.matrixar.com(12).gif'/> :l
 
<img border='0' src='http://www.matrixar.com/-c0DJDg4M2n4/T67CTf-xShI/AAAAAAAACJ8/BqUmJYoDBLI/s1600/www.matrixar.com(13).gif'/> :m
 
<img border='0' src='http://www.matrixar.com/-zrvYy6caFXM/T67CZi7etnI/AAAAAAAACKE/iPJsX_duWjE/s1600/www.matrixar.com(15).gif'/> :n
 
<img border='0' src='http://www.matrixar.com/-F2LUTd1hG_o/T67CfNLnIlI/AAAAAAAACKM/UHuPyigCX24/s1600/www.matrixar.com(16).gif'/> :o
 
<img border='0' src='http://www.matrixar.com/-Vd6U_2eq_Gk/T67CosaWm8I/AAAAAAAACKU/JgnYMS4AJOc/s1600/www.matrixar.com(14).gif'/> :p
 
<img border='0' src='http://www.matrixar.com/-faDYi6E_d6E/T67CybEuj1I/AAAAAAAACKc/nHxSH7KMSwY/s1600/www.matrixar.com(17).gif'/> :q
 
<img border='0' src='http://www.matrixar.com/-2QiwXpJ7gxk/T67C41ItlCI/AAAAAAAACKk/8sba1I9fZOY/s1600/www.matrixar.com(18).gif'/> :r
 
<img border='0' src='http://www.matrixar.com/-KUlSaDVWqW8/T67C_4ITH-I/AAAAAAAACKs/e6N7K2jJvl8/s1600/www.matrixar.com(19).gif'/> :s
 
<img border='0' src='http://www.matrixar.com/-UC_5gE8LgaQ/T67DGU12FBI/AAAAAAAACK0/oHA628PaDhk/s1600/www.matrixar.com(20).gif'/> :t <a href='http://www.matrixar.com/2012/05/add-facemoods-emoticons-to-your-blogger.html' style='color: rgb(30, 122, 183); font-size: x-small;'>Add smileys to Blogger + </a>
</div></b:if>
Step 4. Now search for this piece of code:
</body>
Step 5. And add the following code immediately above it:
- For previous commenting system:
<script type='text/javascript' src="http://helplogger.googlecode.com/svn/trunk/facemood emoticons.js"/>
- For threaded comments:
<script type='text/javascript' src="http://helplogger.googlecode.com/svn/trunk/facemood emoticons threaded.js"/>
Step 6. Save the Template. Now, enjoy your comments!
seo How to Change Default Anonymous Avatar in Blogger Comments 2013
Seo Master present to you: In the last tutorial, I wrote about how you can change avatars size in blogger comments and in this simple tutorial, I will show you how to change or customize default avatar of anonymous commenters or Blogger users with no picture added on their profiles. After Blogger announced new feature of threaded comment, we can still customize it by adding a jQuery plugin to our template and replacing the default anonymous avatar found at this
URL http://img1.blogblog.com/img/anon36.png
and the one for blogger users http://img2.blogblog.com/img/b36-rounded.png
...with our own.
Step 1.
Go to Dashboard - Template - click on the Edit HTML button and then Proceed
...then select Expand Widget Template (don't forget to make a backup)
Step 2. Find (CTRL + F) this code in your template:
Step 3. Add the following code just above it:
Step 4. Save the Template
How to change avatar:
For Anonymous users: Replace the code in red with the url address of your image
For Blogger users: Replace the URL in blue with your own.
You can choose one from these below (copy the url address):
That's it!
If you liked this post, please consider sharing it.
2013, By: Seo Master
URL http://img1.blogblog.com/img/anon36.png
and the one for blogger users http://img2.blogblog.com/img/b36-rounded.png
...with our own.
Step 1.
Go to Dashboard - Template - click on the Edit HTML button and then Proceed
...then select Expand Widget Template (don't forget to make a backup)
Step 2. Find (CTRL + F) this code in your template:
</body>
Step 3. Add the following code just above it:
<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$("img[src='http://img1.blogblog.com/img/anon36.png']")
.attr('src', 'http://www.matrixar.com/-Zphr2YJH_6w/T6ZZE4YeNBI/AAAAAAAACF0/Tyuj8hkOpdc/s1600/default_avatar.gif')
.ssyby('blank')
</script>
<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$("img[src='http://img2.blogblog.com/img/b36-rounded.png']")
.attr('src', 'http://www.matrixar.com/-eKbzORzVaBQ/T6ZXHmdgHqI/AAAAAAAACFs/rVy3T4gxojM/s1600/blogger-user.png')
.ssyby('blank')
</script>
Step 4. Save the Template
How to change avatar:
For Anonymous users: Replace the code in red with the url address of your image
For Blogger users: Replace the URL in blue with your own.
You can choose one from these below (copy the url address):
http://www.matrixar.com/-Zphr2YJH_6w/T6ZZE4YeNBI/AAAAAAAACF0/Tyuj8hkOpdc/s200/default_avatar.gif
http://www.matrixar.com/-p4JvM7rWNG4/T6ZcU5eKqTI/AAAAAAAACGM/K0DB35A5brE/s1600/facebook.gif
http://www.matrixar.com/-5nGzg5T-9qA/T6ZbL9JF0iI/AAAAAAAACF8/TvTnURwsNb0/s1600/anonymous3.png
http://www.matrixar.com/-oivPlkvBNBY/T6ZoNQhfAII/AAAAAAAACGY/3gem5DBmmQ8/s1600/blogger-user.png
That's it!
If you liked this post, please consider sharing it.
2013, By: Seo Master