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

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

drop caps, blogger blogspot, tutorials

-> Add Drop Caps For Blogger Comments

drop caps, first letter, blogger

Big First Letter for your Blogger / Blogspot Posts

Step 1.
  •  If you are using the old Blogger interface:
Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)
  • If you are using the new Blogger interface:
Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)

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:
  1. When the general block of comments is initiating (.comments-content) a counter called countcomments activates and starts with an initial value of 1. 
  2. 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.
  3. Then is incremented in one unit the counter (counter-increment).
See the screenshot:
count comments, comment bubble, forum, blogger

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:
    • 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
    Step 4: Now Save the Template and you're done!

    If you enjoy reading this blog, please share and subscribe. For any questions, leave a comment below.
    2013, By: Seo Master

    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:

    emoticons, smileys, blogger, tricks

    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
      &#160;
      <img border='0' src='http://www.matrixar.com/-M8aBZtLjGqY/T67Ai2d8eAI/AAAAAAAACIk/PrDerObloAw/s1600/www.matrixar.com+(2).gif'/> :b
      &#160;
      <img border='0' src='http://www.matrixar.com/-HfIjCWOuxwo/T67Ar7HZiHI/AAAAAAAACIs/RgwvdPP4JSc/s1600/www.matrixar.com(3).gif'/> :c
      &#160;
      <img border='0' src='http://www.matrixar.com/-98YuuiC8MIc/T67AzJ3Xf0I/AAAAAAAACI0/UtaFpgTb_PM/s1600/www.matrixar.com(4).gif'/> :d
      &#160;
      <img border='0' src='http://www.matrixar.com/-ikCFMFesIrE/T67BAtTQGhI/AAAAAAAACI8/AisqU7R--Yc/s1600/www.matrixar.com(5).gif'/> :e
      &#160;
      <img border='0' src='http://www.matrixar.com/-VSY5nbsSEIs/T67BK3G-B6I/AAAAAAAACJE/n_fhk-2Ihqc/s1600/www.matrixar.com(6).gif'/> :f
      &#160;
      <img border='0' src='http://www.matrixar.com/-e9hytPNLXeY/T67BSj27JJI/AAAAAAAACJM/Rwonrid9oiQ/s1600/www.matrixar.com(7).gif'/> :g
      &#160;
      <img border='0' src='http://www.matrixar.com/-mT-nqGFvXec/T67BZDPxvxI/AAAAAAAACJU/fgTPtQNxMK8/s1600/www.matrixar.com(8).gif'/> :h
      &#160;
      <img border='0' src='http://www.matrixar.com/-xcMDAiCizIE/T67BfnBeWSI/AAAAAAAACJc/_OqmXLGhjLg/s1600/www.matrixar.com(9).gif'/> :i
      &#160;
      <img border='0' src='http://www.matrixar.com/-XJUn74vJTwo/T67BrafHO3I/AAAAAAAACJk/B40nJjxUxNE/s1600/www.matrixar.com(10).gif'/> :j
      &#160;
      <img border='0' src='http://www.matrixar.com/-JgARtAx7IHo/T67B2Db6LjI/AAAAAAAACJs/U1EWgczqOYY/s1600/www.matrixar.com(11).gif'/> :k
      &#160;
      <img border='0' src='http://www.matrixar.com/--K1Z6RvN57w/T67CCzlaGcI/AAAAAAAACJ0/iF2-osmFALE/s1600/www.matrixar.com(12).gif'/> :l
      &#160;
      <img border='0' src='http://www.matrixar.com/-c0DJDg4M2n4/T67CTf-xShI/AAAAAAAACJ8/BqUmJYoDBLI/s1600/www.matrixar.com(13).gif'/> :m
      &#160;
      <img border='0' src='http://www.matrixar.com/-zrvYy6caFXM/T67CZi7etnI/AAAAAAAACKE/iPJsX_duWjE/s1600/www.matrixar.com(15).gif'/> :n
      &#160;
      <img border='0' src='http://www.matrixar.com/-F2LUTd1hG_o/T67CfNLnIlI/AAAAAAAACKM/UHuPyigCX24/s1600/www.matrixar.com(16).gif'/> :o
      &#160;
      <img border='0' src='http://www.matrixar.com/-Vd6U_2eq_Gk/T67CosaWm8I/AAAAAAAACKU/JgnYMS4AJOc/s1600/www.matrixar.com(14).gif'/> :p
      &#160;
      <img border='0' src='http://www.matrixar.com/-faDYi6E_d6E/T67CybEuj1I/AAAAAAAACKc/nHxSH7KMSwY/s1600/www.matrixar.com(17).gif'/> :q
      &#160;
      <img border='0' src='http://www.matrixar.com/-2QiwXpJ7gxk/T67C41ItlCI/AAAAAAAACKk/8sba1I9fZOY/s1600/www.matrixar.com(18).gif'/> :r
      &#160;
      <img border='0' src='http://www.matrixar.com/-KUlSaDVWqW8/T67C_4ITH-I/AAAAAAAACKs/e6N7K2jJvl8/s1600/www.matrixar.com(19).gif'/> :s
      &#160;
      <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!

      2013, By: Seo Master

      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.

      anonymous, default avatar, blogger blogspot

      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>
        $(&quot;img[src=&#39;http://img1.blogblog.com/img/anon36.png&#39;]&quot;)
        .attr(&#39;src&#39;, &#39;http://www.matrixar.com/-Zphr2YJH_6w/T6ZZE4YeNBI/AAAAAAAACF0/Tyuj8hkOpdc/s1600/default_avatar.gif&#39;)
        .ssyby(&#39;blank&#39;)
        </script>
        <script src='http://code.jquery.com/jquery-latest.js'/>
        <script>
        $(&quot;img[src=&#39;http://img2.blogblog.com/img/b36-rounded.png&#39;]&quot;)
        .attr(&#39;src&#39;, &#39;http://www.matrixar.com/-eKbzORzVaBQ/T6ZXHmdgHqI/AAAAAAAACFs/rVy3T4gxojM/s1600/blogger-user.png&#39;)
        .ssyby(&#39;blank&#39;)
        </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

        seo How To Change Avatar Size In Blogger Comments 2013

        Seo Master present to you: This simple trick will help you to modify the avatars size in Blogger comments. For changing the style and size of avatars, we have to add some CSS codes in our Blogger template. So, let's begin:


        Step 1.

        Go to Dashboard - Template - click on the Edit HTML button - Proceed


        ...now select Expand Widget Template (I recommend to make a backup first)

          Step 2. Find (CTRL + F) this code in your template:

          ]]></b:skin>

          Step 3. Copy and paste one of the following codes just above it:

          [Works in Blogger threaded comment system]

          .comments .avatar-image-container{
          background-color: rgb(34, 34, 34);
          border:1px solid #ccc;
          margin: 0px 10px 0px 0px;
          padding: 0px 0px 0px 0px;
          width: 64px;
          max-height: 64px;
          }
          .comments .avatar-image-container img{
          margin: 0px 0px 0px 0px;
          padding: 0px 0px 0px 0px;
          max-width: 64px;
          height: 64px;
          }

          [for old blogger commenting system]

          .avatar-image-container{
          border:1px solid #d6d6d6;
          margin-left: -30px;
          -moz-border-radius: 4px;
          background:#fff;
          height:70px;
          min-height: 70px;
          width:70px;
          min-width:70px;
          }
          .avatar-image-container img {
          background: url(http://www.matrixar.com/-gcjQ0sgWw7M/T6WpkK4S5AI/AAAAAAAACEQ/hYAWpCPl6P0/s200/anonymous.jpg);
          background-repeat: no-repeat;
          background-position: center;
          background-size: 100%;
          width:70px;
          min-width:70px;
          height:70px;
          min-height:70px;
          }

          Note: If you want bigger/smaller avatars, change the values in red. To change the anonymous avatar, replace the URL address in blue with your own. (works only for previous commenting system)

          Step 4. Save the Template.

          Now view your blog to see the results. Hope you enjoy!


          2013, By: Seo Master

          seo How to Add Emoticons/Smileys in Blogger Comments 2013

          Seo Master present to you: Emoticons/Smileys are a great way of making discussions more interesting and fun, so it's a pity that Blogger don't support them. This tutorial will show you some simple steps on how to add some very cute emoticons called Kolobok to your Blogger/Blogspot comments, so that you and your blog visitors will be able to have an enjoyable time together.

          Now available for threaded commenting system too!
          emoticons in blogger, kolobok smileys, threaded comments



          How To Add Kolobok Smileys In Blogger Comments

          Step 1. Go to Dashboard - Template - Edit HTML - Proceed


           Step 2. Expand Widget Template (make a backup)


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

            </body>

            Step 4. Copy and paste just above it, this code:

            • For previous commenting system (comments without reply option)
            <!--kolobok-smileys-->
            <script src='http://helplogger.googlecode.com/svn/trunk/[www.matrixar.com]smileys.js' type='text/javascript'/><noscript><a href='http://www.matrixar.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html' target='_blank'><span style='font-size: x-small;'>Add emoticons</span></a></noscript>
            <!--kolobok-smileys-->

            • For threaded commenting system (comments with reply option)
            <script src='https://helplogger.googlecode.com/svn/trunk/kolobok threaded.js' type='text/javascript'/>

            Note: ignore steps 5-8 if you are using threaded comments!

            Step 5. Now find this code snippet:

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

            Step 6. Paste the following code just above it:

            <div id='smileys'>

            Step 7. Find the following code (look carefully, it should be somewhere below the code from step 5)

            </b:loop>

            Step 8. Paste the following tag just after it:

            </div>

            Step 9. Now find this code:

            • For previous commenting system:
            <data:blogTeamBlogMessage/>

            Note: if you'll find it like 4 times, stop to the 2nd one!

            • For threaded commenting system:
            <div class='post-footer-line post-footer-line-3'>

            Step 10. And add this code just after it:

            <b:if cond='data:blog.pageType == &quot;item&quot;'><script type='text/javascript'>
            //<![CDATA[
            function moreSmilies() {
                document.getElementById('smiley-more').style.display = 'inline';
                document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()"><div style="font-size:small; font-weight:bold;color:#000000;">Hide Emoticons /<a href="http://www.matrixar.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html">Add Emoticons</div></a></span>';
            }
            function lessSmilies() {
                document.getElementById('smiley-more').style.display = 'none';
                document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()"><div style="font-size:small; font-weight:bold;">Show Emoticons</div></a>';
            }
            //]]>
            </script>
            <div class='emoticons'>
            <span id='smiley-more' style='display: none;'>
            <img src='http://www.matrixar.com/-k4ujC23cSgI/UTIq7eUkmuI/AAAAAAAABAQ/YUNL9_RhDB0/s1600/smile3.gif'/>:)
            <img src='http://www.matrixar.com/-XSBJ7zBZKZs/UTIrT-hMYyI/AAAAAAAABAY/6B26_8Ttwj4/s1600/sad.gif'/>:(
            <img src='http://www.matrixar.com/-Ph2wxEvy2mc/UTIr8-fdHjI/AAAAAAAABAo/3use2PsPhMA/s1600/taunt.gif'/>:))
            <img src='http://www.matrixar.com/-pcE-4ot-gjk/UTIsLRff6SI/AAAAAAAABAw/LYvZ8__88Ak/s1600/cry2.gif'/>:((
            <img src='http://www.matrixar.com/-lNNTReQVc0A/UTIrjDhVLAI/AAAAAAAABAg/BsVMYnr54pI/s1600/rofl.gif'/>=))
            <img src='http://www.matrixar.com/-8C5UH12mxf0/UTIzmsxczDI/AAAAAAAABDA/2seHdqLVQ6Q/s1600/suicide.gif'/>=D&gt;
            <img src='http://www.matrixar.com/-lhTywmMZ58E/UTI04kjJ3WI/AAAAAAAABDY/qNgtijEr_E8/s1600/biggrin.gif'/>:D
            <img src='http://www.matrixar.com/-gG_Wn6D6Ux4/UTIyqFyfKbI/AAAAAAAABCo/qEmU8s8ndVI/s1600/tongue.gif'/>:P
            <img src='http://www.matrixar.com/-Zb5g0OWHx4c/UTIsuPLt90I/AAAAAAAABA4/cmP1ltBmVF0/s1600/shock.gif'/>:-O
            <img src='http://www.matrixar.com/-TSIzPWeGBwk/UTI0S-nw5tI/AAAAAAAABDQ/xyHPCFZH4fI/s1600/think.gif'/>:-?
            <img src='http://www.matrixar.com/-qpnD1BYon5w/UTI0AIeKX6I/AAAAAAAABDI/HsllV7NYTqk/s1600/unsure.gif'/>:-SS
            <img src='http://www.matrixar.com/-SpvC8mHHwhg/UTIzQMUVGKI/AAAAAAAABCw/_NKKVyQtulk/s1600/flowers1.gif'/>:-f
            <img src='http://www.matrixar.com/-qlyn_deOhFw/UTIzY8aRgqI/AAAAAAAABC4/pfSojMdD33s/s1600/doh.gif'/>d(
            <img src='http://www.matrixar.com/-H4e_O5BFVP8/UTIumwhVmKI/AAAAAAAABBw/SKhY4DDxKkk/s1600/air_kiss.gif'/>:-*
            <img src='http://www.matrixar.com/-h4yNmhdKUVU/UTIwUKpvVOI/AAAAAAAABCY/B0FEZVRGHe4/s1600/threaten.gif'/>b-(
            <img src='http://www.matrixar.com/-veVoDPEc7I4/UTIv9wCS0jI/AAAAAAAABCQ/4c5FgCHAiU4/s1600/help.gif'/>h-(
            <img src='http://www.matrixar.com/-_ttAcnBbAaw/UTIvKtxfWvI/AAAAAAAABCA/X2JLEShhOQU/s1600/good.gif'/>g-)
            <img src='http://www.matrixar.com/--o9jZ1nMcec/UTIuyCBgS_I/AAAAAAAABB4/Jf03oz5yKrU/s1600/beee.gif'/>5-p
            <img src='http://www.matrixar.com/-6-BTJcVpwY0/UTIvhF_PL-I/AAAAAAAABCI/SS-LDADTSls/s1600/yahoo.gif'/>y-)
            <img src='http://www.matrixar.com/-khAwhIYbgvQ/UTItD_PfNyI/AAAAAAAABBI/HMpRMQh5Uak/s1600/crazy.gif'/>c-)
            <img src='http://www.matrixar.com/-fsTXhXl10Gg/UTIs7Ll01AI/AAAAAAAABBA/QkWgWAAFG3g/s1600/spiteful.gif'/>s-)
            <img src='http://www.matrixar.com/-CIuUuJeuyGI/UTIueHgTxOI/AAAAAAAABBo/BzXkTEEDlhw/s1600/drinks.gif'/>d-)
            <img src='http://www.matrixar.com/-Mc5ed3Ymk7s/UTI1GIXMAMI/AAAAAAAABDg/PyDOfoXgsl0/s1600/cheer.gif'/>w-)
            <img src='http://www.matrixar.com/-JOgaMRI61Jk/UTItsGc5KdI/AAAAAAAABBY/6UDCabfZQbg/s1600/hi+2.gif'/>:-h
            <img src='http://www.matrixar.com/-wmOB_Z6LPp4/UTIt9FhZiwI/AAAAAAAABBg/7VoefgIQjEs/s1600/give_heart.gif'/>:X
            </span>
            <span id='smiley-toggle'><a href='javascript:moreSmilies()'><div style='font-size:small;font-weight:bold;'>Show Emoticons <img src='http://www.matrixar.com/-k4ujC23cSgI/UTIq7eUkmuI/AAAAAAAABAQ/YUNL9_RhDB0/s1600/smile3.gif'/></div></a></span>
            </div></b:if>

            Note: Ignore steps 11-12 if you are using threaded comments!

            Step 11. Finally, find this code

            ]]></b:skin>

            Step 12. Add this one below, just above ]]></b:skin>

            .emoticons {-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;text-align: left;width:400px;}
            .emoticons a, .emoticons a:hover {margin-left: 20px;text-decoration:none;}

            Note: if you want to change the size of the emoticon container, edit the red code.

            Step 13. Save the Template and you're done. Enjoy!

            If you have any problem and need help, please leave a comment below.
            2013, By: Seo Master

            seo Bringing Google+ Comments to Blogger 2013

            Seo Master present to you:
            Google+ Comments

            Bringing Google+ Comments to Blogger


            Google introduced a new comments system for blogger.The feature isn't on by default. but once activated in the Blogger Dashboard, Google+ comments created about a blog post hosted by Blogger can seem aboard comments created directly on the blog without any extra effort from the blog owner.

            About Google+ Comments


            Google+ Comments is another to the default commenting system on Blogger, out there to blog authors who have upgraded their Blogger profile to Google+. Google+ Comments allows you to bring the following conversations together in one place, right under your blog post:

            Comments created on your Blogger blog post
            Comments on the blog post that you've shared to Google+
            Shared content on Google+ that links to your blog post
            Readers will need a Google+ page or profile to comment on your blog.

            Bringing Google+ Comments to Blogger

            Features of Google+ Comments


            Google+ Comments look similar to traditional Blogger comments, but have some important differences. For example:

            • When you leave a comment on a blog, you'll see the option, checked by default, to also share that comment to Google+.
            • Google+ posts that link to blog posts will show up as a comment underneath those blog posts
            • If original comment is shared to Google+, replies to the comment on the blog will show up in Google+ and vice versa, but only to the people that the original comment was shared with
            • If a comment is not shared with the blog author, the blog author will not be able to see the comment in either location
            • As the author of a post, you’ll receive Google+ notifications when readers comment on or share your blog post.

            How to Activate and Apply Google+ Comments on Blogger.

            1. First need a google plus account if you have not already then click here.
            2. Connect your default blogger profile to google plus profile? How to Transfer Blogger Profile to Google Profile
            3. Go to Blogger Dashboard
            4. Select the tab  Google+ and select the Use Google+ Comments on this blogv ,see the below picture:
            Google+ comments enable

            Happy commenting!

            2013, By: Seo Master

            seo How to number comments in Blogger/BlogSpot 2013

            Seo Master present to you: This Blogger hack will show you how to add comment count inside a speech bubble, so that you & your readers can use the numbers to mention or point to a particular comment on any of your posts and besides this, it could as well improve the look and feel of your blog.

            Note: This works with the previous blogger commenting system, so if you want to add this hack, you should remove first the Blogger threaded comments. Learn here How to remove Blogger threaded comments

            UPDATE! Now you can add comment bubble in your threaded comments too. Read this tutorial:
            How to Add Numbered Comments In Threaded Comments
            blogger blogspot, tricks

            How to add numbered comments on our Blogger/Blogspot blog
            how to blog, blogspot blogger

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


             Step 2. Select "Expand Widget Template" (make a backup)

              Step 3. Now find (CTRL+F) the following code in your template:

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

              Step 4. Immediately above/before it, paste this code:

              <script type='text/javascript'>var CommentsCounter=0;</script>

              Step 5. Find this code:

              <data:commentPostedByMsg/>

              Step 6. And immediately below/after it, copy and paste this:

              <!--comments-count-starts-->
              <span class='comments-number'>
              <a expr:href='data:comment.url' title='Comment Link'>
              <script type='text/javascript'>
              CommentsCounter=CommentsCounter+1;
              document.write(CommentsCounter)
              </script>
              </a>
              </span>
              <!--comments-count-stops-->

              Step 7. Find (CTRL+F) this tag in the template:

              </head>

              Step 8. Paste this code just above/before it:

              <!-- comments-count-starts-->
              <style type="text/css">
              .comments-number a:link, .comments-number a:visited {
              color: black !important;
              text-decoration: none !important;
              background: url(http://www.matrixar.com/-zrPssaxSG2E/T47v-XB1EWI/AAAAAAAAB8E/uUz8RiJnW2U/s1600/comment+bubble+1.png) no-repeat;
              width: 50px; /*image-width size*/
              height: 48px; /*image-height size*/
              float: right;
              display: block;
              margin-right: 5px;
              margin-top: -15px; /*comments-counter position*/
              text-align: center;
              font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
              font-size: 15px;
              font-weight: normal;
              }
              .comments-number a:hover, .comments-number a:active {
              color: #1BA0E1 !important;
              text-decoration: none !important;
              }
              </style>
              <!-- comments-count-stops-http://www.matrixar.com-->

              Note:
              • To change the comment bubble, replace the red text from above with your own address
              • To change the color of the numbers, replace the blue text with the hex value of your color

              Comment Bubbles 

              To choose a comment bubble, right-click on the image and select "Copy Image Address/Location":


              how to blogblogger blogspotblogspot blogger, how to blogwidget blogger blogspotblogs, how to blogblogspot or blogger, how to blogtutorials, how tocomments, how to, blogspot bloggernew comment, how to blogblog design, bloggerblogger.com


              IMPORTANT: You could use any image instead of the one linked in the code above (STEP 8) but after that, you should modify the size values (width and height), so that the numbers inside the bubble to be correctly adjusted.

              Step 9. Save the template... and enjoy your comments :]

              You might also be interested in this tutorial from the same category:
              How to Add a Comment Bubble to Blogger Post Titles.


              2013, By: Seo Master

              seo How To Add Disqus Comment System in Blogger Blog & Website? 2013

              Seo Master present to you:
              Disqus is a comments platform
              Disqus is the new comment management system, most of bloggers and website owners used mostly.it is currently serving over 750,000 websites, In this article i am going to tell you about how to add Disqus comments system with a few fast steps, you'll upgrade your recent comment system with a new way to interact your guests.


              Normally you don’t need to add the other comments system, because each website platform has their own discussion platform.But they're recent system. And if you're very little uninterested in blogger’s built-in system then you'll add Disqus comment system. This comment system can create your blog more professional. most important factor is, If you add disqus then comments are indexable by search engine therefore it's SEO Friendly. this system, not just the for blogger you can also add this system to Wordpress, Blogger, Tumblr, Universal Code,  Squarespace, TypePad, MovableType, Drupal and Joomla.

              Why should we use.?
              There are many good features with Disqus comment system after we comparison it with Blogger default comment system.
              • Realtime comment system
              • Notification and reply system
              • Inline media embedding
              • Mobile commenting
              • Social integration
              • The Community Box
              • Liking and sharing
              • Moderation tools
              • Spam-Be-Gone
              • Mobile apps
              • Blacklists and whitelists
              • Import and export
              • International languages
              • SEO-friendly and local sync
              • Theme customization
              • Tweets and reactions
              • Profile management
              • Activity streams
              • Connected communities
              Follow the steps.
              1. At first you need to register a free account for your website on Disqus website. Go to disqus.com and click "Get this on your site" fill registration form, Give your Site URL, Site name, Site Short-name  Create your Disqus account by giving username, password and email address.(Do not forget to verify your identity though email verification) Then click Continue.

              DISQUS - Register site
              2. After pressing the Continue button, a new window will appear, which will ask you to select a Platform. Just Select "Your Platform(Blogger, WordPress)" from the list and proceed to the next step.

              Choose a platform - Settings - DISQUS

              3. Next click “Add disqusname to my Platform (WordPress,blogger, type-pad & other) site”
              follow given instructions & continue all steps

              4. Your comments system is ready and look like below screen short..

              Blogger Known DISQUS comments system

              2013, By: Seo Master

              seo How to change Blogger "Post A Comment" Message 2013

              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>

              Step 6. Save Your Template.


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