How to Add Automatic Read More TRICK for Blogger Blogs

Posted by Unknown

How to Add Automatic Read More HACK for Blogger Blogs
Read More button or jump link is used cut the full article into two pieces and First piece of Text and images display in the Homepage. When you create a post may be it includes long snippets and images that are too long, then what should you do? You have to add <!-- more --> or click on Jump link to separate. Here I am going to show you how to Automatically put read more to Blogger posts. In this Automatic read more hack everything is automatic and you need not bother about the too long length of posts.Let us see how to do it..


 Features are
  • You can also limit the length of post
  • Set the size of Image, height and width separately
  • Disable Image
  • Sign In to Blogger Dashboard
  • Go to Template -> Edit HTML
  • Find </head>
  • copy the following code above it
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 400;  /* Summary length if no image*/
summary_img = 300; /* Summary length with image*/
img_thumb_height = 200; /*Image Height*/
img_thumb_width = 200; /*Image Width*/
</script>
<script type='text/javascript' src='http://netoopscodes.googlecode.com/svn/branches/Js%20files/auto-readmore-blogger.js' ></script>
If you add CSS codes to style jump link in your blog, then See the Update
  • Then Find (Ctrl+F)  <data:post.body/> and replace it with the following code
  • If you find more than one <data:post.body/> replace all occurrences.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more...</a></span><a href="http://fe-blogger.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN36t6euPvndc3S9MEgljTJuhwJrG4kjsw2nAe-uQSj3w2nJ_FLWh8EgczpyXgTugIia1l44KL3zZImMLlnMno9m0uIs9nRMHbYkLq7SF1PtrqTIpLJgKkgAKWS3YqkinGRtUy0ikH71s/s1600/1x1juice.png"></a>
</b:if>
</b:if>
  •  Save Template.

UPDATE [17.08.2013]

     In the above code, only a simple link to the post shows in the homepage. If you want to style that link or did you add css codes to style the jumplink, then add the following code instead of the above.
    • Then Find (Ctrl+F)  <data:post.body/> and replace it with the following code
    • If you find more than one <data:post.body/> replace all occurrences.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
    <b:else/>
    <div expr:id='&quot;summary&quot; + data:post.id'>
    <data:post.body/>
    </div>
    <script type='text/javascript'>
    createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
    </script>
    <div style='clear: both;'/>
    <div class='jump-link'><a expr:href='data:post.url' expr:title='data:post.title' >Read more...</a></div><a href="http://fe-blogger.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN36t6euPvndc3S9MEgljTJuhwJrG4kjsw2nAe-uQSj3w2nJ_FLWh8EgczpyXgTugIia1l44KL3zZImMLlnMno9m0uIs9nRMHbYkLq7SF1PtrqTIpLJgKkgAKWS3YqkinGRtUy0ikH71s/s1600/1x1juice.png"></a>
    </b:if>
    </b:if>

    Congratulations, You have done the Hack to your Blog. I think you enjoyed this article.
    More aboutHow to Add Automatic Read More TRICK for Blogger Blogs

    Awesome Recent Comments Widget for Blogger, Feed Comments

    Posted by Unknown

    Awesome Recent Comments Widget for Blogger, Feed Comments
    Recent Comments Widget can be used to display the latest Comments in the blog. Comments are the best way to make a good contact with your blog visitors and followers. By default Blogger added commenting System to Blogger blogs. Recent Comments Widget will inspire your blog visitors to post a comment on your Blog. If you don't like to read full about this widget or Are you hurry to add this widget to you blog go to "How to add Recent Comments Widget to Blogger Blog".


    There are many changes made to Blogger Commenting System. At earlier time the basic commenting System was used then it changed to Threaded Comments (Others can reply to one comment), it can be change back to basic blogger Commenting System. All Blogger blogs are using Threaded Comments System. Now another type of commenting System was introduced in Blogger Blogs, Google+ commenting System.
    The Recent Comments Widget also inspire your blog visitors to post a comment. Your visitors may be interested to see their names in other blogs. If their comment is good ,it will catch other visitors eyes and they also may have wish to do comment.
    The Recent Comment Widget shows the Commentators name with Profile link followed by the Post name and followed by their Comment. This Widget can be added to Sidebar or Footer or anywhere which catches the visitors eyes. This Widget was coded using JavaScript and you can also change the style of Widget according to your template.

    Wish to see Demo?
    Recent Comments Widget

    How to Add Recent Comments Widget?

    • Sign In to Blogger Dashboard
    • Select Layout -> Click on Add a Gadget
    • Take HTML/Javascript from the list
    • Give the Title and Copy the below code to it and Save
    <script style=text/javascript src="http://netoopscodes.googlecode.com/svn/branches/Js files/recent_comments_fe-blogger_min.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://fe-blogger.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script>
    <a style="display:none" href=http://fe-blogger.blogspot.com>Recent Comments Widget</a><style type=text/css>
    .rcw-comments a {text-transform: capitalize;}
    .rcw-comments {border-bottom: 1px solid #666; padding-top: 6px!important; padding-bottom: 6px!important;}

    </style>

    • Change the RED highlighted with your blog name
    If you want different Styles for this Widget, Please visit again I will post soon.

    Another Way to add Recent Comments Widget

    • Go to Layout -> Click on Add a Gadget
    • Select Feed from the list and give the following URL
    http://fe-blogger.blogspot.com/feeds/comments/default
    • Change the RED marked portion with your Blog URL
    A Window will appear and shows demo,there are some options, you can select the options for adding comment date, commenter name etc.. Using this method you have only limited options.
    • Click Save
    Congratulations you have done..
    I hope this article will help you and you enjoyed this article if so, Please Like and Share .


    More aboutAwesome Recent Comments Widget for Blogger, Feed Comments

    Add Google type Stylish Breadcrumbs to Blogger Blog?

    Posted by Unknown

    google type breadcrumbs for blogger
    The Breadcrumbs or breadcrumb trail is used as an aid for navigation. The breadcrumbs allows users to keep track of their location and to understand where they are. In Blogger, the breadcrumbs are the way to realize the category of an article/post. I think you had seen this in e-commerce sites like ebay,myntra,yebhi. They used breadcrumbs to identify a product is in which category. Its just like a Home link followed by the category belongs and then the current location/current post.




    Demo shows in top of this post Click Here

    • Sign in to your Blogger Dashboard
    • Go to Template -> Edit HTML
    • Step 1: Find (ctrl+F) the following code
    <b:include data='top' name='status-message'/>
    • copy the following code after it
    <b:include data='posts' name='breadcrumb'/>
    • Step2:  Find the following code
    <b:includable id='main' var='top'>
    • copy the following code above it
    <b:includable id='breadcrumb' var='posts'>
                                    <b:if cond='data:blog.homepageUrl == data:blog.url'>
                                <!-- No breadcrumb on home page -->
                         <b:else/>
              <b:if cond='data:blog.pageType == &quot;item&quot;'><!-- breadcrumb for the post page --><a href="http://www.fe-blogger.blogspot.com"></a><p class='breadcrumbs'> <span class='post-navigation'><a expr:href='data:blog.homepageUrl' rel='tag'> Home </a>
                                            <b:loop values='data:posts' var='post'>
                                              <b:if cond='data:post.labels'>
                                                <b:loop values='data:post.labels' var='label'>
                                                  <b:if cond='data:label.isLast == &quot;true&quot;'>
                                                   
                                                    <a expr:href='data:label.url' rel='tag'>
                                                      <data:label.name/>
                                                    </a>
                                                  </b:if>
                                                </b:loop>
                                                <b:else/>
                                                Unlabelled
                                              </b:if>
                                             
                                              <span>
                                                <data:post.title/>
                                              </span>
                                            </b:loop>
                                          </span>
                                        </p>
                                        <b:else/>
                                        <b:if cond='data:blog.pageType == &quot;archive&quot;'>
                                          <!-- breadcrumb for the label archive page and search pages.. -->
                                          <p class='breadcrumbs'>
                                            <span class='post-labels post-navigation'>
                                              <a expr:href='data:blog.homepageUrl'>
                                                Home
                                              </a>
                                               Archives for
                                              <data:blog.pageName/>
                                            </span>
                                          </p>
                                          <b:else/>
                                          <b:if cond='data:blog.pageType == &quot;index&quot;'>
                                            <p class='breadcrumbs'>
                                              <span class='post-labels post-navigation'>
                                                <b:if cond='data:blog.pageName == &quot;&quot;'>
                                                  <a expr:href='data:blog.homepageUrl'>
                                                    Home
                                                  </a>
                                                   All posts
                                                  <b:else/>
                                                  <a expr:href='data:blog.homepageUrl'>
                                                    Home
                                                  </a>
                                                   <span>Posts filed under
                                                     <data:blog.pageName/></span>
                                                </b:if>
                                              </span>
                                            </p>
                                          </b:if>
                                        </b:if>
                                    </b:if>
                              </b:if>
            </b:includable>
    • Step 3:  Find ]]></b:skin> and Copy the following css code above it

    Style 1: Style like this blog used

     .breadcrumbs {

    margin: 0px 0px 15px 0px;
    font-size:95%;

    }
    .post-navigation > a:after, .post-navigation > a:before {
        border-bottom: 13px solid transparent;
        border-left: 11px solid #B7B7B7;
        border-top: 13px solid transparent;
        content: "";
        display: inline-block;
        left: 100%;
        position: absolute;
        top: -2%;
        z-index: 1;
    }
    .post-navigation > a:after {
        border-left-color: #F2F2F2;
        left: 99%;
    }.post-navigation > a:hover {
        padding-left: 23px;
    }
    .post-navigation > a {
        background: none repeat scroll 0 0 #F2F2F2;
        border: 1px solid #B7B7B7;
        color: #000000;
        padding: 4px 12px;
        position: relative;
        text-decoration: none;
    transition: all 0.2s ease 0s;-moz-transition: all 0.2s ease 0s;-webkit-transition: all 0.2s ease 0s;
    }
    .post-navigation > span {
        padding-left: 14px;
    }

    Style 2: Google Type


    Style 3: Wood Type

         .breadcrumbs {
        margin: 0px 0px 15px 0px;
        font-size:95%;
        }
        .post-navigation > a {
            background: url("http://i.imgur.com/qJ9sJ2N.jpg") no-repeat scroll 0 0 transparent;
            border: 1px solid #C76A29;
            border-radius: 7px 7px 7px 7px;
            color: #FFFFFF;
            padding: 4px 23px;
            position: relative;
            text-decoration: none;
            text-shadow: 1px 1px 2px #000000;
            transition: all 0.2s ease 0s;
        }
        .post-navigation > span {
            padding-left: 14px;

        }

    Style 4: Blue Type


    I hope this article will help you, if you liked this please spread our Blog.
    More aboutAdd Google type Stylish Breadcrumbs to Blogger Blog?

    How to Add Yahoo Smileys on Blogger Threaded Comments?

    Posted by Unknown

    Yahoo smileys for Blogger Threaded Comments
    I 'm going to say about how to add yahoo smileys to Blogger Threaded comments. This is an awesome trick was scripted by an Indonesian Blogger Kang Ismet and I think he did a very good job for us. This Blogger hack works with New Blogger Threaded commenting system.
    Follow the instructions Below..







    To see demo :
    Go to Comments OR Click Here

    What's inside this article?
    How to Add yahoo smileys to Blogger Threaded comments in 3 steps..?
    • Go to Blogger Account
    • Go to Template -> Edit HTML [click Proceed]

    Add CSS code

    img.bhacksmly {
        height: auto !important;
        vertical-align: middle !important;
        width: auto !important;
        border:0px !important;
    }

    Add Javascript code

    • Find </body> and copy the below code just above it.
    <script src='https://netoopscodes.googlecode.com/svn/branches/Js files/ysmiley threaded comments-min.js' type='text/javascript'/>
    •   Save the template
      Save Template

    Add HTML code

    • Check Expand Widget Templates
    • Find <div class='post-footer-line post-footer-line-3'>
    • Find the next </b:includable> and copy the code above it
    Example
     </div>
    .
    Place code here


    </b:includable>

    • Copy the below code above </b:includable>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='fe-bloggerysmile' id='ysmile' style='
    background: -moz-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(50%,#bfe8f9), color-stop(51%,#9fd8ef), color-stop(100%,#2ab0ed));background: -webkit-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: -o-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: -ms-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);border-radius: 3px;width:100%; padding:10px; height:65px;'>
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-*
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =((
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-)
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/> #:-S
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/> :-c
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)]
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X(
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/> :-h
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-)
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-)
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/> 2):)
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!!
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd
    <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^#(^
    </div><a href="http://fe-blogger.blogspot.com"></a></b:if>

    • Save the Template
    • That's all



    We proudly introduced our new yahoo smileys to Blogger threaded comments...Please Check it and feel it...Click HERE
    We will post like our Yahoo smileys soon...
    If you liked this article please Join via Google Friend Connect,Share,Like us to get Stronger...
    More aboutHow to Add Yahoo Smileys on Blogger Threaded Comments?

    Awesome Multi-Colored Popular Posts Widget for Blogger powered CSS3

    Posted by Unknown

    Popular Posts Widget is a Widget providing by Blogger and we can add it to our Blog. This Widget displays the Most viewed posts of your blog, that may be of Month or in Week or All the time. You can select how Popular posts are to be displayed.By default it shows an image(if the post has) and Title of Post followed by the content of post wrapped by 20-25 Words. This article is a tutorial to Style that Popular posts Widget to an Awesome Multi - colored Popular posts Widget. This trick is done using simple CSS3 rather than using complex JavaScripts. A great feature of this trick is each Post shown in each Flat UI color, so these colors catches your Blog visitor's eyes and they have the tendency to take that post even if the Post is not so good.


    Demo shows in bottom right side 
    Features of this Widget
    • Flat UI colors used (it will attract users attention)
    • Automatic Post Numbering
    • CSS3 Hover Animation 

    Sign in to your Blogger Account and Active Popular Posts Widget


    • First Add Popular post Widget to Blogger
      • Go to Layout -> Select "Add a Gadget" and take Popular Posts Widget from the Widget List appear.
      • Give Title of widget, select how the popular posts should be appeared(in Month,or Week or All time) and click Save 
    • Go to Template -> Edit HTML, Find ( Ctrl + F ) ]]></b:skin>
    • Copy the following code and Paste just above it
      <!-- Popular posts multi colored UI theme -->
      #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
      #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
      #PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
      #PopularPosts1 ul li:first-child:after{content:"1"}
      #PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
      #PopularPosts1 ul li:first-child + li:after{content:"2"}
      #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
      #PopularPosts1 ul li:first-child + li + li:after{content:"3"}
      #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
      #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
      #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
      #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
      #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
      #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
      #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
      #PopularPosts1 ul li:first-child:after,
      #PopularPosts1 ul li:first-child + li:after,
      #PopularPosts1 ul li:first-child + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
      #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
      #PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
      #PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
      #PopularPosts1 img{
      -moz-border-radius: 130px;
      -webkit-border-radius: 130px;
      border-radius: 130px;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      transition: all 0.3s ease;
      padding:4px;
      border:1px solid #fff !important;
      }
      #PopularPosts1 img:hover {
      border-radius: 0 0 0 0;
      -moz-transform: scale(1.2) rotate(-711deg) ;
      -webkit-transform: scale(1.2) rotate(-711deg) ;
      -o-transform: scale(1.2) rotate(-711deg) ;
      -ms-transform: scale(1.2) rotate(-711deg) ;
      transform: scale(1.2) rotate(-711deg) ;
      }
      <!-- popular posts multicolored UI theme -->

      • Click on Preview Template (You can see the template without saving)
      • Save the Template.
      View Your Blog it is ready to attract users. I think this article will help you if so please share and Like us to spread our Blog.
      If any problems with this trick don't hesitate to ask, do comment here...

      More aboutAwesome Multi-Colored Popular Posts Widget for Blogger powered CSS3

      Extreme CSS3 Floating Google Search Bar for Blogger FREE..!!

      Posted by Unknown

      Google search bar for Blogger
      All of you know about Google Search bar. You'd see the style of search bar used in Google. If you didn't see Google search bar either go to Google or please see the right top of  our blog, you can see a static Google search bar. Here is a trick to add this Google search bar to your blog. This is not the real Google search bar, instead this is a CSS3 styled search bar using Blogger's search method. If you need Google's real search bar[but it can't get Google's search box style] go to http://www.google.co.in/cse. Let's see how to add Google type search bar to your blog...


      Demo shows in right top
      Features
      • Floating Static (Fixed) Search bar
      • CSS3 styled search bar
      • CSS3 animated
      • Go to Layout -> Click on Add a Gadget
      • Select HTML/JavaScript from the list
      • Leave the Title as Blank and copy paste the following code inside the Content portion
                                    OR
          • Sign in to Blogger Dashboard and go to Template -> Edit HTML
          • Search (Ctrl+F) <body 
          • Copy and paste the following code after it


          <!-- Noop Google search box -->
              <div class='noop-searchbox' id='noop-searchbox'>
                <form action='/search' id='noop-searchform' method='get'>
                  <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Search...'/>
                  <button id='sbutton' type='submit'>
                    <span id='simg'/>
                  </button>
                </form>
              </div>
          <style type="text/css">
          #sbutton {
          background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%) repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed));
          background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
          background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
          background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
          background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe;
          border: 1px solid #3079ED;
          border-radius: 2px 2px 2px 2px;
          color: #FFFFFF;
          height: 27px;
          min-width: 76px;
          padding: 0 21px;padding-bottom: 2px;
          }
          #sbutton:hover{ background-color: #357AE8;
          background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8));
          background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
          background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
          background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
          background: linear-gradient(top, #4d90fe 0%,#357ae8 100%);
          border: 1px solid #2F5BB7;
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
          #simg {
          background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJy79Onhg4AqvgL2gYG3Brfe5vcBySUDNO_i_4VqgaNR2UHTIxv40Ot2NxFmLkPM61iv2dJNSiRUl_brE8Soe753jO3aXTAgb3Pl0Sw2__DlO44Zm92soXtT7aZhYWuF4gCStdFCVycww/s1600/searchicon.png") no-repeat scroll 0 0 transparent;
          display: inline-block;
          height: 14px;
          margin: 0;
          width: 17px;z-index:101;
          }#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;}
          #s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;}
          #s:focus {width: 200px;}
          .noop-searchbox {
          display: block;
          position: fixed;
          right: 0;
          top: 1%;
          max-width: 300px;min-width: 238px;
          z-index: 100;
          }
          </style>
          <!-- Noop Google search box -->

          I hope this article will help you. If any problem with this please do comment.
          More aboutExtreme CSS3 Floating Google Search Bar for Blogger FREE..!!

          How to Change Blogger POST A COMMENT Message/Text/Style?

          Posted by Unknown

          Change Post a Comment text from Blogger
          You know Comments are the best way to interact or make a good contact with your blog visitors.I think you are all seen a message "Post a Comment" in the bottom of every post in your blog. Do you think it is not so good to see your blog visitors? Then here I am going to show you how to change "Post a Comment" text from that part and place interesting images there. Also I am giving some cool images link with this article. Lets see how to change this






          • Sign In  to Blogger Dashboard
          • Go to Template -> Edit HTML
          • Search (Ctrl+F) for the code marked Bold
          <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a>
          •  Search the next <data:postCommentMsg/> ,that code looks like the following
          <h4 id='comment-post-message'><data:postCommentMsg/></h4>
          • replace  <data:postCommentMsg/> with the image code
          • Select the code of image you want from the following

          Style 1

          <img src="http://i.imgur.com/Qv18EaT.gif"/>

          Style 2

          <img src="http://i.imgur.com/hR5AoQv.jpg"/>

          Style 3

          <img src="http://i.imgur.com/542TClt.jpg"/>

          Style 4

          <img src="http://i.imgur.com/2RqqdBN.jpg"/>

          Style 5

          <img src="http://i.imgur.com/h0oIkzC.jpg"/>

          Style 6

          <img src="http://i.imgur.com/YbPOTnI.jpg"/>

          Style 7

          <img src="http://i.imgur.com/wRUQ2JN.jpg"/>

          Style 8

          <img src="http://i.imgur.com/b7gXQLd.jpg"/>

          Style 9

          <img src="http://i.imgur.com/TXqb5vI.jpg"/>


          Style 10

          <img src="http://i.imgur.com/Wu2M9sv.jpg/>

          Style 11

          <img src="http://i.imgur.com/rP7bUnN.jpg"/>


          Style 12

          <img src="http://i.imgur.com/ZcVbJRa.jpg"/>

          • Save Template

          I hope this article will help you. If you got any doubt or Suggestions, please do comment

          Article also Applicable for



          More aboutHow to Change Blogger POST A COMMENT Message/Text/Style?

          Customize Labels Widget with Stylish Cool Effects

          Posted by Unknown

          Customize Labels Widget with Stylish Cool Effects
          Labels widget displays list of the categories of posts. Creating labels helps to categorize the posts in groups. So it helps visitors to see the posts under a category. Default blogger Labels widget is not so Stylish. Don't worry, here I am sharing some cool interesting labels widget styles for you. This Labels widget can style using simple CSS codes. To do this follow the steps..



          •  Sign In to Blogger Dashboard
          • Go to Template -> Edit HTML
          • Find ]]></b:skin> and copy the code of label style you like above ]]></b:skin>
          • Save Template

           Black Forest Theme Labels with animated Scaling

          .Label li {
                  background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent;
                  border: 1px solid;
                  border-radius: 6px 6px 6px 6px;
                  float: left;
                  font-size: 116%;
                  list-style: none outside none;
                  margin: 2px;
                  padding: 4px;
                  transition: all 0.3s ease 0s;
              }
          .Label li:hover {
              transform: rotate(351deg) scale(1.7);
          }

          Yellow Customized labels Widget


              .Label li:before {

                  background-image: -moz-linear-gradient(left top , #FEDA71, #FEBA47);

                  border-bottom: 1px solid #D99D38;

                  border-left: 1px solid #D99D38;

                  content: "";

                  height: 1.39em;

                  left: -0.69em;

                  position: absolute;

                  top: 0.2em;

                  transform: rotate(45deg);

                  width: 1.3em;

                  z-index: 1;

              }

              .Label li:after {

                  background: none repeat scroll 0 0 #FFFFFF;

                  border: 1px solid #D99D38;

                  border-radius: 4.167em 4.167em 4.167em 4.167em;

                  box-shadow: 0 1px 0 #FAEABA;

                  content: "";

                  height: 0.5em;

                  left: -0.083em;

                  position: absolute;

                  top: 0.667em;

                  width: 0.5em;

                  z-index: 9999;

              }

              .Label li {

                  background-image: -moz-linear-gradient(center top , #FEDA71, #FEBA47);

                  border-bottom: 1px solid #D99D38;

                  border-radius: 0 0.25em 0.25em 0;

                  border-right: 1px solid #D99D38;

                  border-top: 1px solid #D99D38;

                  box-shadow: 0 1px 0 #FAEABA inset, 0 1px 1px rgba(0, 0, 0, 0.1);

                  color: #996633;

                  float: left;

                  font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;

                  font-size: 0.75em;

                  font-weight: bold;

                  list-style: none outside none;

                  margin: 0 0 7px 20px;

                  padding: 0.417em 0.417em 0.417em 0.917em;

                  position: relative;

                  text-decoration: none;

                  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);

                  z-index: 1;

              }

          Blue Customized Labels Widget


              .Label li:before {

                  background-image: -moz-linear-gradient(center top , #1E5799 0%, #207CCA 100%);

                  border-bottom: 1px solid #145091;

                  border-left: 1px solid #145091;

                  content: "";

                  height: 1.39em;

                  left: -0.69em;

                  position: absolute;

                  top: 0.2em;

                  transform: rotate(45deg);

                  width: 1.3em;

                  z-index: 1;

              }

              .Label li:after {

                  background: none repeat scroll 0 0 #FFFFFF;

                  border: 1px solid #3F6893;

                  border-radius: 4.167em 4.167em 4.167em 4.167em;

                  box-shadow: 0 1px 0 #B5D8FF;

                  content: "";

                  height: 0.5em;

                  left: -0.083em;

                  position: absolute;

                  top: 0.667em;

                  width: 0.5em;

                  z-index: 9999;

              }

              .Label li {

                  background-image: -moz-linear-gradient(center top , #1E5799, #207CCA);

                  border-bottom: 1px solid #145091;

                  border-radius: 0 0.25em 0.25em 0;

                  border-right: 1px solid #145091;

                  border-top: 1px solid #145091;

                  box-shadow: 0 1px 0 #CCE4FF inset, 0 1px 1px rgba(0, 0, 0, 0.1);

                  color: #996633;

                  float: left;

                  font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;

                  font-size: 0.75em;

                  font-weight: bold;

                  list-style: none outside none;

                  margin: 0 0 7px 20px;

                  padding: 0.417em 0.417em 0.417em 0.917em;

                  position: relative;

                  text-decoration: none;

                  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);

                  z-index: 1;

              }

           Black Forest Theme Label like NetOops Blog Labels


              .Label li {

                  background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent;

                  border: 1px solid;

                  border-radius: 6px 6px 6px 6px;

                  float: left;

                  font-size: 116%;

                  list-style: none outside none;

                  margin: 2px;

                  padding: 4px;

                  transition: all 0.3s ease 0s;

              }

              .Label li:hover {

                  transform: rotate(5deg);

              }

          Skeleton Theme for Labels Widget

          .Label a {
              color: #000000;
              text-decoration: none;
          }
          .Label li {
              border: 1px solid #000;
              border-radius: 6px 6px 6px 6px;
              color: #000000 !important;
              float: left;
              font-size: 116%;
              list-style: none outside none;
              margin: 2px;
              padding: 4px;
              transition: all 0.3s ease 0s;
          }

          Skeleton Theme with Painting Hover Effect

           
          .Label a:hover
          {
          text-shadow:5px 5px 5px #dcdcdc;
          background:orange;
          border:1px solid orange;
          border-bottom-right-radius: 0px;
          border-top-left-radius: 0px;
          border-bottom-left-radius: 30px;
          border-top-right-radius: 30px;
          }

          Leaf theme for Labels Widget


          .Label a {
               -moz-border-bottom-colors: none;
               -moz-border-left-colors: none;
               -moz-border-right-colors: none;
               -moz-border-top-colors: none;
               background-color: #7FBF4D;
               background-image: -moz-linear-gradient(center top , #7FBF4D, #63A62F);
               border-bottom-right-radius: 30px;
               border-color: #63A62F #63A62F #5B992B;
               border-image: none;
               border-style: solid;
               border-top-left-radius: 30px;
               border-width: 1px;
               box-shadow: 0px 1px 0px 0px #96CA6D inset;
               color: #FFFFFF;
               float: left;
               font: 14px verdana;
               height: 18px;
               margin-bottom: 9px;
               margin-left: 10px;
               padding: 10px;
               position: relative;
               text-decoration: none;
               transition: all 0.5s ease-in-out 0s;
          }

          .Label a:hover {
               background: none repeat scroll 0% 0% orange;
               border-radius: 0px 30px 0px 30px;
               border: 1px solid orange;
               text-shadow: 5px 5px 5px #DCDCDC;
          }

          .Label {
               margin: 0px;
               padding: 0px;
               position: relative;
          }
          More aboutCustomize Labels Widget with Stylish Cool Effects

          Verified Facebook Page tick mark for Blogger Author Comments

          Posted by Unknown

          Do you noticed a tick mark in some Facebook Pages like Actors, Political Leaders. Verified mark is only available for Worldwide stuff like big companies, Actors such have the chance to be faked. When we move mouse over that tick, it shows a "Verified Page" message. Do you wish to add that verified tick mark to  your (Author/Admin) comment in your blog.Here I am going to show you how to add Facebook verified Page mark to Admin comments.




          Add Facebook verified Page tick to Author Comments

          • Sign In to Blogger Dashboard
          • Go to Template  -> Edit HTML
          • Find .comments .comments-content .icon.blog-author and delete the following code inside it
          background-repeat: no-repeat;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
          • And copy the following code inside it
          backgroundurl("https://dl.dropboxusercontent.com/s/gp8fhc34w2rka9h/verified%20page.png") no-repeat scroll 0 0 transparent;
          • Final code looks like the following
          I hope this article will help you to customize your admin comment. Please Like and Share.
          More aboutVerified Facebook Page tick mark for Blogger Author Comments

          Highlight Author Comments in Blogger in threaded comment System

          Posted by Unknown

          Highlight Author Comments in Blogger in threaded comment System
          I told you before, Comments are the best way to make good relationship with your blog visitors / Followers.
          Do you have a blog and do your blog getting comparatively good traffic then your blog also getting many comments, that may be positive or negative. getting comments related to how your interact with your visitors. Are you not interested to read full about this trick you can skip to trick Highlight Author Comments.


          Many comments may be in your blog. How blog visitors identify or recognize your comment from these comments. There is accidental case that occur in most blogs is Many bloggers use their account name as Admin. If they comment in your blog or gives reply to other comments, the other visitors think that is the Admin of that blog. Do you have wish to highlight your comments in your blog? If so here is the trick to do that and make your comments recognizable to others.Here I am going to share the trick to highlight Author Comments in Threaded comments and this trick also work in basic commenting system. This is coded using simple Jquery.

          How to highlight Author Comments in Blogger

          • Sign In to Blogger Dashboard
          • Go to Template -> Edit HTML
          • Find </body> and copy the following code above it

          <script type="text/javascript">
              $(function() {
                function highlight(){
                  $(&#39;.user.blog-author,.ssyby&#39;).closest(&#39;.comment-block&#39;)
                    .css(&#39;border&#39;, &#39;1px solid #e1e1e1&#39;)
                    .css(&#39;background&#39;,&#39;#f1f1f1 url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTC32VOlsthpN4zyf5yYeDlXZ4Cy2JO6kNnBgYiWv9J90OtMxC869FTdlxPov3SSXFYbzNVg9E__u62SW3BSMyezlCTJ3y48NdRJMSZrl-DhkyiMvWx8d48rfbwtzyvJ4ZgHPBCcVe-2w/s1600/admin_comment1.png&quot;) no-repeat bottom right&#39;)
                    .css(&#39;padding&#39;, &#39;10px&#39;);
                    }
                    $(document).bind(&#39;ready scroll click&#39;, highlight);
                                 });</script><a style="display:none" href="http://fe-blogger.blogspot.com">Blogger Widgets</a>
          • Click Save.
          Congratulations you are done. If you enjoyed this article please like and share.
          More aboutHighlight Author Comments in Blogger in threaded comment System