Home » » Cara Membuat Tombol Berbagi Bar

Cara Membuat Tombol Berbagi Bar

Written By RACHMAT SR on Senin, 05 Maret 2012 | 16.17

Seperti yang Anda lihat di pojok kiri bawah halaman ini, Berbagi Tombol Bar embeds tombol saham paling populer dari Internet. Pembaca Anda dapat mengecilkan atau memperluas Bar dengan klik pada tombol paling kanan.

Jika Anda tertarik untuk menambahkan Bar Berbagi Tombol ke situs web Anda, sangat sederhana. Hanya menyalin dua potong kode berikut ke tempat yang sesuai. Sebelum melakukannya, Anda tentu harus membuat cadangan pertama.

Langkah 1: Salin potongan kode ini persis sebelum tag </ head>

<!-- Share Buttons Bar (C) TopTip.ca - header - BEGIN -->
<style type='text/css'>
.shr12_buttons_bar {position:fixed; bottom:0px; left:0px; z-index:100; background-color:white; text-align:left; border:1px solid gray}
.shr12_button {display:inline-block; vertical-align:middle; height:20px; padding:2px 10px;}
.shr12_button_compact {display:inline-block; vertical-align:middle; height:20px; padding:2px;}
.shr12_csrptr {cursor:pointer;}
</style>

<script type='text/javascript'>
//<![CDATA[
function shr12_add_script(d, id, src)
{
if(!d.getElementById(id)){
var fjs=d.getElementsByTagName('script')[0];
var js=d.createElement('script'); js.id=id; js.src=src;
js.type = 'text/javascript'; js.async = false; /* "true" does not work well */
fjs.parentNode.insertBefore(js,fjs);
}
}

function shr12_buttons_bar_expand()
{
document.getElementById('shr12_buttons').style.display='inline';
document.getElementById('shr12_buttons_min').style.display='none';
}

function shr12_buttons_bar_shrink()
{
document.getElementById('shr12_buttons').style.display='none';
document.getElementById('shr12_buttons_min').style.display='inline';
}
//]]>
</script>
<!-- Share Buttons Bar (C) TopTip.ca - header - END --> 


Langkah 2: Copy ini bagian dari kode yang tepat sebelum tag </ body>

<!-- Share Buttons Bar (C) TopTip.ca - body - BEGIN -->
<div class='shr12_buttons_bar' id='shr12_buttons_min' style='display:none;'>
<span class='shr12_button' id='shr12_gplusone_min'>
<g:plusone size='medium' annotation='none'/>
</span>
<b class='shr12_button shr12_csrptr' onclick='shr12_buttons_bar_expand()'> &gt; </b>
</div>

<div class='shr12_buttons_bar' id='shr12_buttons'>
<span class='shr12_button_compact' id='shr12_gplusone'>
<g:plusone size='medium'/>
<script type="text/javascript"> //<![CDATA[
shr12_add_script(document, 'gplusone-button-script', 'https://apis.google.com/js/plusone.js');
//]]> </script>
</span>
<span class='shr12_button' id='shr12_facebook'>
<span id="fb-root"></span>
<script type="text/javascript"> //<![CDATA[
shr12_add_script(document, 'facebook-jssdk', '//connect.facebook.net/en_US/all.js#xfbml=1');
//]]> </script>
<div class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false'> </div>
</span>
<span class='shr12_button_compact' id='shr12_twitter'>
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a>
<script type="text/javascript"> //<![CDATA[
shr12_add_script(document, 'twitter-wjs', '//platform.twitter.com/widgets.js');
//]]> </script>
</span>
<span class='shr12_button' id='shr12_stumbleupon'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=1'/>
</span>
<span class='shr12_button' id='shr12_digg'>
<script type="text/javascript"> //<![CDATA[
shr12_add_script(document, 'digg-button-script', 'http://widgets.digg.com/buttons.js');
//]]> </script>
<a class='DiggThisButton DiggCompact'/>
</span>
<span class='shr12_button' id='shr12_reddit'>
<script type="text/javascript" src="http://www.reddit.com/static/button/button1.js"></script>
</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a class='shr12_button' href='http://www.toptip.ca/2011/12/share-buttons-bar.html'>Get This</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<b class='shr12_button shr12_csrptr' onclick='shr12_buttons_bar_shrink()'> &lt; </b>
</div>

<script type="text/javascript"> //<![CDATA[
setTimeout(shr12_buttons_bar_shrink, 10000);
//]]> </script>
<!-- Share Buttons Bar (C) TopTip.ca - body - END -->
Hanya saja sederhana. Jika Anda suka, silahkan merekomendasikan ke teman-teman Anda atau di situs web Anda. Ini akan lebih dihargai jika Anda dapat memposting link kami di situs Anda untuk membiarkan pembaca Anda tahu asal dari widget ini adalah dari http://www.toptip.ca/2011/12/share-buttons-bar.html .
Share this article :

0 komentar:

Poskan Komentar

Thank for your visit, leave your suggestions and comments in the fields below ...

Silahkan meninggalkan komentar anda sehingga kita dapat berbagi pemikiran Anda dengan pengunjung lainnya.



 
Support : Al Islam | Paalem 3 | Mushola
Copyright © 2013. Panduan Blogger - All Rights Reserved
Template Created by Creating Website Modified by CaraGampang.Com
Proudly powered by Blogger