Jul 25, 2016

Scrollbar Percentage Value Function! Add to Blogger

Posted by Paramjot Singh
How To Add Scrollbar Percentage Value Function to Blogger?
We have already posted about How To Customize the Color of Scrollbar in Blogger and now in this post we are going to post another tutorial about customizing the scrollbar in blogger. Today in this post we are going to share How to Show or Add Percentage Value Function in Blogger?

How To Add Scrollbar Percentage Value to Blogger?

Actually, It basically shows you the percentage of a page while scrolling. It might turn out to be extremely useful for your visitors to find out how much page they have scrolled, or how much content is left to be read. In this article, we will show you How to Add Percentage Value to a Scrollbar in Bloggers.

See Also Another Stylish Widget

  1.  Stylish Contact Form for Blogger! Add to Static Page.
  2. Stylish Popup Subscription Box for Blogger.
  3. WordPress Like Floating Social Sharing Counter Buttons for Blogger.


If you want to see live demo of this function then you can see it live by clicking on the below button.



We hope you liked it and now you want to add it on your blogger blog. If you want to add it on your blogger then read below instructions carefully and do all steps step wise.

Note: Before doing any customize inside your Blogger Template code, Must download a backup copy of your Template.

How To Show/Add Scrollbar Percentage Value Function in Blogger?

  • Go to Blogger >> Template >> Edit HTML.
  • Now search for ]]></b:skin> tag and paste below code just above of it.
#scroll {
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #2187e7;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: ” ”;
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #2187e7;
}
  •  Now search for </head> tag and paste following code just after of this tag.
Note: Make sure you paste the code between </head> and <body> tag.

<div id='scroll'></div>
  •  Now, Finally search for ending </body> tag and paste following JavaScript code just above of this tag. This is the code which show accurate percentage value of your blog page when someone scroll to top or scroll to down.

    <script type='text/javascript'>
    /*<![CDATA[*/
    var scrollTimer = null;
    $(window).scroll(function() {
    var viewportHeight = $(this).height(),
    scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
    progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
    distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
    .css('top', distance)
    .text(' (' + Math.round(progress * 100) + '%)')
    .fadeIn(100);
    if (scrollTimer !== null) {
    clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
    $('#scroll').fadeOut();
    }, 1500);
    });
    /*]]>*/
    </script>
  • Now, simply click on save template.
  • Congrats! You have added this function to your blogger blog successfully.

Conclusion:

So above guide is about How To Add/Show Scrollbar Percentage Value Function in Blogger Blog? We hope by above guide you can successfully added to your blogger template. If anyhow problem persist after following all steps then drop a comment below. We will help you out of sure. Do share.
Thank You! Stay Blessed!
Read More

Jul 24, 2016

Stylish Slider Demo/Download Button! Add to Blogger Posts

Posted by Paramjot Singh
How To Add Slider Demo & Download Buttons to Blogger Posts
In previous we have shared Custom CSS Buttons for blogger blog but now we think why we are not sharing some fancy and professional looking Demo and Download buttons for blogger. So today we are going to share Demo and Download button with all of you with sliding function.

How To Add Animated Slider Demo and Download Buttons to Blogger Posts?


As you know a blogger always want to add some cool looking widgets to their blogs and attract more visitors, which can affect to Blog Rank and also it can increasing Page Views. These buttons have awesome animation effect, You may name it mouse hover slide effect. Okay, So now before adding it on your blog see the live demo of these buttons.

Hope you like above Live Demo and Animation of these buttons when anyone mouse hover on it. Now if you want to add it on your Blog then follow below instruction carefully.

How To Add CSS Slide Animated Demo/Download Button to Blogger?

  • Go To Blogger >> Template >> Edit HTML.
  • By Pressing CTRL+F or CMD+F search for <head> code and paste below FontAwesome Stylesheet.
 <link href='http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>
  • Now Again, By Pressing CTRL+F OR CMD+F Search for ]]></b:skin> tag and paste following code just above of this tag.
 //******************************************//
    Slider DEMO/DOWNLOAD Button Code
            By: www.mybloggerguides.com
              Don't Remove these Credits
//*****************************************//
#wrap {
    margin: 20px auto;
    text-align: center;
}

#wrap br {
    display: none;
}

.mbg-btn-slide, .mbg-btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #00CC00;
    margin: 10px;
    transition: .5s;
}

.mbg-btn-slide2 {
    border: 2px solid #FF3300;
}

.mbg-btn-slide:hover {
    background-color: #00CC00;
}

.mbg-btn-slide2:hover {
    background-color: #FF3300;
}

.mbg-btn-slide:hover span.circle, .mbg-btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #00CC00;
}

.mbg-btn-slide2:hover span.circle2 {
    color: #FF3300;
}

.mbg-btn-slide:hover span.title, .mbg-btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.mbg-btn-slide:hover span.title-hover, .mbg-btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.mbg-btn-slide span.circle, .mbg-btn-slide2 span.circle2 {
    display: block;
    background-color: #00CC00;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.mbg-btn-slide2 span.circle2 {
    background-color: #FF3300;
}

.mbg-btn-slide span.title,
  .mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title2,
  .mbg-btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #FF3300;
    transition: .5s;
}

.mbg-btn-slide2 span.title2,
  .bsd-btn-slide2 span.title-hover2 {
    color: #00CC00;
    left: 80px;
}

.mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title-hover2 {
    color: #fff;
}

  • Now, Save the template.
  • Now, When You Post your next article and want to add these buttons to that post then Click on New Post and Click on HTML Tab.
  • Now Paste Below Code inside Post HTML Section.
      <div id="wrap">
<a href="www.mybloggerguides.com" class="mbg-btn-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a href="www.mybloggerguides.com" class="mbg-btn-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>

Required Change:

Change This Color = With Your Link.

  • That's it. You are done.
  • Now open your Blog post in which you have added these buttons and see them live on your blogger blog.

