JQUERY: Automatic Timed & Self-Closing Facebook Popup Like Box For Blogger

How can you tell that a blog or a website is successful? Obviously, some would say that it depends on the traffic, but actually, traffic alone is not everything. Often the goal for a website is to generate sales, increase subscription rates, and develop loyal readership. Internet marketers are more familiar to this principle than any others are working online, and part of their success formula is the use of forceful and effective call to action, which is oftentimes contained in a pop-up box or lightbox.  Creating your own pop-ups for your website is not an easy task. You need to have knowledge of programming to be able to generate the codes that define your intended pop-up. Fortunately, for WordPress websites, there are many useful pop-up plugins available. Pop-ups actually are versatile, and can be used for many conversion related purposes.

 

So today i have write a tutorial on how to add popup like box with timer on blogger blog. You can set it for how long the widget/Plugin must display before disappearing automatically. It also includes a close option, we just trying to add some more features into code and update it as soon as possible. its a beta version please post your review below in the comment section. if you see any bug let us know we will try to fix that as soon as possible.

 

Live Preview

 

The plugin depends on jQuery, so be sure to include the library. Any recent jQuery version will do. We include plug-in file very similar to jQuery library file in the <head> of the document.

 

1. Go to your blogger dashboard>> Template>> Edit Template

2. and add the following jquery link before closing </head> or after opening <head> tag.

 

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

 

Okay, we've completed adding JQuery now but we'll add a couple of styles to our Facebook Popup box.

 

3. again find the following code in your template.

 

]]></b:skin>

 

4. and paste the below code before/above closing b:skin tag.

 

/*css for fbpopup*/

#fbpopupdata {
    background-color: none;
    position:absolute;
    z-index: 9999;
    display: none;
    padding: 0;
    border: 10px solid #446c95;
    -webkit-background-clip: padding-box;
/* for Safari */
    background-clip: padding-box;
/* for IE9+, Firefox 4+, Opera, Chrome */
    -webkit-border-radius: 8px 8px 8px 8px;
    -moz-border-radius: 8px 8px 8px 8px;
    border-radius: 8px 8px 8px 8px;
    width: 420px;
    height: 300;
    overflow: auto;
    left:50% !important;
    margin-left:-220px;
    margin-top:auto;
    box-shadow: inset 0 1px rgba(0,0,0,0.1);
}

#fbpopupdata span {
    font-size: 12px !important;
    font-weight: normal !important;
}

#fbpopupdata h1 {
    background: #446c95 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd6kExHL_oBVyV40K9Xi8gHQXuT5dwtNc7tEymqIcMTwea9EsFmJC704Cp8-o03RMTRn2Dv7_8qktVzxLQtvjGIZ3dMFly2GlbV0QHJnU0e6vJ9olt4UhkMG3zCtARvlAaDL9qU-WqDMc/s1600/aktechz-fb-lock.png) 98% 30% no-repeat;
    border: 0px solid #3b5998 !important;
    color: #FFF !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    padding: 5px !important;
    margin: 0 0 10px 0  !important;
    font-family: arial !important;
    overflow: hidden !important;
}

.fbpopupdatadata {
    font-size: 12px !important;
    font-weight: normal !important;
    height: 275px !important;
    padding: 1px !important;
    background: #fff !important;
    border-bottom: 0px solid #ddd;
    overflow: show !important;
}

#fbpopupdatafooter {
    text-align: right;
    font-size:12px;
    background: #F2F2F2 !important;
    height: auto !important;
    padding: 10px !important;
    overflow: hidden !important;
}

#fbpopupdatafooter p {
    text-align: right;
    font-size:12px;
}

#fbpopupdataclose {
    float: right;
    background-color: #446c95 !important;
    border: 0px solid #ccc !important;
    color: #fff !important;
    font-weight: normal !important;
    padding: 5px 35px !important;
    text-decoration: none !important;
    display: inline-block !important;
    font-family: arial !important;
    outline: none !important;
    font-size: 12px !important;
    margin: 0px !important;
    box-shadow: inset 0 1px rgba(0,0,0,0.1);
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    transition: background 0.3s;
}

 

5. and last and final step, just paste the below before closing your </body> tag.

 

<!-- Facebook POPUP LikeBox With Timer Code Start -->
<script type='text/javascript'>
jQuery(document).ready(function() {
function fbpopupdatafunc()  {
var sec = 60
var timer = setInterval(function() {
$("#fbpopupdatafooter span").text(sec--);
if (sec == 0) {
$("#fbpopupdata").fadeOut("slow");
clearInterval(timer);
}
},1000);
var fbpopupdatawindow = jQuery(window).height();
var fbpopupdatadiv = jQuery("#fbpopupdata").height();
var fbpopupdatatop = jQuery(window).scrollTop()+50;
jQuery("#fbpopupdata").css({"top":fbpopupdatatop});}
jQuery(window).fadeIn(fbpopupdatafunc).resize(fbpopupdatafunc)
//alert(jQuery.cookie('sreqshown'));
//var fbpopupdataww = jQuery(window).width();
//var fbpopupdatawww = jQuery("#fbpopupdata").width();
//var fbpopupdataleft = (fbpopupdataww-fbpopupdatawww)/2;
var fbpopupdataleft = 500;
//var fbpopupdatawindow = jQuery(window).height();
//var fbpopupdatadiv = jQuery("#fbpopupdata").height();
//var fbpopupdatatop = (jQuery(window).scrollTop()+fbpopupdatawindow-fbpopupdatadiv) / 2;
jQuery("#fbpopupdata").animate({opacity: "1", left: "0" , left:  fbpopupdataleft}, 0).show();
jQuery("#fbpopupdataclose").click(function() {
jQuery("#fbpopupdata").animate({opacity: "0", left: "-5000000"}, 1000).show();});});

</script>
<div id="fbpopupdata">
<h1>Join Us On Facebook <a style="font-size:12px; color: white; float:right; margin-right: 15px; text-align: inherit; text-decoration: none;" href="www.myblogger-tricks.com" rel="nofollow"
>Get Widget</a></h1>
<div class="fbpopupdatadata"><center><iframe src="http://facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F/mybloggerstricks&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250" scrolling="no" frameborder="0" style="border:none; overflow:show; width:400px; height:250px;" allowtransparency="true"></iframe></center></div><div id="fbpopupdatafooter">Please Wait <span>60</span> Seconds<br/><a href="wwww.myblogger-tricks.com" target="_blank" id="fbpopupdataclose" onclick="return false;">Close X</a></div></div>
<!-- Facebook POPUP LikeBox With Timer Code End –>

 

