-->
Toneysoft Blog

*We are Inspire Our Technology,* Blogging, Tutorial,Download,Widget,Windows phone android Apps,Web design,Seo, Outsourcing,Antivirus ...

Latest Post Toneysoft blog:

Featured post

How to get 1000 up Visitor per video on your Youtube channel Make Money part 2

How to get 1000 up Visitor per vidos On your You Tube Visitor and And Money Money Hidden Tips Toneysoft :  উপরের টাইটেল দেখে হইত বুজ...

no image
  • Post Title : How To Make Floating Widget on your Blog and
  • Posted By :
  • Category:
  • Rating : 100% based on 10 ratings. 10 user reviews.
    | Post views: Viewed
Item Reviewed: How To Make Floating Widget on your Blog and 9 out of 10 based on 10 ratings. 9 user reviews.
How To Make Floating Widget on your Blog and

Like the Post? Do share with your Friends.

How To Make Floating Widget on your Blog


Floating widget is a great widget, when visitors scroll down to a website then they can see the widget bar is floating to down. I have coded this widget for all kinds of widget that can be able to make float. And more importantly it won't use any hosted JavaScript (.js) file, so it won't  affect your templates loading time. And I have use this code to make floating popular post widget. Let's go to tutorial


HOW TO FIND THE WIDGET ID


Finding your each and every widget ID is very simple. Just log into your Blogger account and visit your blog. Now you can see the QuickEdit icon on bottom left corner of the every widget.


Now Click On Right Button and Click on Copy Link Location and Paste is in Notepad.

The code will be like below--

http://www.blogger.com/rearrange?blogID=8977425861298264234&widgetType=PopularPosts&widgetId=PopularPosts1&action=editWidget&sectionId=sidebartop

Step 1 Go to your Blogger Dashboard

Step 2 Click on -> Template -> Edit HTML

Step 3 Now Find this code </body>  by pressing  Ctrl + F

Step 4 Paste the below code  Before/above </body> 

<script>
// Floating Widget By www.bloggerspice.com
//<![CDATA[
bsfloatingwidget("PopularPosts1"); // enter your widget ID here
function bsfloatingwidget(elem) {
    var bsfloat = document.getElementById(elem);
    var scrollee = document.createElement("div");
    bsfloat.parentNode.insertBefore(scrollee, bsfloat);
    var width = bsfloat.offsetWidth;
    var iniClass = bsfloat.className + ' bsfloat';
    window.addEventListener('scroll', bsfloating, false);
    function bsfloating() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            bsfloat.className = iniClass + ' bsfloating';
            bsfloat.style.width = width + "px";
        } else {
            bsfloat.className = iniClass;
        }
    }
}
//]]>
</script>
<style>
.bsfloating {background:#f2f2f2 !important; position:fixed; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);}
</style>

CUSTOMIZATION


  • Change PopularPosts1 with widget ID.
  • Change f2f2f2 for floating widget background color
0 Comments
Disqus
Fb Comments
Comments :

No comments:

Post a Comment

Copyright © 2015 Toneysoft Blog All Right Reserved
^