Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Align share buttons horizontally not vertically

    Hello everyone,

    I have a basic blogger so I dont have a CSS style sheet or add one.

    Actually, even if I could I just want to leave things as it is. Its just a basic website.

    At the moment I have 2 social share buttons that is vertical in a column as pictured below



    However, I would like to align it horizontally like below



    With a blogger you can only add html/javascript codes and at the moment my codes are like this:

    Code:
    <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=xxxxxxxxxxxxx";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    
    <div class="fb-like" data-href="http://lex83kim.blogspot.com/" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div><br/><br/>
    
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
    // parsetags: 'explicit';
    </script>
    <div id="plusone-div"></div>
    <script type="text/javascript">gapi.plusone.render ('plusone-div', {"size": "tall", "count": "true"});</script>
    Is there anything I could edit or add to the above?

    Thank you in advance

    Lex
    Last edited by sun83kim; 07-27-2012 at 02:44 AM.

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Try this.

    Code:
    <div style="float:left; display:inline;">
    <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=xxxxxxxxxxxxx";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    
    <div class="fb-like" data-href="http://lex83kim.blogspot.com/" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div><br/><br/>
    
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
    // parsetags: 'explicit';
    </script>
    <div id="plusone-div"></div>
    <script type="text/javascript">gapi.plusone.render ('plusone-div', {"size": "tall", "count": "true"});</script>
    
    </div>
    Last edited by tempz; 07-27-2012 at 03:27 AM.

  • #3
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Tempz,

    The above code does this



    It has flipped the facebook and google+ around but still vertical

    Any other ideas?

    Thanks in advance

    Lex

  • #4
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actually it didnt flip it upside down but still vertical.

    Tried your code three times just to make sure.

    Lex

  • #5
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Can I have your website link?

  • #6
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #7
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    It just won't move, to the left. :/

  • #8
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I thought so

    Thanks for trying!

    Lex

  • #9
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    I think I cracked it;

    Replace your Share code with this.

    Code:
    <!-- Start Social -->
    	<div class="widget-social" id="HTML1" style="width: 293px; height: 132px">
    <h2 class="title">Share</h2>
    <div class="widget-content">
    <div id="fb-root" class=" fb_reset"><div style="position: absolute; top: -10000px; height: 0px; width: 0px; "><div>
    	<iframe id="fb_xdm_frame_http" name="fb_xdm_frame_http" src="./Forex Trading - Live trades from a professional trader_files/xd_arbiter.htm"></iframe>
    	<iframe id="fb_xdm_frame_https" name="fb_xdm_frame_https" src="./Forex Trading - Live trades from a professional trader_files/xd_arbiter(1).htm"></iframe></div>
    <div>
    	<iframe id="f124281cb4" name="f110caaa28" scrolling="no" style="border: 1px; overflow: hidden; height: 240px; width: 575px; " class="FB_UI_Hidden" src="./Forex Trading - Live trades from a professional trader_files/oauth.htm"></iframe></div><div></div></div></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=186172244837545";
    		  fjs.parentNode.insertBefore(js, fjs);
    		}(document, 'script', 'facebook-jssdk'));
    		</script>
    <div data-href="http://lex83kim.blogspot.com/" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false" style="left: 0px; top: 0px; height: 39px; width: 61px display:inline; float:left;">
    <span style="height: 62px; width: 143px; ">
    	<iframe id="f1235da084" name="fb458b1f" scrolling="no" style="border: none; display:inline; overflow: hidden; height: 62px; width: 62px; " title="Like this content on Facebook." class="fb_ltr " src="./Forex Trading - Live trades from a professional trader_files/like.htm"></iframe>
    	<iframe allowtransparency="true" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 50px; margin: 0px; border-style: none; height: 60px; left: 0px; visibility: visible; " tabindex="0" vspace="0" width="100%" id="I1" name="I1" src="./Forex Trading - Live trades from a professional trader_files/fastbutton.htm" title="+1"></iframe></span></div><br><br>
    		<script type="text/javascript" src="./Forex Trading - Live trades from a professional trader_files/plusone.js" gapi_processed="true">
    // parsetags: 'explicit';
    </script>
    </div>
    	<script type="text/javascript">gapi.plusone.render ('plusone-div', {"size": "tall", "count": "true"});</script>
    </div>
    <!-- end Social -->
    Note: You should spend around 30 minutes cleaning up your code, it's very messy, plus put your css scripting in a external file and link them

  • #10
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Tempz

    Thank you for your undying assistance.

    I tried your new code and it looks like this



    I can see that you have put good effort into the above code so even though it didnt work out, thank you!

    Perhaps I will leave it vertically as it is.

    Regards,

    Lex

  • #11
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Quote Originally Posted by sun83kim View Post
    Hi Tempz

    Thank you for your undying assistance.

    I tried your new code and it looks like this



    I can see that you have put good effort into the above code so even though it didnt work out, thank you!

    Perhaps I will leave it vertically as it is.

    Regards,

    Lex
    Okay-dokay. Looking at your code I think it was because you have several other styles adding to it, that's why it won't move :s.

    All the best

    - tempz.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •