Showing posts with label Widgets. Show all posts
Showing posts with label Widgets. Show all posts

6/14/2016

Flipper Sharing Widget




This gadget can be inserted easily in any blogging platform by making simple changes to the Sharing links. Blogger users can follow these easy steps to install flipper on their blogs:

  1. Go To Blogger  Template
  2. Back up your template
  3. Click Edit HTML  Proceed
  4. Click the Expand Widget Templates box
  5. Search for  <data:post.body/>
  6. Just below it paste the following HTML code









<style> /*--------http://blogger-templatees.blogspot.com/ ------*/ .flipper a { display:block; height:48px; width:48px; padding:0 4px; float:left; background:transparent url(http://4.bp.blogspot.com/-dlD3BDKTZjA/T9IuXkfhSeI/AAAAAAAAGno/s8BGOkjdwX0/s1600/flipper.png) no-repeat; -webkit-transition: ease-in 0.15s all;   -moz-transition: ease-in 0.15s all;   -o-transition: ease-in 0.15s all;   -ms-transition: ease-in 0.15s all;   transition: ease-in 0.15s all; cursor:pointer; } .flipper a.googleplus { background-position: 0px -348px; } .flipper a.googleplus:hover { background-position: 0px -406px; } .flipper a.pinterest { background-position: 0px -464px; } .flipper a.pinterest:hover { background-position: 0px -522px; } .flipper a.delicious { background-position: 0px 0px; } .flipper a.delicious:hover { background-position: 0px -58px; } .flipper a.digg { background-position: 0px -116px; } .flipper a.digg:hover { background-position: 0px -174px; } .flipper a.stumbleupon { background-position: 0px -812px; } .flipper a.stumbleupon:hover { background-position: 0px -870px; } .flipper a.technorati { background-position: 0px -928px; } .flipper a.technorati:hover { background-position: 0px -406px; } .flipper a.twitter { background-position: 0px -928px; } .flipper a.twitter:hover { background-position: 0px -986px; } .flipper a.facebook { background-position: 0px -232px; } .flipper a.facebook:hover { background-position: 0px -290px; } .flipper a.reddit { background-position: 0px -580px; } .flipper a.reddit:hover { background-position: 0px -638px; } .flipper a.rss { background-position: 0px -696px; } .flipper a.rss:hover { background-position: 0px -754px; } .Pleaseshare{ margin:10px 0px; color:#333333; font-weight:bold; font-size:20px; font-family:sans-serif; } </style> <div class='flipper'> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class="Pleaseshare"> Please Share it! :) </div> <!--Google Plus--> <a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/> <!--Facebook--> <a class='facebook' 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' title='Share this on Facebook :&gt;'/> <!-- Twitter --> <a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/> <!-- Pinterest --> <a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/> <!-- Delicious --> <a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/> <!--DIGG--> <a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/> <!--Stumble--> <a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/> <!-- Reddit --> <a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/> <!--RSS --> <a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Bookmark plz :&gt;'/> </b:if></div> <div style="clear:both"/>



  • To change the color of the text that appears on top of widget edit #333333

  • If in case you want to remove some icons then just delete its code. For example if you want to remove  Digg icon from the list then just need to delete the next code:
<!--DIGG--> 
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>



The HTML has been cleanly indented and structured so you would not encounter any trouble playing with the code.




3/02/2016

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 mashable.com 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 = '//share.donreach.com/buttons.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr);
})();
</script>

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'/>
</div>
</b:if>

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.