Note:- Please change highlighted mybloggerstricks in yellow with your own facebook username..

Okay we've done it! Hope you enjoyed the tutorial and was helpful. The above code can be modified and enhanced as per your requirements.

If the content on this website somehow helped you to learn something new, please let others know about it by sharing it on your twitter page or on your Facebook page with your friends.

Read Article →

JQUERY: Simple Accordion Drop Down Menu With Jquery & CSS

A lot of Blogger users are having problem getting the correct accordion menu to show up your blog recipes. In this tutorial I am going to show you how to add a jQuery accordion menu in blogger blog. Most of the time it is possible to create very functional website navigations with just CSS, but this time we are going to need a little jQuery magic to accomplish the accordion functionality. Before that, lets first talk a bit about why you would want to add accordion menu?  Well some people think that it will help with the SEO. But we think that the main reason why you would want to use them is to offer a better user experience on your site.

 

This tutorial requires you to have fair understanding of HTML, CSS.

 

Features: V 1.0

• Standard Expand/Collapse functionality.
• Activate/Deactivate whenever a 'click' event occurs.
• The Accordion plugin provides support for unlimited number of levels.
• The plugin could easily be customized and used with any website.
• It allows multiple instances of the accordion on the same page.

and in future we will try to add some design update, functionality and much more..

 

Live Preview

 

How to add it to blogger blog

 

1. Blogger: Go to Template > Edit HTML.
2. Locate the ]]></b:skin> tag end of the style sheet.
3. Copy the code below and insert it right above the tag.

#accor-wrap{
    width: 350px;
    font-family:Verdana, Geneva, sans-serif;
    margin-left: auto;
    margin-right: auto;
    }
.accordionButton {   
    width: 325px;
    float: left;
    background: #fff url(https://dl.dropboxusercontent.com/u/223738947/Demos/Jquery%20Accordion%20Menu%20For%20Blogger/Images/bg-shade-light.png) repeat-x bottom left;
    font-size: 14px;
    font-weight: bold;
    color: #555;
    border-bottom: solid 1px #ddd;
    padding: 3px 0px;
    cursor: pointer;
    padding: 5px 10px;
    text-shadow: #fff 0px 1px 0px;
    }

  .accordionButton  span {
    float:right;
    margin-right: 10px;
    color:#555;
    border: 1px dotted #555;
    display:inline-block;
    }
.accordionContent {   
    width: 325px;
    float: left;
    background: #444;
    font-size:12px;
    display: none;
    padding: 5px 10px;
    margin: 0 auto;
    }
.accordionContent ul {
    float: left;
    width:300px;
    margin:0 auto;
    padding:10px 10px;
}
.accordionContent li {
    list-style: none;
    list-style-image: none;
}
.accordionContent li a {
    background: #555 url(https://dl.dropboxusercontent.com/u/223738947/Demos/Jquery%20Accordion%20Menu%20For%20Blogger/Images/bg-shade-light.png) repeat-x 0 100%;
    display:block;
    font-family:Arial, sans-serif,Helvetica;
    font-size:12px;
    font-weight: bold;
    overflow:hidden;
    color:#555;
    border: none;
    text-decoration:none;
    position:relative;
    width:100%;
    line-height:20px;
    text-transform:capitalize;
    padding:5px 0 10px 5px;
    text-shadow:0px 1px px #fff;
        }
.accordionContent li a:hover{
    background: #b3b3b3 url(https://dl.dropboxusercontent.com/u/223738947/Demos/Jquery%20Accordion%20Menu%20For%20Blogger/Images/bg-shade-medium.png) repeat-x 0 100%;
    text-shadow:none;
    color: #fff;
    text-decoration:none;

}

 

1. Locate the </head> tag in the middle of your template.
2. Copy the code below and insert it right above the tag. 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/223738947/Demos/Jquery%20Accordion%20Menu%20For%20Blogger/JavaScript/Accordion.js"</script>

 

1. Go to Layout.
2. Click Add A Gadget.
3. In Add A Gadget window, select HTML/Javascript .
4. Copy the code below and paste it inside the content box.
5. Save the gadget.
6. Drag the gadget and reposition it where you want to show gadget.
7. Click Save button (top right hand corner).

    <div id="accor-wrap">
<!-- Dropdown 1 -->      

<div class="accordionButton">Top Blogger widget 2014 <span>&#9660;</span></div>
        <div class="accordionContent">
        <ul>
        <li><a  href="#" >1. Floating Sharing Bar</a></li>
                    <li> <a  href="#">2. Facebook Poput Like Box</a></li>
                    </ul>
        </div>
<!-- End Dropdown 1 -->

<!-- Start Dropdown 2 -->       

<div class="accordionButton">Top SEO Articles <span>&#9660;</span></div>
        <div class="accordionContent">
        <ul>
        <li><a  href="#"> 1. Search Engines That Respect Privacy </a></li>
                    <li> <a  href="#"> 2. The SEO Tools That Help Boost Your Sites Traffic </a></li>
                    </ul>
      </div>

<!-- End Dropdown 2 -->

<!-- Dropdown 3 -->

        <div class="accordionButton">Top Best Blogger Template <span> &#9660; </span> </div>
        <div class="accordionContent">
             <ul>
        <li><a  href="#" >1. Blogger Beginner</a></li>
                    <li> <a  href="#">2. Premium Blogger Template</a></li>
                    <li> <a  href="#">3. Sky Blue Blogger Template</a></li>
                    </ul>
        </div>
     <!-- End Dropdown 3 -->  

<!-- Dropdown 4 -->

<div class="accordionButton">Top Blogger Resources & Tools <span>&#9660;</span></div>
        <div class="accordionContent">
             <ul>
        <li><a  href="#" >1. HTML Econder</a></li>
                    <li> <a  href="#">2. HTML Editor</a></li>
                    </ul>
        </div>

