Pages

Translate

Showing posts with label Blogger Widgets and plugins. Show all posts
Showing posts with label Blogger Widgets and plugins. Show all posts

Saturday 13 July 2013

How To Add POP UP Facebook Like Box For Blog & Website?

This widget pops up a jQuery window containing Facebook likebox as soon as a new visitor arrives. This plugin can be added to both Blogger Blogs and Wordpress. I am using here the same jQuery effect like this one can be widely seen on many blogs now. It will help you increase your Facebook Fans greatly.
This popup appears only once to every new visitor. The ip address of the visitor is stored in browser cookie and as the page loads again the widget wont be called again for the same visitor thus eliminating the chances of bugging regular readers. Because of course it will look weird if the popup appears again and again on every pageview.
It will appear both on homepage and sub pages depending which page the visitor is accessing. I have set the cookie refresh time to 30 days, which means that this lightbox will appear again for the same visitor after 30 days. We can easily set the number of days to prompt the visitors about your Facebook Fan page. Lets get straight to the one step installation process.
Get the more fans to your fanpage blogger by adding a popup facebook like box to your blogspot.By adding this customized widget may know the visitors to know the number of people like your website and join your site directly.To get this widget follow below procedure:-


Features:
1.) Un-Blockable POP-UP By All Browsers.
2.) POP-UP With LightBox Effect.
3.) Close Button Also Included.
4.) Quick To Load And Easy To Install.
5.) Simple And Stylish Design.


How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.


How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.



<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://exeideasinternational.googlecode.com/files/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1)
{
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#exestylepopups"});
}
});
</script>
<style type="text/css">
/*
ColorBox v1.3.16
(Copyright (c) 2011 Jack Moore - jack@colorpowered.com)
*/
#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block}.cboxIframe{width:100%;height:100%;display:block;border:0}#cboxOverlay{background:#000;opacity:0.5 !important}#colorbox{box-shadow:0 0 15px rgba(0,0,0,0.4);-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4)}#cboxTopLeft{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz_QQRLK9WE2vc_-8ZvEFqZ3OdIpcRa_OjhD7DUcabUc7ZtSs04bzEhTdeu2UVBlukoasLVf18lIEP7Ap4-AKAStcJzPnv72FHQsoUzMzf-BOsvrMRU1psBsI5Ndq81O7MViIwmgq2KA4/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtvGf8ixrKbictBTLPiwtW8OIFTLgAHe8zK1RHviUzxZv9pxVduPw8440MUUBdwPX5s9IdrgkWcTHrghMaOfbtt24o2Tz-2FqdjOW8LaW1JEPjrOGe9G9jeFgyQf6zeizx7k-P5Pf88Rc/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz_QQRLK9WE2vc_-8ZvEFqZ3OdIpcRa_OjhD7DUcabUc7ZtSs04bzEhTdeu2UVBlukoasLVf18lIEP7Ap4-AKAStcJzPnv72FHQsoUzMzf-BOsvrMRU1psBsI5Ndq81O7MViIwmgq2KA4/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz_QQRLK9WE2vc_-8ZvEFqZ3OdIpcRa_OjhD7DUcabUc7ZtSs04bzEhTdeu2UVBlukoasLVf18lIEP7Ap4-AKAStcJzPnv72FHQsoUzMzf-BOsvrMRU1psBsI5Ndq81O7MViIwmgq2KA4/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtvGf8ixrKbictBTLPiwtW8OIFTLgAHe8zK1RHviUzxZv9pxVduPw8440MUUBdwPX5s9IdrgkWcTHrghMaOfbtt24o2Tz-2FqdjOW8LaW1JEPjrOGe9G9jeFgyQf6zeizx7k-P5Pf88Rc/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz_QQRLK9WE2vc_-8ZvEFqZ3OdIpcRa_OjhD7DUcabUc7ZtSs04bzEhTdeu2UVBlukoasLVf18lIEP7Ap4-AKAStcJzPnv72FHQsoUzMzf-BOsvrMRU1psBsI5Ndq81O7MViIwmgq2KA4/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz_QQRLK9WE2vc_-8ZvEFqZ3OdIpcRa_OjhD7DUcabUc7ZtSs04bzEhTdeu2UVBlukoasLVf18lIEP7Ap4-AKAStcJzPnv72FHQsoUzMzf-BOsvrMRU1psBsI5Ndq81O7MViIwmgq2KA4/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz_QQRLK9WE2vc_-8ZvEFqZ3OdIpcRa_OjhD7DUcabUc7ZtSs04bzEhTdeu2UVBlukoasLVf18lIEP7Ap4-AKAStcJzPnv72FHQsoUzMzf-BOsvrMRU1psBsI5Ndq81O7MViIwmgq2KA4/s1600/controls.png) repeat-y -211px 0}#cboxContent{background:#fff;overflow:visible}#cboxLoadedContent{margin-bottom:5px}#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzyweM5-bylko1MYvpCVhJxVvWlVOGRiyzzb-WnbJosKfIhMzlqCna37l7A2YPFi-TWK38FfY0NlwACWy-Bog4qc786lUiaxhz0ZKqKRuIV-7fVdDa93tV-_mz4p037ownCDdwMsrdeB0/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1IvcPESW6hPi-PlMeGRs39KNEEa2FfOy5wrOTg140d4HM8_RWrF2DTr5sqJoMQQJaezg3MUJinS0LUqzCjRxuOTt6EWrozaq1s_uGLuqBVlE23e0MXlXqRJYrxLfU_2MMAnskOtZ0ZcE/s400/loading.gif) no-repeat center center}#cboxTitle{position:absolute;bottom:-25px;left:0;text-align:center;width:100%;font-weight:bold;color:#7C7C7C}#cboxCurrent{position:absolute;bottom:-25px;left:58px;font-weight:bold;color:#7C7C7C}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{position:absolute;bottom:-29px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz_QQRLK9WE2vc_-8ZvEFqZ3OdIpcRa_OjhD7DUcabUc7ZtSs04bzEhTdeu2UVBlukoasLVf18lIEP7Ap4-AKAStcJzPnv72FHQsoUzMzf-BOsvrMRU1psBsI5Ndq81O7MViIwmgq2KA4/s1600/controls.png) no-repeat 0px 0px;width:23px;height:23px;text-indent:-9999px}#cboxPrevious{left:0px;background-position:-51px -25px}#cboxPrevious.hover{background-position:-51px 0px}#cboxNext{left:27px;background-position:-75px -25px}#cboxNext.hover{background-position:-75px 0px}#cboxClose{right:0;background-position:-100px -25px}#cboxClose.hover{background-position:-100px 0px}.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px;right:27px}.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px}.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px;right:27px}.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px}#mdfb{font:12px/1.2 Arial,Helvetica,san-serif;color:#666}#mdfb a,#mdfb a:hover,#mdfb a:visited{text-decoration:none}.mdbox-title{background:#000;color:#fff;font-size:20px !important;font-weight:bold;margin:10px 0;border:20px solid #ddd;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;box-shadow:5px 5px 5px #CCC;padding:10px;line-height:25px;font-family:arial !important}
</style>
<div style='display:none'>
<div id='exestylepopups' style='padding:10px; background:#fff;'>
<center><h3 class="mdbox-title">Like SAHI SOFT on Facebook</h3></center><center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FTriple zee&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center><p style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://sahisoft.blogspot.com/">SAHI SOFT</a></p>
</div></div>
Customization:
1.) Replace Triple Zee With Your Facebook Username.
2.) It Will Not POP Up Again And Again On Every Reload Or Every Pages. To Review The Widget Just Delete Your Browser Cookies And Refresh The Page To See It Appearing Again.
3.) If You Want To Appear This Widget On Every Reload Of Your Visitor On Every Page, Just Change true To false
4.) This Widget Will Again POPUP On Your Viewer Desktop After 30 Day If He Is Clearing His Browser Cookies, If You Want To Minimize This Time, Just Change *30 From The Above Code To Your Desire Day With 30.
5.) You Can Also Change The Text In Black Bold Text.
6.) Save And Done..
This Widget is provided by Triple Zee

Saturday 6 July 2013

How To Create Google Custom Search Engine?

Google-Custom-Search-EngineWhen it comes to crawling the internet or a website nothing can surely beat Google's searching technique. Blogger Templates that are found in various designs and colours often have custom search boxes in it, which I am sure you might have observed are incapable of displaying the relevant results. These search boxes by default are limited to their ability of searching each and every word of your blog. The best solution is to use Google Custom Search Engines (CSE) that are extremely efficient in digging out the most important data from your blog and displays it to the visitor. This increases the number of pageviews and page impressions of your blog because the reader is kept engaged in reading more and more. Further you can easily integrate your Google AdSense Ads to your Google Custom Search box, which again increases your blog revenue for every click made on the search results. An Example of such search engine can be found below every post of this  blog. So lets create and install a beautiful Google Search box for your blog.

How To Create a Custom Google Search Engine?

  1. Go To Google CSE
  2. Hit the create custom search engine button
  3. Fill the form as shown in the screenshot below,
set up your google search engine
   4.   The Click the next button and choose the Design for your search engine. You can click the "Customize" button to edit the colours and look.
customize-the-look-and-color
   5.  Hit the next button and then click the "Look and feel" link on the next page as shown below,
CSE-look-and-feel
It will bring you a page where you will find three layout options i.e Full -width, Compactand Two Column as shown below,
Google Search Engine Layouts
  • If you wish to add the search box just below posts as I have done on my blog then choose Full-width
  • Or if you wish to display the box and results on the sidebar then choose compact
  • Else if you wish to add your search box to your sidebar and display the search results above the post title then choose Two Column
  6.  Finally hit "save & get code" button and jump to the next part of our tutorial.

Add Google Custom Search Engine To Blog Posts

To add the search engine just below your blog posts as we have done on ZZZ then please follow the steps below,
customize Google Custome Search Engine
  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Click the Expand Widgets Templates Box
  4. Search for <data:post.body>
  5. Just below it paste your Blog Post Search Engine Code (Full-width)
  6. Save and you are done!
  7. View your blog to see it appearing just below posts.

Add Google Custom Search Engine To Blog Sidebar

  1. Go To Blogger > Design
  2. Choose a HTML/ JavaScript Widget
  3. Paste your Sidebar Search Engine Code (Compact or Two Column) in it
  4. Save and you are done!
  5. View your blog to see it working just fine
Changing your default search box to Google Custom Search Engine Box is an important step that you must take as early as possible. You will see the difference in your analytics the next week. In the next post as shared below you will learn to integrate your AdSense Ads to your Custom Search engine and increase your Adsense earnings.
  • How To Integrate AdSense In Google Custom Search Engine?
Hope you liked it! :)

Add a Cute Flying Twitter Bird To Your Blogs


How To Add the Twitter Flying Bird To Blogger?

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Search for </body>
  4. And just above it paste the code below

<script src='http://bloggerblogwidgets.googlecode.com/files/way2blogging.org-tripleflap.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var twitterAccount = &quot;Triple Zee&quot;;
var tweetThisText = &quot; <data:blog.pageTitle/> : <data:blog.url/> &quot;;
tripleflapInit();
</script>

   5.  Replace Triple Zee with your twitter account username.
    6.  Save your template and you are done!
    7.   View your blog to see it flying. :)

If you faced any problem just let me know. Have fun!

Wednesday 5 June 2013

Add Floating Social Media Buttons to Blogger

Posted by M Qasim A Siddiqui

Social Media buttons play a great role to share your web content by the visitors quicklyon Facebook, Twitter, Google+  and many other platforms. If you have sharing widget you can increase your blog traffic also. There are several ways to add these buttons such below post title or at footer area, as I shared in my previous posts. Now, in this post we will discover how to add floating Social Media Buttons. Forget about the some share widgets based on J-query scripts, because they increase blog loading time and still some browsers like Internet Explorer does not support J-query scripts function properly. This social button set is based on CSS and does not increase blog's loading time. 


Follow some simple steps to add this quick share tool to communicate with your visitors/ audiences. 
1. Go to Blogger > >Template.
2. Backup your template.
3. Click Edit HTML.
4. Click Proceed.
5. Then Click Expand Widget Templates.
6. Search following line (Use Ctrl+F ).



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


7. Just below it paste the following codes-

<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><style>.mbt_social_floating{position:fixed; bottom:10%; margin-left:-60px; float:left;width:60px;background-color:#FFFFFF;padding: 5px 0 0px 0px;border-top:1px solid #ddd;border-left:1px solid #ddd;border-bottom:1px solid #ddd;z-index:9999px !important;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}.mbt_social_floating .mbt_side_social_button{margin-bottom:5px;float:none;height:auto;width:60px;}.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{margin-left:5px;}.mbt_social_floating .st_fblike_vcount{margin-left:5px;}.mbt_social_floating .stButton_gradient{background:none !important;height:21px !important;padding-left:0 !important;}.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTZx5it26iyRlA9BHucWElk0lmr_wDhWZK3tR-UcMVomIdRfgSy2b0InGYuaFRpJhIEr06azz015OVt07OoDcHD5EQX8Clc21eNXSwPdWB-hHr6HXz_F1nPJw5wQADv4HNaQg7zOYK-XqQ/s400/gc_social_sprite.gif&#39;) no-repeat !important;height:19px !important;width:45px !important;padding:0 !important;}.st_email .chicklets{background-position:0 -77px !important;background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTZx5it26iyRlA9BHucWElk0lmr_wDhWZK3tR-UcMVomIdRfgSy2b0InGYuaFRpJhIEr06azz015OVt07OoDcHD5EQX8Clc21eNXSwPdWB-hHr6HXz_F1nPJw5wQADv4HNaQg7zOYK-XqQ/s400/gc_social_sprite.gif&#39;) !important;}.mbt_social_floating .st_twitter_vcount .st-twitter-counter{background-position:0 -58px !important;}.mbt_social_floating .stButton_gradient{border:none !important;}.mbt_social_floating .stBubble_count{width:44px !important;font-size: 15px !important;font-weight: normal !important;padding-top:7px !important;height:23px !important;background:none !important;}.mbt_social_floating .st_twitter_vcount .stBubble_count{color:#00a6df;background-color:#f8fbfc !important;}.st_fblike_vcount{  margin-bottom: 0px;display: block;}.st_twitter_vcount{margin-bottom: 3px;display: block;}.st_email{  margin-bottom: 5px; margin-top: 3px;display: block;}.mbt_social_floating .stBubble{background-position: 21px 31px !important;height:35px !important;}</style><div class='mbt_social_floating'>  <script type='text/javascript'>var switchTo5x=true;</script><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({onhover:false});</script><span class='st_fblike_vcount' displaytext=''/><span class='st_twitter_vcount' displaytext='' st_via='arvindjangid'/><div style='margin:5px 0 0px 0;'><center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a><a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/><script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/><script type='text/javascript'>function run_pinmarklet() {var e=document.createElement(&#39;script&#39;);e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);document.body.appendChild(e);}</script> </center></div><div style='margin:0px 0 0 5px;'><span class='st_plusone_vcount' displaytext=''/></div><div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'><a class='addthis_counter'/></div><script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/><script type='text/javascript'>var addthis_config = {ui_cobrand: &quot;Mast Tips&quot;,ui_header_color: &quot;#ffffff&quot;,ui_header_background: &quot;#0080FF&quot;}</script></div> </b:if></b:if>


Variables:
Replace arvindjangid with your own twitter username. Save template and done. If you have any question please feel free to ask.

How to add Wikipedia Search Box Widget in Blogger

Posted by M Qasim A Siddiqui

Yesterday, Blogger added a new Wikipedia Search Box widget to their Gadgets inventory. This gadget is solely developed by Blogger officials, so it is rather obvious that it would not have any creepy bugs. Though, it is a precisely minimalistic gadget as it only provides you the ability to search Wikipedia within your site. However, to be able to view a certain topic you have to visit Wikipedia by clicking on the search results.  It works pretty much like Google custom search engine, and its appearance is also somewhat identical to it. Therefore, today in this article, we will show you How to add Wikipedia Search Box Widget in Blogger?

Apparently, you probably won’t get anything out of this widget, but it might grow user engagement because people can utilize this gadget to search the content in-depth. For example, you wrote an article about Google Panda, but users did not find it as useful or they wanted to know more comprehensive information on this topic. This tool can help users to search the same topic on Wikipedia so they can get comprehensive information on it. 

The process of adding this widget into your blog is a lot straightforward. There is no need to tussle up with coding because it would be installed in just few clicks. Firstly, go to Blogger.com >> Your site >> Layout >> Add a Gadget >> More Gadget. Now from the list of widgets, on the top you will see a widget named “Wikipedia” just select it and press the “Save” button. 
Whenever someone would use Wikipedia search box, it would populate the search results below the search bar and link out to the corresponding Wikipedia article (in a new browser tab). This would benefit both you and your users.  
According to the Blogger Officials, 

Our latest addition to the Gadget Gallery is the Wikipedia gadget. It allows you to add a Wikipedia search tool into your sidebar, under the header, or above the footer.  Do tell us, what you think about this latest addition in the inventory. 

We hope you enjoy this new gadget. However, this is not the limit, there are numerous ways through which you can increase the credibility of your website it entirely depends on a person how he use them. Please let us know what you think about it.

How to Create a Floating "Sticky" Sidebar Widget in Blogger

Elements that float along your screen are pretty cool and attention grabbing. They are more commonly known as the “Sticky” floating widgets that stick to your screen as you scroll and tend to have a higher click through rate. This is the reason why at MyBloggerLab, we are using a Floating subscription widget in the sidebar that has been quite useful for us. Many of our users kept on emailing us about how they can create a “Sticky” floating sidebar widget in Blogger. In the past, we have already shown you how to make a Sticky Floating Footer bar in Blogger. In this article, we will show you how to create a floating “sticky” Sidebar widget in Blogger?

Remember: This works pretty well with all kinds of widgets present in your sidebar. It is not necessary that a person can only use if for email subscription boxes. You can use it for promotion of your items, galleries, popular postsInstagram photos, and basically everything that you wish for. 

Step#1: Adding a New Widget: 

The First thing you need to do is to add a new widget in your sidebar so that later on you can make it sticky. Go to Blogger.com >> Layout >> Add a Gadget >> Add HTML/JavaScript >> and name the widget as “My Sticky Gadget”. Now writing anything in the HTML body and once everything is down press “Save” button located at the end of the page.

Step#2: Installing a “Sticky” Plugin:

Now after properly adding a new widget in your blog, it’s time for some serious work. This time go to Template >> Edit HTML >> and search for the ending </body> tag and just above it paste the following JavaScript code.

<script>
/*<![CDATA[*/
// Sticky Plugin
// =============
// Author: Syed Faizan Ali
(function($) {
    var defaults = {
            topSpacing: 0,
            bottomSpacing: 0,
            className: 'is-sticky',
            center: false
        },
        $window = $(window),
        $document = $(document),
        sticked = [],
        windowHeight = $window.height(),
        scroller = function() {
            var scrollTop = $window.scrollTop(),
                documentHeight = $document.height(),
                dwh = documentHeight - windowHeight,
                extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
            for (var i = 0; i < sticked.length; i++) {
                var s = sticked[i],
                    elementTop = s.stickyWrapper.offset().top,
                    etse = elementTop - s.topSpacing - extra;
                if (scrollTop <= etse) {
                    if (s.currentTop !== null) {
                        s.stickyElement.css('position', '').css('top', '').removeClass(s.className);
                        s.currentTop = null;
                    }
                }
                else {
                    var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;
                    if (newTop < 0) {
                        newTop = newTop + s.topSpacing;
                    } else {
                        newTop = s.topSpacing;
                    }
                    if (s.currentTop != newTop) {
                        s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);
                        s.currentTop = newTop;
                    }
                }
            }
        },
        resizer = function() {
            windowHeight = $window.height();
        };
    // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
    if (window.addEventListener) {
        window.addEventListener('scroll', scroller, false);
        window.addEventListener('resize', resizer, false);
    } else if (window.attachEvent) {
        window.attachEvent('onscroll', scroller);
        window.attachEvent('onresize', resizer);
    }
    $.fn.sticky = function(options) {
        var o = $.extend(defaults, options);
        return this.each(function() {
            var stickyElement = $(this);
            if (o.center)
                var centerElement = "margin-left:auto;margin-right:auto;";
            stickyId = stickyElement.attr('id');
            stickyElement
                .wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')
                .css('width', stickyElement.width());
            var elementHeight = stickyElement.outerHeight(),
                stickyWrapper = stickyElement.parent();
            stickyWrapper
                .css('width', stickyElement.outerWidth())
                .css('height', elementHeight)
                .css('clear', stickyElement.css('clear'));
            sticked.push({
                topSpacing: o.topSpacing,
                bottomSpacing: o.bottomSpacing,
                stickyElement: stickyElement,
                currentTop: null,
                stickyWrapper: stickyWrapper,
                elementHeight: elementHeight,
                className: o.className
            });
        });
    };
})(jQuery);
/*]]>*/
</script>
<script type='text/javascript'>
   $(document).ready(function(){
    $("#mblfloater").sticky({topSpacing:0});
   });
</script>

Step#3: Creating a Widget “Sticky” in Blogger:

After adding the JavaScript code, you have to search for the name of your widget. Since, we have named it as "My Sticky Gadget". Therefore, in the template coding search for "My Sticky Gadget". To be able to search correctly it is essential that you must use the built-in search box provided by the Blogger template editor.

Note: To enable the search box click anywhere in the template editor and press"CTRL+F". Now on finding "My Sticky Gadget" you will able to see a code similar to the the following one.

<b:widget id='HTML32' locked='false' title='My Sticky Gadget' type='HTML'>
            <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
          </b:widget>

Now after finding the code as mentioned above, just replace it completely with the following coding.

<b:widget id='HTML32' locked='false' title='My Sticky Gadget' type='HTML'>
            <b:includable id='main'>
<div id='mblfloater'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>  </div>
</b:includable>
          </b:widget>

Remember: The ID of your widget should be unique. For example, if you are usingid='HTML32' in any of your widget then you cannot use the same ID for others.

All done: Once everything is done, press the "Save Template" button to finish the process.

Sticky floating sidebar widgets can bring a lot of growth in your sign ups. They help in increasing user engagement. You can also use multiple floating widgets in sidebar. However, this act might annoy your visitors. Make sure you have a balanced design, so that it don't annoy your users

We hope that this article have helped you in creating a Sticky floating sidebar widget in your Blogger website. This plugin is robust enough to be used in any element of your sites. Let us know what you think in the below comments.

How Can People Add Background Images In Blogger Posts

 


Now i'm gonna tell you how can people add background images in posts. To have background pictures in blogger posts looks very nice. As you're watching background picture in my post. Any size of image can be used.
I hope this tricks will benefit you for your blog posts.

Step by step method to add background images in your post: 

First of all: 

Step #1: 
Go to www.blogger.com and sign in to your account.

Step #2:
Click on create "New Post" and then Click on "Edit HTML"


 

Step #3:
Copy the code given below and paste it in "Edit HTML". And after pasting it type your text content which you wanna write where "Your Text Here" is written.









                <div style="background:url(  Your Image
           URL Address  ) no-repeat;">
             <br>  Your Text Here  <br></div>










Step #4:
Copy the address of image which you wanna add and paste the address where "Your Image URL Address" is written.


Step #5:
Now you have done, Publish your post and see the changes you've done in your background.



 


Did You Like It ?
Please share your ideas about it and give your valuable feedback's let me know what you liked or didn't like and if you liked then don't forget to subscribe to my daily post updates
Also, give the post a social media share.