Showing posts with label Widget. Show all posts
Showing posts with label Widget. Show all posts


How to Add Jumbo Social Share Bar with Counters in Blogger

Are you looking to add a Jumbo social share bar in Blogger? Why it is called a Jumbo Social Bar? What's the catch? You might have seen those nice looking social sharing buttons that show the total number of social shares counts that your particular post or page has received. Today in this article, we will show you how to add jumbo social sharing bar with counters in blogger.
- by MBL Networks

What is Jumbo Social Share Bar?
This social share bar work like social share bar. It consists of a big Ajax build counter that counts overall shares for your posts and pages.

You can check out the demo if this widget here.

To add Jumbo Social bar we will be using a plugin called donReach social plugin that is flexible, easy to customize, responsive and more over it is FREE. They are one of the most lightweight and user-friendly social share buttons which will certainly increase your social signals and shares.

Add Jumbo Social Share Bar with Counters in Blogger

The very first thing you need to do is to take a backup of your Blogger template, just to be on safe side if anything goes wrong. Hint: (Go to Blogger >> Template >> Backup/Restore >> Download Full Template).

To add Jumbo social share bar, Go to Blogger >> Template >> Edit HTML and Search for the ]]></b:skin> tag. After finding the ]]></b:skin> tag, just above it paste the following code:

/* Jumbo Social Share Bar */

