Showing posts with label Floating Share Buttons. Show all posts
Showing posts with label Floating Share Buttons. Show all posts

Sunday, 10 September 2017

Create Sidebar Sticky+Animating with jQuery

Create Sidebar Sticky+Animating with jQuery

Sidebar Sticky+Animating with jQuery

Follow the instruction below: 

  • Go to your blogger blog Dashboard > Template > Edit HTML 
  • Search (CTRL + F)  for the following code:

                                       </body>

  • And just before </body> paste the following jQuery code:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
    <script type="text/javascript">
        $(function() {
            var offset = $(".column-right-inner").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $(".column-right-inner").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $(".column-right-inner").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });
    </script>

  • Save Template. We're Done!

Note: .column-right-inner is the right sidebar class. If you want to make sticky a left sidebar then replace all those class with .column-left-inner from the jQuery code.
And topPadding = 15; change the value if you need to increase/decrease space on top of the sidebar.

Sunday, 22 May 2016

Add Floating Share Buttons, Follow Buttons

Add Floating Share Buttons, Follow Buttons

1. Open addthis.com and create an account, if you are already not a member of this site.
2. Open “Profiles” section from “Settings”.
3. Add a Profile and give it the name of your blog.
4. Open “Share Settings” from “Settings”. Add some social sharing services to your favorite from all available services.

5. Click “Get the Code” form top. We are creating “Smart Layers”. You can preview the changes you will make on right side.
 Floating Share Buttons
6. Select the platform of your blog, website. It is okay to create a code for any platform with default “A Website” option.
7. Turn ON “Follow”. Select social profiles that you want your visitors to follow. Complete those social profile URLs.
8. Specify the position and number of share buttons.
9. “What’s Next” prompts visitors to take actions like, to share, follow or visit recommended link.
10. “Recommended content” promotes your site’s most popular trending content. I turned this option OFF as this option is not worked for me.
11. Choose your preferred theme. Select the name of your blog from Profile. This is the profile that you created in step 3.
12. Generate Code.
13. Add HTML widget in the footer of Blogger blog. Add Text widget in the footer of WordPress blog. Copy the generated code and paste it in the footer HTML section of your blog or website.
That’s it! Open your website to see the floating share buttons, follow buttons live in action on your website.
Create a new profile under the same AddThis account for each new blog or website where you want to add share and follow buttons. This helps to track social sharing statistics for each individual blog and website. Floating share buttons and follow buttons are essential to increase readers and overall subscribers, followers of blog and website.