<!-- End Dropdown 4 -->
    </div>

 

Troubleshooting for setting up for your blog

In the above html code we have created 4 accordion menu.

 

• Replace Highlighted in yellow with the name of the dorp down title.
• Replace Highlighted in Green with your Link anchor text.
• Replace hash (#) sign with your article (page) link.

So now we sure you want to add another dropdown, So then just add the following code after

<!--end dropdown 4 –->

<div class="accordionButton">here is the title For your new dropdown <span>&#9660;</span></div>
        <div class="accordionContent">
             <ul>
        <li><a  href="#" >here is your anchor text </a></li>
                    <li> <a  href="#">here is your anchor text </a></li>
                    </ul>
        </div>

 

We hope that you will find this article useful and it will help you create cool looking accordion menu. Have Any Questions? Leave them in comments below and don’t forget to share.

Read Article →

JQuery Plugin: Social Subscription Sliding Bar

Adding social widget can be important part of increasing your blog or website traffic, Social widget enable visitors to subscribe quickly on your official pages on social media networks. This tutorial have one really Amazing Sliding plugins, Sliding plugin bar sticky at the right side of your page that will slide out social share buttons when mouse hovers over. The Sliding Plugin is originally Created by Márta Dániel, we have just customized version of it. The plugin officially created as an social sharing bar but we are using as a social subscription widget, we are very thankful to developer for making it under MIT license and allow us to share this on our blog.

 

Follow the Steps below for achieving sliding bar cool effect.

 

Live Demo

 

How to implement this jQuery accordion style menu:

 

Include jQuery, Ui and sliding Pluing script:

Google hosts the library so you can link to it there. This can be done by putting the following code in the head of your document:

 

Here are the steps:

 

1. Go to your blogger template
2. Before editing back up your template.
3. The look for the following data tag in your HTML.

</head>

 

and Paste the following code immediately before (above) it:

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<script src="https://dl.dropboxusercontent.com/u/223738947/Demos/SlidingShare/JavaScript/slidingplugin.js"</script>

<link href="https://dl.dropboxusercontent.com/u/223738947/Demos/SlidingShare/style.css" rel="stylesheet" type="text/css" />

 

 

Note:- Please change the social links with your own social links by editing slidingplugin.js before processed next step…download slidingpluing.js in your hard drive and after making changes upload it on any free hosting server like Dropbox or Yourjavascript. For more detail please watch video tutorial below. ( how to edit your social links ).

 

Now last and final step calling social share bar div in you body section. just paste the below before closing your body tag.

 

<div id="socialside">
</div>

 

That's it. we have successfully done! If you are facing any trouble regarding this tutorial please feel free drop a comment below and also don’t forget to share this and share your valuable review with us.

 

 

after editing your links go to file click on save as and save your with .js extension for example slidingplugin.js and upload on any free hosting website.

Read Article →

Social Plugins: Stay Tuned Social Subscription Widget V 2.0

There are literally hundreds of social media sharing plugins that can display social share button for WordPress, blogger and many more are added each day. Today we have a great social subscription plugins with simple design, which we have created early, its a second version of our previous social subscription plugins with tooltip. In the updated version we have removed some CSS reset bugs and also make some addition in the plugin layout.

 

The plugin allow visitors to join social networks, such as Facebook, Twitter, Pinterest, Google Plus,  Rss Feed, Linkedin, Tumbler and the lastly on YouTube.

 

Why Social Plugin Important: A Writer Chuck Price share an article on Search engine watch before 3 months ago and said social profiles are very important for boosting your search engine ranking. Read the statement below or you can read full article about ranking, traffic and backlinks.

 

“Think about where your target audience spends their time. Is it Facebook, Twitter, pinterest? You need to be there as well. Like blog and forum communities, getting to know people via social media opens up link opportunities.”

 

So now leave the discussion and go ahead to add social plugin to your blogger blog.

before adding see live demo by clicking the live preview button below.

 

Update: Bug Fixes for alignment and added Responsive Mobile friendly width property. For the example of update you check the great tutorial written by martin wolf.

 

 

Live Preview

 

How to add it blogger

 

1. Go to Template > Edit HTML.

2. Back up your template.

3. Look for the following data tag in your Template:

 

]]></b:skin>

 

4. Paste the following code immediately above (before) it:

 

#social_profiles-wrap {
    background: rgba(255,255,255,0.3);
    width: 94%;
    height: auto;
    float: left;
    margin: 10px 0 10px 0;
    padding: 20px;
    text-align: center;
    border-radius: 4px;
    font-family: 'Open Sans Condensed', Verdana;
    border: 1px solid #f2f2f2;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
    -moz-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
    box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
    text-decoration: none;
}

#social_profiles-wrap p {
    color: #446cb3;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
}

.social_profiles {
    display: inline-block;
    padding: 5px 0;
}

ul.social_profiles {
    background: none;
    float: none;
    margin: 0 37px;
    text-decoration: none;
}

/* fix for ul li default arrow symbol*/
ul.social_profiles li {
    background: none !important;
    padding: 0!important;
}

.social_profiles li {
    display: inline;
    margin-top: 40px;
    list-style-type: none;
}

.social_profiles li a {
    display: inline-block;
    list-style-type: none;
    width: 40px;
    height: 40px;
    outline: none;
    margin-right: 7px;
    position: relative;
    vertical-align: middle;
    z-index: 3;
    text-decoration: none;
}

.social_profiles li a > :last-child {
    margin-right: 0 !important;
}

.social_profiles li .facebook {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat;
}

.social_profiles li .twitter {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -45px;
}

.social_profiles li .gplus {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -90px;
}

.social_profiles li .pinterest {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -135px;
}

.social_profiles li .rss {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -180px;
}

.social_profiles li .linkedin {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -225px;
}

.social_profiles li .tumblr {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -270px;
}

.social_profiles li .youtube {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -315px;
}

.social_profiles li .mail {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -360px;
}

.social_profiles li a span {
    width: 60px;
    height: auto;
    padding: 2px;
    left: 50%;
    margin-left: -38px;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #fff;
    text-align: center;
    border: 5px solid #446cb3;
    background: #446cb3;
    text-indent: 0px;
    position: absolute;
    pointer-events: none;
    border-radius: 5%;
    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;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.social_profiles li a span:before,
.social_profiles li a span:after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.social_profiles li a span:after {
    bottom: -15px;
    margin-top: 6px;
    margin-left: -10px;
    border-top: 10px solid #446cb3;
}

.social_profiles li a:hover span {
    opacity: 0.9;
    bottom: 50px;
}

 

Now lets go and do one more step…

 

5. Now again look for the following code in your Template:

 

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

 

Normally there are three instances of the tag present in your template ( post-footer, post-footer-line-1, post-footer-line-2 like this.

you just need to locate post-footer  (from top) one.

 

6. Paste the following code immediately below (after) opening post-footer div:

 

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

<div id='social_profiles-wrap'>
<p>Don&#39;t Miss Any Update, Join Us on Social Networks.</p>
<ul class='social_profiles'>
<li><a class='facebook' href='http://www.facebook.com/mybloggerstricks' target='_blank'><span>Facebook</span></a></li>
<li><a class='twitter' href='http://twitter.com/mybloggertriks' target='_blank'><span>Twitter</span></a></li>
<li><a class='gplus' href='https://plus.google.com/b/103598710564060829080' target='_blank'><span>Googl+</span></a></li>
<li><a class='pinterest' href='http://www.pinterest.com/mybloggertrickx' target='_blank'><span>Pinterest</span></a></li>
<li><a class='rss' href='http://feeds.feedburner.com/mybloggerstrick' target='_blank'><span>RSS</span></a></li>
<li><a class='linkedin' href='http://www.linkedin.com/in/mybloggertricks' target='_blank'><span>LinkedIn</span></a></li>
<li><a class='tumblr' href='http://www.thumblr.com/mybloggertricks' target='_blank'><span>Tumblr</span></a></li>
<li><a class='youtube' href='http://www.youtube.com/mybloggertricks' target='_blank'><span>Youtube</span></a></li>
</ul></div></b:if>

 

Note:- Change the links highlighted in yellow color with your social profiles links.

 

I hope you enjoyed this little effect and find it useful!.. As we state in our previous tutorial, it will only work in modern browsers that support pseudo-elements and CSS transitions. if you have question or need to change something like width, font family, color or facing issue with alignment, please let us know we try to help you on every way. lastly want to say happy blogging..!! :)

Read Article →

Add CSS3 & HTML5 Email Subscription Widget To Blogger Blog

After a long we are back again with a beautiful subscription box, If you aren’t building a email subscription widget, you’re missing significant opportunities to capture leads, build community, and create a sustainable way to communicate with those who are interested in what you have to say (and/or sell). Your subscriber is like diamond and it’s a resource you must develop, nurture and grow. It doesn’t matter what type of business or nonprofit work you are in or how big or small you are. You need to build your email subscription. But simply putting a newsletter sign-up form on your site isn’t the most effective thing you can do.  It’s also about how you place it on your site, what tactics you use to drive subscribers and it’s a LOT about content… what you share and how you communicate with your email subscription list so that you provide them value. So today we sharing with you a subscription widget with elegant design we have used image for background and also use HTML5 required attribute and some eye caching CSS3 effects we hope you may like it.

 

What our subscription widget is going to look like. See image below.

 

 

Live Preview

 

Little brief about HTML5

We will use HTML5's new required tag. Right now, different browsers will do different things when a form using HTML5 elements is submitted. When the form is submitted, most browsers will prevent the form from being submitted and will display a "hint" to the user, marking the first field that is required and has no value.

 

HTML5 validation works according to the type attribute that is set within the form fields. For years HTML only supported a handful of type attributes, such as type="text"  but with HTML5 there are a over a dozen new input types including email and url which we are going to use in our form.

 

add it to blogger blog

 

1. Go to Template > Edit HTML.

2. Back up your template.

3. Look for the following data tag in your Template.

 

]]></b:skin>

 

4. Paste the following code immediately above (before) it:

 

#subs_wrapper {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7xTs2_VzRZmYCxMaRMNOllPN_wNBipCrYVC-fb1GNi6BHqEmtzTLTSKYSXurhfgLE8dhOsXvC5DC2npu4QtT5VyaYfBqspPhyVvOQfWDccNWvaGjhVC-1LxPWZWEM2qCS8mW-h9AOVzQt/s1600/Subcription_bg.png) no-repeat;
    width: 300px;
    height: 250px;
    padding: 10px 10px;
    margin: 5px;
}

#subs_wrapper p {
    font-family: Tahoma, Geneva, sans-serif;
    margin-top: 60px;
    color: yellow;
    text-align: center;
    margin-right: 20px;
}

.subs_form input {
    height: 27px;
    font-size: 15px
    font-family:'Open Sans', sans-serif;
    font-size: 14px;
    border: 1px solid #26beaf;
    width: 238px;
    margin: inherit;
    padding: 6px;
    float:;
}

.subs_form input {
    margin: 2px;
}

.subs_form input {
    border: 1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius: 3px;
    padding-right: 30px;
    -moz-transition: padding .25s;
    -webkit-transition: padding .25s;
    -o-transition: padding .25s;
    transition: padding .25s;
}

.subs_form input:focus {
    background: #fff;
    border: 1px solid #fff;
    box-shadow: 0 0 3px #aaa;
}

*:focus {
    outline: none;
}

:-moz-placeholder {
    color: blue;
}

.emailinput {
    color: #666;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
}

::-webkit-input-placeholder {
    color: blue;
}

::-webkit-validation-bubble-message {
    padding: 1em;
    margin-left: -40px;
}

button.submit {
    background-color: #68b12f;
    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
    background: -webkit-linear-gradient(top, #68b12f, #50911e);
    background: -moz-linear-gradient(top, #68b12f, #50911e);
    background: -ms-linear-gradient(top, #68b12f, #50911e);
    background: -o-linear-gradient(top, #68b12f, #50911e);
    background: linear-gradient(top, #68b12f, #50911e);
    border: 1px solid #509111;
    border-bottom: 1px solid #5b992b;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #9fd574;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset;
    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
    -o-box-shadow: 0 1px 0 0 #9fd574 inset;
    color: white;
    font-weight: bold;
    padding: 10px 96px;
    text-align: center;
    text-shadow: 0 -1px 0 #396715;
    list-style-type: none;
}

button.submit:hover {
    opacity: .85;
    cursor: pointer;
}

button.submit:active {
    border: 1px solid #20911e;
}

 

Now lets go and do one more step…

 

5. Now again look for the following data tag in your Template.

 

<div class='post-footer'>

 

Normally there are three instances of the tag present in your template ( post-footer, post-footer-line-1, post-footer-line-2 like this. Locate the post-footer (from top) one. 

 

6. Paste the following code immediately below (after) it:

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div  id="subs_wrapper" style='float:left;'>
<p> Get Latest Updates To Your Inbox..!</p>
<form class="subs_form" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=mybloggerstrick', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">

  <input type="hidden" value="My Blogger Tricks" name="uri">
    <input type="hidden" value="en_US" name="loc">
    <input class="emailinput" type="email" value="Enter Your Email..." onfocus="if (this.value == &quot;Enter Your Email...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email...&quot;;}" name="email" required />
<button class="submit" type="submit">Submit Form
</button><br/>

<p style="color: #999; text-align:center; font-size: 10px; padding: 10px; margin: 20px 20px; text-decoration:none;">We Always Respect Your Privacy.</p>
</form>
</div>

</b:if>
</b:if>

 

Widget alignment

• Change the value of float property:
  Align right: set it to right;
  Align left: set it to left;

Note:- Must change mybloggertricks highlighted in yellow with your feedburner username..

Now click on save button and View your blog. The widget should appear on post pages.

I hope this tutorial helped. If you have any questions, please feel free to share them with us. Take care :)

Read Article →

How To Add Flat Scrolling “Back To Top” Button Into Blogger Blog

Performs a smooth page scroll to an anchor on the same page using JQuery, it is very cool way to attract your readers and maker your web site navigation easy.Today in this tutorial we will share a awesome JQuery smooth scrolling back to top button, It appears on the right side bottom only when the user scrolls down the page and disappears as he scrolls up. A back to top button is crucial for a blog or site because visitors enjoy easy site navigation so this button will provide them with this ease. We have kept the installation process a one step process. Please see this button in action towards the bottom right corner of this blog.

The markup uses the Unicode entity for a Up Arrow Triangle (▲) right in it. If you have a UTF-8 charset that should be no big deal..

How to add it to blogger blog

First You need to add this JQuery and JavaScript Code Snippet in your blogger template head section before closing </head> tag.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // hide #back-top first
    $("#back-top").hide();
    // fade in #back-top
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {$('#back-top').fadeIn();} else {$('#back-top').fadeOut();}
        });
        // scroll body to 0px on click
        $('#back-top a').click(function (e) {
            e.preventDefault();
            $('body,html').animate({
                scrollTop: 0
            }, 800,function(){$("#back-bottom").show();});
            return false;
        });
        $("#back-bottom a").click(function(e){
            e.preventDefault();
            var currentElem = $(this);
            var scrollTopPos = $("div#topwrapper")[0].offsetHeight;
            $('body,html').animate({
                scrollTop: scrollTopPos
            }, 800,function(){$(currentElem).parent().hide();});
            return false;
        });
    });
});
</script>

The follow the next steps below…

1. Login to your blogger dashboard.
2. Go to your blogger Layout.
3. Click Add A Gadget.
4. In Add A Gadget window, select HTML/JavaScript.
5. Copy the code below and paste it inside the content box. 

<style>
#back-top {
position:fixed;
bottom:0px;
right:0;
display:block;
background:#f2f2f2;
color:#446cb3;
opacity:.8;
filter:alpha(opacity=80);
width:80px;
height:80px;
z-index:99999;
}
#back-top:hover {
background-color:#446cb3;
text-decoration:none;
color:#fff;
opacity:1;
filter:alpha(opacity=100);
}
#back-top span {
position:relative;
display:block;
width:32px;
height:80px;
margin:0 auto;
}
#back-top span:before,#back-top span>.before { 
font-style:normal;
font-weight:400;
text-align:center;
position:absolute;
top:50%;
font-size:32px;
line-height:32px;
width:32px;
height:32px;
margin-top:-16px;
left:0;
content:"\25B2";
}
</style>
<p id="back-top"><a href="#top" class="" title="BackToTop"><span></span></a></p>

If you experience any issues, feel free to comment here. I'll love to hear feedback and try my best to fix bugs with the snippet. Stay connected for more spicy updates and don’t forget to share this tutorial with your friends.!! Enjoy!

Image Credit:- Cygnis Media

Read Article →

Flat Flipping Floating Stay Connected Widget For Blogger

Nowadays Stay connected Widget are very important websites and blogger owners. Whether you  run a website or you are a blogger, you definitely need social subscription widget. To tell your users or visitors about your social media accounts. With the increase of the use of social media, it has rather become a necessity to have social media accounts. But choosing the right social icons according to your theme is also important. You don’t want your visitor to just ignore your social media links, due to ugly looking icons.

This way they not only stay in touch with their users, but also it provides a quick and easy way to promote your posts or products. People won’t visit your website that often as they use their social media accounts.

We also want a minimalist, simple and catches the eye, but awesome social media subscription widget and finally we are done..!! The widget originally made by dynamic drive, we have just customized version of it and i hope you really like it's awesome look. This widget is simply a copy-paste tool that can be installed within seconds. So lets start the tutorial you can also see the demo by clicking on the below preview button.

 

Live Preview

 

Check Also

• Floating Sharing Bar V 1.0
• Floating Sharing Bar v 2.0

 

Add It to blogger

 

Step. 1

1. Go to Template > Edit HTML and click anywhere inside the HTML editor.
   Press Ctrl+F (Cmd+F in Mac), and a search box should appear in the upper right corner of the editor.
2. Type or paste the following code in search box and hit enter.

</b:skin>

 

Add the following CSS Code in the b:skin section of your template.

 

ul.flatflipbuttons{
position:fixed;
padding:0 0 3px 0;
bottom: 22%;
margin-left:0px;
float:left;
list-style:none;
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 10000px;
perspective: 10000px;
}

ul.flatflipbuttons li{
margin:0;
display: block;
width: 25px; /* dimensions of buttons. */
height: 25px;
margin-bottom: 39px; /* spacing between buttons */
background: transparent;
text-transform: uppercase;
text-align: center;
}

ul.flatflipbuttons li a{
display:table;
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */
width: 100%;
height: 100%;
color: black;
background: transparent;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out; /* CSS3 transition. */
-moz-transition:all 300ms ease-out;
transition:all 300ms ease-out;
}

ul.flatflipbuttons li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}

ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */
border-width: 0;
vertical-align: middle;
}

ul.flatflipbuttons li:hover a{
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background:   transparent; /* bgcolor of button onMouseover*/
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}

ul.flatflipbuttons li:hover a span{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
transform: rotateY(180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}

 

Step. 2

1. Go to Template > Edit HTML and click anywhere inside the HTML editor.
   Press Ctrl+F (Cmd+F in Mac), and a search box should appear in the upper right corner of the editor.
2. Type or paste the following code in search box and hit enter.

   </body>

3. and paste the follwing code before/above "</body>"

<ul class='flatflipbuttons second'>
<li><a href='https://www.facebook.com/mybloggerstricks'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXe-Bbzoi7qo_QCOO5nN2arCXyrC0p8g_JwFqnPpEthTO2BPB8e3d7gonmpWc8jwbBAx9x-r9hQ6U4smUqS3Y5WihPN1Ujx_2pqoa4sXOe3kNnS1FFC9htYssT8k4TKSah1PY41jdFCv53/s1600/facebook.png'/></span></a></li>
<li><a href='http://twitter.com/mybloggertriks'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg5Db-zwzkHWNdEBDS6nFPit7qJrU9d23IMimznSP5_G2gvSN0_fIzjaEcpNdfuNIUeG-UxYGEKKRPkpor8qKKsO1g4gnkndlnzi6G-GP1XPCcv1q52ynReVW_9z9_r6ZDosZZYO8N9u2a/s1600/twitter.png'/></span></a></li>
<li><a href='https://plus.google.com/b/103598710564060829080'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXoG3x3EXi6hgOD-e01-in8xnrchCFjzC6im_tsCs3e3jHCZwwVyVZZLCuCV49GLb7tZW-WoPK7cMSqsA5_B2NkZbjUtZYw87o-sat3zavjM-3EmD-5A1Ch0R8U-mdnLdi2I6FtYCzzCRP/s1600/googleplus.png'/></span></a></li>
<li><a href='http://www.pinterest.com/mybloggertrickx'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh1Tv9aRRdGEyU0jUrxEjWCH8yIH9VsiivZQgl0L9KZOFDiSUuhTkhybiDYxeZKF8j7h4ghO4WJvT1XsR3aAKyn7CEg9W88XrN3aQAtP1RxtSm-P5VgK0QPh9UQS8780LURpQgPSZ-8TFE/s1600/pinterest.png'/></span></a></li>
<li><a href='http://feeds.feedburner.com/mybloggerstrick'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg096yfzywrQFhhWV9Z3O1mSIkE2H1oIpWZh6x409pXUS1fDL2O7wuAGjDsYt2_OIKQoDDfWTIcpZaOBQN51-Y6kWSEOpFijKhCWh8M4_9dZHrrLeTH6X5RGBE4r8Qt8-5rByWcxs3t3D9-/s1600/rss.png'/></span></a></li>
  <li><a href='http://www.youtube.com/user'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6m1te-OM74SsYVF5orsjKEmRFWV6GrUr8pwQIsiaJBN4DzbBGaty35mtvE9rOC7qwGb5qSrc7gklsobUDxx7zuikBBaDzOb_Jm-5jJffywA2lSw5J9IlTE7926_PHMixaHXa3e63z_0MM/s1600/youtube.png'/></span></a></li></ul>

 

Customization

1. Replace the highlighted links in yellow with your own social profile links.
2. Preview before saving.
3. If everything is working fine then click on save button and you are done..!!

I hope your readers find this widget useful and this may further help in engaging your readers more on your blog and in building rich traffic. Do let me know if you needed any help.

For more updates Stay tuned!  blessings buddies. :)

 

Image Credit:- Freephotos.net

Read Article →

Social Sharing Floating Bar With Multiple Background & 3D Border (V2)

Recently a lot of my readers have been saying me please sharing that floating bar which is you are using on your blog. So today we are going to bring it here for our valuable readers. To add as much value as possible i’ve included some other social sharing buttons plugins in the bar so your website or blog readers have more choice when he/she decide to share your articles. Social Share Buttons let the user stay on the site and share the content on their social media profiles with just a click and without leaving the site. Site visitors can choose interesting content to share, click on the social share button and easily post an update to their social media profiles. Check the previous version? Floating Sharing

In our newer version we just add sharethis button and also make it attractive with multiple background theme, I hope you will enjoy after adding plugin to you blog and website.

 

Live Preview

 

Add it to your blogger blog

 

1. Login to your blogger dashboard.
2. Go to your blogger Layout.
3. Click Add A Gadget.
3. In Add A Gadget window, select HTML/Javascript .
4.Copy the code below and paste it inside the content box.

 

<style type="text/css">
#floating_bar {
background-attachment:fixed;
background:
    /* top, transparent White */
    linear-gradient(
    rgba(255, 255, 0, 0.2),
      rgba(255, 0, 255, 0.2)
    ),
    /* bottom, image */
    url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5XHCj9ihnBkSlAYHDPtrydZwIEeziTD0Osx8pUFQ7Tchg-zz7dBvrAGUhCoE-N3M8S4kBHw1JptZbPC1UrYWk0ZLo7mwizl5CweB1g8_6ModvzozGShYPBdPJxkKqZ6C4UW5IzpRgJLQT/s1600/bg.jpg);
background-repeat: repeat;
position:fixed;
padding:0 0 3px 0;
bottom: 30%;
margin-left:-75px;
float:left;
border-top:2px groove #00a4ef !important;
border-bottom:2px groove #ffb900 !important;
border-right:2px groove #7fba00 !important;
border-left:2px groove #f25022 !important;
border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.2);
box-shadow:1px 1px 1px rgba(0,0,0,0.2);
z-index:10;
}

#floating_bar {
clear:both;
}
</style>
<div id='floating_bar'>
<div style='margin:10px 0 5px 13px;' id='like'>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
</div>
<div style='margin:0px 0 0 10px;' id='gplusone'>
<g:plusone size="tall"></g:plusone>
</div>

<div style='margin:5px 5px 5px 6px;'>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="mybloggertriks" data-lang="en" data-count="vertical">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>

<div style='margin:5px 5px 5px 5px;' id='linkedin'>
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script data-counter='top' type='IN/Share'></script>
</div>
<div style='margin:0px 0px 5px 10px;'>
<a class="addthis_counter"></a>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>
</div>
<p style='line-height:10px; margin-bottom:8px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.myblogger-tricks.com/2013/09/add-awesome-floating-sharing-bar-on.html' rel='nofollow' style='color:#777;'> Get Widget </a></p>
</div>

 

Note:- You must replace mybloggertriks highlighted in yellow color with your twitter username.

and just click on orange Save button ( Place at top right corner).

If in case the facebook like button did not work then add this Javascript code just before closing </body>.

1. Go to your blogger dashboard>> Template>> Edit Template and find the following code

 

</body>

 

2. and paste this javascript code just before </body> tag.

 

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

 

Widget Customization

Vertical Alignment:
In css section change the value 30% to any other which is your blog requirement for example.

 

bottom: 25 %;  or bottom: 30%; or bottom: 35%;

 

To fix the distance even when window is resized, specify the value in px (pixels) instead of %.
Horizontal Alignment
To align the widget more towards the left or right then edit this value.

 

margin-left: -60px;

 

Negative value pushes the button to the left of the main blog column, positive value pushes it to the right.
By making use of the various social media integration tools and resources, you can make your website the main social hub for user interaction and engagement, thus driving viral social traffic to your site. I Hope you will enjoy this nice floating widget. Let us know below in comment section if you got any question. Till then take good care of yourselves and your loved ones. Peace and blessings pals! :). enjoy..!!

Read Article →

Attractive Latest Post Widget For Entertainment Blogger Blog

Recent post widgets is can go a long way to enhance the usability and user friendliness of a website and blog theme. The attractive widget can help to driving more traffic to your blog and website. If you are using our older version of recent post widget then you must familiar with this widget. So today in this tutorial we are going to make a new recent post widget for videos blog and website, Which can make your website and blog theme more attractive and also better for browsing your latest posts. There is no better way to understand something than by seeing a live preview, So click on the link and see the demo.

 

Live Preview

 

How To Add It To Blogger Blog

1. Go to blogger layout section
2. Click Add A Gadget.
3. In Add A Gadget window, select HTML/JavaScript .
4. Copy the code below and paste it inside the content box.
5. Save the gadget.
6. Drag the gadget and reposition it where you want to show recent posts.
7. Click Save button (top right hand corner).

<style>
#bp_recent {
width:320px;
padding: 5px;
color: #999;
font-size: 14px;
text-align:justify;
}

#bp_recent img {
width: 120px;
height: auto;
border: 8px solid rgba(255, 255, 255, 0.5) !important;
-webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.2);
box-shadow:1px 1px 1px rgba(0,0,0,0.2);
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

#bp_recent img:hover {
opacity: 0.5;
-webkit-box-shadow:0px 1px 1px 1px rgba(0,0,0,0.2);
box-shadow:0px 1px 1px 1px rgba(0,0,0,0.2);
}
#bp_recent a{
margin-bottom: 10px!important;
}

</style>
<div id='bp_recent'></div>
<script type="text/javascript" src="http://yourjavascript.com/401413211131/recentposts-orig.js"></script>
<script style='text/javascript'>
var numberOfPosts = 8;
var showPostDate = false;
var showSummary = false;
var summaryLength = 0;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 55;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
var readMore = 'Read More';
</script>
<script src='HTTP://WWW.MYBLOGGER-TRICKS.COM/feeds/posts/summary?max-results=10&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

 

1. Simply replace the http://www.mybloger-tricks.com with your own blog address (Url) which is include "http://".

2. Widget comes with fixed width you can also edit width by changing following value (300 to 350 e.g.).

 

width: 320px;

 

Do you have any query regarding this tutorial on how to add recent posts widget to blogger? Post your queries via comment and we'll get back to you as soon as possible. I hope this tutorial has been of interest. Thank you everyone for reading and special thanks to bloggerplugins.org for his valuable help for making script. Make sure you browse the comments as some of them contain useful advice about how to make your widget customizable, how to reduce number of the posts even further the size of the recent post image, etc.  If you don't want to miss any of our future updates? Subscribe to our rss feeds to get all our latest updates delivered directly to your email inbox.

Read Article →

Stay Tuned Social Profiles Plugin With Tooltip For Blogger Blog

In today’s tip we’ll show you how to create some simple, animated tooltips using CSS transitions and the pseudo-classes :before and :after. For the little pointer, we will style the pseudo-elements :before and :after. We will style them the same way and create a triangle by using transparent left and right borders. The :before pseudo-element will serve as a shadow for the :after pseudo-element, so we’ll give it a blue color. After the growth and advance development in Social media websites, lots of peoples are showing their interest in appearing their website with their favorite social networking website i.e. Facebook, Google Plus, Twitter and etc. Tooltips is the fancy addition in the Social networking Widgets. Whenever, your visitors would place their pointer on a social icon a small box will appear with information about the specific item that is being hovered.

 

Live Preview

 

How to Install Tooltip Social Profile Plugin

Just follow the steps as mention below.

1. Go to Blogger Dashboard >> Template >> Edit HTML >> Proceed

2. Now in the template search for ]]></b:skin> and just above it paste the following  CSS Code.

#social_profiles-wrap{
    width: 450px;
  height: 80px;
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXEjw5924VMahzjTDWPSakiI1HhlodK2XqgvMHKGN5_D-ZwLU6Ofb-PRJge23pI4tXGCppl_LXR2MWqCA6h29woRcPIc0Sdc0KnjlcBSdFOoVy2ElqBGSOHJ3f_GMb_80v9bf2AyWS20b8/s1600/Bg.png") no-repeat 15px 10px;
  padding:22px 0px 15px 100px;
  margin: 14px auto;
  border: 1px solid #ddd;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
  -moz-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
  box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
}
.social_profiles{
  height: auto;
  margin: 0 auto;  
}
.social_profiles li{
  float: left;
  list-style: none; 
}
.social_profiles li a {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  margin-top: 20px;
  outline: none;
  position: relative;
  z-index: 2;
  text-indent: -9000px;
  text-decoration: none;
}

.social_profiles li .facebook {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat;
}

.social_profiles li .twitter {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -45px;
}
.social_profiles li .gplus {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -90px;
}
.social_profiles li .pinterest {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -135px;
}
.social_profiles li .rss {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -180px;
}
.social_profiles li .linkedin {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -225px;
}
.social_profiles li .tumblr {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -270px;
}
.social_profiles li .youtube {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -315px;
}
.social_profiles li .mail {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -360px;
}

.social_profiles li a span {
  width: 80px;
  height: 20px;
  line-height: 20px;
  padding: 5px;
  left: 50%;
  margin-left: -52px;
  font-family: 'Alegreya SC', Georgia, serif;
  font-weight: 400;
  font-size: 14px;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  text-align: center;
  border: 5px solid #446cb3;
  background: #446cb3;
  text-indent: 0px;
  position: absolute;
  pointer-events: none;
  border-radius: 5%;
  opacity: 0;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
-webkit-transform: translate(35px) rotate(25deg) scale(1.5);
  -moz-transform: translate(35px) rotate(25deg) scale(1.5);
  -o-transform: translate(35px) rotate(25deg) scale(1.5);
  -ms-transform: translate(35px) rotate(25deg) scale(1.5);
  transform: translate(35px) rotate(25deg) scale(1.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;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
 
}
.social_profiles li a span:before,
.social_profiles li a span:after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  margin-left: -9px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 11px solid rgba(0,0,0,0.1);
}
.social_profiles li a span:after {
  bottom: -15px;
  margin-top: 6px;
  margin-left: -12px;
  border-top: 10px solid #446cb3;
}
.social_profiles li a:hover span {
  opacity: 0.9;
  bottom: 50px;
  -webkit-transform: translate(0px) rotate(0deg) scale(1);
  -moz-transform: translate(0px) rotate(0deg) scale(1);
  -o-transform: translate(0px) rotate(0deg) scale(1);
  -ms-transform: translate(0px) rotate(0deg) scale(1);
  transform: translate(0px) rotate(0deg) scale(1);
}

Once you have successfully pasted the Style sheet code go ahead and save the template by pressing save button.

 

1. Now according to you need paste the following code where you want to place this widget. For Example Layout >> Add a Gadget >> Edit HTML/JavaScript

2. If you want to show below post then paste the below html code below this tag. "<data: post.body/>"

<div id="social_profiles-wrap">
<ul class="social_profiles">
<li><a class="facebook" href=http://www.facebook.com/mybloggerstricks target="_blank"><span>Facebook</span></a></li>
<li><a class="twitter" href=http://twitter.com/mybloggertriks target="_blank"><span>Twitter</span></a></li>
<li><a class="gplus" href=https://plus.google.com/b/103598710564060829080 target="_blank"><span>Google Plus</span></a></li>
<li><a class="pinterest" href=http://www.pinterest.com/mybloggertrickx target="_blank"><span>Pinterest</span></a></li>
<li><a class="rss" href=http://feeds.feedburner.com/mybloggerstrick target="_blank"><span>RSS</span></a></li>
<li><a class="linkedin"href=http://www.linkedin.com/in/mybloggertricks target="_blank"><span>LinkedIn</span></a></li>
<li><a class="tumblr" href=http://www.thumblr.com/mybloggertricks target="_blank"><span>Tumblr</span></a></li>
<li><a class="youtube" href=http://www.youtube.com/mybloggertricks target="_blank"><span>Youtube</span></a></li>
<li><a class="mail" href=Mailto:tricks.blogger@gmail.com target="_blank"><span>Mail</span></a></li>
</ul></div>

Note:- Change the links in yellow with links to your social profiles.

I hope you enjoyed this little effect and find it useful!..Needless to say, this will only work in browsers that support pseudo-elements and CSS transitions.

Read Article →

AddThis Smart Layers Plugin For Blogger And WordPress

If you’ve read our previous tutorials on Addthis sharing tool, you probably know about AddThis. Any website that’s been developed over the last few years, now has social follow and social sharing options, and AddThis is the number one provider of those sharing buttons. Now good news is that, he lunched smart layer plugin for Blogger, WordPress and also for Joomla.  smart layer plugin is very  easy-to-install layers float effortlessly over your content without disrupting your layout. Now that's smart way to add sharing buttons, follow us buttons and also you can show recommended post slider at the right bottom corner. We are very excited to share this much pretty tool with our valuable readers. Below are the steps how to add it on your blog and website. it's also easy to set up, social sharing buttons in various places on your WordPress site.

 

Smart Layer Features

 

Personalization Features

AddThis shows every visitor recommended post and the social tools that are most relevant and likely drive more traffic to your webpages.

 

Mobile & Tablet Ready

Designed with mobile friendly responsive layout, Smart Layers adapts to mobile form function and is retina-ready with no extra work. But bad thing is that the recommendation slider doesn't shown when user browsing with mobile or any other small devices.

 

Works With other AddThis tools

Smart Layers works seamlessly with other AddThis tools like Share and Follow Buttons, and includes complete analytics reporting. You can also see live demo on Addthis blog.

 

API Support

Want to grab the reins? Addthis team developing a Smart Layers API that provides enhanced control over your site's Smart Layers.

 

How to setup a code for installation

1. Go to the Get Smart Layers page on the AddThis website. If you want to track your shares and clicks you can create a profile on the AddThis site, but it’s not required.

2. Configure the options you want:

Follow, Share, What’s Next, and Recommended Content.

 

 

3. Click the Generate Code button.

4. Copy the code in the popup box.

Paste the code into your site’s template. I recommend the paste before closing </body> tag so that the code loads after the rest of the page, though it is also possible to paste the code elsewhere (a Blogger HTML/JavaScript widget, for example). Do something productive with all time time you’ve saved yourself.

So if you’re on Twitter, hit me up at @mybloggertriks, and let me know if anything is missing.  You can also leave your feedback or queries below in comment form. We’re listening.

Read Article →