Update Notice (4 Dec. 2014) - Hi, We have started updating non-working scripts,demos and widget generators and it is almost done still if you find any broken script,demo or W.G then you can report it here. Provided link will be fixed within 24 hours.Thanks and regards.

Thursday, 18 December 2014

Add Snow Falling Effect To Your Blog [Christmas Special]


Snow Falling Effect For Blogger

Howdy friends,
Wish you Mary Christmas in advance. One of the world's biggest festival is coming in next week so lets's prepare for it. Here I am going to show you how to add snow falling effect to your blogger blog, to apply this effect it you just have to add a small snippet of code in your template isn't it easy? So what are we waiting for lets move to the steps :)

How To Add jQuery Snow Effect To Blogger Blog


Follow these simple steps to add snow effect to your blog

  1. Go to Blogger
  2. Go to Template (Before making any changes you should always take a backup of your template)
  3. Go to Edit HTML
  4. Click anywhere on code and press CTRL+F
  5. Find </head>
  6. From codes given below add any one just before it
  7. Done :)
Note - In preview the snow effect may not work but don't worry just save template and visit your blog, it will work like a charm :)

Effect 1


Snow Falling Effect For Blogger

Effect 1 Demo

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//helperblogger.ucoz.com/code/snow-effect1.js"></script>

Note - This effect works with jQuery, if jQuery library is already present on your blog then remove highlighted code.

Effect 2


Snow Falling Effect For Blogger

Effect 2 Demo

<script src="//helperblogger.ucoz.com/code/snow-effect2.js"></script>

Effect 3


Snow Falling Effect For Blogger

Effect 3 Demo

<script src="//helperblogger.ucoz.com/code/snow-effect3.js"></script>

Final Words

I tried my best to keep this as simple as possible, still if you are getting any single problem then feel to comment it below. It will be my pleasure to help you :)
Also you can definitely share this article on your blog, but the only thing you have to do is you have to link back to this article.
Have an amazing day...
Happy Blogging...

Monday, 15 December 2014

Something About Me And Helper Blogger




Hey Friend,
First of all thank you for visiting Helper Blogger, here I will write something about me and Helper Blogger although I don't have any words to describe myself :D

Something About Me


Some basic things first :)
My name is Rahul (hope you already know it :D) and I am from India, currently I am completing my degree in Bachelor of Computer Applications (B.C.A) from one of the top universities in India. I am a part time blogger as I have studies also and I love to create something new and innovative, I like to play with codes and create something new which will useful for bloggers. Apart from blogging Counter Strike 1.6 is my favorite thing, whenever I sit on system, CS and Helper Blogger these are the only things which I do, sometimes I like to watch random videos on youtube also.

About My Blogging Journey


In 2010 I started my first blog on Weebly and after that I moved to Google Blogger.
On blogger I started a blog which was named as btsnts (blogger tricks n tips) after that I switched to custom domain and btsnts renamed as Helper Blogger and that's how all this started :D
helperblogger.com was live on 14/02/12.

The first post was "How to Add A Official Facebook Like Button To Blogger" and it was published on 16/12/2011.

About Helper Blogger


As I have written in my blogging journey before helper blogger this blog was named as btsnts (
blogger tricks n tips) but after switching to custom domain it is renamed as Helper Blogger and helperblogger.com is live since 14 Feb. 2012.
The main aim of Helper Blogger is to provide best blogger widgets,blog template customization tutorials and quality blogger tutorials for new bloggers.

Some Evergreen Posts of Helper Blogger


Some Stats of Helper Blogger


Total Published Posts: 251 (Author Posts - 0)

Total Visits: 2,237,300+

Alexa Rank: 139K as on 15/12/2014 (Improving Rapidly)

Followers On Social Networks: 5100+

My Earnings From Helper Blogger: 0.00 (as on 15/12/2014)

