Wednesday, 29 May 2013

Tagged under: ,

Scrolling Like Social Sharing Buttons Widget For Blogger 2013

scrolling social sharing widget
Today our editorial team announced a very sophisticated social sharing widget for blogger blog. Couple of the days our editorial team was searching to bring a unique gadget style or to select a specific design for sharing buttons and customized it in different styles according to  different Blog & Website designing. Such like gadget is very important for blog. it will increase fifty percent your visitors growth. It will also increase your social community counters like facebook, google plus & twiters. If you are still unable to receive a massive traffics from social media websites then we are strongly recommended to use this widget. Many people called it Do not forget to join our community widget for blogger we are presenting you as free of costs.

How This Widget is being Prepared ?

In the above para you have learnt little about this widget. We will summarize it little more here: Actually this widget is totally created in Css & javascript with awesome different stylishly designing. Due to coding in javascript many ProBloggers ignore & dislike because we also know from such a long time that a gadget coded in javascript will compel the blog on loading time. But be trust on me this gadget is not that much heavier. it has a very simple layout and less javascript coded included. We have changed it designing into different stylishly designing. It has been decorated with several color. Bloggers are advice to pick a best one according to his/her blog designing & layouts.

Facebook Sliding widget for Blogger

How Does Scrolling Widget work in blogger ?

As the name indicates "scrolling" by mean we can use it by scrolling the mouse here on the top and bottom. This gadget will appear if user bring the mouse cursor in the bottom of the blog. When the cursor of the mouse cross the middle of blog or website it will suddenly appear.

Major Features BY Using This Widgets

  • A Broswer friendly widget that will work on each browser like, fire for, mozilla, and chrome
  • Simple Layout and Less javscript coding included. such gadget will never stay blog on loading time
  • Consist of three major tabs which are linked with Google plus, Facebook page & twiter.
  • Easy customizable and have a close button if a user remove it from the blog temporarily.

How To Install Social Scrolling Out Subscribe Box In Blogger ?

There are numerous ways which you can easily installed this widget in blogger template. But in today tutorial we will provide you a free guide how to install it in blogger template by using such technique.

Now Select Your Own Choice Color Widget Matching Your Blog Designing

Step 1:  Here is a complete list of all common colors widget with different style. You will only need to pick and the best one according to your blog website designing layout. Just remember its color id which every widget have at the top along with its number. This will remember just Because after choosing the widget it color code will replace with the default color code inside the widget coding. Just only copy the color code from the below top 20 widgets. Pick up your own choice.

Top 20 Scrolling Social Like Widget For Blogger Blog 

1   #FFFFFFFF

scrolling social sharing widget

2   #F3F3F3

scrolling social sharing widget

3   #00BFFF

scrolling social sharing widget

4   #32CD32

scrolling social sharing widget

5   #FFFF00

scrolling social sharing widget

6    #000000

scrolling social sharing widget

7   #708090

scrolling social sharing widget

8   #A0522D

scrolling social sharing widget

9   #DEB887

scrolling social sharing widget

10   #9400D3

scrolling social sharing widget

11   #191970

scrolling social sharing widget

12   #663333

scrolling social sharing widget

13   #808000

scrolling social sharing widget

14   #B0E0E6

scrolling social sharing widget

15   #D2691E

scrolling social sharing widget

16   #F4A460

scrolling social sharing widget

17   #008B8B

scrolling social sharing widget

18   #87CEEB

scrolling social sharing widget

19   #FFE9E9

scrolling social sharing widget

20   #DC143C

scrolling social sharing widget
  • Step 2:
  • Go to blogger Dashborad:
  • Go to template Click on Edit Html:
  • Now find for ]]></b:skin> in template and just above it past one of the following gadget coding:
  • For better views see the screenshots below:

scrolling social sharing widget

scrolling social sharing widget


 /*------------ProBloggerTricks.com Social Slide out Box Widget------------*/
#pbtsocialslide{background:#f3f3f3;
border-radius:9px;
-moz-border-radius:9px;
-webkit-border-radius:9px;
-moz-box-shadow:inset 0 0 3px #333;
-webkit-box-shadow:inset 0 0 3px #333;
box-shadow:inner 0 0 3px #333;
padding:12px 14px 12px 14px;
width:300px;position:fixed;
bottom:13px;
right:2px;
display:none;
z-index:3;
height:65px;}
  • Replace the Red color code (#f3f3f3) with the widget code color which you have chosen from the above top 20 widget styles.
  • If you want to curve side widget which is given below then just replace the following pixel value from 9px 9px 9px with the following 3px 49px 49px  values. it will look like the below widget.

Step 3:

  • Again Go to Blogger Dashboard: 
  • Go to Layout >> Add javascript/Html widget
  • Past the Below Given Code

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

<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#pbtsocialslide").show("slow");else $("#pbtsocialslide").hide("slow");});function closePBTsocialslide(){$('#pbtsocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>
<div style="display: none;" id="pbtsocialslide">
<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closePBTsocialslide();">(X)</a>
<span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Don't forget to join our community!</span><br />
<div style="float:left; margin:15px;"><g:plusone annotation="none"></g:plusone></div>

<div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FProBloggertrick&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>

<div style="float:left; margin:15px;"><a href="https://twitter.com/ProBlogerTricks" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @hannygames</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
</div>

<div class='clear'></div>
  • Replace The Red color name with your facebook page user name:
  • Replace The light blue color name with your Twiter name:
  • Now You Done Everything Just refresh your Blog & see the Result:

Final Words

This was a little tutorial about the Do not forget to Join Our Community WidgetOur Editorial Team has given a different stylishly design to this gadget. We turned it into several maxing designing layout. We hope that you guys will must like like. If someone getting any issue then feel free to ask in the comments area. Thanks And meet you Soon. Happy Blogging!


Facebook Popup Like Box For Blogger

26 comments:

  1. Oooops Image of 1 and 2 are same. I think you have made a minor mistake. Anyway Nice work.

    ReplyDelete
    Replies
    1. No Bro there is quite difference. The 1st one has transparent background. I has no background color. It will only show the sharing buttons.

      While the 2nd one has a brown color background that you see in the image clearly. Thats is. Take a look once again you will notice the differences. Happy Bro for Caring Us. See you Soon.

      Delete
  2. Awesome Work Brother! Glad to know that your team has started designing new items for bloggers. Well, I'll also design such widgets on my new blog Blogger Yard. My blog old blog is sold out due an big issue. Hope you will join my new blog. :)

    ReplyDelete
    Replies
    1. Pleasure Bro. We will always be in touch with you. We love our loyal readers in each regards. You are most competitor reader of PBT. we will soon land on your blog. Thanks for commenting and meet you after a short break.

      Delete
  3. Replies
    1. Thanks for liking our efforts. Bundles of Thanks.

      Delete
  4. great that's a amazing widget for blogger and attract viewers for joining our blog great work brother keep it up and now i am on wordpress
    Way to blogging

    ReplyDelete
    Replies
    1. Wow thats amazing news that you have shifted to Wordpress. Really Bro wordpress is more better than other services. We like that because its 100% trustworthy. A blog on wordpress has very less chance of any types of damage. or deletable. Thanks for Landing here with us. You always encouraging our team. Meet you soon.

      Delete
  5. Nice Sharing Hafeez Bro thanks for that

    ReplyDelete
    Replies
    1. Oh Rizwan see you after a long time. Thanks for coming here again. We are appreciating you. Thanks for the nice words & thumbing up to PBT. Wanna see you soon.

      Delete
  6. Oh Nice Widget Bro!
    Like It!
    Keep It Up!!11

    ReplyDelete
    Replies
    1. Thanks Saijad Bro we appreciations. We love your words. Thanks and keep around with Us. Hope see you soon.

      Delete
  7. Great Work Bro Thank You Very Much! (Full Stars)

    ReplyDelete
    Replies
    1. Oh Abdul Bro thanks for praising our efforts that touches the height of success. Bundle of thanks well appreciations. Hope you will always be in touched with Us. Stay up to dates.

      Delete
  8. Awesome look so nice! Thanks for share different designs of scrolling sahring buttons, have a good for newbies. Hafeez khan your exams complete it, yet i am waiting for two papers here.

    ReplyDelete
    Replies
    1. Thanks for commenting with such a nice words. Awais Brother actually we have only one paper remember that is tomorrow. on 30/5/2013. All the papers have gone out now we are only waiting for mathematics paper. After that we will be continuously working on blogging careers.

      Well hows it going your papers.

      Bro i also want to give you some tips. I have analyzed your blog you are doing some mistakes which can cause and will never rank your blog. if you are doing the same habits. Whenever we are online on Facebook then i will guide you. thanks and hope for good reply.

      Delete
  9. thanks hafeez again and again for asking and help me i have two papers one paper mathematics in today and i am online in fb from 4-5 clock and help me wating for you

    ReplyDelete
    Replies
    1. Sure bro if we have time we will must resolve your problems. We are trying to touch your words.

      Delete
  10. Hafeez bro, I can't stop myself to say that "You Rocksss!"
    What a styles and you really did a great job here. Keep it up bro!

    ReplyDelete
    Replies
    1. Yes Ankit Bro it took 4 hours to writes this posts all about the widget. We will bring more stylishly widget in futures. Keep visiting us. and hears for latest updates.

      Delete
  11. bro where i am waiting for you online in fb

    ReplyDelete
    Replies
    1. We will online on facebook at 2/5/2013 at 11:30 Am. Please join at facebook at

      hafeez.khan9000@gmail.com

      Delete
  12. thank bro but can you tell me how to add this in center like yours.

    ReplyDelete
    Replies
    1. add a gadget below your post and past it coding thats is.

      Delete

About ProBloggerTricks

Founded in 2013, Pro Blogger Tricks is the ultimate resource for bloggers and marketers. Looking for ways to make money online? Need blogging tips, SEO tips and other business and marketing related content? Probably, the best source of information about monetizing a blog ....Read More

Copyrights @ 2014, Pro Blogger Tricks - Designed By Templateism