See Also Another Stylish Widget

  1.  Stylish Contact Form for Blogger! Add to Static Page.
  2. Stylish Popup Subscription Box for Blogger.
  3. WordPress Like Floating Social Sharing Counter Buttons for Blogger.

    Conclusion:

    So above guide is about How To Add Stylish Slider Demo/Download Button to The Blogger Posts? Hope by the above instruction you have easily added it on your blogger blog. If anyhow problem persist after following all above steps then drop a comment below. We will help you out of sure. Do share it.
    Thank You! Stay Blessed!
    Read More

    21 Unique Loading Effect Styles! Add to Blogger

    Posted by Paramjot Singh
    How To Add Unique Loading Effect On Blogger?
    We always want to look our blogs more attractive and more professional from others so we always used different methods, templates, gadgets etc. Today we are introducing animated page loading effect for blogger blogs. When our visitors click any link on our blog then an animated loading screen will show and automatically carry the visitor to the clicked link. This is a great way to impress our visitors and attract them to visit our blog pages more times.

    How To Add Loading Effect To Blogspot?

    If you have seen Google Dynamics View Theme for Blogger, then you might be aware of the fact that before the whole template gets exposed a Small Jquery loading ICON appears that literally stoles our all attention. For Example, you are thinking to play a PC game so before you could start playing you have to go through LOADING part. Similarly, we will insert a tremendous Jquery Loading Effect to our BlogSpot Blog so our visitors won’t see the images or content getting load instead we will show them a cute Jquery loading page that would literally amuse them.

    Our Recommended Blogger Widgets

    1. WordPress Like Floating Social Sharing Widget for Blogger with Counter.
    2. AllInOne Admin Box Widget with Social buttons and Subscription Box.
    3. Add Sticky Notification Bar To Blogger with Show/Hide Button.
    4. Stylish Contact Form For Blogger! Add to Static Page, Responsive & Pro Version.
    5. Cute & Stylish Email Popup Subscription Widget.

    There are many way to create loading effect ,in this post ,we want to introduce the easiest way, here are some ideas and inspiration of loading effects that you can apply on your web design. Lets try how to install these effects to your blogger blog.

    Note: Before doing Any Customization in your Blogger Template, must download a backup copy of your template.

    How To Add Loading Effect On Blogger?

    • Go To Blogger >> Template >> Edit HTML.
    • Now Search for </head> tag by pressing CTRL+F OR CMD+F.
    • Copy the code below and paste it just above of </head> tag.
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
    Note: If Jquery is Already added in your Template then skip above step. Because if jQuery is more than one would slow down loading speed.

    • Now, Again Search for ]]></b:skin> tag and paste below lines just above of it.
         #page-loader {
        position:fixed !important;
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        z-index:9999999;
        background:#FFFFFF url('URL Here') no-repeat 50% 50%;

        padding:1em 1.2em;
        display:none;
        }
    Note: Before Adding the JavaScript Code inside your blogger template, First change Above URL Here with one of Image URL from below. Add those link which you want to add.

    Blogger Loading Effect Style1]

    Blogger Loading Effect Style1

    http://3.bp.blogspot.com/-99_s0XfLTt0/UQaikh3bSMI/AAAAAAAAFOU/BuKqG0mh0eY/s1600/loading4.gif

    Blogger Loading Effect Style2]

    Blogger Loading Effect Style2
    http://1.bp.blogspot.com/-W9bm3Oc6WzA/UQaik9ql4AI/AAAAAAAAFOg/3fyDf9Agbso/s1600/loading5.gif

    Blogger Loading Effect Style3]

    Blogger Loading Effect Style3
    http://1.bp.blogspot.com/-udgAVO3FySQ/UQailMH35aI/AAAAAAAAFOo/JD6vDePg9OU/s1600/loading6.gif

    Blogger Loading Effect Style4]

    Blogger Loading Effect Style4
    http://2.bp.blogspot.com/-yz54Aj8Fp1s/UQailmVa8BI/AAAAAAAAFPA/LT0KOGY-_lk/s1600/loading8.gif

    Blogger Loading Effect Style5]

    Blogger Loading Effect Style5
    http://3.bp.blogspot.com/-eeiu8xL2Qls/UQaimEebl4I/AAAAAAAAFO8/hSK_kq7C8Po/s1600/loading9.gif

    Blogger Loading Effect Style6]

    Blogger Loading Effect Style6
    http://3.bp.blogspot.com/-bWMOJ7ywzjg/UQaij1cSLiI/AAAAAAAAFOM/Nrdgh1W6hys/s1600/loading10.gif

    Blogger Loading Effect Style7]

    Blogger Loading Effect Style7
    https://lh4.googleusercontent.com/-1nnz_q-zdlE/U7nQPsC7zvI/AAAAAAAAEDU/a3A-LG1mM0I/s128-no/Loading1.gif

    Blogger Loading Effect Style8]

    Blogger Loading Effect Style8
    http://3.bp.blogspot.com/-Y2S2txttvPw/U7nQPi0h5MI/AAAAAAAAEDU/rsMYnz5-yn0/s128-no/Loading2.gif

    Blogger Loading Effect Style9]

    Blogger Animated Loading Effect Style9
    http://1.bp.blogspot.com/-tjFFryWgIcs/U7nQQ0x7JHI/AAAAAAAAEDU/v2BqyuIvCc8/s128-no/Loading3.gif

    Blogger Loading Effect Style10]

    Blogger Animated Loading Effect Style10
    http://2.bp.blogspot.com/-kXvhQBHoB0s/U7nQRhwcIxI/AAAAAAAAEDU/WDhTfSJOii8/s128-no/Loading4.gif

    Blogger Loading Effect Style11]

    Blogger Animated Loading Effect Style11

    http://2.bp.blogspot.com/-JN0Uo9ud0SY/U7nQSv_-HfI/AAAAAAAAEDU/NfHcUkP27QY/w124-h128-no/Loading5.gif

    Blogger Loading Effect Style12]

    Blogger Animated Loading Effect Style12

    http://1.bp.blogspot.com/-sGFHLSRy2OI/U7nQTn34h8I/AAAAAAAAEDU/0PUXPSEACPc/s128-no/Loading6.gif

    Blogger Loading Effect Style13]

    Blogger Animated Loading Effect Style13

    http://2.bp.blogspot.com/-bixcnTkh4q4/U7nQUNmm3_I/AAAAAAAAEDU/YE9s5MKfa60/s128-no/Loading7.gif

    Blogger Loading Effect Style14]

    Blogger Animated Loading Effect Style14
    http://1.bp.blogspot.com/-sbG2UKoWYpc/U7nQUtY6YOI/AAAAAAAAEDU/Oc22arnyymc/w128-h54-no/Loading8.gif


    Blogger Loading Effect Style15]

    Blogger Animated Loading Effect Style15

    http://4.bp.blogspot.com/-H8yWVVQ78Wk/U7nQVZTbQqI/AAAAAAAAEDU/a-aWtzRZlls/s128-no/Loading9.gif

    Blogger Loading Effect Style16]

    Blogger Animated Loading Effect Style16
    https://2.bp.blogspot.com/-MioMa_BqYh8/V5R9oDftZlI/AAAAAAAAEt8/moiXF7b03x4vL-MjlYwwDcxyiOPUyQprgCLcB/s1600/MBG-loading-16.gif


    Blogger Loading Effect Style17]

    Blogger Animated Loading Effect Style17
    https://3.bp.blogspot.com/-qR8QdOygkrw/V5R9pfAzlZI/AAAAAAAAEuA/8elJkn15fpgDe4w2Ul-MGUS_DmpFrTglwCLcB/s1600/MBG-loading-17.gif


    Blogger Loading Effect Style18]

    Blogger Animated Loading Effect Style18
    https://3.bp.blogspot.com/-5NxgB6d2tcY/V5R9rGSW0kI/AAAAAAAAEuE/m60vD--p16sXD4CtAXUnCcjNpLnW6AB3QCLcB/s1600/MBG-Loading-18.gif


    Blogger Loading Effect Style19]

    Blogger Animated Loading Effect Style19

    https://4.bp.blogspot.com/-56jrBh9Sjfs/V5R9sc4J5FI/AAAAAAAAEuI/VlpT4MvBs_IdNV_CZkHZS8_w97HeauOrwCLcB/s1600/MBG-Loading-19.gif

    Blogger Loading Effect Style20]

    Blogger Animated Loading Effect Style20
    https://2.bp.blogspot.com/-sSEjxhqlzB4/V5R9uGxk4kI/AAAAAAAAEuM/4EIgJChGpTgzIwHgykmy1HTEd8S0XuQkwCLcB/s1600/MBG-loading-20.gif


    Blogger Loading Effect Style21]

    Blogger Animated Loading Effect Style21
    https://2.bp.blogspot.com/-yVfxueCRm6M/V5R9wP426hI/AAAAAAAAEuQ/_2IC8KUObPoCghpdHFcN7vLUc0PG_oAjQCLcB/s1600/MBG-Loading-21.gif

    • Now, Again search for </body> tag and paste below jQuery code above of </body>  tag.
         <script type='text/javascript'>
        //<![CDATA[
        $(document.body).append('<div id="page-loader"></div>');
        $(window).on("beforeunload", function() {
            $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
        });
        //]]>
        </script>
    • Thta's it. You are done.
    • Now open your Blog and see it live on your Blogger Blog.
     

    Conclusion:

    So above guide is about How To Add Loading Effect to Blogger Blog? Hope you easily add it on your blogger by above complete guide. If anyhow problem persist after following all above steps then drop a comment below or contact me via contact page. If you like this post then you can follow us on Facebook or Subscribe us. It is just Reminder. :) Thank You! Stay Blessed! :)
    Read More

    Jul 23, 2016

    Add Sticky Notification Bar to Blogger with Show/Hide Button

    Posted by Paramjot Singh
    You must have seen many websites or blogs use this kind of sticky notification bar to display the important announcements or events on their blogs, so that their readers do not skip any important information. It shows manually specified links, so you can add or remove links to it according to your needs and the notification bar scrolls down to the page as a sticky notify bar on the top of the blog page so that any visitor can't really miss it.

    Sticky Notification Bar for BloggerNotification bar widget is one of the most popular blogger widgets. It also helps in boosting your 
    blog’s traffic by increasing the number of page views of your blog. This bar grabs the attention of visitors very strongly and thus helps in reducing bounce rate of your blog. You might have seen some pro bloggers using Hello Bar on their blog where they showcase some links of upcoming events or to download some ebooks or even a simple subscription box.

    If you are blogger user then you must have hear about a well known Pro Blogger +Mohammad Mustafa Ahmedzai of MyBloggerTricks has changed the way the blogger platform used to be and left a benchmark by devloping the amazing widgets, shortcodes and templates.

    Recommended Blogger Widgets:

    1. WordPress Like Social Sharing Widget for Blogger.
    2. Cute & Stylish Popup email Subscription Box for Blogger.
    3. Stylish Contact Us Form for Blogger! Add to Static Page.
    4. AllInOne Admin Bio Box with Social Buttons and Subscription box.
    5. Responsive Subscription Box for Blogger Post's Footer.

    Notification Bar with Hide and Show Button is also one of those widgets which has released by Mohammad bro so far. Although the only demerit of this widget is MBT watermark with a link back to the blog. You had two choices, one to go with as it is and second if you want to remove the watermark, go with the pro version of that widget.

    That's Why, today we're going to releasing a notification bar designed with the help of CSS and HTML. We have used the JavaScript too, but its purpose is just to make it sticky.We don't need any backlink so it's totally yours as it is. We have not add any backlink to this widget. :)

    Now, We are going to share screenshot demo and a live demo link of this widget.

    Stylish Sticky Notification Bar for Blogger


    Live Demo

    We hope you like this sticky notify bar which you have seen from above screenshot and live demo link. We hope now you are going to add it on your blog. To add this sticky notification bar to your Blogger blog, follow below instructions, but before adding it must know some good features of this widget.

    Features of Notification Bar

    1. Stylish Design.
    2. Neat and clean.
    3. Light Weighted, Load Very Fast.
    4. Show and Hide Button.
    5. Integration of FontAwesome Icons to make it Professional.
    6. Easy Customization of Colors.
    7. Sticky, Stays on the top of the page even the users scrolls down the page.
    8. Responsive design and its not appear on mobile devices.

    How To Add Sticky Notification Bar to Blogger?

    Note1: Before adding it on blogger Download a backup copy of your blogger template.

    Note2: Credit: The JavaScript Code We are using in this widget for making it sticky is devloped by BloggerSentral.com

    Note3: You Don't have permission to Copy and Paste my Code in any condition or changing the class names. We have not include any backlink, but you are required to credit given to developer in CSS classes. They don't harm in any case. Respect the copyrights and hard works of developers.

    Now, Follow below guide carefully if you want to add it on your blogger blog without facing any bug.

    Step1] Go To Blogger >>  Tmplate >> Edit HTML.

    Step2] Click inside code are and Search for <head> tag and paste below code just below of <head> tag.

    <link href='http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>
    Step4] If Google JavaScript Library not added on your blogger template then also add it just below of <head> tag and if it has already added on your template then skip this step.

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

    Step5] Now Search for ]]></b:skin> tag and Paste following CSS code just above of it.
    //****************************************//
    Sticky Notification Bar For Blogger
    Designed by: http://www.mybloggerguides.com/
    Sticky .js By: http://www.bloggersentral.com/
    //****************************************//
    #MBG-Blogger_NotificationBar_wrap {
    background:#FF0066;
    margin:0;
    padding:0;
    position:relative;
    width:100%;
    z-index:9999999;
    }
    .MBG-Blogger_NotificationBar {
    color: #fff;
    position: relative;
    background: #111; /*--Change Background Color Here--*/
    width: 99.9%;
    padding: 0;
    text-align: center;
    font-family: Arial Black, sans-serif;
    text-shadow: 0px -1px 0px #000;
    height: 45px;

    border-radius:170px 0px 170px 0px;
      border-bottom:5px solid #FF0066;
     
    }
    .MBG-Blogger_NotificationBar label:hover {
    cursor: pointer;
    }
    .MBG-Blogger_NotificationBar label {
    text-align: center;
    background: #8FF; /*--Change Button Background Color Here--*/
    color: #111;
    border: 0;
    font-family: fontawesome;
    text-shadow: 0px -1px 0px #8FF;
    font-size: 26px;
    -webkit-transition: 0.3s all ease-in-out;
    -moz-transition: 0.3s all ease-in-out;
    -ms-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
    position: relative;
    transition-delay: 0s;
    margin-top: 0;
    float: right;
    height: 35px !important;
    width: 35px;
    overflow: hidden !important;
    z-index: 9999;
    padding-top: 5px;
    margin-right:5px;
    border-radius:0px 0px 35px 35px;
    }
    input.MBG-Blogger_ShowHideButtonBar:checked + label {
    transform-origin: 12% 50% !important;
    transform: translateY(0px) rotateX(190deg);
    -webkit-transform: translateY(0px) rotateX(190deg);
    -moz-transform: translateY(0px) rotateX(190deg);
    -ms-transform: translateY(0px) rotateX(190deg);
    -o-transform: translateY(0px) rotateX(190deg);
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s;
    margin-top: 47px;
    border: 0;
    }
    input.MBG-Blogger_ShowHideButtonBar ~ .MBG-Blogger_ContentArea {
      position: relative;
    overflow: hidden;
    height: 40px;
    margin-left:15px;
      border-top:5px solid #FF0066;
    -webkit-transition: 0.5s all ease-in-out;
    -moz-transition: 0.5s all ease-in-out;
    -ms-transition: 0.5s all ease-in-out;
    -o-transition: 0.5s all ease-in-out;
    transition: 0.5s all ease-in-out;
    }
    input.MBG-Blogger_ShowHideButtonBar:checked ~ .MBG-Blogger_ContentArea {
    margin-top: -55px;
    }
    input.MBG-Blogger_ShowHideButtonBar {
    display: none;
    }
    /*--Change FontAwesome Icons Style Here--*/
    .MBG-Blogger_ContentArea .fa {
    font-size: 16px;
    font-weight: normal;
    color: #ff0066;
    font-family: FontAwesome;
    border-bottom: 1px solid #FF0066;
    margin-right: 5px;
    }
    .MBG-Blogger_ContentArea ul {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-type: none;
    height: 100%;
    }
    .MBG-Blogger_ContentArea ul > li {
    list-style: none;
    font-size: 14px;
    font-weight: bold;
    font-family: sans-serif;
    text-decoration: none;
    padding-top: 10px;
    margin-right: 10px;
    display: inline-block;
    }
    .MBG-Blogger_ContentArea ul > li > a {
    color: #8ff;   /*--Change Links Color Here--*/
    text-decoration: none;
    font-family: cursive;
    font-weight: normal;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    }
    .MBG-Blogger_ContentArea ul > li > a:hover {
    color: #8fa !important;  /*--Change Links Hover Color Here--*/
    }
    .bs_sticking {
    position:fixed !important;
    width: 100% !important;
    }
    @media only screen and (max-width:479px) {
    #MBG-Blogger_NotificationBar_wrap, .MBG-Blogger_NotificationBar {
    display: none !important;
    }
    }

    Step6] Now Search for </body> tag and paste following JavaScript code to just above of </body> tag.
    <script type='text/javascript'>
    // Sticky widget by Bloggersentral.com
    // Tutorial at http://www.bloggersentral.com/2013/04/how-to-make-any-widget-sticky.html
    // Free to use or share, but please keep this notice intact.
    //<![CDATA[
    bs_makeSticky("MBG-Blogger_NotificationBar_wrap1"); // enter your widget ID here
    function bs_makeSticky(elem) {
        var bs_sticky = document.getElementById(elem);
        var scrollee = document.createElement("div");
        bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
        var iniClass = bs_sticky.className + ' bs_sticky';
        window.addEventListener('scroll', bs_sticking, false);
        function bs_sticking() {
            var rect = scrollee.getBoundingClientRect();
            if (rect.top < 0) {
                bs_sticky.className = iniClass + ' bs_sticking';
                bs_sticky.style.width = "100%";
            } else {
                bs_sticky.className = iniClass;
            }
        }
    }
    //]]>
    </script>

    Step7] Now Search for <body> tag and paste following HTML code just below of <body> tag.
    <div id='MBG-Blogger_NotificationBar_wrap1'>
    <div id='MBG-Blogger_NotificationBar_wrap'>
    <div class='MBG-Blogger_NotificationBar'>
      <input class='MBG-Blogger_ShowHideButtonBar' id='mbg' type='checkbox'/>
      <label for='mbg'><i class='fa fa-chevron-circle-up'/></label>
      <div class='MBG-Blogger_ContentArea'>
      <ul>
      <li>
        <i class='fa fa-signal'> Trending:</i> <a href='#Your-Link1'>Popup Blogger Subscription Box</a>
    </li>
      <li>
        <i class='fa fa-fire'> Hot: </i> <a href='#You-Link2'>Stylish Blogger Contact Form</a>
    </li>
      <li><i class='fa fa-home'> Home: </i> <a href='#Your-Link3'>Go To Home</a>
    </li></ul></div></div> </div></div>

    Required Editing:

    Step8] We have highlighted the above HTML Code with different colors. Now, You have to edit it according to your needs. So, Read below carefully to make changes without any bug.
     

    This Color - Code of your FontAwesome Icons.

    This Color - Text String which appears just before the links.

    This Color - Change the link.

    This Color - Anchor Text for The Link.

    How To Add More Links To The Notify Bar?

     Add below Code Before the </ul> code in HTML Part.
    <li> <Font Awesome Icon Code> Text String:<i> <a href='#Your-Link'>Anchor Text For Link</a></li>

    Step9] Now, Finally save your template. Open your Blog to see it live hanging on the top of the your blogger blog.

    Do you have any suggestion for its improvement? Do you want any other feature to be added in this sticky bar? Your opinions are always welcome.

    Conclusion:

    So above guide is about How To Add Sticky Notification Bar to Blogger with Show/Hide Button? If you are facing any problem after following all steps then drop a comment below or contact us via contact us page. Definitely , We will help you. You can Share, Subscribe and Follow Us ON Facebook, Just Reminding. :) Thank You! Stay Blessed!
    Read More

    Jul 22, 2016

    Stylish Contact Form For Blogger! Add to Static Page

    Posted by Paramjot Singh
    In previous we have shared a lot of Blogger widgets for our all loyal readers. But, its time to share some impressive, stylish and cool designed widgets which look professional in your blogger blog. Now days we have designed some widgets for you which we have shared some time ago like as, AllInOne Admin Box for Blogger, Stylish & Responsive Subscription Box for blogger, Cute Popup email Subscription box for blogger & WordPress Like Responsive Social Sharing Bar Widget for Blogger with Counter function. So, now you are thinking what is in today's post, Right? So guys, Today we are going to share a pro looking stylish Contact Us Form For Blogger which is fully Responsive.
    How To Add Stylish Contact Form to Static Page on Blogger
    Actually, Adding a Contact Form Blogger blogs is very tough task for everyone until before blogger has released its official Contact Form Gadget. Blogger blogs were missing one major feature therefore either we have to use third party services. But now its take only few clicks to install it to sidebar or footer bar of any template's layout. But still most of the people want to use it on any dedicated contact us page rather than as a sidebar or footer widget.

    Why Blogger's Contact Form is Best than others?

    It is because it has following features:
    1. Fewer Option.
    2. Neat & Clean.
    3. Instant Delivery Service.
    4. No Page Reload When Someone Click On Send Button.
    5. Easy to Customize With CSS.
    6. We can install it on any static/specific page instead of sidebar or footer.
    7.  Trust Full, Because it is Blogger's official widget. So we need not to worry about anything.
    How To Add Stylish Responsive Contact Us Form On Separate Page Of Blogger Blog

    In above Demo Screenshot you have seen we have done a lot of work to make blogger contact form looks like a professional one. It is Fully responsive and it is aligned in center of your static/specific page. Hope you like it. Can we call it Professional version? :) See Live Demo from Below Button.

    Live Demo

    If you like above demo screenshot then we shall move on the adding our Blogger Contact form to separate page of Blogger Blog. :)

    Adding Contact Form To Static Page Of Blogger

    Step1] This step is for those people who has not installed the blogger contact form widget from Blogger library. We hope you have already Logged into your Blogger account so now we head over to Layout >> Add A Gadget >> Now Click On More Gadgets >> Add Contact Form.

    Step2] After adding into sidebar or footer area, Now we are going to hide it for appearing as a gadget. Go To Template >> Edit HTML >> Search for ]]></b:skin> tag and just above of this tag paste following code.

    div#ContactForm1 {
        display: none !important;
    }
     As you have guessed from above demo screenshot we are using FontAwesome Icons & if you are not using them then first you'll have to install it otherwise All the icons will not appear as shown in the Demo Screenshot.

    Step3] Installing Font Awesome Icons to Blogger Template

    Go To Blogger >> Template >> Edit HTML.
    Paste following code just below of <head> tag inside your Blogger Template.

    <link href='http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>
    Step4] Now Save your Template because you are done with it.

    Step5] Now we are going to add Contact Form to static page on Blogger Blog. If you already have a separated page for contact form and you are using a contact form already then you need not to create a new one for this. But if this is the first time then go to Pages link and on top, Click on New Page Link.

    Step6] When blogger post editor is loaded then immediately before doing anything else, just enter your page name in the title box as Contact Us. This is the most important step because you'll get the same permalink address for your new page. You'll not be able to edit your permalink in anyway later. If you skipped this and entered the codes first then you'll get a weird permalink address for contact us page. After that Switch to HTML Mode and change the page settings from left side as shown in the screenshot below.

    Installing The Stylish Contact Form ON Separated Page


    Step7] You're almost done by now and all you need is simple Copy and Paste the code. So just select the whole CSS and HTML code given below and paste into HTML Editor as it is.

    Important Notice: You don't have permission to copy and share my codes on your blog. We have put a lot of efforts into designing it and you can see itself from below CSS code area. Respect the Hard work of others.

    CSS Part

    <style>
    /****** Contact Form Designed by www.MyBloggerGuides.com ******/
    div#mbg-blogger-cntct-form {
        width:100%;
       height:100%;
        padding: 50px 0px;
        border-radius: 2px;
        color: #1D1D1D;
        font-size: 15px;
        font-weight: bold;
        position: relative;
        background-color: #404040;
        font-family: sans-serif;
    }
    div#mbg-blogger-cntct-form .wrap-me {
        margin: 0 auto;
        display: block;
        padding: 30px 20px;
        background-color: #F0F0F0;
        max-width: 750px;
        width: 100% !important;
        border-top: 60px solid #FF0066;
        box-sizing: border-box;
        border-bottom: 3px solid #FF0066;
        border-left: 3px solid #FF0066;
        border-right: 3px solid #FF0066;
        border-radius: 15px 15px 15px 15px;
    }
    div#mbg-blogger-cntct-form .wrap-me:before {
        content: '\f0e0  Contact Us';
        position: absolute;
        font-family: FontAwesome;
        font-weight: normal;
        margin-top:-87px;
        margin-left:-95px;
        left:50%;
        display: inline-block;
        font-size: 28px;
        width:190px;
        height: 53px;
        border-radius: 50px;
        text-align: center;
        color: #FFF;
        box-sizing: border-box;
        border: 2px solid #FFFFFF;
        line-height: 50px;
    }
    input#ContactForm1_contact-form-name, #ContactForm1_contact-form-email, #ContactForm1_contact-form-email:hover, #ContactForm1_contact-form-email:active {
        padding: 5px;
        margin-top: 5px !important;
        box-shadow: none!Important;
        max-width: 450px;
        width: 100%;
        border: 1px solid #8ff;
        line-height: 1em;
        min-height: 32px;
        background: #FEFEFE;
        font-family: sans-serif;
        margin-bottom: 15px;
        border-radius: 10px;
    }
    .contact-form-email-message, .contact-form-email-message:active, .contact-form-email-message:hover {
        padding: 5px;
        margin-top: 5px !important;
        box-shadow: none!Important;
        max-width:670px;
        width:100%;
        border: 1px solid #8ff;
        line-height: 1em;
        min-height: 50px;
        background: #FFF;
        font-family: sans-serif;
        margin-bottom: 10px;
        border-radius: 10px;
    }
    /***** Focus *****/
    #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
        outline: none;
        background: #fff !important;
        color: #111;
        border-color: #ffb2b2;
        transition: all 0.3s ease-in-out !important;
    }
    /**** Submit button style ****/
    .contact-form-button-submit:hover {
        color: #FFFFFF;
        background: #3366FF !important;
    }
    .contact-form-button-submit {
        background: #3399FF;
        display: table;
        font-size: 17px;
        margin: 0 !important;
        border-radius: 0 !important;
        max-width: 100%;
        width: 100%;
        min-width: 100%;
        height: 32px;
        line-height: 0.5em;
        letter-spacing: 0.5px;
        font-family: sans-serif;
        font-weight: normal;
        cursor: pointer;
        outline: none!important;
        color: #FFFFFF;
        border: 1px solid #fff !important;
        text-align: center;
        padding: 0px 0px 0px 15px;
        text-transform: capitalize;
        transition: all 300ms ease-in-out;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
    }
    /**** Submit button on Focus ****/
    .contact-form-button-submit:focus, .contact-form-button-submit.focus {
      border-color: #FFFFFF;
      box-shadow: none !important;
    }
    /**** Error message ****/
    .contact-form-error-message-with-border .contact-form-success-message {
      background: #f9edbe;
      border: 1px solid #f0c36d;
      bottom: 0;
      box-shadow: 0 2px 4px rgba(0,0,0,.2);
      color: #666;
      font-size: 12px;
      font-weight: bold;
      padding-bottom: 10px;
      line-height: 19px;
      margin-left: 0;
      opacity: 1;
      position: static;
      text-align: center;
    }
    /**** Submit Button On Success Message ****/
    .contact-form-button-submit.disabled, .contact-form-button-submit.disabled:hover, .contact-form-button-submit.disabled:active {
        opacity: 0.9;
    }
    /****** Success Message *****/
    .contact-form-error-message-with-border {
        background: #000000;
        border: 1px solid #5A5A5A;
        bottom: 0;
        box-shadow: none;
        color: #FDFDFD;
        font-size: 15px;
        font-weight: normal;
        line-height: 35px;
        margin-left: 0;
        opacity: 1;
        position: static;
        text-align: center;
        height: 35px;
        margin-top: 45px;
    }
    .contact-form-cross {
        height: 14px;
        margin: 5px;
        vertical-align: -8.5%;
        float: right;
        width: 14px;
        border-radius: 50px;
        border: 0 !important;
        cursor: pointer;
    }
    .contact-form-success-message-with-border {
        font-weight: normal;
        background-color: #000;
        border: 1px solid #FFF;
        color: #FFF;
        line-height: 35px;
        margin-left: 0;
        font-size: 13px;
        opacity: 1;
        position: static;
        text-align: center;
        height: 35px;
        margin-top: 45px;
    }
    /* Extra Stuff */
    div#mbg-blogger-cntct-form span.name-bg {
        background-color: #99FFFF;
     }
    div#mbg-blogger-cntct-form span.email-bg {
        background-color: #FF99CC;
    }
    div#mbg-blogger-cntct-form span.name-bg, div#mbg-blogger-cntct-form span.email-bg {
        display: inline-block;
        max-width: 450px;
        line-height: 22px;
        width: 100%;
        color: #111;
        padding: 3px 5px;
        margin: 0px 0px 4px;
        box-sizing: border-box;
        border-radius:10px;
        height: 30px;
        border: 1px solid #B2C0C0;
        padding-left: 39px;
    }
    div#mbg-blogger-cntct-form span.name-bg:before {
        content: '\f007';
        background-color: #444;
     }
    div#mbg-blogger-cntct-form span.email-bg:before {
        content: '\f1fa ';
        background-color: #3333FF;
    }
    div#mbg-blogger-cntct-form span.name-bg:before, div#mbg-blogger-cntct-form span.email-bg:before, div#mbg-blogger-cntct-form span.message-bg:before {
        font-family: FontAwesome;
        text-align: center;
        margin: -4px 0 0px 0px;
        font-weight: normal;
        padding: 0;
        line-height: 27px;
        width: 30px;
        height: 28px;
        display: table;
        position: absolute;
        margin-left: -40px !important;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-right: 0 !important;
        border-radius:10px 0px 10px 0px;
        color: #FFFFFF;
    }
    div#mbg-blogger-cntct-form span.message-bg {
        background-color: #FF6666;
        display: inline-block;
        max-width: 450px;
        line-height: 22px;
        width: 100%;
        color: #111;
        padding: 3px 5px;
        box-sizing: border-box;
        height: 30px;
        border: 1px solid #B2C0C0;
        border-radius:10px;
        padding-left: 39px;
        margin: 0px 0px 4px;
    }
    div#mbg-blogger-cntct-form span.message-bg:before {
        content: '\f0e0';
        background-color: #00E540;
    }
    div#mbg-blogger-cntct-form span.send-bg {
        height: 32px;
        display: inline-block;
        float: left;
        max-width: 45%;
        width: 100%;
        margin-top: 15px;
        transition: all 0.4s ease-in-out !important;
    }
    div#mbg-blogger-cntct-form span.send-bg:before {
        content: '\f1d8';
     }
    div#mbg-blogger-cntct-form span.send-bg:before, div#mbg-blogger-cntct-form span.clear-bg:before {
        font-family: FontAwesome;
        text-align: center;
        font-weight: normal;
        margin: 0;
        background-color: #000;
        padding: 0;
        line-height: 27px;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        border: 1px solid #fff;
        border-right: 0 !important;
        color: #FFFFFF;
    }
    div#mbg-blogger-cntct-form span.clear-bg {
        display: inline-block;
        float: right;
        margin-top: 15px;
        max-width: 45%;
        width: 100%;
    }
    div#mbg-blogger-cntct-form span.clear-bg:before {
        content: '\f021';
     }

    input.contact-form-button.contact-form-button-submit.clear-button:hover {
        background-color:  #0000CC !important;
    }
    div#mbg-blogger-cntct-form .clear-button {
        color: #FFFFFF;
        border: 1px solid #FFF !important;
        background-color: #3333FF;
        float: right;
        display: table;
        height: 32px;
    }
    </style>



    HTML Part:
         <div id="mbg-blogger-cntct-form">
        <div class="wrap-me">
        <form name="contact-form">
    <span class='name-bg'>Your Name</span><br />
    <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Enter your name here..." size="30" type="text" value="" /><br />
    <br />
    <span class='email-bg'>Your Email*</span><br />
    <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Enter your email here..." size="30" type="text" value="" /><br />
    <br />
    <span class='message-bg'>Your Message*</span><br />
    <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Write your message here..." rows="5"></textarea><br />
    <span class='send-bg'><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /></span>
    <span class='clear-bg'><input class='contact-form-button contact-form-button-submit clear-button' type='reset' value='Clear'/></span>
    <br />
    <div style="max-width: 100%; text-align: center; width: 100%;">
    <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
    </div>
    <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
    </div>
    </div>
    </form>
    <br />
    </div>
    </div>

    Step8] Now just hit Publish button buddy.  Finished? We did it! Yay! :) Now just visit your contact us page and see it live yourself

    Conclusion:

    So above guide is about How To Add Stylish Contact Form To Blogger Separated Page. Hope this guide help you and you can easily add this pro looking contact form to separated page of your Blogger Blog. Still if you have some problems then please let me know, We'll help you for sure. We hope you guys liked this new look of blogger contact us form widget in a separate page of your blog. If you have little time then you may share this article. :) Thank you! Stay Blessed!  
    Read More

    Jul 21, 2016

    WordPress Like Floating Social Sharing Widget for Blogger

    Posted by Paramjot Singh
    Now days the best way to increase any blog's PVs is, have a good looking Social sharing widget. Because, if we has a good looking sharing widget which can attract readers to share your content then, PVs of your blog can boost day by day. Today we are going to release  WordPress Like Floating Social Sharing Bar for Blogger. It has Total share counts and custom buttons. In previous post we have shared a Cute Popup email Subscription box Widget for Blogger, Have a look also.



    Responsive Floating Social Share Bar for BloggerThis widget is totally different from our previous sharing widgets because this time we did not use any official buttons of social sites instead we used own designed custom social buttons along with total share counts. Every button of this widget shows the number of total shares on that particular social media button.

    Features of This Widget with Demo Screenshot

    Responsive Style Floating Social Sharing Widget for Blogger


    We tried our best to give it the look of other leading free and premium sharing widgets on the web. This is fully responsive. It includes a Show-Hide button, by which you can easily hide and show this widget from screen. It's always good to be on the safe side rather than losing visitors. It has following features.
    1. Total Share Count.
    2. Particular button count.
    3. Only show on static page of your blog.
    4. It is fully Responsive.
    5. Includes Buttons of all leading Social Networking Sites.
    6. WordPress like Look.
    7. Totally Free.
    8. No need to say, it has also Pro look. :)

    Adding Floating Social Sharing Widget to Blogger


    Note:  You don't have permission to copy and share my code on your Blog.
    • Go To Blogger >> Template >> Edit HTML.
    • For Icons, we have use FontAwesome 4.6.3 so just find out opening <head> tag and just after this Paste FontAwesome Stylesheet link which is given below.
    Note : Before doing any customization Must Download a Backup Copy of your Blogger Template.

    <link href='http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>

    Note: This is the latest version of FontAwesome Icons CSS link and you need to update it if you are using old version which is before 4.2.0 because, in old version StumbleUpon icon is not included.



    • Now, Add Google JavaScript Library link if it not already added to your blogger template. Add it just after of <head> tag.
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

    • Now again Search for closing header tag </head> by pressing CTRL+F and paste below just above of this tag.
     <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    /*------------------------------------------------------------
    Floating Like WordPress Social Sharing Bar Version 1.0
    Designed by: Paramjot Singh
    Blogger at: http://www.mybloggerguides.com
    Counting Code by:: http://donreach.com/social-share-count
    Distributed Under GPL License
    Icons:: FontAwesome 4.6.3
    **************** Do Not Remove These Credits *****************
    ------------------------------------------------------------*/
    .MBG_SocialBar {  position: fixed; bottom:-3px; padding: 0; left:0.3px; background: none; text-align: center; margin: 0 auto; z-index: 99999999;} .MBG_SocialBar label:hover {  cursor: pointer; opacity:1; }
    .MBG_SocialBar label { text-align: center; opacity: 0.9; background: #ff0000; color: #FFF; border: 0; font-family: fontawesome; display: block; font-size: 22px; padding: 15px 5px 5px 5px; border-radius: 10px; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; position: absolute; width: 130px; height:32px; margin-left:160px; margin-top:170px;}
    input.ShowHide_Button:checked + label { transform-origin: 50% 0%!important; -webkit-transform-origin: 50% 0%!important; -moz-transform-origin: 50% 0%!important; -ms-transform-origin: 50% 0%!important; -o-transform-origin: 50% 0%!important; opacity: 1; -webkit-transform: translateX(0px) rotateY(-180deg); -moz-transform: translateX(0px) rotateY(-180deg); -ms-transform: translateX(0px) rotateY(-180deg); -o-transform: translateX(0px) rotateY(-180deg); transform: translateX(0px) rotateY(-180deg); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -ms-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; border: 1px solid #3A3939; margin-top:190px; margin-left:-10px; padding: 5px; width:50px; }
    input.ShowHide_Button ~ .ShowHideMe { -webkit-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620); -moz-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620); -ms-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620); -o-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620); transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620); }
    input.ShowHide_Button:checked ~ .ShowHideMe { margin-left:-1075px !important; } input.ShowHide_Button { display: none; } 
    .MBG_SocialBar .social_menu { display: inline-block; float: left; list-style:none; max-width:100%; width:306px; margin: 0; padding: 0; background:#111; border-top:4px solid #111; border-bottom:2px solid #111; border-left:2px solid #111; border-right:2px solid #111; border-radius:10px;}
    .MBG_SocialBar .social_menu .button_facebook { background: #3a579a; }
    .MBG_SocialBar .social_menu .button_facebook:hover { background: #314a83; } .MBG_SocialBar .social_menu .button_twitter { background: #00abf0; } .MBG_SocialBar .social_menu .button_twitter:hover { background: #0092cc; } .MBG_SocialBar .social_menu .button_googleplus { background: #df4a32; } .MBG_SocialBar .social_menu .button_googleplus:hover { background: #be3f2b; } .MBG_SocialBar .social_menu .button_pinterest { background: #cd1c1f; } .MBG_SocialBar .social_menu .button_pinterest:hover { background: #ae181a; } .MBG_SocialBar .social_menu .button_stumbleupon { background: #ea4b24; } .MBG_SocialBar .social_menu .button_stumbleupon:hover { background: #c7401f; } .MBG_SocialBar .social_menu .button_linkedin { background: #2554BF; } .MBG_SocialBar .social_menu .button_linkedin:hover { background: #224EB4; }
    .MBG_SocialBar .social_menu .button_facebook, .MBG_SocialBar .social_menu .button_twitter, .MBG_SocialBar .social_menu .button_googleplus, .MBG_SocialBar .social_menu .button_pinterest, .MBG_SocialBar .social_menu .button_stumbleupon , .MBG_SocialBar .social_menu .button_linkedin{border-radius:10px;}
    .MBG_SocialBar .social_menu .button_facebook .count, .MBG_SocialBar .social_menu .button_twitter .count, .MBG_SocialBar .social_menu .button_googleplus .count, .MBG_SocialBar .social_menu .button_pinterest .count, .MBG_SocialBar .social_menu .button_stumbleupon .count, .MBG_SocialBar .social_menu .button_linkedin .count {
      color: #8ff!important; font-size: 14px !important; font-family: sans-serif; font-weight: normal; }
    .MBG_SocialBar .social_menu > ul { margin: 0; padding: 0; list-style: none; }
    .MBG_SocialBar .social_menu .share { background: #111; color: #8ff; font-size: 12px; height: 50px !important; max-width:150px; margin-bottom:1px; border-radius:10px; }
    .MBG_SocialBar .social_menu .share .count.h4 { background:#111; font-size: 18px; font-family: "Oswald",sans-serif; color: #8ff; height: 25px !important; border-radius:10px; line-height: 1.5em; font-weight: normal; }
    .MBG_SocialBar .social_menu .share .h6 { font-family: sans-serif;}
    .MBG_SocialBar .social_menu > ul > li { margin: 0px 0px 0px 0px; position: relative; text-align: center; list-style: none; list-style-type: none; padding: 0px; border-left: 0 solid rgba( 0,0,0,.4); height: 50px; width:150px; overflow: hidden; display: inline-block; box-sizing: border-box; background: none; box-sizing: content-box; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
    .MBG_SocialBar .social_menu > ul > li a { display: inline-block; width: 100%; height: 100%; box-sizing: border-box; padding: 0px px 0px 0px; cursor: pointer; text-decoration: none; }
    .MBG_SocialBar .social_menu > ul > li:hover { border-left: 5px solid rgba( 0,0,0,.3); width: 140px; }
    .MBG_SocialBar .social_menu > ul > li i { color: #fff !important; font-family: FontAwesome; font-size: 20px; font-style: normal; font-weight: normal; line-height: 1em; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
    .MBG_SocialBar .social_menu > ul > li:hover i { opacity: 0.9; }
    @media only screen and (min-width:768px) and (max-width:979px) {
     .MBG_SocialBar { width:227.5px; }
    .MBG_SocialBar .social_menu .share{max-width:90px;}
    .MBG_SocialBar .social_menu > ul > li {max-width:100%; width:110px;}
      .MBG_SocialBar .social_menu > ul > li:hover { border-left: 5px solid rgba( 0,0,0,.3); width: 100px; }
    .MBG_SocialBar label {width: 95px; background: #ff0000; color: #FFF; font-size: 22px; padding: 15px 5px 5px 5px; height:35px; margin-left:52%; z-index:999999;}
    }
    @media only screen and (min-width:480px) and (max-width:767px) {
     .MBG_SocialBar { width:253px; }
    .MBG_SocialBar .social_menu .share{max-width:60px;}
    .MBG_SocialBar .social_menu > ul > li {max-width:100%; width:60px;}
      .MBG_SocialBar .social_menu > ul > li:hover { border-left: 5px solid rgba( 0,0,0,.3); width: 55px; }
    .MBG_SocialBar label {width: 48px; background: #ff0000; color: #FFF; font-size: 22px; padding: 15px 5px 5px 5px; height:34px; margin-left:77%; z-index:999999; margin-top:58px;}
    input.ShowHide_Button:checked + label { margin-top:75px; margin-left:-10px;}
    }
    @media only screen and (min-width:320px) and (max-width:479px){
    .MBG_SocialBar { bottom: % !important; width:110px; }
    .MBG_SocialBar .social_menu .share{max-width:51px;}
    .MBG_SocialBar .social_menu > ul > li {max-width:100%; width:52px;}
      .MBG_SocialBar .social_menu > ul > li:hover { border-left: 5px solid rgba( 0,0,0,.3); width: 45px; }
    .MBG_SocialBar label {width: 40px; background: #ff0000; color: #FFF; font-size: 20px; padding: 15px 5px 5px 5px; height:35px; margin-left:54%; z-index:999999; margin-top:170.5px;}
    input.ShowHide_Button:checked + label { margin-top:75px; margin-left:-12px;}
    }
    </style>
    </b:if>

    •  Now, You need to add HTML Part and JavaScript API. Find out this code line <div class='post-footer-line post-footer-line-3'> and just below of this line paste below HTML Part given below as it is.
    Note:  You will find the above code lines two times in your template, but you have to paste the below code just after the second appearance of this code line.

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <div class='MBG_SocialBar'>
      <input class='ShowHide_Button' id='roTater' type='checkbox'/>
      <label for='roTater'><i class='fa fa-arrow-left'/></label>
      <div class='ShowHideMe'>
      <div class='social_menu'>
    <ul>
    <li>
    <div class='share'>
        <div class='share-btn' data-service='total'>
          <div class='count h4'></div>
            <div class='h6'>SHARE</div>
      </div></div></li>
    <li class='button_facebook'>
    <a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot;   + data:post.url + &quot;   &amp;   t=&quot;   + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-facebook'/>
    <div class='share-btn' data-service='facebook'>
            <div class='count'/></div></strong>
    </a>
    </li>
    <li class='button_twitter'>
    <a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @MYBLOGGERGUIDES - &quot;' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'><strong><i class='fa fa-twitter'/>
    <div class='share-btn' data-service='twitter'>
            <div class='count'/></div></strong>
    </a>
    </li>
    <li class='button_googleplus'>
    <a expr:href='&quot;   https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   return false;   ' rel='nofollow'><strong><i class='fa fa-google-plus'/>
    <div class='share-btn' data-service='google'>
            <div class='count'/></div></strong>
    </a>
    </li>
    <li class='button_pinterest'>
    <a data-pin-config='beside' expr:href='&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-pinterest'/>
    <div class='share-btn' data-service='pinterest'>
            <div class='count'/></div></strong>
    </a>
    </li>
    <li class='button_stumbleupon'>
    <a expr:href='&quot;   http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;   &amp;   title=&quot;   + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-stumbleupon-circle'/>
    <div class='share-btn' data-service='stumbleupon'>
            <div class='count'/></div></strong>
    </a>
    </li>
    <li class='button_linkedin'>
    <a expr:href='&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-linkedin'/>
    <div class='share-btn' data-service='linkedin'>
            <div class='count'/></div></strong>
    </a>
    </li>
    </ul>
    </div>
    </div>
    </div>
    <script type='text/javascript'>//<![CDATA[
    $(document).ready(function () {
        // Get current URL from canonical tag
        var shareUrl = $("link[rel=canonical]").attr("href");

        // Ajax request to read share counts. Notice "&callback=?" is appended to the URL to define it as JSONP.
        $.getJSON('https://count.donreach.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) {
            shares = data.shares;
            shares.total = data.total;
            $(".count").each(function (index, el) {
                service = $(el).parents(".share-btn").attr("data-service");
                count = shares[service];

                // Divide large numbers eg. 5500 becomes 5.5k
                if (count > 1000) {
                    count = (count / 1000).toFixed(1);
                    if (count > 1000) count = (count / 1000).toFixed(1) + "M";
                    else count = count + "k";
                }
                $(el).html(count);
            });
        });
    });
    //]]></script>
    </b:if>
    </b:if>

    Required Change:

    1. One thing you need to change in above HTML code is our twitter username @MYBLOGGERGUIDESwith your twitter username
    2. If you want to remove a button then just remove<li> </li> section of that button.
    • Now save your template. Open any post of your Blog to see it live.

     Conclusion:

    So above guide is about How To Add WordPress Like Floating Social Sharing Widget to Blogger? Hope you like it. The only one thing we want from you is, Please Do share it on social networking sites. If you found any bug after following all above steps then drop a comment below or contact me.

    Any improvement suggestion? Your opinion are always welcome. Stay tuned & Blessed! Thank You!
    Read More