Reason - When Helper Blogger was on it's best level I applied for Google Adsense and Buysellads but both of them refused me :( but at same time some other good advertising companies approved me (I will not publish their names), by using their services even I had put some ads on Helper Blogger but within couple days I removed all ads because for some pennies I can't annoy my visitors by unwanted pop-ups,redirections and other stuff.
I don't feel bad about my earnings or anything bla bla bla, I blog because it's my passion not for making money. If you find anything useful on my blog that's enough for me.
In upcoming days I am planning to go for a paid web hosting service for this blog so that widget scripts and demos which I provide will be hosted on safe network, as soon as I manage money I will buy it.

Message For Bloggers


Although I am not a pro-blogger I want to share few things which I have learnt from my blogging journey.


  • Don't blog just because you want to earn money from it, blog for your passion and make it your habit.
  • In blogging field your personality,country, name, height, weight and any other bull**** things don't matter only your WRITING SKILLS do matter like how you write something and how you explain something to your visitors. Here I remember a quote "In this world writing is the only most destructive weapon than any other weapons".
  • When you are blogging, concentrate on only one topic/niche do not write or post whatever comes in your mind but if you are running a multi-author blog then it is not an issue but always remember that your blog name must be related with your blog content.
  • Finally enjoy whatever you do that's it.


Final Words

Hope this was not too long and thank you for your interest and visiting this page, I really appreciate it.
Your thoughts and suggestions are always welcome.

Have a nice day and Happy Blogging :) 

Thursday, 11 December 2014

Tabbed Social Widget For Blogger



Social widgets on your website allows your readers to follow you on social network without leaving the page.Presenting you another social subscription widget which contains facebook like boxtwitter fanbox, google+ follow badge and pinterest follow button.In this widget I am using javascript tabs plugin. Now let me show you how to add this widget to your blog.

Live Widget Demo


Why you should use this widget
  1. Light weight (No jQuery  included)
  2. It will save a lot of space on your blog as it is tabbed
  3. 4 top social networks included
  4. It will boost you follower count on your social network
  5. Easy to install (No need of copy-paste or changing username)
