- Log in to your Blogger account and go to Template > Edit HTML
- Search for <html , leave a space and add xmlns:fb=”http://ogp.me/ns/fb#” just after it. The resulting code should lok like this:
<html xmlns:fb=”http://ogp.me/ns/fb#”
If this is already there, you don’t need to do it again.
- Search for
<data:post.body/>. If you have more than one of it in your template, search for<div class='post-footer-line post-footer-line-1'/> - And just below that paste the following code:
<b:if cond=’data:blog.pageType == "item"’><!–Start Floating Share Buttons with Pinterest–><style type=’text/css’>#dc-float {position:fixed; bottom:15%; right:10px; float:left;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;border:1px solid #BBBBBB;background-color:#FFFFFF;-webkit-box-shadow: #B3B3B3 5px 5px 5px;-moz-box-shadow: #B3B3B3 5px 5px 5px;box-shadow: #B3B3B3 5px 5px 5px;padding:0 0 2px 0;z-index:10;}#dc-float .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}.fb_share_count_top {width:48px !important;}.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}</style><div id=’dc-float’ title=’Share with your friends’><div class=’sbutton’ id=’rt’><a class=’twitter-share-button’ data-count=’vertical’ href=’http://twitter.com/share’>Tweet</a><script src=’http://platform.twitter.com/widgets.js’ type=’text/javascript’/></div><div class=’sbutton’ id=’su’><script src=’http://www.stumbleupon.com/hostedbadge.php?s=5′/></div><div class=’sbutton’ id=’digg’ style=’margin-left:3px;width:48px’><div id="fb-root"></div><script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=167544263382192";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class=’fb-like’ data-layout=’box_count’ data-send=’false’ data-show-faces=’false’ data-width=’48′/></div><div class=’sbutton’ id=’gplusone’><script src=’https://apis.google.com/js/plusone.js’ type=’text/javascript’/><g:plusone size=’tall’/></div><div class=’sbutton’ id=’gb’><a class=’pin-it-button’ count-layout=’vertical’ expr:href=’"http://pinterest.com/pin/create/button/?url=" + data:post.url’>Pin It</a><a href=’javascript:void(run_pinmarklet())’ style=’margin-left:-46px; width:43px; height:20px; display:inline-block;’/><script src=’http://assets.pinterest.com/js/pinit.js’ type=’text/javascript’/><script type=’text/javascript’>function run_pinmarklet() {var e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);document.body.appendChild(e);}</script></div><div class=’fb_button_share’><div id="fb-root"></div><script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=112973755438933"; // appId must be validfjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><fb:share-button type="box_count"></fb:share-button></div><br/><!–End Floating Share Buttons with Pinterest–></b:if>
- Hit the Save Template button and view your blog.
To make the share butons float to the left instead of right, search for this code:
dc-float {position:fixed; bottom:15%; right:10px; float:left;
Replace with this:
dc-float {position:fixed; bottom:15%; left:10px; float:left;
No comments:
Post a Comment