10 Des 2013

Multi colored random posts gadget for Blogger EXCLUSIVE

Multi colored random posts Widget for Blogger

Random Posts gadget is AN awing convenience for your web logger Blog.We posted about How to add random posts widget, most vital feature of this convenience is it lets your web log visitors to surf a lot of web logposts in your web log.Its let your users to pay a lot of time in your web logcertainly it will increase your Blog's internal links that lets your web log higher traffic.This is the modified version of the Random posts conveniencewe posted earlier, one in all our traveller "Yogesh Gamer" asked American state to form this conveniencelike Multi colored widespread posts conveniencethus subsequently I just tried and it got success. Please do check this convenience and comment your suggestions...


Check out related ArticlesAwesome Random Posts convenience For BloggerAwesome Multi-Colored widespread Posts convenience for BloggerFeatures of This convenience

Flat UI colors used (it will attract users attention)
Automatic Post numbering

Sign In to Blogger Dashboard
Go to Layout
Click on Add gizmo and appearance for HTML/Javascript and select it
Copy the below code inside it and click on save

<style type="text/css">
.noop-random-posts ul li {
    list-style-image:none;
}.noop-random-posts ul {
list-style-type: none;
margin: 0;
padding: 5px 0;
}
.noop-random-posts ul li {
border: 0 none;
margin: 5px 0;
padding: 10px;
position: relative;
}
.noop-random-posts ul li:first-child {
background: none repeat scroll 0 0 #FF4C54;
width: 97%;
}
.noop-random-posts ul li:first-child:after {
content: "1";
}
.noop-random-posts ul li:first-child + li {
background: none repeat scroll 0 0 #FF764C;
width: 87%;
}
.noop-random-posts ul li:first-child + li:after {
content: "2";
}
.noop-random-posts ul li:first-child + li + li {
background: none repeat scroll 0 0 #FFDE4C;
width: 84%;
}
.noop-random-posts ul li:first-child + li + li:after {
content: "3";
}
.noop-random-posts ul li:first-child + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 81%;
}
.noop-random-posts ul li:first-child + li + li + li:after {
content: "4";
}
.noop-random-posts ul li:first-child + li + li + li + li {
background: none repeat scroll 0 0 #33C9F7;
width: 78%;
}
.noop-random-posts ul li:first-child + li + li + li + li:after {
content: "5";
}
.noop-random-posts ul li:first-child + li + li + li + li + li {
background: none repeat scroll 0 0 #7EE3C7;
width: 75%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li:after {
content: "6";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F6993D;
width: 72%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li:after {
content: "7";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F59095;
width: 69%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after {
content: "8";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 66%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
content: "9";
}
.noop-random-posts ul li:first-child:after, .noop-random-posts ul li:first-child + li:after, .noop-random-posts ul li:first-child + li + li:after, .noop-random-posts ul li:first-child + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
background: none repeat scroll 0 0 #353535;
border-radius: 50% 50% 50% 50%;
color: #FFFFFF;
font-size: 25px;
height: 30px;
position: absolute;
right: -17px;
text-align: center;
top: 1px;
width: 30px;
}
.noop-random-posts ul li a {
color: #444444;
font-size: 13px;
text-decoration: none;
}

</style>
<div class="noop-random-posts"><script type="text/javascript">
    var randarray = new Array();var l=0;var flag;
    var numofpost=5;function nooprandomposts(json){
    var total = parseInt(json.feed.openSearch$totalResults.$t,10);
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
    document.write(item);}}
    }document.write('</ul>');}
    </script><a href="http://netoopsblog.blogspot.com" style="font-size:0pt">Blogger Widgets</a>
<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=nooprandomposts"></script></div>


26 Agu 2013

Add Comment count to Post Header Titles in Blogger

Add Comment count to Post Header Titles in Blogger
You noticed the number of comments displayed in comments section inside each posts. It is placed under the post. It is not noticeable to visitors. Do you want to add it to header to inspire your visitors to comment. The visitors only see the comment count when they reach at the end of the post. if the visitor not scroll to footer part , the comment count will not see.
Do you think about displaying comment count on the top of post will be better? Then here we are showing a technique to add comment count with beautiful backgrounds to the header part of the post, not only inside the post but also it will display to homepage.


After adding his trick the comment count will be displayed with post titles , if more comments on the post, it will encourage the users to comment and also helps to jump to comment section.


How to add Comment count to Post Header

  • Sign In to Blogger Dashboard
  • Go to Template -> Edit HTML
  • Find (Ctrl+F) ]]></b:skin> and copy the below code above it
.comment-count {
float : right;
width : 48px;
height : 48px;
background : url(  IMAGE URL  );
background-repeat: no-repeat;
font-size : 18px;
position:absolute;
margin-top : -15px;
margin-right : 2px;
text-align : center;

 Choose the comment count background

  • Copy the URL of image you want by right clicking and select Copy image Location or Copy Image URL.
  • Replace the RED marked portion above with the image URL


      Bubble Comment Count in blogger     Bubble Comment Count         Add Bubble Comment Count    Bubble Comment Count  Bubble Comment Count   bubble comment blogger    bubble comment blogger     bubble comment blogger        blogger tips, blogger tricks    blogger widgets, bubble comment count         blogger comments, comment count          

 Add Comment count code

  •  Find the following code 
 <h2 class='post-title entry-title' itemprop='name'>
 or
 class='post-title entry-title'
  •  Add the following code below it
<b:if cond='data:post.allowComments'>
<a class='comment-count' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
  •  Save Template
Congratulations you have done. Check your blog and get more comments. If you liked this article please like and share this blog.

20 Agu 2013

Related Posts Blogger Widget and LinkedWithIn for Blogger

Related Posts Blogger Widget and LinkedWithIn for Blogger
Related posts Widget, as the title says , this Widget will generate the list of related posts. this Widget can be added either in homepage (under each posts) or inside the post. By placing this related posts Widget, there is chance the spread the other posts to visitors and they may have a tendency to take that post from the list, it will reduce the bounce rate of your blog and will keep your visitors from suddenly quit from your blog. Let's see how to add related posts widget to Blogger



Using LinkedWithIn Widget

  • It is very simple to add LinkedWithIn Widget
  • Go to LinkedWithIn website and follow the simple instructions
  • Give e-mail id, blog url, select platform as Blogger and select number of posts should be displayed.

 Add Related Posts Manually to Blogger

  •  Sign In to Blogger Dashboard
  • Go to Template -> Edit HTML
  • Find </head> 
  • Copy the below code above </head>

<!--Related Posts with thumbnails Scripts Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'> /* remove this */
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2eGn6Q1FmceZ_pkA04sB5ai4R1yTf5GynUTa7WMpexdDQ4eFSSHbfL-7ThD2-yT5JSA0RCWBMG3VHvzFPNZOIIuShKSzSnwCUuBng8lRQpJDuBPsE_BayhRTRzzPAheVaxg5wIu_iVkg/s400/noimage.png";
var maxresults=5;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
</script><a href="http://netoopsblog.blogspot.com" style="font-size:0pt">Blogger Widgets</a>
<script src='http://netoopscodes.googlecode.com/svn/netoops-related-posts-with-thumbnails-blogger.js' type='text/javascript'/>
</b:if> /* remove this */
<!--Related Posts with thumbnails Script End-->

Customization

  • RED marked - remove red marked portion to add this Widget to Homepage
  • Brown - place the URL of the image in quotes to display if there is no image in the post.
  • maxresults=5 - change the value to change the number of posts to be displayed.
  • splittercolor="#DDDDDD" - change the color of splitter line between posts. Check here to see color codes selector
  • relatedpoststitle="Related Posts" - Change the Name of title.

 Add to Post Footer

  •  Find <div class='post-footer'> and copy the below code above it
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://netoopsblog.blogspot.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhimH9ukuRuIPI1VCMr9odRbiGViU_LWXEBQpp19BVqLP6_Jqi2CI5iNTfofJuCvq8GWbsEjCKOgrX2lehWL2r7_Z9YDy0N0EkdKJE3cbOqx8CLsKW1SKC9BkWyzYWdQWUvI30Fg2D3qXU/s1600/1x1juice.png'/></a>
</b:if></b:if>
    • Remove Orange marked to add related posts to homepage too.
    • Change RED marked to change the number of posts should be displayed
    I hope this article will help you. If so please like and share our blog. You can check here more Exciting Widgets.

    19 Agu 2013

    How to Add Automatic Read More TRICK for Blogger Blogs

    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://netoopsblog.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhimH9ukuRuIPI1VCMr9odRbiGViU_LWXEBQpp19BVqLP6_Jqi2CI5iNTfofJuCvq8GWbsEjCKOgrX2lehWL2r7_Z9YDy0N0EkdKJE3cbOqx8CLsKW1SKC9BkWyzYWdQWUvI30Fg2D3qXU/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://netoopsblog.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhimH9ukuRuIPI1VCMr9odRbiGViU_LWXEBQpp19BVqLP6_Jqi2CI5iNTfofJuCvq8GWbsEjCKOgrX2lehWL2r7_Z9YDy0N0EkdKJE3cbOqx8CLsKW1SKC9BkWyzYWdQWUvI30Fg2D3qXU/s1600/1x1juice.png"></a>
      </b:if>
      </b:if>

      Congratulations, You have done the Hack to your Blog. I think you enjoyed this article.

      Awesome Recent Comments Widget for Blogger, Feed Comments

      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_netoopsblog_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://netoopsblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script>
      <a style="display:none" href=http://netoopsblog.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://netoopsblog.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 .


      Add Google type Stylish Breadcrumbs to Blogger Blog?

      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.netoopsblog.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.

      How to Add Yahoo Smileys on Blogger Threaded Comments?

      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='netoopsblogysmile' 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://netoopsblog.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...

      17 Agu 2013

      Awesome Multi-Colored Popular Posts Widget for Blogger powered CSS3

      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...