...

View Full Version : Align share buttons horizontally not vertically



sun83kim
07-27-2012, 02:41 AM
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

http://img687.imageshack.us/img687/1017/34749183.jpg

However, I would like to align it horizontally like below

http://img703.imageshack.us/img703/8584/71236907.jpg

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


<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

tempz
07-27-2012, 03:23 AM
Try this.



<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>

sun83kim
07-27-2012, 03:29 AM
Hi Tempz,

The above code does this

http://img803.imageshack.us/img803/656/22525814.jpg

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

Any other ideas?

Thanks in advance

Lex

sun83kim
07-27-2012, 03:31 AM
Actually it didnt flip it upside down but still vertical.

Tried your code three times just to make sure.

Lex

tempz
07-27-2012, 03:43 AM
Can I have your website link?

sun83kim
07-27-2012, 04:07 AM
Yes you may.

http://lex83kim.blogspot.com/

tempz
07-27-2012, 04:27 AM
It just won't move, to the left. :/

sun83kim
07-27-2012, 04:45 AM
I thought so :)

Thanks for trying!

Lex

tempz
07-27-2012, 05:25 AM
I think I cracked it;

Replace your Share code with this.



<!-- 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 :)

sun83kim
07-27-2012, 11:55 AM
Hi Tempz

Thank you for your undying assistance.

I tried your new code and it looks like this

http://img215.imageshack.us/img215/6069/13906539.jpg

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

tempz
07-27-2012, 05:22 PM
Hi Tempz

Thank you for your undying assistance.

I tried your new code and it looks like this

http://img215.imageshack.us/img215/6069/13906539.jpg

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum