How to Show Total Number of Post And Comment in Blogger

Some bloggers love to show their blog stats to visitors. Actually adding these types of useful widget attract visitors and also blogger themeselves can easily see their blog stats by just viewing their blog. So do you want to show total number of published post and comments in blogger. For adding this widget you just need to add a JavaScript code in your blogger gadget. Follow the below steps to know how to add this widget.

How to Show Total Number of Post And Comment in Blogger 

1. Login to blogger.com

2. Click on Dashboard

3. Click on Design Tab
4. Click on "Add a Gadget"

<script style="text/javascript">function mbhTotalCount(json) {document.write(parseInt(json.feed.openSearch$totalResults.$t,10));}</script><p style="font:20px Tahoma;">Total Posts: <script src="http://www.makesomesense.com/feeds/posts/default?alt=json-in-script&callback=mbhTotalCount"></script></p><p style="font:20px Tahoma;">Total Comments: <script src="http://www.makesomesense.com/feeds/comments/default?alt=json-in-script&callback=mbhTotalCount"></script></p>

5. Now Save it.

Kindly Note: Please replace http://www.makesomesense.com with your blog URL.

View Your Blog.

Thanks i hope you like this post.

How To Add jQuery LIGHTBOX Popup Facebook Likebox To Blogger

Facebook likebox is widely used social plugin from Facebook developers. By adding this jQuery popup Facebook likebox widget you can easily bring thousands of visitors to your blog. Today I am going to share the latest jQuery LIGHTBOX Popup Facebook Likebox widget. Facebook has given a lot of benefits to pro bloggers, so take this advantage today by adding this useful widget to your blogger blog (blogspot). For this you have to follow some simple steps.

How To Add jQuery LIGHTBOX Popup Facebook Likebox To Blogger

1. Login to blogger.com

2. Click on Dashboard

3. Click on Design Tab
4. Click on "Add a Gadget"

//*MakeSomeSense Lightbox Style Popup Facebook Likebox Widget**//
<style>

/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*


User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAQi3O-lVqjmBfnCpHzXAUy4FH-vDaN5EOHaJryeHaIaRK2GqA7nQDCCtTvcobieJQ76tJokMY-8KRpampJ11_jKG7V24H0WzjG03WEffW1turGGN5mjoBm2nC8AsPnK7GrcVHLmXK2ejw/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIhTI-YSg_6TdJnWJuOtes1cAlTN6IoIwRdCCPAVEZ-mE00xTEKbHN78A89O5MncUhHuWL6mCnyAwSfXDr_xQgg_CI4vOceh0XPHdHtPwyReMJyibc7g8dS81xxFg2WVC39Hb5lKffDXWO/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAQi3O-lVqjmBfnCpHzXAUy4FH-vDaN5EOHaJryeHaIaRK2GqA7nQDCCtTvcobieJQ76tJokMY-8KRpampJ11_jKG7V24H0WzjG03WEffW1turGGN5mjoBm2nC8AsPnK7GrcVHLmXK2ejw/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAQi3O-lVqjmBfnCpHzXAUy4FH-vDaN5EOHaJryeHaIaRK2GqA7nQDCCtTvcobieJQ76tJokMY-8KRpampJ11_jKG7V24H0WzjG03WEffW1turGGN5mjoBm2nC8AsPnK7GrcVHLmXK2ejw/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIhTI-YSg_6TdJnWJuOtes1cAlTN6IoIwRdCCPAVEZ-mE00xTEKbHN78A89O5MncUhHuWL6mCnyAwSfXDr_xQgg_CI4vOceh0XPHdHtPwyReMJyibc7g8dS81xxFg2WVC39Hb5lKffDXWO/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAQi3O-lVqjmBfnCpHzXAUy4FH-vDaN5EOHaJryeHaIaRK2GqA7nQDCCtTvcobieJQ76tJokMY-8KRpampJ11_jKG7V24H0WzjG03WEffW1turGGN5mjoBm2nC8AsPnK7GrcVHLmXK2ejw/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAQi3O-lVqjmBfnCpHzXAUy4FH-vDaN5EOHaJryeHaIaRK2GqA7nQDCCtTvcobieJQ76tJokMY-8KRpampJ11_jKG7V24H0WzjG03WEffW1turGGN5mjoBm2nC8AsPnK7GrcVHLmXK2ejw/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAQi3O-lVqjmBfnCpHzXAUy4FH-vDaN5EOHaJryeHaIaRK2GqA7nQDCCtTvcobieJQ76tJokMY-8KRpampJ11_jKG7V24H0WzjG03WEffW1turGGN5mjoBm2nC8AsPnK7GrcVHLmXK2ejw/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCX-lPABmvq7WE7amWSfiJT38R5kaeBsPvD2AQsFjLhHzaN3kGYUNTtCFwK4PRSg72P8F07PKC9OQNp0XD_YG5pA_YyioJMTdhjSEWXE3_t4Pz50U8JSCx3lmJvkFCcRPh4up9GgJRiBbN/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhASjpuwBI2pg6zngVU5eHAPJ6EBprRTFocnlNXuG3jDxwkGp0Rvm9ugHviQkq0f8h758hY0Fb5O5wBqy3TuP_qB1ji6dLTo8B90Nm_K_jPRYLriQXW7wEOf0CnD9oegJVfVSvcFM5lHNC_/s1600/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#F1F1F1;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#F1F1F1;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAQi3O-lVqjmBfnCpHzXAUy4FH-vDaN5EOHaJryeHaIaRK2GqA7nQDCCtTvcobieJQ76tJokMY-8KRpampJ11_jKG7V24H0WzjG03WEffW1turGGN5mjoBm2nC8AsPnK7GrcVHLmXK2ejw/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}

.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->

<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3TrUb4szmrOm8ASIcvDsHA_4uA7ABrqosZYDSktXCo3Sg320aeB9ldHUIzdLdB6HzearB3V0BXbUkjFNoqEJUnrYDCD2VEdZidF6PAZr5bCshW-OKIg3GUEF_Xymi0N6cWSCswpGcPNh3/s1600/LikeUsOnFacebook.png" width:300px; height:150px;"/></center>
<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fmakesomesenseblog&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

</center>
<p style=" float:right; margin-right:35px; font-size:4px;" >Powered By <a style=" font-size:5px; color:#3B78CD; text-decoration:none;" href="http://www.makesomesense.com">Blogger Widgets</a> | Customized By: <a style=" font-size:5px; color:#3B78CD; text-decoration:none;" href="http://www.makesomesense.com">Blogging Tips</a> </p>
</div>
</div>

5. Now simply change the word "makesomesenseblog' with your own Facebook fan page name.

6. Save it.

Customization: This Facebook widget saves up a cookie in the visitors computer. You can also change the frequency. Just change the number 7 to the number of days your wish. If you want your Facebook widget to reappear after 30 days after the first time than simply change 7 to 30.

Work Done!

How To Add CSS Image Morph Effect To Post Images On Blogger

A few days ago, I posted How to add CSS auto zoom effect to post images on blogger. Now I am continuing with image effects this time with something really awesome. Adding image morph effect to blogger blog is quiet easy even beginners can easily add this amazing effect by following some simple steps.

What's New In This Effect?

The main feature of image morph effect is on hover, images will spin and morph from square to circle. This effect has complete 3D style look. By clicking on the below link you can see live demo of image morph effect.

LIVE DEMO

How To Add CSS Image Morph Effect To Blogger Blog

1. Login to Blogger.com
2. Go to Dashboard.
3. Click on "Template Section".
4. Click on "Customize"
5. Click on Advanced > Add CSS.
6. Copy the below code in CSS Section.