.don-share .don-share-total .don-count {
font-size: 40px;
text-align: center;
font-weight: 600;
color: #ff0036;
border-right: 1px solid #eee;
padding-right: 18px;
margin-right: 20px;
margin-bottom: 0;
.don-share .don-share-total .don-count:after {
line-height: 30px;
color: #a6a6a6;
font-weight: 300;
font-size: 12px;
text-transform: capitalize;
content: "Share";
.don-btn {
background-image: none;
box-shadow: none;
.don-share i {
border: 0!important;
text-align: center;
width: auto;
font-size: 16px; margin-bottom:10px;
.don-share .don-share-total:after {
display: none;
.don-share .don-share-total {
line-height: 45px;
margin: 0;
.don-share [class*=' don-share-'],
.don-share [class^=don-share-] {
margin: 0px 10px 0px 0;
.don-share {
margin: 15px 0px 15px 0;
border-bottom: 1px solid #eee;
padding-bottom: 15px;

Now to install the donReach social plugin, in the Blogger Template editor search for </head> and just above it paste the following JavaScript code:

<script type='text/javascript'>
(function() {
var dr = document.createElement('script');
dr.type = 'text/javascript'; dr.async = true;
dr.src = '//';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr);

Finally to display the Social share bar, paste the below code anywhere you want it to appear in your blog. Ideally, users like it to display either below or above the post content. To display it above post content and below post title, in the template editor search for <data:post.body/> and just above it paste the following code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='don-share' data-limit='3'>
  <div class='don-share-total'/>
  <div class='don-share-facebook'/>
  <div class='don-share-twitter'/>
  <div class='don-share-pinterest'/>

Currently, the widget show 3 share buttons but you can add more buttons as per your needs. Check out the examples at donReach page.

Once everything is done, press Save template button and you have successfully added Jumbo Social Share bar in Blogger.


How To Add Related Posts Widget To Blogger with Thumbnails

Related Posts Widget To Blogger with Thumbnails

Here is a wonderful hack for displaying related posts beneath each of your blog posts, along with thumbnails. The related articles are chosen from other posts in that same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest.

Adding the Related Posts Widget to Blogger 

Step 1. Log in to your Blogger account  and go to Template > Edit HTML

Step 2. Click anywhere inside the code area and press the CTRL + F keys:

Step 3. Search for this piece of code adding it inside the search box (hit Enter to find it)


Step 4. Copy and paste the below code just before/above the </head> tag:

<!--Related Posts with thumbnails ScriptsnStart-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
#related-posts h2 {
    margin-top: 10px;
#related-posts .related_img {
    border:4px solid #B2B2B2;
    transition:all 300ms ease-in-out;
    -webkit-transition:all 300ms ease-in-out;
    -moz-transition:all 300ms ease-in-out;
    -o-transition:all 300ms ease-in-out;
    -ms-transition:all 300ms ease-in-out;
#related-title {
    color: #222;
    line-height: 16px;
    padding: 0 24px;
    text-align: center;
    text-shadow: 0 2px 2px #fff;
    width: 100px;
#related-posts .related_img:hover{
#related-title:hover {
    text-decoration: underline;
<script type='text/javascript'>
imgr=new Array();imgr[0]="";showRandomImg=true;aBold=true;summaryPost=400;summaryTitle=20;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
  function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<;k++){if([k].rel=='alternate'){[k].href;break}}for(var k=0;k<;k++){if([k].rel=='replies'&&[k].type=='text/html'){[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="related_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]=''}for(var k=0;k<;k++){if([k].rel=='alternate'){relatedUrls[relatedTitlesNum][k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h2>'+relatedpoststitle+'</h2>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
<!--Related Posts with thumbnails Scripts End-->

- to change the width and height of thumbnails, modify 200px and 120px values in red
- to change the color and size of related posts titles, change the value in blue
- remove the line in violet if you want the related posts to be displayed both in homepage and post pages.

Step 5. Find the line below (you will find two times, but you need to stop at the second one):
<div class='post-footer'>

Step 6. Just above that line, paste next code:

  <!-- Related Posts with Thumbnails Code Start-->
<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 cond='data:blog.pageType == &quot;item&quot;'>
        <script expr:src='&quot;/feeds/posts/default/-/&quot; + + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=3&quot;' type='text/javascript'/></b:if></b:loop>
        <script type='text/javascript'>
            var currentposturl=&quot;<data:post.url/>&quot;;
            var maxresults=3;
            var relatedpoststitle=&quot;Related Posts:&quot;;
<!-- Related Posts with Thumbnails Code End-->

 - change the 3 value from max-results=3 with the number of posts you want to be displayed
- if you want the related posts to be displayed on homepage too, then remove the lines in violet

If you are unable to see the related posts widget after saving the template, add the code (step 5) just above the </includable>  tag which can be found above this line (CTRL + F to find it):

<b:includable id='postQuickEdit' var='post'>

Step 7. Save the Template and that's it. Now the Related Posts widget should appear below each blog post that has labels on it. Enjoy!


Add Cool Subscription Box For Blogger

Email subscribers is becoming a major concern for every blogger over the internet.Using the default subscription box by feedburner will not gain as much subscribers as a customized subscription box will gain.Take a look at the image attached with this post.The sharing buttons have a little bit nudging effect.This subscription widget contains CSS sprites.

Follow these simple steps to add this widget in your blog:
1).Go to Blogger Dashboard>Design>Page Elements.
2).Select "Add a Gadget".
3).Choose "Html/JavaScript" and paste the following code inside it
.sBlack {
background: none repeat scroll 0 0 #282828;
height: 95px;
padding-bottom: 10px;
.sBlack .subscribeTop .mcLeft {
background: url("") no-repeat scroll 0 -173px transparent;
display: block;
float: left;
height: 83px;
margin: 8px;
width: 101px;
.sBlack .subscribeTop .mcRight {
display: block;
float: left;
margin: 0;
width: 165px;
.sBlack .subscribeTop .mcRight h4 {
background: url("") no-repeat scroll 0 -305px transparent;
display: block;
height: 15px;
margin: 10px 0 0 -2px;
text-indent: -9999px;
width: 164px;
z-index: -1;
.sBlack .subscribeTop .mcRight div.getposts {
color: #767676;
font-size: 11px;
line-height: 13px;
margin: 3px 0 -5px;
text-shadow: none;
.sBlack #mc_embed_signup fieldset {
border: medium none;
margin: 0;
padding: 0;
.sBlack .subscribeTop .mcRight form.getfrom {
margin-top: -5px;
padding: 0;
.socialsharebuttons {
background: none repeat scroll 0 0 #F2F2F2;
border-bottom: 1px solid #E6E6E6;
border-top: 1px solid #E6E6E6;
display: block;
margin: 10px auto 10px 0;
overflow: hidden;
padding-top: 6px;
.social { float: center; }
.social li { float: left; margin: 0 0 0 5px; }
.social li a { background: url( no-repeat; display: block; height: 35px; text-indent: -999em; width: 32px; }
.social li a.rss { background-position: 0 -263px; }
.social li { background-position: 0 0; }
.social li a.facebook { background-position: 0 -99px; }
.social li a.twitter { background-position: 0 -363px; }
.social li a.technorathi { background-position: 0 -326px; }
.social li { background-position:0 -136px; }
.social li { background-position: 0 -400px; }
.social li a.subscribe { background-position: 0 -300px; }
.social li a.mailbox { background-position: 0 -173px; }
.social li a.subscribe { background-position: 0 -300px; }
.social li a.mailbox { background-position: 0 -173px; }
.social li a:hover { position: relative; top: -2px; }
<div style="margin-left:0px; margin-top:-5px;" class="sbBlock sBlack">
<div id="mc_embed_signup" class="subscribeTop clearfix">
<div class="mcLeft"></div>
<div class="mcRight">
<h4>Subscribe now</h4>
<div style="margin-bottom:2px;" class="getposts"><strong>Subscribe By Email To Receive Free Updates</strong></div>
<div style="clear:both;"></div><form target="popupwindow" style="border:none;text-align:left;" onsubmit="' target='_blank', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="getform" action=""><input type="text" style="width:128px; height:16px;" name="email" onblur="if (this.value == "") {this.value = "enter your email";}" onfocus="if (this.value == "enter your email") {this.value = ""}" value="Enter your email" /><span class="float:left;"><input type="hidden" value="ekWMe" name="uri" /><input type="hidden" value="en_US" name="loc" /><input type="submit" style="padding-top:3px; padding-left:1px; margin-bottom:-2px; margin-left:2px; padding-right:1px; border: 1px solid #333333;cursor: pointer; background-color: #828282;text-decoration:bold; color: #000; padding-bottom:4px; height:25px;" value="Go" /></span></form>
<div style="background-color: rgb(40, 40, 40); margin-top: -5px; width: 305px; height:75px">
<table border="0" style="border-top:1px #888 solid;"><tbody><tr></tr><tr><td>
<widget class="social">
<div id="footer-list-none">
<li><a class="rss" href="" rel="nofollow" title="Subscribe Via RSS">RSS</a></li>
<li><a href="" class="googleplus" title="Add Me On Google+">Google+</a></li>
<li><a class="facebook" href="" rel="nofollow" title="Find Us On Facebook">Facebook</a></li>
<li><a class="twitter" href="" rel="nofollow" title="Follow Us On Twitter">Twitter</a></li>
<li><a class="technorathi" href="" rel="nofollow" title="Add To Technorati">Technorathi</a></li>
<li><a class="google" href="" rel="nofollow" title="Add To Google">Google</a></li>
<li><a class="yahoo" href=" target='_blank" rel="nofollow" title="Add To Yahoo!">Yahoo</a></li>
<p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:right;"><a style="color:#D3D3D3;" href="">Get This Widget</a></p>

Replace All the red bolded lines with the required services.If you want to remove any one of the icon you don't want to use just remove from the <li> and end with this tag </li>.


Beautiful Automatic Featured Posts Slider Widget for Blogger

When comparing Blogger with WordPress, we often lament the lack of easy-to-install plugins on Blogger. While this post isn’t going to magically port WordPress plugins to Blogger, it will help you add a smart, automated and customizable Featured Posts Slider on your blogger blog.

 Automatic sliding doors are dynamic content in many popular websites on the web.This is a great technique to represent different types of content in a limited space and a good way to involve the user.You have probably noticed that a lot of websites recently a working area with content that slides or changes in any way.

The point being driven at here is that you have to offer more on your blog. It's not enough that you get traffic from search engines and other sites; you also have to add some extras that will entice visitors to stay longer.
How exactly do you do that?

The Tactics of Persuading Users to Stay

Bloggers have employed a variety of tactics to persuade readers to stay. For one, they load the sidebar with widgets for Popular Posts, for example. Of course, it would be in the interest of your readers to know which other posts on your blog are gaining traction. Maybe those pieces are of interest to them as well. As a result, you've got one surefire way of making readers stay.

Now, what if you want to highlight Featured Posts, for example? Let's say that your blog has been around for a number of years and in that span, it has produced some great content that received quite the number of shares, likes, +1s, comments on so on. Wouldn't that be the kind of post you want featured? Unless your reader was looking for that topic specifically, there's little chance that they might uncover that gem if you don't bring it to their attention.

Thankfully, it's quite possible to add a Featured Posts slider for Blogger. And if you don't know how to make one yourself, this is exactly what this post is for. Here's an awesome Featured Posts slider widget that you can use on your blog.
Featured Posts Slider
How to Add Featured Posts Slider Widget in Blogger
1. Go to 'Layout' > click the 'Add a gadget' link in the sidebar area and select 'HTML/JavaScript' gadget from the pop-up window.
2. Add the code below inside the empty box:
<style type="text/css">
ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative }ul.featured-widget-list li{display:none}ul.featured-widget-list li:nth-child(1){display:block;line-height:0}ul.featured-widget-list img{border:0;width:100%;height:auto}ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(;background-position:0% 100%;background-repeat:repeat-x}ul.featured-widget-list .featuredbg:hover{opacity:.1}ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform: capitalize;padding:10px 20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px 'Abel', sans-serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'Abel', sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}
.feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:"";width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}
.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}
<div id="featuredbwidget"></div>
<link href='' rel='stylesheet' type='text/css'/>
<script src="" type="text/javascript"></script>
<script type='text/javascript'>

listURL: "",
featuredNum: 7,
listbyLabel: false,
feathumbSize: 350,
interval: 5000,
autoplay: true,
featuredID: "#featuredbwidget"
function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div class="featslider"><ul class="featured-widget-list"></ul><div class="feat-buttons"><a href="#" class="feat-prev">Prev</a><a href="#" class="feat-next">Next</a></div></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.byMonth[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="featuredbg"></div><img class="featuredthumb" src="'+u+'"/><h5>'+k+'</h5></a><div class="featured-meta"><span class="fdate"><span class="fday">'+t+'</span> <span class="fmonth">'+v+'</span> <span class="fyear">'+x+'</span></span> - <span class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+" .feat-next").click()};var b=function(){e.get((h.listURL===""?window.location.protocol+"//""/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+" .feat-prev").click(function(){e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));return false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" .featslider li:last").after(e(h.featuredID+" .featslider li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+" .featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};

listURL - replace "" with your blog URL
featuredNum  - add the number of posts to display in the slider
listbyLabel - if you want to display posts by category / label, such as the tag fashion, it will be written as listbyLabel: "fashion"
feathumbSize - the size or dimension of the image in pixels
interval - time taken to change the slides position in milliseconds
autoplay - replace true with false if you don't want the slides to change automatically.

3. Once you are done with the settings, click the 'Save' button.


Jquery and Css Vertical Drop Down Menu

Great Widget because it does not takes a lot space even makes you more valuable space and still is the main thing, the navigation menu just as this is the on the side bur and if you have a little more knowledge of jquery or css area, then you can also do custom variants. I looks nice and is very functional. You have a a demo, it is easy to install and easy to uninstall. Just remove the widget.
Jquery and Css Vertical Drop Down Menu

First and most important for the widget, to work is to add this code into the blogger immediately after <head> tag
<script src="">

Place the following code into the HTML / JavaScript box in the sidebar and that's all.

Replace all with this COLOR with your titles or tags

Replace  hashtag #' with your link

Replace this - width,  width: 300px;   as needed

You can make some more custom variation because it's very easy to handle

That's all, click save and your done, happy bloging


4 Flip Trick Download Buttons For Blogger

4 Flip Trick Download button widget for blogger to allow users to download files, videos , codes and videos.
Download Buttons
Flip trick download button widget for blogger that can be used as a button to download files like codes, scripts, videos and any type of file. Built in html and css and completely customizable. It has some of the new and unseen CSS Hover effect which you will definitely like. It has css hover effect and now in this post again we are using the css hover effect but with a flip trick effect that can be put in blogger easily.
In this widget for blogger when you hover your mouse on the icon then images disappeared and the text appears with color changing down arrow button. It is quite complicated to describe that widget but when you will see a demo you will get my point. These are extremely useful when you use the download option in your post for example if you want to insert a download button for users where they can download files. You can use this for any type of file like script, codes, images, rar files, videos and any other if left.

How To Install ?
To add Flip Trick Download Buttons, Go to Blogger >> Template >> Edit HTML and Search for the ]]></b:skin> tag. After finding the ]]></b:skin> tag, just above it paste the following code:
color: #fff;
text-decoration: none;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );
border:1px solid #5d81ab;
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
margin:10px 0px;
-webkit-transition:box-shadow 0.3s ease-in-out;
-moz-transition:box-shadow 0.3s ease-in-out;
-o-transition:box-shadow 0.3s ease-in-out;
transition:box-shadow 0.3s ease-in-out;
.shreem img{
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
.shreem .shreem-text{
text-shadow:0px 1px 1px rgba(0,0,0,0.3);
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
text-shadow:0px -1px 1px #5d81ab;
.shreem-avdhoot-text small{
border-left:1px solid #5d81ab;
-webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
-moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
.shreem-avdhoot-text-right span{
margin:-20px 0px 0px -20px;
border:1px solid rgba(0,0,0,0.5);
background:#5b5b5b url( no-repeat center center;
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
.shreem:hover img{
.shreem:hover .shreem-text{
.shreem:hover .shreem-avdhoot-text-right span{
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
.shreem:active .shreem-avdhoot-text-right span{

- Now Copy and paste the html code at the place where you want to show this widget.
- You can insert this animated button in gadgets or inside the page.
<div class="content">
<div class="button-wrapper">
<a href="#" class="shreem">
<span class="shreem-text">$29</span>
<img src="" alt="codes" />
<span class="shreem-avdhoot-text"><small>Full Code &amp;</small> Download</span>
<span class="shreem-avdhoot-text-right"><span></span></span></a>
<a href="#" class="shreem">
<span class="shreem-text">$19</span>
<img src="" alt="images" />
<span class="shreem-avdhoot-text"><small>All Free Images &amp;</small> Download</span>
<span class="shreem-avdhoot-text-right"><span></span></span></a>
<a href="#" class="shreem">
<span class="shreem-text">$24</span>
<img src="" alt="video" />
<span class="shreem-avdhoot-text"><small>Full Video &amp;</small> Download</span>
<span class="shreem-avdhoot-text-right"><span></span></span></a>
<a href="#" class="shreem">
<span class="shreem-text">$39</span>
<img src="" alt="All files" />
<span class="shreem-avdhoot-text"><small>Free Files &amp;</small> Download</span>
<span class="shreem-avdhoot-text-right"><span></span></span></a></div></div></div>
That's all you have to do. So this was the simplest way to add animated buttons widget for blogger. A simple copy and paste code.
If you like it, please, don't be hesitate to share or like this post. Thank you! 


3D Flying Book Navigation Menu Bar

3D Flying Book Navigation Menu Bar widget for blogger. Fast in loading developed in html and css without any javascript. Best and one of the top widget for blogger blog.

3D Flying Book Navigation Menu Bar
  1.     Login to Blogger → Dashborad
  2.     Click on Drop Down Menu and select Layout
  3.     Add a HTML/JavaScript Gadget
  4.     Paste below code in it.

      5. Save template and you'rre done.
      6. Replace your codes and URLs

This is it. Now when you have the full code just copy it inside the gadget and save. You are done. If you liked this 3D navigation menu widget for blogger then please share it and write comments as your feedback.