Things you need before installing this widget
  1. Some basic things you will need
    • Facebook page username
    • Twitter Username
    • Google+ Numeric ID
    • Pinterest username
    • In order to use twitter fanbox widget you have to authorize fanbox widget using your twitter account, to authorize twitter fanbox widget follow below steps (or you can see this post)
    How to install this widget?

    For easy installation process I have created a blogger widget generator for this widget which will allow you to implement this widget without any copy-paste or without touching coding section.
    1. Input right usernames in fields
    2. Click on Generate button
    3. It will generate code code of your widget
    4. Click on Add to Blogger button
    5. Select you blog from dropdown list
    6. Finally save widget 
    7. That's it :) Isn't it easier?? :D
    Widget Generator

    OR

    If you want to add this widget manually then follow below steps
    1. Input right usernames/id's
    2. Copy the code
    3. Login to your blogger account
    4. Go to Layout
    5. Click on Add Widget > HTML/Javascript
    6. Paste code and save it
    7. BoOm!!! Now open your blog...


    Facebook Fanpage Username:
    Twitter Username:
    Google+ Numeric ID:
    Pinterest Username:
    <style>
        /* Tabbed Social Widget By Helper Blogger - helperblogger.com */
        /* CSS Code Start */
        
        ul.tabs {
            padding: 7px 0;
            font-size: 0;
            margin: 0;
            list-style-type: none;
            text-align: left;
        }
        ul.tabs li {
            display: inline;
            margin: 0;
            margin-right: 3px;
            /*distance between tabs*/
        }
        ul.tabs li a {
            font: normal 12px Verdana;
            text-decoration: none;
            position: relative;
            padding: 25px 10px 0px 10px;
            border: 1px solid #CCC;
            border-bottom-color: #B7B7B7;
            color: #000;
            background: #F0F0F0 url(tabbg.gif) 0 0 repeat-x;
            border-radius: 3px 3px 0 0;
            outline: none;
        }
        ul.tabs li a:visited {
            color: #000;
        }
        ul.tabs li a:hover {
            border: 1px solid #B7B7B7;
            background: #F0F0F0 url(http://1.bp.blogspot.com/-XoUjhUwwcsA/VIh-sZtQNbI/AAAAAAAADwk/ECGNslzqmAw/s1600/hb-tabbg.gif) 0 -50px repeat-x;
        }
        ul.tabs li.selected a,
        ul.tabs li.selected a:hover {
            position: relative;
            top: 0px;
            font-weight: bold;
            background: white;
            border: 1px solid #B7B7B7;
            border-bottom-color: white;
        }
        ul.tabs li.selected a:hover {
            text-decoration: none;
        }
        div.tabcontents {
            border: 1px solid #B7B7B7;
            padding: 10px;
            background-color: #FFF;
            border-radius: 0 3px 3px 3px;
            margin-top: -7px;
        }
        /* Tabbed Social Widget By Helper Blogger - helperblogger.com */
        /* End Code Start */
    </style>
    
    
    <script src="http://helperblogger.ucoz.com/code/hb-tabbed-social-widget.js" type="text/javascript"></script>
    <ul class="tabs">
        <li class="selected">
            <a href="#view1">
                <img src="http://1.bp.blogspot.com/-u4mNaIL8dp0/VIXIENew_CI/AAAAAAAADvg/ne3Aol0ASeI/s1600/helperblogger.com-fb.png" height="32" width="32" />
            </a>
        </li>
        <li>
            <a href="#view2">
                <img src="http://2.bp.blogspot.com/-mzuxb3eVkaQ/VIXIE4zdcPI/AAAAAAAADvw/lwTtNBnT4zQ/s1600/helperblogger.com-twitter.png" height="32" width="32" />
            </a>
        </li>
        <li>
            <a href="#view3">
                <img src="http://1.bp.blogspot.com/-rrTnEmJBPeI/VIXIELyFe_I/AAAAAAAADvk/TyNg-Jocujc/s1600/helperblogger.com-gplus.png" height="32" width="32" />
            </a>
        </li>
        <li>
            <a href="#view4">
                <img src="http://4.bp.blogspot.com/-oiG2eSzC0ZY/VIXIEEtXGjI/AAAAAAAADvo/0jbevzq2uog/s1600/helperblogger.com-pinterest.png" height="32" width="32" />
            </a>
        </li>
    </ul>
    <div class="tabcontents">
        <div id="view1">
            <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhelper.blogger&amp;width=285&amp;height=180&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=409936535724253" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:285px; height:180px;" allowtransparency="true"></iframe>
        </div>
        <div id="view2">
            <div id="twitter-box"></div>
            <script>
                var tw_user = 'helperblogger';
                var tw_width = 260;
                var tw_height = 250;
                var no_face = 8;
                (function() {
                    var tw_box = document.createElement('script');
                    tw_box.type = 'text/javascript';
                    tw_box.async = true;
                    tw_box.src = '//helperblogger.ucoz.com/code/hb-twitter.js';
                    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box);
                })();
            </script>
        </div>
        <div id="view3">
            <script src="https://apis.google.com/js/platform.js" async defer></script>
            <div class="g-person" data-width="250" data-href="//plus.google.com/u/0/106527290580119996124" data-layout="landscape" data-rel="author"></div>
        </div>
        <div id="view4">
            <a href="http://pinterest.com/helperblogger/">
                <img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" />
            </a>
        </div>
        <div style="clear: both; text-align: right;">
            <span style="font-size: xx-small;"><a href="http://www.helperblogger.com/" rel="nofollow" target="_blank">Blogger Widgets</a></span>
        </div>
    </div>

    Note
    This widget looks great in siderbar of your blog having width of 290px or more if your using this widget in any section having width less than 290px then you have to edit CSS code of widget, don't worry I will help you in this case as soon as possible :)

    Let me know your thoughts on this widget...
    Regards...

    Sunday, 7 December 2014

    Updated Twitter Fanbox Widget For Blogger



    Hello friends...
    I got a lot of requests from readers regarding this widget and after a small delay I am here with the widget :) Twitter fanbox widget is not a new thing in blogger but the previous version fanbox widget is no longer working so here I am presenting you brand new twitter fanbox widget with widget generator. This widget is similar to facebook fanbox widget which allows your visitors to follow you directly and without leaving the page, it also displays the number of followers and faces of your followers.
    Twitter fanbox is great way to increase number of your followers directly from your website. Credits for this fanbox goes to @matias and widget generators credits goes to.... ofcourse me :) :D
    Now without wasting time lets move to the steps...

    How to add twitter fanbox to blogger??


    In order to use twitter fanbox widget you have to authorize it through your twitter account, follow below steps.
    1. Open twitter (opens in new tab)
    2. Login to your account and come back to this page
    3. Now click here and authorize access to widget
    4. Done
    5. Now use widget generator below to add it to blogger (keep width and height of widget as it is if you want to use it in siderbar)

    Widget Generator


    OR

    If you want to add this widget manually then follow these steps,
    1. Authorize fanbox widget first (skip if already authorized else follow above steps)
    2. Input username,width and height
    3. Copy the code
    4. Login to your blogger account
    5. Go to Layout
    6. Click on Add Widget > HTML/Javascript
    7. Paste code and save it
    8. BoOm!!! Now open your blog...





    Twitter Username:
    Widget Width: px
    Widget Height: px


    <div id="twitter-box">
    </div>
    <script>
      var tw_user = 'helperblogger';
      var tw_width = 250;
      var tw_height = 250;
      var no_face = 8;
      (function() {
        var tw_box = document.createElement('script');
        tw_box.type = 'text/javascript';
        tw_box.async = true;
        tw_box.src = '//helperblogger.ucoz.com/code/hb-twitter.js';(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box);})();
    </script>


    Hope you will like this widget :) If you are getting problem regarding installation of this widget then feel free ask me :)
    Have a nice day...

    Thursday, 4 December 2014

    I am back!!!



    Howdy everyone!!!

    After a long break finally I am back to my passion and my blogging world!!! Due to some personal reasons (exams and other things) I was unable to update Helper Blogger but from today Helper Blogger will be update time to time and that's my promise to all of you.


    From last week,I have already started updating scripts,demos and widget generators and will complete this process in upcoming few days.Still if you find any non-working url(s),scripts,demos or widget generators then you can report them here.


    With new spirit and inspiration I will put my best to take helper blogger at highest level in its niche,the only thing I need from you is your support.Keep your support and blessings with me as always.


    And kindly accept my sincere apologies for my absence or any inconvenience occurred to you in this period. Also I would like to thank my all loyal readers,supporters and my friends who stayed with me in my hard time and for still being with me


    A lot of new widgets,tutorials,menus,sliders are on their way so stay tuned with us :)

    Thanks and Regards,
    Rahul Ippar 

    Links -

     To report broken urls(s),scripts,demos or widget generators - Click Here

    Tuesday, 7 August 2012

    Fancy CSS3 & jQuery Lavalamp Menu For Blogger





    I have shared two jQuery menus on HelperBlogger so far,first one was Smooth jQuery Drop Down Menu Version 1 and second one was Version 2.This time I am sharing an amazing CSS3 & jQuery lavalamp menu and as mentioned in title it works with CSS3 and jQuery.You can use this menu in 6 colors by just changing a word in the HTML code.This menu is designed by Insidesigns and I have bloggerized it to works perfectly with any blogger blog.Now lets go to the tutorial and see how to add this menu to blogger blog.


    Live Menu Demo


    How To Add This Menu TO Blogger?

    For easy understanding I am dividing the tutorial in three parts & they are as below,
    1. Adding Scripts
    2. Adding  Styles
    3. Adding The Menu

    1. Adding Scripts

    1. Go to Blogger Dashboard > Template
    2. Click on Edit HTML
    3. Hit Proceed
    4. Find below code in your template

    </head>

    add below code just above it,(If you have already added a jQuery library to your blog then delete the highlighted code)

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://helperblogger.ucoz.com/code/lavalamp-menu.js" type="text/javascript"></script>

    2. Adding Styles


    Now find below code,

    ]]></b:skin>


    add below CSS code immediately before it,

    /*LAVALAMP MENU BY http://www.helperblogger.com/ START*/
    
    .lavalamp {
        position: relative;
        border: 1px solid #d6d6d6;
        background: #fff;
        padding: 15px;
        -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
     -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
        border-radius : 10px;
        -moz-border-radius : 10px;
        -webkit-border-radius : 10px;
        background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
        background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
     height: 18px;
            font-family: calibri;
    }
    
    .magenta {
     background : rgb(190,64,120);
     background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
     background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
     border: 1px solid #841144;
     
    }
    
    .cyan {
     background : rgb(64,181,197);
     background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
     background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
     border: 1px solid #2f8893;
     
    }
    
    .yellow {
     background : rgb(255,199,79);
     background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
     background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
     border: 1px solid #c08c1f;
     
    }
    
    .orange {
     background : rgb(255,133,64);
     background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
     background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
     border: 1px solid #c04f11;
     
    }
    
    .dark {
     background : rgb(89,89,89);
     background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
     background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
     border: 1px solid #272727;
     
    }
    
    .magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
     color: #fff;
     text-shadow: 0 -1px 0 rgba(0,0,0,.40);
     
    }
    
    .lavalamp a {
        text-decoration: none;
        color: #262626;
        line-height: 20px;
    }
    
    .lavalamp ul {
        margin: 0;
        padding: 0;
        z-index: 300;
        position: absolute;
    }
    
    .lavalamp ul li {
        list-style: none;
        float:left;
    
        text-align: center;
        }
    
    .lavalamp ul li a {
        padding: 0 20px;
        text-align: center;
        }
    
    .floatr {
        position: absolute;
        top: 10px;
        z-index: 50;
        width: 70px;
        height: 30px;
        border-radius : 8px;
        -moz-border-radius : 8px;
        -webkit-border-radius : 8px;
        background : rgba(0,0,0,.20);
        -webkit-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
    }
    
    /*LAVALAMP MENU BY http://www.helperblogger.com/ END*/


    Now save your template.

    3. Adding The Menu


    Now come to Page Layout

    • Now come to Page Layout
    • Click on Add a Gadget (Below Header)
    • Choose HTML/JavaScript
    • Copy and paste below code inside it,

    <div class="lavalamp dark">
     <ul>
      <li class="active"><a href="">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contacts</a></li>
      <li><a href="#">Back to Article</a></li>
      <li><<a href="#">How it Works?</a></li>
     </ul>
     <div class="floatr"></div>
    </div>

    • Replace # with the links
    • Replace Home,About,Blog. etc. with your link text which you want to appear on the menu.
    • If you want to change background color of the menu then replace <div class="lavalamp dark"> with one of the code below.


    <div class="lavalamp">
    <div class="lavalamp magenta">
    <div class="lavalamp cyan">
    <div class="lavalamp yellow">
    <div class="lavalamp orange">
    <div class="lavalamp dark">

    Finally save your widget and you are done.

    I have tried my best to keep this tutorial as easy as possible,if still you are getting any single problem then feel free to share it below via comments,I will try to give reply as soon as time allows.

    Peace and Blessings Buddies :)

    Monday, 6 August 2012

    Breadcrumbs Navigation Widget For Blogger



    Breadcrumb navigation helps your readers to track their position on your blog by showing a breadcrumb trail in this way (Home » Label Name » Post Title).This navigation appears just above of the your post title and the links are a trail from the homepage to post title.There is also option for showing the multiple labels in this navigation i.e. if any post have more than one label then it will show all of them.The original breadcrumbs idea is given by the HOCTRO and Aneesh of bloggerplugins futher worked on it.

    Add Breadcrumbs Navigation To Blogger

    1. Go to Blogger Dashboard > Template
    2. As always download a copy of your template
    3. Click on Edit HTML
    4. Hit Proceed
    5. Now find below code,

    <b:include data='top' name='status-message'/>

    just above it copy and paste below code,

    <b:include data='posts' name='breadcrumb'/>

    Now find below code (if you find two occurrences of this, then locate the second one)

    <b:includable id='main' var='top'>

    just above it paste below code,

    <!-- Breadcrumb Navigation By http://www.helperblogger.com/ -->
    <b:includable id='breadcrumb' var='posts'>
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType == "static_page"'>
    <div class='breadcrumbs'>
     <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pagename/></span>
    </div>
    <b:else/>
    <b:if cond='data:blog.pageType == "item"'>
    <!-- breadcrumb for the post page -->
    <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.labels'>
    <div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
     <span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
     <b:loop values='data:post.labels' var='label'>
     <b:if cond='data:label.isLast == "true"'>
     » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
     </b:if>
     </b:loop>
     » <span><data:post.title/></span>
    </div>
    <b:else/>
    <div class='breadcrumbs'>
     <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span>
    </div>
    </b:if>
    </b:loop>
    <b:else/>
    <b:if cond='data:blog.pageType == "archive"'>
    <!-- breadcrumb for the label archive page and search pages.. -->
    <div class='breadcrumbs'>
     <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pagename/></span>
    </div>
    <b:else/>
    <b:if cond='data:blog.pageType == "index"'>
    <div class='breadcrumbs'>
     <b:if cond='data:blog.pageName == ""'>
     <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
     <b:else/>
     <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pagename/></span>
     </b:if>
    </div>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:includable>
    <!-- Breadcrumb Navigation By http://www.helperblogger.com/ -->

    * This code will only display the last label of the post in the breadcrumb. If you want to display all the labels, then you will have to remove the code in line number 16 and 18.

    Now find below code,

    ]]></b:skin>

    add below CSS code just above it,

    .breadcrumbs {
    background: #F7F7F7;
    float: left;
    border: 1px solid #E6E6E6;
    width: 575px;
    font-size: 11px;
    margin: 10px 10px 10px 10px;
    padding: 5px 10px 5px 10px;
    }

    Now save your changes and you are done.

    Add Numbers To Blogger Threaded Comments


    Today I am sharing a very simple CSS trick which will add numbers to your threaded comments inside a comment bubble.It will add numbers like this way 3,3.a,3.b & 4 here 3,4 are the main comments and 3.a,3.b are the replies,you can see a screenshot below in image.To apply this trick to your threaded comments,you just have to copy and paste some CSS code in your template and you are done.So without waiting anymore lets jump to the tutorial.




    How To Add Numbers To Blogger Threaded Comments?


    1. Go to Blogger Dashboard > Template
    2. Download a copy of your template
    3. Click On Edit HTML
    4. Hit Proceed
    5. Now search for below code,

    ]]></b:skin>

    add below code just above it,

    .comment-thread ol {
        counter-reset: countcomments;
    }
    
    .comment-thread li:before {
        content: counter(countcomments,decimal);
        counter-increment: countcomments;
        float: right;
        font-size: 22px;
        color: #555555;
        padding-left: 10px;
        padding-top: 3px;
        background: url(http://3.bp.blogspot.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;
    }

    Now save your template and you are done.

    Customizations


    • Line Number 11 - Edit it to adjust the position of text(number) from left size
    • Line Number 12 - By editing the value you can adjust the position of text(number) inside bubble from top.
    • Line Number 13 - If you want to change the bubble image then simply replace image URL with yours.
    • Line Number 14 - By editing this value you can adjust the position of bubble from top
    • Line Number 15 - Increase or decrease the value as per your requirements

    Below I am sharing some comment bubbles,right click on any bubble,select Copy Image URL and replace it with above comment bubble URL in line number 13.


    how to blog    blogger blogspot    blogspot blogger, how to blog    widget blogger blogspot    blogs, how to blog     blogspot or blogger, how to blog    tutorials, how to    comments, how to, blogspot blogger    new comment, how to blog    blog design, blogger blogger.com                   bubble comment count, bubble blogger posts   blogger comments, comment count    blogger blogspot, blogger comments   blogger bubble comment count   comments in blogger titles    blogger tips, blogger tricks   blogger widgets, bubble comment count    bubble comment count    Bubble Comment Count    Bubble Comment Count, blogger blogspot                                


    I hope you enjoyed this post.If you are facing any king of problem then feel free to share it with us.Credits for this trick and comment bubbles goes to Helplogger if you want to share this trick with your readers then you have to add a link to this blog.