Social Share Button With Back To Top For Blogger - Social share button is a tool that can you use or other people who read your article to be distributed to other readers. Another objective because it felt the need to inform of the existence of the article he was reading. By doing so, the process of promotion and spread of writing will become easier by the existence of social share buttons. I 'll give you a tutorial to make Social Share and Back To Top Button. In this widget uses several network codes such popular social media sharing to (facebook, twitter, google +, other) and be equipped with Back To Top Button.
Back To Top button will allow the reader to go back to the top of the page, if it has much to scroll down. So by pressing this button, visitors do not need to press to scroll up. You will get two advantages, can be used as a share button and also be easier for visitors to scroll up your page. To see the display, please see the picture below.
To install the button is quite simple. First, the CSS code below - Control Panel > Templates > Edit HTML - in part ]]></b : skin> or </style> add the CSS code below before or above the tag.
Second, you need to do - Edit HTML - without leaving the part </body> add the following code above
Customization : Finally, the "#" instead enter your own social account address (social share URL) you can also change social media sharing too, Then save the template.
Back To Top button will allow the reader to go back to the top of the page, if it has much to scroll down. So by pressing this button, visitors do not need to press to scroll up. You will get two advantages, can be used as a share button and also be easier for visitors to scroll up your page. To see the display, please see the picture below.To install the button is quite simple. First, the CSS code below - Control Panel > Templates > Edit HTML - in part ]]></b : skin> or </style> add the CSS code below before or above the tag.
/* Social Back To Top*/
#social-top{position:fixed;bottom:0;right:0;z-index:100;width:25%;height:38px;clear:both;margin:0;overflow:hidden}#social-top a{float:right;margin:0;padding:0;width:38px;height:42px;font-size:22px;text-align:center;color:#fff;transition:all .3s ease-in}#social-top a.first{background-color:#607D8B;padding:7px 0}#social-top a.first:hover{background-color:#4b636f}#social-top a.gplus{background-color:#db4437}#social-top a.gplus:hover{background-color:#BF2424}#social-top a.fb{background-color:#3b5998}#social-top a.fb:hover{background-color:#2E4372}#social-top a.twit{background-color:#1da1f2}#social-top a.twit:hover{background-color:#1571A5}#social-top a.impoh{background-color:#f8b26b}#social-top a.impoh:hover{background-color:#e4a564}.bottom-wrapper{max-width:100%;;margin:0 auto}
Second, you need to do - Edit HTML - without leaving the part </body> add the following code above
</body>.
<div id='social-top' style='display:none'>
<div class="bottom-wrapper">
<a class="go-top first" href="#"><span class="fa fa-arrow-up"></span></a>
<a class="impoh" href="#" title="Hakkında"><span class="fa fa-paperclip" style="margin-top:8px"></span></a>
<a class="gplus" href="#" target="_blank" title="Takip Et Google+"><span class="fa fa-google-plus" style="margin-top:8px"></span></a>
<a class="twit" href="#" target="_blank" title="Takip Et"><span class="fa fa-twitter" style="margin-top:8px"></span></a>
<a class="fb" href="#" target="_blank" title="Takip Et Facebook"><span class="fa fa-facebook" style="margin-top:8px"></span></a>
</div>
</div>
<script type='text/javascript'>
$("#social-top").hide(),$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#social-top").slideDown(200):$("#social-top").slideUp(200)}),$(".go-top").click(function(){return $("html,body").animate({scrollTop:0},600),!1})});
</script>
Customization : Finally, the "#" instead enter your own social account address (social share URL) you can also change social media sharing too, Then save the template.
Advertisement
EmoticonEmoticon