Widgets

Tuesday, June 14, 2016

Flipper Sharing Widget

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-NsbBlx8OphjRkqNkWm7k7Fc_AfJVrj9Xqb7qNbt9OFwBEaq25Irt2kCteOx8kin7-yxo9W_JU-hNB5zsNMegGLq4E16YqXHM-OCIbMA_FzKxlVhCHQ5uJ-79mTDLfN3t86vS2-6dWtIf/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.




June 14, 2016 No Comment

Friday, July 3, 2015

Subscribe Box For Blogger And WordPress

Subscribe Box For Blogger And WordPress


The subscribe box uses pure HTML5 and CSS3 effects to enhance its look. 
Compatibility:
The widget is supported (with effects) in all popular browsers:
Subscribe Box For Blogger And WordPress in all popular browsers

Blogger:

The installation of this subscribe box is quite easy. Just follow these steps for Blogger
  • Go to Blogger > Layout 
  • Click on Add A New Widget > HTML/Javascript 
  • Paste the following code in the box:

Replace ekWMe with your feedburner feed ID.


WordPress:
  • Go to WordPress Admin > Appearance.
  • Drag a text widget.
  • Paste the following content in it:

- Replace MPT-Network with your feedburner feed ID
- Done! Check your site and you won't be disappointed with the results!

July 03, 2015 No Comment

Tuesday, June 16, 2015

How to Add the Facebook Popup Like Box Widget

How to Add the Facebook Popup Like Box Widget

Facebook is the best ways to get traffic to your website or blog. Most of you might be wondering how to increase the likes of fb page and thereby organic reach to your page. Here is one method through which you can easily increase your FB Page Likes with out any energy. Add this wonderful Facebook Like Pop-Up box Widget to your blog. This will make almost all the visitors to your site Like your Page.
Facebook Popup Like Box Widget
This widget comes with an Light box effect and looks attractive for the users. The popup will appear only one time i.e. the popup will just come one time and not in every page of your blog.It looks like the above image.
  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.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fbox-background {
    display: none;
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}
#fbox-close {
    width: 100%;
    height: 100%;
}
#fbox-display {
    background: #eaeaea;
    border: 5px solid #828282;
    width: 340px;
    height: 230px;
    position: absolute;
    top: 32%;
    left: 37%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#fbox-button {
    float: right;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
}
#fbox-button:before {
    content: "CLOSE";
    padding: 5px 8px;
    background: #828282;
    color: #eaeaea;
    font-weight: bold;
    font-size: 10px;
    font-family: Tahoma;
}
#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
    color: #aaaaaa;
    font-size: 9px;
    text-decoration: none;
    text-align: center;
    padding: 5px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/freebloggerthemes&width=339&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://blogger-templatees.blogspot.com/2015/06/how-to-add-facebook-popup-like-box.html" rel="nofollow">BloggerTemplates</a></div>
</div>
</div>

5. After adding the code Replace the https://www.facebook.com/freebloggerthemes with your specified facebook URL and click save.

Customization 
The widget will appear 5 seconds after the page finishes loading. If you want to change this delay, change the number 5000 to a greater or lesser number in this part:
.delay(5000)

By default, the like box only shows up the first time the user visits your page.  If you would like the Facebook box to popup every time the page loads, then remove this line of code:
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });

 That's all...!

June 16, 2015 No Comment

Sunday, June 14, 2015

Floating Facebook Widget for Blogger

Floating Facebook Widget for Blogger

Widgets are playing very good role in both wordpress and blogger blogs. Here is another stylish facebook like box, this widget is design in three awesome style and it will slide out smooth when you place your cursor on the widget banner due to the jQuery effect that i included. The method is very easy, you need to follow method step by step.
Floating Facebook Widget for Blogger

How To Add The Widget To Your Blog/Site
First thing is to add the java script code in template.
  • Go to blogger.com and login to your account
  • Select your blog and goto template section
  • Click on Edit HTML
  • Now find </head> tag by pressing ctrl + F and write this tag in box then hit enter
  • After finding the </head> just above this tag, copy and paste the below code
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    Click on Save Template and You're done

Now its time to add Widget to your blog
  • Goto Layout Section
  • Click on add gadget any where on layout page and select HTML/ JavaScript
  • Copy and Paste the Below Code
    •  </script> <script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".mtwlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .mtwlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMjvasAFyL-11WN_9nX48tVzTWHzJflbcIp4AiH55d7Ez0HBVnotyBc_u7FHzCnXkKJzuobgp6P5gng4L87lJBxAoGJzL7ggU1Ix3zr399TX78iSywfpI7tMYgrUg1ceUlKMshRkHi7_g/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;} .mtwlikebox div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;} .mtwlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .mtwlikebox span a{color: gray;text-decoration:none;} .mtwlikebox span a:hover{text-decoration:underline;} } </style> <div class="mtwlikebox" style="">     <div>     <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Ffreebloggerthemes&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>Widget by :<a href="http://blogger-templatees.blogspot.com/">BloggerTemplates</a></span></div></div>

Time to customize it
— Page Link : Replace the orange color text with your Facebook page's username
— Border Color : Replace the yellow color value with your targeted color code for your widget's border color
— Position : Replace the green color value with your targeted position value you can use px instead of %

You're done the widget is successfully added to your blog.  

June 14, 2015 No Comment

Thursday, May 28, 2015

Stylish Rss Feed Subscription Box For Blogger

Stylish Rss Feed Subscription Box For Blogger

By using this Rss Feed Subscription widget you can link your social media profile Facebook, Twitter and Rss and subscribe field. It will help to get the new updates by emails.
Subscription Box

How to add Rss Feed Subscription Box For Blogger
Go to layout-->Add a gadget-->HTML/JavaScript and put bellow code in it.


You have to change the counters manually, just change URLs and IDs addresses according to your profile.
Save template and happy blogging.

May 28, 2015 No Comment

Tuesday, May 26, 2015

Email Subscribe Widget for Blogger

Email Subscribe Widget for Blogger

Subscribe Widget for Blogger

You can use this widget below of every post. This subscribe box widget is created with simple css with colorful background. In this email subscription widget visitors are able write their name. The name box make this widget more professional. In this widget you can change subscribe box heading. Default heading is: "Subscribe for our all latest news and updates".
Now lets start this:

First you need to add CSS code of this widget. So, copy past below css before </style>
#subscribe-box {background-color:#0CC388;font-family: 'PT Sans', sans-serif;}
#subscribe-box p {font-size:22px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}
#subscribe-box .emailfield {padding:0px 20px 10px;}
#subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;width:91%;border:0;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
#subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:700;font-size:18px;font-family: 'PT Sans', sans-serif;;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
#subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;}
.creadit a{color: #A7A6A6; float: right; font-size: 8px

- Save Template

Now add a new HTML/Javascript gadget from Layout and past below code.
<div id="subscribe-box">
<center>
Subscribe for our all latest news and updates</center>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}" onfocus="if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Name" />
<input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}" onfocus="if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Email" />
<input name="uri" type="hidden" value="USER-NAME" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitbutton" type="submit" value="Subscribe Now" />
</form>
</div>
</div>
<div class="creadit">
<a href="http://blogger-templatees.blogspot.com/2015/05/email-subscribe-widget-for-blogger.html" rel="dofollow" target="_blank"> Get This Widget</a></div>

Customization:
Change all USER-NAME with your feedburner user name.

And finally don't forget to share our posts with your friends. Thanks.

May 26, 2015 No Comment