12/17/2015

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
<style>
.sBlack {
background: none repeat scroll 0 0 #282828;
height: 95px;
padding-bottom: 10px;
}
.sBlack .subscribeTop .mcLeft {
background: url("http://3.bp.blogspot.com/-DxVgFqUxZbU/Toi-VHL10MI/AAAAAAAAAoM/Vg5wJ3x3S9k/s1600/CSS_Sprite-technetsavvy.png") 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("http://3.bp.blogspot.com/-DxVgFqUxZbU/Toi-VHL10MI/AAAAAAAAAoM/Vg5wJ3x3S9k/s1600/CSS_Sprite-technetsavvy.png") 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(http://3.bp.blogspot.com/-DxVgFqUxZbU/Toi-VHL10MI/AAAAAAAAAoM/Vg5wJ3x3S9k/s1600/CSS_Sprite-technetsavvy.png) no-repeat; display: block; height: 35px; text-indent: -999em; width: 32px; }
.social li a.rss { background-position: 0 -263px; }
.social li a.google+ { 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 a.google { background-position:0 -136px; }
.social li a.yahoo { 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; }
</style>
<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="window.open('http://feedburner.google.com/fb/a/mailverify?uri=CINHv target='_blank', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="getform" action="http://feedburner.google.com/fb/a/mailverify"><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>
</div>
</div>
<center>
<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="http://feeds.feedburner.com/blogspot/CINHv" rel="nofollow" title="Subscribe Via RSS">RSS</a></li>
<li><a href="https://plus.google.com/u/7/+AnaLeighReal?rel=author" class="googleplus" title="Add Me On Google+">Google+</a></li>
<li><a class="facebook" href="https://www.facebook.com/freebloggerthemes/" rel="nofollow" title="Find Us On Facebook">Facebook</a></li>
<li><a class="twitter" href="https://twitter.com/ClassyBloger" rel="nofollow" title="Follow Us On Twitter">Twitter</a></li>
<li><a class="technorathi" href="http://technorati.com/faves?sub=addfavbtn&add=http://mix--er.blogspot.com" rel="nofollow" title="Add To Technorati">Technorathi</a></li>
<li><a class="google" href="http://fusion.google.com/add?source=atgs&feedurl=http%3A//feeds.feedburner.com/ekWMe" rel="nofollow" title="Add To Google">Google</a></li>
<li><a class="yahoo" href="http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/ekWMe 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="http://blogger-templatees.blogspot.com/">Get This Widget</a></p>
</div>
</widget>
  
  
</td></tr></tbody></table></div></center> 

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

11/17/2015

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="http://code.jquery.com/jquery-latest.min.js">

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


11/07/2015

How to Add a Professional eRose Author Bio Widget

Professional eRose Author Bio Widget
Many Bloggers wants the new and fresh widgets of blogger and most of the saying we want new author bio widget which includes the all aspects of blogging like Social Media as Facebook, Twitter, Youtube etc. so keep it in mind, in this widget you will get Donation Button, Be a Blogger Button and much when you use this widget.
  • Login to Blogger → Dashborad
  • Click on Drop Down Menu and select Template
  • Backup your Template before making any changes to your blog
  • Press Ctrl + F and search the code shown below.
 ]]></b:skin>

Paste below code just above it.

.clear {clear:both;}#author-box {margin:10px 0;}#author-box a:hover {background:none!important;}#author-box .row-1 {background:#333;padding:20px;}#author-box .row-1 .avatar {float:left;line-height:1;-moz-box-shadow:0 0 10px #FFF;-webkit-box-shadow:0 0 10px #FFF;box-shadow:0 0 10px #FFF;}#author-box .row-1 .info {margin:0 0 0 110px;}#author-box .row-1 .info h6 {color:#FFF;font-size:20px;margin:-4px 0 0;}#author-box .row-1 .info h6 span {font-size:11px;font-weight:400;background:#1BA1E2;-webkit-border-radius:40px;-moz-border-radius:40px;border-radius:40px;filter:alpha(opacity=60);opacity:0.6;margin:0 0 0 1em;padding:1px 9px 2px;}#author-box .row-1 .info p {color:#DDD;font-weight:400;font-size:14px;margin:0;}#author-box .row-2 {background:#666;}#author-box .row-2 a.social-item {display:block;float:left;color:#FFF;text-align:center;padding:15px;}#author-box .row-2 .social-item .icon {height:32px;width:32px;}#author-box .row-2 .social-item > span {display:block;text-align:center;margin:auto;}#author-box .row-2 .social-item .label {font-weight:700;font-size:13px;}#author-box .row-2 .social-item .click {font-size:11px;color:#EAEAEA;line-height:1;}#author-box .row-2 a.social-item:hover {background:#1BA1E2!important;}#author-box .row-3 {background:#1BA1E2;}#author-box .row-3 form,#author-box .row-3 a.donation-button {display:block;float:left;}#author-box .row-3 .donation-button {background:#1BA1E2;border:none;font-family:Impact;font-size:30px;color:#FFF;line-height:1.2em;margin:0;padding:10px;}#author-box .row-3 .donation-button:hover {background:#000;cursor:pointer;}#author-box .row-3 .register-button {display:block;color:#FFF;border:none;font-family:Impact;font-size:30px;text-align:right;line-height:1.2em;margin:0;padding:10px;}#author-box .row-3 .register-button:hover {color:#000;cursor:pointer;}#author-box .row-2 .social-item.twitter .icon {background-position:0 -32px;}#author-box .row-2 .social-item.facebook .icon {background-position:0 -64px;}#author-box .row-2 .social-item.gplus .icon {background-position:0 -96px;}#author-box .row-2 .social-item.linkedin .icon {background-position:0 -128px;}#author-box .row-2 .social-item.youtube .icon {background-position:0 -160px;}#author-box .row-2 .social-item.pinterest .icon {background-position:0 -192px;}#author-box .social-item .icon {background-image:url(https://lh5.googleusercontent.com/--PQVoN23nrI/UYHHvhtNSxI/AAAAAAAAJPA/5weO87qvER4/s224/ausocial.png)!important;background-repeat:no-repeat;}

Now Search for below code once again

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

Paste below code just after it.
<div id='author-box'> <div class='row row-1'><div class='avatar'><a href='http://blogger-templatees.blogspot.com/2015/11/how-to-add-professional-erose-author.html'><img alt='author-avatar' class='avatar avatar-90 photo' height='90' src='https://s-media-cache-ak0.pinimg.com/564x/05/8d/fb/058dfbc365f2e8b0a900c4a338e8326e.jpg' width='90'/></a>  </div> <div class='info'>  <h6>Posted By: Autor (Your Name)<span>Admin and Author</span></h6><p><strong><a href='http://blogger-templatees.blogspot.com/2015/11/how-to-add-professional-erose-author.html'>Ana </a> is Blogger Girl, one of many in the world.</strong> <strong>Graduate in Computer Applications,  Love to Make Blogger Hacks and Like to Play with HTML and a Business Woman.</strong></p></div> <div class='clear'/> </div><div class='row row-2'> <a class='social-item website' href='http://blogger-templatees.blogspot.com/' meta='website' target='_blank'> <span class='icon'/> <span class='label'>Website</span><span class='click'><span class='val'>113576 Visitors</span> </span> </a><a class='social-item twitter' href='https://twitter.com/ClassyBloger' meta='twitter' target='_blank'> <span class='icon'/> <span class='label'>Twitter</span><span class='click'><span class='val'>200 Followers</span></span></a><a class='social-item facebook' href='http://www.facebook.com/freebloggerthemes' meta='face' target='_blank'><span class='icon'/><span class='label'>Facebook</span><span class='click'><span class='val'>500 Likes</span></span></a><a class='social-item gplus' href='https://plus.google.com/u/4/+AnaLeighReal' meta='gplus' target='_blank'><span class='icon'/><span class='label'>Google+</span><span class='click'><span class='val'>70 Joined</span></span></a><a class='social-item linkedin' href='http://ph.linkedin.com/YourName' meta='linkedin' target='_blank'><span class='icon'/><span class='label'>LinkedIn</span><span class='click'><span class='val'>40 Links</span></span> </a> <a class='social-item youtube' href='https://www.youtube.com/channel/UCnEAt2xqvTxkJB6BfaqwofQ' meta='youtube' target='_blank'>  <span class='icon'/><span class='label'>Youtube</span> <span class='click'><span class='val'>30 Followers</span></span> </a> <div class='clear'/></div> <div class='row row-3'> <form action='https://www.paypal.com/cgi-bin/webscr' class='author-donation' method='post'> <input name='cmd' type='hidden' value='_donations'/><input name='business' type='hidden' value='yourmail@gmail.com'/> <input name='lc' type='hidden' value='US'/> <input name='item_name' type='hidden' value='Donate Blogger'/>  <input name='no_note' type='hidden' value='0'/>       <input name='currency_code' type='hidden' value='USD'/> <input class='donation-button' name='submit' type='submit' value='+Donate to Author'/> </form><a class='register-button' href='http://blogger-templatees.blogspot.com/'>Become a Blogger</a><div class='clear'/></div> </div>



Replace next:

- Replace http://blogger-templatees.blogspot.com/2015/11/how-to-add-professional-erose-author.html with your author bio page link (Optional)
- Replace http://lh5.googleusercontent.com/-9ovzX6EzHt0/AAAAAAAAAAI/AAAAAAAAA_0/0yCHqDhLbEM/s80-c/photo.jpg with your author image.
Replace Autor (Your Name)  with your Author OR Admin name.
- Replace this Ana with your author bio.
Replace http://blogger-templatees.blogspot.com with your website link.
Replace https://twitter.com/ClassyBloger with your twitter username.
Replace this freebloggerthemes with your Facebook username.
Replace https://plus.google.com/u/4/+AnaLeighReal with your Google Plus id
Replace this YourName with your Linkedin profile id.
Replace https://www.youtube.com/channel/UCnEAt2xqvTxkJB6BfaqwofQ  with your youtube username
Replace yourmail@gmail.com with your email id on Paypal account
 

Finally Save your Template. You are done.

11/05/2015

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:
a{
color: #fff;
text-decoration: none;
}
.shreem{
background:#80a9da;
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 );
padding-left:90px;
padding-right:105px;
height:90px;
display:inline-block;
position:relative;
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);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
float:left;
clear:both;
margin:10px 0px;
overflow:hidden;
-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{
position:absolute;
left:15px;
top:13px;
border:none;
-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{
position:absolute;
font-size:36px;
top:18px;
left:18px;
color:#bde086;
text-shadow:0px 1px 1px rgba(0,0,0,0.3);
-webkit-transform:scale(0);
-moz-transform:scale(0);
-ms-transform:scale(0);
-o-transform:scale(0);
transform:scale(0);
opacity:0;
-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-avdhoot-text{
padding-top:13px;
display:block;
font-size:30px;
text-shadow:0px -1px 1px #5d81ab;
color:#fff;
}
.shreem-avdhoot-text small{
display:block;
font-size:11px;
letter-spacing:1px;
color:#fff;
}
.shreem-avdhoot-text-right{
position:absolute;
right:0px;
top:0px;
height:100%;
width:80px;
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{
width:38px;
height:38px;
opacity:0.7;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
position:absolute;
left:50%;
top:50%;
margin:-20px 0px 0px -20px;
border:1px solid rgba(0,0,0,0.5);
background:#5b5b5b url(http://2.bp.blogspot.com/-k4V7R8sEi5k/Uf-Xo6wr_hI/AAAAAAAABRU/duviyr64Ppc/s1600/arrow_down_black.png) 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;
}
.shreem:hover{
-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{
opacity:0;
}
.shreem:hover .shreem-text{
opacity:1;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
}
.shreem:hover .shreem-avdhoot-text-right span{
opacity:1;
background-color:#bc3532;
}
.shreem:active{
position:relative;
top:1px;
background:#fff;
-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;
border-color:#80a9da;
}
.shreem:active .shreem-avdhoot-text-right span{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}

HTML
- 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="http://1.bp.blogspot.com/-fr-z0Q4LmrI/Uf-XzWVOL8I/AAAAAAAABR8/h4NVzciseaE/s1600/12.png" 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="http://4.bp.blogspot.com/-1irvPu8pIfc/Uf-XvrfCl6I/AAAAAAAABRc/vq8xZ1Ud81o/s1600/1.png" 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="http://2.bp.blogspot.com/-LTGOks7lINo/Uf-X0m1eBOI/AAAAAAAABSM/Gl4ShEVLD_0/s1600/15.png" 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="http://1.bp.blogspot.com/-F6oYa8-Mhe4/Uf-X7mRlBQI/AAAAAAAABTo/PSxwmvN9O6k/s1600/9.png" 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! 

11/04/2015

Add Mashable Style Social Subscription Widget to Blogger / Blogspot

Mashable style social subscription widget is an amazing widget for blogger as title says itself that it is mashable.com style social subscription widget. since it used on WordPress blogs that i seen many times and now its available for blogger blogspot too. This widget has included all the social network links such as Facebook , Twitter, Google+ , RSS and many more. in one word we can say its a" all in one" social subscription widget.
Mashable Style Social Subscription Widget
STEP  1)  - Go to Blogger Dashboard > Layout > Add a Gadget > Choose HTML/Javascript
STEP  2 ) - Copy & Paste below code into it.

<style type="text/css">
/*<!CDATA[*/
#bwg-mashable{width:300px;margin:auto;padding:0;}
.bwg-googleplus {margin-bottom:50px; height: 57px;}
.bwg-facebook {background:#FFFFFF;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}
.bwg-gplusone {background-color: #f5fcfe;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}
.bwg-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}
.bwg-twitter {background-color: #eef9fd;border: 1px solid #c7dbe2;border-top: 0;}
.bwg-twitter a.twitter-follow-button {display: block;}
.bwg-twitter iframe {margin: 9px 11px;}
.bwg-sociallinks {background-color: #d8e6eb;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 10px 11px;overflow: hidden;}
.bwg-sociallinks a {text-shadow: 1px 1px white;}
.bwg-sociallinks .bwg-social {list-style: none;overflow: hidden;margin: 0 !important;padding: 0 !important;}
.bwg-sociallinks .bwg-social li {border:0 none !important;float: left;line-height: 1;padding: 2px 0 4px 20px !important;margin-bottom: 3px;width: 70px;background: url(http://4.bp.blogspot.com/-WpJR2Qq0Sqw/Tx_4RZNGNuI/AAAAAAAABb0/WbNVkzuBexQ/s1600/w2b_socialsprite.png) no-repeat;font-size: 12px;}
.bwg-sociallinks .bwg-social li a {display: block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
.bwg-sociallinks .bwg-social li a:hover {text-decoration: underline;}
.bwg-sociallinks .bwg-social li.facebook {background-position: 0 -450px !important;}
.bwg-sociallinks .bwg-social li.twitter {background-position: 0 -150px !important;}
.bwg-sociallinks .bwg-social li.youtube {background-position: 0 -90px !important;}
.bwg-emailbox {background-color: #E3EDF4;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;}
.bwg-emailbox form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.bwg-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.bwg-emailbox input.emailu:focus {color: #333;}
.bwg-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.bwg-emailbox input.submitu:hover {text-decoration: none;}
.bwgOrange{border:1px solid #E08121 ;text-shadow:1px 1px 0 #E08121;background: #f79d4a;background: -moz-linear-gradient(top, #f79d4a 0%, #ef871f 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f79d4a), color-stop(100%,#ef871f));background: -webkit-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: -o-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: -ms-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: linear-gradient(top, #f79d4a 0%,#ef871f 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f79d4a', endColorstr='#ef871f',GradientType=0 );}
.bwgOrange:hover{background: #f4b67c;background: -moz-linear-gradient(top, #f4b67c 0%, #ef871f 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4b67c), color-stop(100%,#ef871f));background: -webkit-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: -o-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: -ms-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: linear-gradient(top, #f4b67c 0%,#ef871f 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4b67c', endColorstr='#ef871f',GradientType=0 );}.bwg-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}
.bwg-moresubs a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
/*]]>*/
</style>
    <div id="bwg-mashable">
    <div class="bwg-googleplus">
        <script type="text/javascript">
        /*<![CDATA[*/
        window.___gcfg = {lang: 'en'};
        (function(){
            var po = document.createElement("script");
            po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(po, s);
        })();
        /*]]>*/
        </script>
        <div class="g-plus" data-href="https://plus.google.com/u/4/+AnaLeighReal" data-width="300" data-height="auto" data-theme="light"></div>
    </div>
    <div class="bwg-facebook">
        <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Ffreebloggerthemes&send=false&layout=standard&width=280&show_faces=true&action=like&colorscheme=light&font=arial&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:280px; height:66px;" allowtransparency="true"></iframe>
    </div>
    <div class="bwg-gplusone">
        <script type="text/javascript">/*<![CDATA[*/
          (function() {
        var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
        po.src = "https://apis.google.com/js/plusone.js";
        var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
          })();/*]]>*/
        </script>
        <div class="g-plusone" data-size="medium" data-href="https://plus.google.com"></div>
        <span>Recommend on Google</span>
    </div>
    <div class="bwg-twitter">
        <a href="https://twitter.com/ClassyBloger" class="twitter-follow-button" data-show-count="true">Follow @ClassyBloger</a>
        <script type="text/javascript">/*<![CDATA[*/!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");/*]]>*/</script>
    </div>
    <div class="bwg-sociallinks">
        <ul class="bwg-social">
        <li class="facebook"><a href="https://www.facebook.com/freebloggerthemes/">Facebook</a></li>
        <li class="twitter"><a href="https://twitter.com/ClassyBloger">Twitter</a></li>
        <li class="youtube"><a href="https://www.youtube.com/channel/UCnEAt2xqvTxkJB6BfaqwofQ">Youtube</a></li>
        </ul>
    </div>
    <div class="bwg-emailbox">
        <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=btemplates', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
        <table width="100%">
            <tr>
            <td>
                <input class="emailu" name="email" placeholder="Enter your email" type="text"/>
            </td>
            <td width="64px">
                <input class="submitu bwgOrange" type="submit" value="Subscribe"/>
            </td>
            </tr>
        </table>
        <input name="uri" type="hidden" value="btemplates"/>
        <input name="loc" type="hidden" value="en_US"/>
        </form>
    </div>
    <div class="bwg-moresubs">
        <a href="http://blogger-templatees.blogspot.com/">Get this Gadget</a>
    </div>
    </div>

STEP 3) - Replace all social network URLs with yours Addresses
STEP 4) - Save the gadget.
That's it.
These were steps of adding mashable style social subscription widget to blogspot. You can change background colors, width , height, etc by editing the CSS.


11/03/2015

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.

10/02/2015

Cool Subscribe Widget Box for Blogger

 - Adding the HTML/CSS in Layout
To add this widget's code go to Blog Title → Layout → Add Widget → HTML/JavaScript and paste the given code in the box opened.



Now save your HTML/Javascript widget

You are done

8/20/2015

Social Icons Widget With Hover Effect for Blogger

People have different ways of structuring how an icon should exist in the markup. In this tutorial, the icons actually link to somewhere else, so I'll be using the a tag to house the icons. For presentational icon markup (like icons before headings and such), I've seen a lot of people use the i tag. Even though it's not semantic, it is very performant as it's a one-lettered tag. For this tutorial, we're going to use icons that link elsewhere, because links are associated with hover states. The most common set of icons around the web that act as familiar links are social icons. 
Social Icons Widget


  • Facebook
  • Twitter
  • Google plus

  • Now lets start this tutorial. Before starting this tutorial take a backup of your template.
    Now Go to Blogger Dashboard > Template > Edit HTML and past the below CSS Code before </style>
     .icon {
      display: inline-block;
      vertical-align: top;
      overflow: hidden;
      margin: 4px;
      width: 92px;
      height: 96px;
      font-size: 0;
      text-indent: -9999px;
      background-color: #404040;
    }

    .icon-border {
      position: relative;
    }

    .icon-border::before,
    .icon-border::after {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      content: &quot;&quot;;
    }

    .icon-border::before {
      z-index: 1;
      -webkit-transition: box-shadow 0.3s;
              transition: box-shadow 0.3s;
    }

    .icon-border::after {
      z-index: 2;
      background: url(&quot;http://i.imgur.com/gOZiqfy.png&quot;);
      background-image: url(&quot;http://callmenick.com/_development/icons-css3-transitions/img/icons4.svg&quot;), none;
    }

    /* facebook */
    .icon-border.facebook::before {
      box-shadow: inset 0 0 0 48px #3b5998;
    }

    .icon-border.facebook:hover::before {
      box-shadow: inset 0 0 0 4px #3b5998;
    }

    .icon-border.facebook::after {
      background-position: 0 0;
    }

    /* twitter */
    .icon-border.twitter::before {
      box-shadow: inset 0 0 0 48px #4099ff;
    }

    .icon-border.twitter:hover::before {
      box-shadow: inset 0 0 0 4px #4099ff;
    }

    .icon-border.twitter::after {
      background-position: -96px 0;
    }

    /* google plus */
    .icon-border.googleplus::before {
      box-shadow: inset 0 0 0 48px #d34836;
    }

    .icon-border.googleplus:hover::before {
      box-shadow: inset 0 0 0 4px #d34836;
    }

    .icon-border.googleplus::after {
      background-position: -192px 0;
    }

    Now Save Template
    After that, Go to Layout>Add a gadget>HTML/Javascript past below code and edit all # tag with your social links.

    HTML
    <a href="#" class="icon icon-border facebook">facebook</a>
    <a href="#" class="icon icon-border twitter">twitter</a>
    <a href="#" class="icon icon-border googleplus">google+</a>

    Save the Widget. That's it.