How To Add Together Slide Out Google Friend's Connect Follow Push Clit Inwards Blogger
What is Slide out Follower Button?
If you're looking to growth your followers, too thence this slide out follow push volition render you lot a bully chance to convert your visitors into followers. This follower push sticks to the bottom right side of your screen, allowing your visitors to easily subscribe to your weblog for updates.
Since, because of the slide out characteristic this widget doesn't takes a lot of infinite on your screen. Therefore, it does non compromise on user friendly experience nor it interrupts a user land he is browsing or ready your content.
You tin banking concern check the demo of this widget here.
Add Slide out Follow push Widget inwards Blogger:
To add together a Google friend's connect follow push inwards blogger delight follow the below instructions correctly:
The really start matter you lot demand to produce is to add together the CSS codes. Go to Blogger >> Template >> Edit HTML >> Search for ]]></b:skin> tag too only to a higher house it glue the next code. You tin also customize the below codes to tally your fashion of template color scheme:
#arlinafollowSubscribe {
background-color: #464646;
width: 220px;
color: #fff;
position: fixed;
z-index: 999;
right: 10px;
bottom: 0
}
.arlinafollowButton {
background: #464646;
color: #fff;
font-size: 13px;
line-height: 28px;
padding: 0 10px;
text-decoration: none;
position: absolute;
top: -28px;
right: 0;
display: block;
border-radius: 2px 2px 0 0;
height: 28px;
font-weight: 700
}
.arlinafollowButton bridge {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgPqGbvRhwmCoX-s67X-6wXobLsU9EnAbl5yxUdSaiZOO1dZceDPM0RJKhaeUIaPXPwzYzX_kLyF_uYDGX2wsalrBLo1MBr1arMKGhWdpyBlcmHFud70rNzx9RoYZenc7yg_ard8UVnJpV/s1600/follow-blogger.png") no-repeat scroll 0 3px transparent;
padding-left: 15px
}
.arlinafollowButton:hover,
.arlinafollowButton:focus,
.followActive,
.followActive:hover {
color: #fff
}
.arlinafollowButton:hover span,
.followActive bridge {
background-position: 0 -37px!important
}
.followactive {
background-color: #333
}
.arlinafollowForm {
padding: 15px;
margin: auto;
text-align: center;
font-size: 12px
}
.arlinafollowForm p {
margin: 10px 0
}
.arlinaFollowFooter {
text-align: center;
font-size: 11px;
padding: 7px 0;
margin: 0 0 -15px;
border-top: 1px venture #3c3c3c
}
.arlinaFollowFooter a {
color: #aaa;
background: none;
text-decoration: none
}
.arlinaFollowFooter a:hover {
color: #fff;
background: none
}
Again inwards the template, search for </head> too only to a higher house it glue the next jQuery code:
<script type="text/javascript">
/*<![CDATA[*/
!function(e){e(document).ready(function(){e.extend(e.easing,{easeOutCubic:function(e,o,t,a,n){return a*((o=o/n-1)*o*o+1)+t}});var o=e("#arlinafollowSubscribe"),t="-"+o.outerHeight()+"px";o.hide().css({bottom:"-510px"}),setTimeout(function(){o.show().animate({bottom:t})},500),e(".arlinafollowButton").click(function(a){o.hasClass("followOpened")?(e(this).removeClass("followActive"),o.removeClass("followOpened").stop().animate({bottom:t},{duration:300,easing:"easeOutCubic"})):(e(this).addClass("followActive"),o.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})),a.preventDefault()})})}(jQuery);
/*]]>*/
</script>
Once everything is done, press Save Template push acquaint at the really live on past times of your screen.
Now to brand the widget appear on your blog, you lot receive got to also add together the HTML Codes of this widget. Go to Blogger >> Layout >> Add a Gadget >> Add HTML/JavaScript and glue the next code inwards the HTML box.
<div id="arlinafollowSubscribe" style="bottom: -971px;">
<div class="arlinafollowForm">
<a class="arlinafollowButton" href="#" title="How to add together Slide out Google Friend's Connect Follow push inwards Blogger"><b>+ Follow</b></a>
<br />
<a href="http://www.Blogger.com/follow-blog.g?blogID=7342017194742683056" title="How to add together Slide out Google Friend's Connect Follow push inwards Blogger" onclick="window.open(this.href, 'dmfollow', 'toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521');return false;" style="text-align:center;font-weight:bold;text-decoration:none;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7b3JoSE4V8WFc3VAMchc41GhGlNKkzaQawqN_GGn-Xz1rwuJdhQdx33p9wzWcEyfboBfBAdd1UvZe2VrV5YBVb3PSKCOOy11hHX_OWC8XREORVqSJ_T9lqQvNGxQzRgtaVD4H0P9c8xit/s1600/Follower.png" alt="how to add together Facebook follow push inwards Blogger How to add together Slide out Google Friend's Connect Follow push inwards Blogger" /></a>
<br />
<p>with Google Friend Connect</p>
</div>
</div>
After pasting the to a higher house code inwards the text box, you lot demand to supervene upon the blogID i.e. 7342017194742683056 amongst your blog's ID. You tin meet this tutorial on how to notice your Blog ID inwards Blogger. After replacing the weblog ID, salve the widget past times pressing Save widget button.
We hope this tutorial has helped you lot inwards learning how to add together slide out Google friend's connect follow push inwards blogger. If you lot similar this widget, experience gratis to part it on Facebook, Google+ or Twitter.
Baca Juga
Post a Comment
Post a Comment