/* CSS Image Morph http://www.makesomesense.com */
.post img{border:10px solid #fff;overflow:hidden;-webkit-box-shadow:5px 5px 5px #111;box-shadow:5px 5px 5px #111;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease;margin:20px}
.post img:hover{border-radius:50%;-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
/* CSS Image Morph http://www.makesomesense.com */

7. Click "Apply Blog" to save settings.

That's it your work done.
Enjoy Blogging!

How To Add CSS Auto Zoom Effect To Post Images On Blogger

OK, so today i am going to share another post and today post is related to Advance CSS effect that how to add CSS auto zoom effect to post images on blogger blog. Every blogger and webmaster wants something unique in their site/blog for this you have to change something so that you can easily attract visitors. Due to the advancement of CSS code we can now use better effects in blogger. Even beginners can easily use CSS code. For adding this effect you have to add only one CSS code to blogger and can see auto zoom effect to post images.

Whenever you move mouse cursor towards post images it will automatically give a zooming effect which looks cool and unique. To know how to add CSS auto zoom effect to post images just follow the below steps.

LIVE DEMO

How To Add CSS Auto Zoom Effect To Post Images On Blogger

1. Login to Blogger.com
2. Go to Dashboard.
3. Click on "Template Section".
4. Click on "Customize"
5. Click on Advanced > Add CSS
6. Copy the below code in CSS Section

/* CSS image zoom effect http://www.makesomesense.com */
.post img {
height: 100%;
width: 100%; 
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease; 
} 
.post img:hover {
width: 150%;
height: 150%;
}
/*CSS image zoom effect http://www.makesomesense.com */

7. Click "Apply Blog" to save settings

That's it your work done.
Enjoy Blogging!

How To Add Awesome Social Sharing Widget For Blogger

Almost all bloggers and webmasters are fully aware of using social media following widgets and social sharing widgets. Social media plays vital role to increase traffic. Today I am sharing another widget and it is known as "Awesome Social Sharing Widget". The beautiful widget is used by all professional webmasters and bloggers, by add this widget it can make your blog or site attractive without effecting your blog/site loading time. How to add awesome social sharing widget to blogger blog. Follow the below steps.

LIVE DEMO

What's New

1. Easy to Install.
2. Easy to use.
3. Loads Faster.
4. Elegant Design
5. Built with best social networking sites

How To Add Awesome Social Sharing Widget For Blogger

1. Login to Blogger.com
2. Go To Dashboard.
3. Click on "Template Section".
4. Click on "Edit HTML"
5. Find ]]></b:skin> tag by pressing Ctrl+F
6. Paste the below code just above ]]></b:skin> tag.

div#bt-social-share { 
background:#f3f3f3; 
width:600px; 
height: 80px; 
border: 1px solid transparent; 
border-radius: 5px; 
-moz-border-radius: 5px;

-webkit-border-radius: 5px;   
}

#bt-social-share ul { 
list-style: none; 
clear: none; 
padding: 0px 0px ; 
margin: 25px 10px 0 0; 
float:right; 
} 
#bt-social-share ul li { 
display: inline; 
background:none; 
vertical-align:middle; 
margin:0; 
padding:0; 
} 
#bt-social-share ul li a { 
display: block; 
float: left; 
width: 32px; 
height:32px; 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhYhWSXOfAi0hyaj1FXco8kGDWdyVzue7Lojov-hzvjl3oEaWyKAdx7rvChjXM7inS9vgmG2vJvxVmXocZHG2W4s5N64EQLump7Vfq7kpzZsXWokv8Hw2k5XxWDvYX6tpituooh4WGMIgq/s1600/Social_sprites.png);
margin-left:3px; 
background-repeat: no-repeat; 
margin-right: 2px; 
-moz-transition: all 0.4s ease; 
-o-transition: all 0.4s ease; 
-webkit-transition: all 0.4s ease; 
-ms-transition: all 0.4s ease; 
transition: all 0.4s ease; 
}

#bt-social-share ul li a.facebook   {background-position: -0px -0px;  } 
#bt-social-share ul li a.facebook:hover {background-position: -0px -33px; }

#bt-social-share ul li a.twitter   {background-position: -32px -0px;  } 
#bt-social-share ul li a.twitter:hover {background-position: -32px -33px; }

#bt-social-share ul li a.google  {background-position: -64px -0px;  } 
#bt-social-share ul li a.google:hover{background-position: -64px -33px; }

#bt-social-share ul li a.pinterest    {background-position: -96px -0px;  } 
#bt-social-share ul li a.pinterest:hover  {background-position: -96px -33px; }

#bt-social-share ul li a.delicious   {background-position: -128px -0px; } 
#bt-social-share ul li a.delicious:hover  {background-position: -128px -33px;}

#bt-social-share ul li a.digg   {background-position: -160px -0px; } 
#bt-social-share ul li a.digg:hover  {background-position: -160px -33px;}

#bt-social-share ul li a.addtoany    {background-position: -192px -0px; } 
#bt-social-share ul li a.addtoany:hover  {background-position: -192px -33px;}

7. Save this now jump to the next tutorial.
Note: To change widget size of box, change this value 600px;

8. Now find tag <data:post.body/> by pressing Ctrl+F.
9. After finding <data:post.body/> tag paste the following code just below it.

<div id='bt-social-share'> 
<span style="font-family: 'Source Sans Pro', sans-serif;float:left; margin-left: 10px; font-size:14px; line-height: 80px; text-shadow: 0px 0px 1px #333;">Share This Story, Choose Your Platform! </span> 
<ul> 
<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li>

<li><a class='twitter' expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>

<li><a class='google' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li>

<li><a class='pinterest' href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'/>li>

<li><a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li>

<li><a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li>

<li><a class='a2a_dd addtoany' expr:href='&quot;http://www.addtoany.com/share_save?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' title='Share this post on others'/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li> 
</ul> 
</div>

10. Now save it.

Troubleshooting

While finding <data:post.body/> tag.You will see <data:post.body/> three times. This problem comes when we install Auto Read Hack in our blogs. For this you have to select any one tag which is given below and put the below code above given html code.

<div class='post-footer-line post-footer-line-1'>

Or

<div class='post-footer'>

Or

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<data:post.body/>

If you are still facing any problem kindly leave a comment. Work Done.

Enjoy!

How To Add Cute Social Bookmarking Widget For Blogger

Every blogger and webmaster knows very well about social bookmarking and its importance.To make perfect blog you must have atleast one social bookmarking widget. [TechEthix Property] made this beautiful social widget and it is known as "Cute Social bookmarking widget". Why the word Cute is used, because of its elegant and beautiful design that attracts every visitor. I have shared many social bookmarking widgets but this one is really outstanding as it is combined with CSS codes with premium thumbnails by DesignBolts.

What's Special In This Widget

1. Easy to install.
2. User Friendly
3. Customized with CSS codes.
4. Fast Loading (Doesn't take time to load).
5. Smooth Hovering Experience.

LIVE DEMO

How To Add Cute Social Bookmarking Widget For Blogger

1. Login to Blogger.com
2. Go To Dashboard.
3. Click on "Template Section".
4. Click on "Edit HTML"
5. Find ]]></b:skin> tag by pressing Ctrl+F
6. Paste the below code just above ]]></b:skin> tag.

ul.abt-social { list-style:none; margin:15px auto;display:inline-block; }
ul.abt-social li { display:inline; float:left; background-repeat:no-repeat; }
ul.abt-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
ul.abt-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
ul.abt-social li.abt-facebook { background-image:url("http://picoolio.net/images/2013/09/16/Facebook.png"); }
ul.abt-social li.abt-twitter { background-image:url("http://picoolio.net/images/2013/09/16/Twitter.png"); }
ul.abt-social li.abt-googlebuzz { background-image:url("http://picoolio.net/images/2013/09/16/Google-Plus.png"); }
ul.abt-social li.abt-stumbleupon { background-image:url("http://picoolio.net/images/2013/09/16/Stumble-Upon.png"); }
ul.abt-social li.abt-digg { background-image:url("http://picoolio.net/images/2013/09/16/Digg.png"); }
ul.abt-social li.abt-delicious { background-image:url("http://picoolio.net/images/2013/09/16/Delicious.png"); }
ul.abt-social li.abt-linkedin { background-image:url("http://picoolio.net/images/2013/09/16/Linkedin.png"); }
ul.abt-social li.abt-reddit { background-image:url("http://picoolio.net/images/2013/09/16/Reddit.png"); }
ul.abt-social li.abt-technorati { background-image:url("http://picoolio.net/images/2013/09/16/Technorati.png"); }
#abt-cssanime:hover li { opacity:0.2; }
#abt-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#abt-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#abt-cssanime li:hover { opacity:1; }
#abt-cssanime li:hover a strong { opacity:1; top:-10px; }

7. Now find tag <data:post.body/> by pressing Ctrl+F.
8. After finding <data:post.body/> tag paste the following code just below it.

<b:if cond='data:blog.pageType == "item"'>
<div style="text-align: center;">
<span style="color: black; font-family: Trebuchet MS; font-size: 14px;"><b>If You Enjoyed This Take 5 Second to Share it.</b></span>
<a href="http://techethix.blogspot.com/" rel="dofollow"></a>
<ul class='abt-social' id='abt-cssanime'>
<li class='abt-facebook'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><strong>Facebook</strong></a>
</li>
<li class='abt-twitter'>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
</li>
<li class='abt-googlebuzz'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
</li>
<li class='abt-stumbleupon'>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
</li>
<li class='abt-digg'>
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Digg</strong></a>
</li>
<li class='abt-delicious'>
<a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a>
</li>
<li class='abt-linkedin'>
<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
</li>
<li class='abt-reddit'>
<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Reddit</strong></a>
</li>
<li class='abt-technorati'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a>
</li>
</ul>
<br />
<div style="text-align: right;">
<span style="font-family: Times, Times New Roman, serif; font-size: 10px;"><a href="http://gg.gg/cshwfb" rel="dofollow" target="_blank" title="Get This WIdget">Get</a></span></div></div>
</b:if>

9. That's You are done. Save it

Note: This Widget is made by [TechEthix Property] . Don't delete or edit anything in this widget. If you removed or deleted something from widget there could be copyright violation complain against you.

If you are facing any problem please let me know.

Thanks, 
Enjoy Bookmarking!

How to Add JQuery Page Peel Away Effect To Blogger Blog

One of the coolest feature to have in your blog is page peel effect or page flip effect.To add this peel away effect to blogger blog, that is when you hover over the peal of area you will see a cool page peel off like effect. Adding this effect in blog is easy. You can also add this widget in your website. This effect is done by using JQuery language which is pretty amazing. Too see demo click on the below link

DEMO LINK

First let talks about the appearance. Just like other page peel effect widget it will also appear on the top right corner of your blog. Whenever visitor will move mouse towards the top right corner it will display the hidden  advertisement with amazing JQuery peel effect. Follow the below steps to know how to add this amazing page peel effect to blogger.

How to Add JQuery Page Peel Away Effect To Blogger Blog

1. Login to Blogger.com

2. Go to "Template"

3. Click on "Edit HTML"

4. Search for ]]></b:skin> tag by pressing Ctrl+F
5. Just above ]]></b:skin> tag paste the following Stylesheet CSS Coding

/*=======================================================
Makesomesense - Technology, Blogging, Tutorials, Gaming, SEO, Wordpress   =======================================================*/

.admin-bar #PagePeel{top:27px;}

/*Extra 20px height and width to allow for shadow and movement*/
#PagePeel{
    height:120px;
    overflow:hidden;
    position:absolute;
    right:0;
    top:0;
    width:120px;
    z-index:9999;
}
  
#PagePeel svg{
    overflow: hidden;
    position: absolute !important;
    right: 0;
    top: 0;
}

#PagePeel .pointCursor:hover{cursor:pointer;}

#mycontent { position:relative; margin-left:30px; }

6. Now after adding CSS code search for </head> tag by pressing Ctrl+F
7. And below it paste the following JavaScript code. (Note: You can also add below code in "HTML/Javascript" section)

<!--Makesomesense - Technology, Blogging, Tutorials, Gaming, SEO, Wordpress-->

<script type='text/javascript' src='https://googledrive.com/host/0B0WJjcJEFNziazIzXzlhMlhtWlU'></script>
<script type='text/javascript' src='https://googledrive.com/host/0B0WJjcJEFNziMmk4anpFWnRPWHc'></script>
<script type='text/javascript' src='https://googledrive.com/host/0B0WJjcJEFNzidExmT1JpWV9xNmc'></script>

<div id="mycontent">Peel Away Effect By <a href="http://www.mybloggerlab.com">MyBloggerLab.com</a></div>
<script type='text/javascript'>
/* <![CDATA[ */
var PagePeelProParams = {"smallImageUrl":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhdQrB09CMI5LqUR-g8SJEXeeWgXAEaHMF_14A1SdiU6MA0xDBQK0sOHjUTXPzD3_TjfztHxC4K1nnYG5oUXs4m19-oN7gI_e-kzEVbc61iyno3P76uRb_EhoAcMA-cn7vXlNZFUVD_RM/s1600/DottedAdvertSmall.png","largeImageUrl":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZWA22sMtrzoyZh7b0F3-kk0KdtwfXPs7ztbn0V2fTfQv3IgDvtvmkcg6EsaNU7VuD6VhtOhhGr3NTCiDq2JijLY3loQ8eQpVylaMy-KMqR8YVqVMQgfQAL5W3dHf0RJSsFt91NQEc_8c/s1600/Temppeel.png","peelColorStart":"#545454","peelColorEnd":"#cdcdcf","pagePeelTargetUrl":"http://www.makesomesense.com","pagePeelActivateEvent":"hover"};
/* ]]> */

</script>

Customization: If you want to show your advertisement then replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZWA22sMtrzoyZh7b0F3-kk0KdtwfXPs7ztbn0V2fTfQv3IgDvtvmkcg6EsaNU7VuD6VhtOhhGr3NTCiDq2JijLY3loQ8eQpVylaMy-KMqR8YVqVMQgfQAL5W3dHf0RJSsFt91NQEc_8c/s1600/Temppeel.png with your image URL. Make your size of image should be 500px in height and 500px in width.

Replace http://www.makesomesense.com with your advertisement URL.Kindly not it is not necessary to always add URL because it also we can use it for notification purpose.

8. Save template.

Work Done

Happy Blogging!

How To Add Blowing Bubble Effect To Mouse Cursor

Adding blowing bubble effect to mouse cursor is easy to implement.By adding this simple JavaScript code you can give your mouse cursor a blowing bubble effect. Every time when you move a mouse cursor around it produces small pink bubbles effects and float away on the top of the screen. If you know about CSS then you can customize colors and other CSS codes. To add this widget you have to follow below steps.

How To Give Your Mouse Cursor A Blowing Bubbles Effect

1. Login to Blogger.com

2. Click on "Layout"

3. Click on "Add A Gadget"

4. Click on "HTML/JavaScript"

5. Copy the below code

<script type="text/javascript">
var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // warna untuk border-top, border-right, border-bottom, border-left dan background gelembung
var bubbles=100; // jumlah maksmal gelembung
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();
window.onload=function() { if (document.getElementById) {
var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");
rats.style.visibility="hidden";
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter="alpha(opacity=50)";
document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}
function bubble() {
var c;
if (x!=ox || y!=oy){
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+"px";
bubb[c].top=(bubby[c]=y)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
}
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout("bubble()", 40);
}
function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
}
bubb[i].top=bubby[i]+"px";
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown;
}
window.onresize=set_width;
function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}
window.onscroll=set_scroll;
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;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}
</script>

6. Save it.

Work Done.
Enjoy Bubble Effects!