Awesome Multi-Colored Popular Posts Widget for Blogger powered CSS3

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.

How to Add Automatic Read More TRICK for Blogger Blogs

• 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/AVvXsEi80DH-xjzNKQgQiUVpaadVb8drT5WY0ySfb2Hz9Al9UI_HD3qpdxjK6hP4v9vx06nQH40CMtwVvb7qo1m6P8fy7tECJwZHaICjWa5qxEMasCASkTEBwe9rdu9EU643SSg-60vAbCMgUU4/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/AVvXsEi80DH-xjzNKQgQiUVpaadVb8drT5WY0ySfb2Hz9Al9UI_HD3qpdxjK6hP4v9vx06nQH40CMtwVvb7qo1m6P8fy7tECJwZHaICjWa5qxEMasCASkTEBwe9rdu9EU643SSg-60vAbCMgUU4/s1600/1x1juice.png"></a>
</b:if>
</b:if>

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/AVvXsEgxiXCJpNSYH6CJ7npAMzNWMRA0Abhm5fHDTIoVJ1rSPX5luxxAmumZrTco1LC8AKUpuya_Qi0Q90wZVP0bFysGduYVmH0K3XAAeKhX1aMTO0KQut5Tg9c0qk-I9rYrjmV0nOyW54HRIGU/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://netoopsblog.blogspot.com">Blogger Widgets</a>

• Click Save.

How To Get Sexy Social Sharing Tools

         How To Get Sexy Social Sharing Tools

1.Go To Blogger.com

2.Login To your Account

3.Add A Gadjet

4.Slect Java Script

5.Copy The Given Codes Below

6.Paste It Now on java script

7. Now Save Toyr Seting And See 

Privew Share:

Here IS Cod

<!--sharexy code start--><noindex><div id='shr_613879'><script type='text/javascript'>(function(w) { if (!w.SharexyWidget) { w.SharexyWidget = {};} if (!w.SharexyWidget.Params) { w.SharexyWidget.Params = {}; } w.SharexyWidget.Params['613879'] = {'code_id':'613879','publisher_key':'YQV-03168','design':'sharexy','layout_static':'h','type':'stf','mode_float':'l','size_float':'60','size_static':'32','buzz':'0','services':['facebook', 'twitter', 'stumbleupon', 'linkedin'],'url':'current','allways_show_ads':'1','show_ads_sharing':'0','show_ads_cursor':'0','bg_float':'0','bg_color':'#f1f1f1','labels':'0','counters':'0', 'counters_float':'0'} })(window);</script><script type='text/javascript' src='http://shuttle.sharexy.com/Loader.js'></script></div></noindex><!--sharexy code end -->

make a snow effect on the mouse cursor on the blog

Hi! guys`how are you? here is the cool simple snow effect to your blog mouse cursor area. many snow effects gadget use images to this. but this gadget do not use images to this. so this is very fast. i've tested this effect on internet explorer, mozzilla firefox & many other web browsers. this simple non-image based widget works just fine!! I hope you enjoy using this very cool snow effect gadget.

 

 

 

So, let's see how to install this cool widget in your blog..

STEP #1
Log in to Blogger, go to Design ->

Add a Gadget of HTML/JavaScript type.

a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script type="text/javascript">

// <![CDATA[

var colour="black";

var sparkles=100;



var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var tiny=new Array();

var star=new Array();

var starv=new Array();

var starx=new Array();

var stary=new Array();

var tinyx=new Array();

var tinyy=new Array();

var tinyv=new Array();

window.onload=function() { if (document.getElementById) {

var i, rats, rlef, rdow;

for (var i=0; i<sparkles; i++) {

var rats=createDiv(3, 3);

rats.style.visibility="hidden";

document.body.appendChild(tiny[i]=rats);

starv[i]=0;

tinyv[i]=0;

var rats=createDiv(5, 5);

rats.style.backgroundColor="transparent";

rats.style.visibility="hidden";

var rlef=createDiv(1, 5);

var rdow=createDiv(5, 1);

rats.appendChild(rlef);

rats.appendChild(rdow);

rlef.style.top="3px";

rlef.style.left="0px";

rdow.style.top="0px";

rdow.style.left="3px";

document.body.appendChild(star[i]=rats);

}

set_width();

sparkle();

}}

function sparkle() {

var c;

if (x!=ox || y!=oy) {

ox=x;

oy=y;

for (c=0; c<sparkles; c++) if (!starv[c]) {

star[c].style.left=(starx[c]=x)+"px";



star[c].style.top=(stary[c]=y)+"px";

star[c].style.clip="rect(0px, 5px, 5px, 0px)";

star[c].style.visibility="visible";

starv[c]=50;

break;

}

}

for (c=0; c<sparkles; c++) {

if (starv[c]) update_star(c);

if (tinyv[c]) update_tiny(c);

}

setTimeout("sparkle()", 40);

}

function update_star(i) {

if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";

if (starv[i]) {

stary[i]+=1+Math.random()*3;

if (stary[i]<shigh+sdown) {

star[i].style.top=stary[i]+"px";

starx[i]+=(i%5-2)/5;

star[i].style.left=starx[i]+"px";

}

else {

star[i].style.visibility="hidden";

starv[i]=0;

return;

}



}

else {

tinyv[i]=50;

tiny[i].style.top=(tinyy[i]=stary[i])+"px";

tiny[i].style.left=(tinyx[i]=starx[i])+"px";

tiny[i].style.width="2px";

tiny[i].style.height="2px";

star[i].style.visibility="hidden";

tiny[i].style.visibility="visible"

}

}

function update_tiny(i) {

if (--tinyv[i]==25) {

tiny[i].style.width="1px";

tiny[i].style.height="1px";

}

if (tinyv[i]) {

tinyy[i]+=1+Math.random()*3;

if (tinyy[i]<shigh+sdown) {

tiny[i].style.top=tinyy[i]+"px";

tinyx[i]+=(i%5-2)/5;

tiny[i].style.left=tinyx[i]+"px";

}

else {





tiny[i].style.visibility="hidden";

tinyv[i]=0;

return;

}

}

else tiny[i].style.visibility="hidden";

}

document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sdown;

x=(e)?e.pageX:event.x+sleft;

}

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

}

window.onresize=set_width;

function set_width() {

if (typeof(self.innerWidth)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

}

function createDiv(height, width) {

var div=document.createElement("div");

div.style.position="absolute";

div.style.height=height+"px";

div.style.width=width+"px";

div.style.overflow="hidden";

div.style.backgroundColor=colour;

return (div);

}

// ]]>

</script>

 

Seo Meta tag Description

As you might know blogger recently changed its old interface to completely a new one, and blogger team added some most awaited new features to its new interface including dynamic meta description tag for both home page and individual posts. Before these changes, we were facing issues while adding descriptions separately for Home page and single posts. Because blogger used to only include the home page's description in the source code, and there wasn't any description for single posts. And WordPress had these all features for years. Therefore, blogger team was working for years to make blogger more SEO friendly. Now we can optimize our blog's home page and single posts by adding unique meta descriptions.

But as usual, you'll have to make settings in order to make everything works fine. So today's post will guide you how to make a correct setting for both meta description tag for home page and for single posts. By default the dynamic meta description tag is disabled in blogger, so we will enable it and after that we will be able to make further setting, but one thing should be kept in mind that these meta tags are just for search engines' bots not for human visitors. These will be shown only in the source code of the blog and won't be shown on blog. Now let's start the procedure.

How to Enable meta description tag in Blogger for home page?

• Go to Blogger
• Setting >> Search preferences
• Click on Edit >> Yes >> Write a description for your blog's home page and the description must be under 150 characters, above 150 characters is not allowed, see below pictures

there are two screen shoots above, in the first one the meta description for blog home page was by default disabled, so you'd enable it and after that you'll write a description for maximum 150 characters for your blog's home page. Adding more than 150 characters may harm your blog. After adding description just click on save changes. 

Now if you're using a default blogger template then you can easily find the meta description tag in the source code, as I already told you that it is not for human visitors but only for search engines. So you can just right click on your blog's home page and click on source code, so you can find the meta description for your blog in the source code..

But one thing is to make sure that if you're using a custom blogger template then you might not find the description in the source code, because mostly custom blogger  templates are using the old static blogger meta tag. So to avoid this and show the dynamic tag provided by blogger, you must add a piece of XML code to your template to make things in order. Here is how?

1. Blogger >> Template >> HTML >> Proceed
2. Now find <head> tag in your template and just after/below it paste following code

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

Save your template and you've done it for custom templates as well. Now once again check your blog's home page source code and this time you'll find meta description for your blog.

Adding meta description to single posts? 

Now when you've enabled the meta description option in Blogger Setting >> Search Preferences, you will find an additional feature at right side of the post editor when you write a new post for your blog, see below image for example:

At the right side of your post body you can see a box for search description, so now you can easily add search description for each of your blog's new posts. Also if you've time then update the older posts and add up to 150 letters to each post. However, this option won't be there until you enable the meta description from the Search Preferences page under the setting page.

Remember, the description you add to every new post should be different than post title and should have a brief summary about the post. If you use this feature correctly then chances are higher to get first position in search results pages.

Leave a comment below the post if you've further questions, and always respect others in the world.

7 Reasons that Destroys Your Search Engine Ranking

Do you ever think about the topic “Reasons why you are not getting a good search engine ranking.” Search engine ranking is very important for every bloggers for getting a huge traffic and it is not that much of easy. Today I would like to share about the topic “10 Reasons that Destroys Your Search Engine Ranking”.

This article must be helpful for new bloggers to avoiding there mistake and build a good search ranking. According to Google search ranking they follow some rules .If your blog or site do not satisfying the rules or not following the rules, your blog defiantly have a Zero search ranking. The bellow 10 points will give the exact reasons that destroy your search engine ranking.

---

Irrelevant and duplicated contents

---

This is one of the major mistakes done by every new bloggers, referring a blog or website is ok but if you are copying all the content and paste in your blog that is big mistake and it will definitely destroy your search engine ranking.

Putting irrelevant content to your blog also destroy your search ranking. For example your blog is based on sports and you add an article about cinema. Some readers coming to that blog for reading sports news, you can think what happen next. That’s same in happen in search ranking.

Try to avoid these things while your blogging and try to put Pure and unique content to your blog.

---

Optimization of Links

---

If you do not want to improve search engine ranking then do not place links that will lead to other relevant sites or resources. In other words, always underestimate the importance of links and make them work in such a way that they dilute the entire process of improving the search engine ranking of your site or blog.

Try to avoid the above and give some importance to optimization of your blog links. Search ranking always give importance to Backlinks.

---

Standing useless

---

 This is one of the major things that destroy your search ranking. Never specify what you do and put some fancy name to attract customer’s attention. The general rule is to project your line of work and then place your name at the end of the title tag thereby giving your keyword phrase first preference. If you are not following these then you don’t have a good search ranking.

---

Putting unrelated title

---

This is a mistake done by every new bloggers, putting some unrelated title to their content. Post title is very important for a content search and if the title is irrelevant then it will destroy your Search ranking.

---

You are not thinking local

---

The major reason that your blog never get a good rank is always think within the box and never go for targeting local customers for any particular niche. Being vaguely global will definitely help you to throw away your search engine ranking because local campaigning has brighter chances for success in some cases like small business ventures.

---

Failure in updating contents

---

You are not updating your content and keep it static both for websites and blogs. Doing so will increase the chances that Google destroy your blog search rank.

---

You are not educating your audience

---

You are putting some funny and unrelated content in your blog and there is no use with your blog to the audience then Google destroys your blog search ranking. Try to put some valuable contents and get a good rank.

Try to avoid these things while blogging and keep your blog search ranking good. You know that search result traffic only stands for a long time.....Getting a huge traffic you must have good search rank.

At last have a nice day…............
Posted By Rana