floating share button code

Contoh Coding Floating Share Button

Tombol-tombol yang ada di floating share button digunakan untuk mempermudah sharing posting ke beberapa media sosial, sehingga akan meningkatkan traffic blog kita.

Dalam posting ini akan diberikan contoh coding untuk membuat floating share button, baik untuk 1 tombol saja, ataupun beberapa tombol sharing, posting ini dilengkapi dengan video tutorial cara memasang code ke dalam blogger.

Coding untuk tombol Like Facebook

	<style type="text/css">
	#tombol-medsos {
	margin-left:-880px;
	background-color:#BDF7BA;
	position:fixed;
	bottom:35%;
	float:left;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	padding:0 0 2px 0;
	z-index:10;
	}
	#tombol-medsos .tombol-share {
	float:left;
	clear:both;
	margin:5px 5px 0 2px;
	}
	</style>
	<div id='tombol-medsos' title="Get this from saifiahmada.com">
	<div class='tombol-share' id='like' style='margin-left:7px;'>
	<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";
	fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>
	<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
	</div>
	</div>

view raw floating_share_button.html hosted with ❤ by GitHub

Hasilnya :

Tombol Twitter dan Google Plus

	<style type="text/css">
	#tombol-medsos {
	margin-left:-880px;
	background-color:#BDF7BA;
	position:fixed;
	bottom:35%;
	float:left;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	padding:0 0 2px 0;
	z-index:10;
	}
	#tombol-medsos .tombol-share {
	float:left;
	clear:both;
	margin:5px 5px 0 2px;
	}
	</style>
	<div id='tombol-medsos' title="Get this from saifiahmada.com">
	<div class='sbutton' style="margin-left: 2px;" >
	<a class='btn btn-success btn-sm' data-count='vertical' data-via='SaifiAhmada' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'><i class="fa fa-twitter" aria-hidden="true" /> Twitter
	</i></a>
	<script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script>
	<div class='tombol-share' style="margin-left: 3px;" id='su'></div>
	<div class='tombol-share' style='margin-left:3px;' id='gplusone'>
	<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
	<g:plusone size="tall"></g:plusone>
	</div>
	<div style="clear: both;font-size: 9px;text-align:center;">
	<a style="color: #ffffff;" href="http://www.saifiahmada.com/">Get widget</a>
	</div>
	</div>
	</div>

view raw floating_share_button2.html hosted with ❤ by GitHub

Akan menghasilkan tombol share seperti ini :

Coding Gabungan

	<style type="text/css">
	#tombol-medsos {
	margin-left:-880px;
	background-color:#BDF7BA;
	position:fixed;
	bottom:35%;
	float:left;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	padding:0 0 2px 0;
	z-index:10;
	}
	#tombol-medsos .tombol-share {
	float:left;
	clear:both;
	margin:5px 5px 0 2px;
	}
	</style>
	<div id='tombol-medsos' title="Get this from saifiahmada.com">
	<div class='tombol-share' id='like' style='margin-left:7px;'>
	<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";
	fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>
	<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
	</div>
	<div class='sbutton' style="margin-left: 2px;" >
	<a class='btn btn-success btn-sm' data-count='vertical' data-via='SaifiAhmada' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'><i class="fa fa-twitter" aria-hidden="true" /> Twitter
	</i></a>
	<script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script>
	<div class='tombol-share' style="margin-left: 3px;" id='su'></div>
	<div class='tombol-share' style='margin-left:3px;' id='gplusone'>
	<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
	<g:plusone size="tall"></g:plusone>
	</div>
	<div style="clear: both;font-size: 9px;text-align:center;">
	<a style="color: #ffffff;" href="http://www.saifiahmada.com/">Get widget</a>
	</div>
	</div>
	</div>

view raw floating_share_button_all.html hosted with ❤ by GitHub

Hasilnya

Cara Memasang Coding

1. Login ke dalam account blogger

2. Pilih blog (jika anda mempunyai lebih dari satu blog dalam account gmail anda)

3. Pilih Menu Layout

4. Tambahkan widget HTML/JavaScript

5. Paste coding ke dalam window ini :

6. Simpan perubahan dengan menekan tombol Save.

Video [Update]

Untuk lebih mudah melakukan praktek silakan tonton video di bawah ini :

On Youtube

Demikian, contoh coding membuat floating share button di blogger, semoga bermanfaat.