Cara Membuat Sendiri Share Button Melayang Dengan CSS

Membuat sendiri share button melayang dengan CSS untuk website atau blog dibuat menggunakan script HTML dan CSS tanpa menggunakan JavaScript, tutorial ini sangat mudah diikuti oleh para pemula webmaster atau blogger apalagi oleh yang sudah senior.

Share button melayang dipinggir / disamping bagian website atau blog (kanan mapupun kiri) akan membuat tampilan web / blog menjadi lebih dinamis, penuh dengan style, keren, tidak menghabiskan space layout, dan terkesan profesional.

Sebetulnya ada banyak cara membuat share button melayang ini secara mudah dan instan yaitu menggunakan widget dari provider / penyedia widget yang dapat diperoleh secara gratis seperti AddThis dan ShareThis. Namun kami tidak akan membahas bagaimana cara membuat share button melayang menggunakan widget dari provider widget tersebut, untuk itu kami mengajak Anda untuk belajar mandiri dalam mengolah script bagaimana membuat sendiri share button melayang menggunakan CSS.

Berikut langkah - langkah atau cara membuat sendiri share button melayang dengan CSS, lengkap dengan kode / script nya:

Cara Membuat Sendiri Share Button Melayang Dengan CSS

Download eBook Membuat Share Button Melayang CSS

Share Button CSS Tutorial

1. Siapkan icon share button social network, kemudiann simpan dalam folder images pada directory Anda.

Membuat Sendiri Share Button Melayang Dengan CSS

2. Buat script / kode HTML dan CSS berikut menggunakan text editor kemudian simpan satu level dengan folder images.

<!DOCTYPE html>
<html>
<head>
	<title>Download Button Share Melayang | CSS Tutorial</title>
	<style type="text/css" media="screen">
		.float-button-wrapper {position: fixed;	left: 25px;	top: 160px;}
		.float-button-wrapper p {left: 15px;	font-size: 11px; margin-bottom: 3px;}
		.float-button-page img {background: none; border: none; padding: 0; margin: 0;}
		.float-button-page a {float: left; clear: left; margin-bottom: 1px;}
		.float-button-page a:hover img {background-color: #f1f1f1; filter: alpha(opacity=50); -moz-opacity: 0.5;	-khtml-opacity: 0.5; opacity: 0.5;}
		.float-button-page {position: absolute;	background: none;}
	</style>
</head>
<body>
<h1>Download Button Share Melayang | CSS Tutorial</h1> By <a href="http://www.rajaputramedia.com" style="text-decoration:none">Jasa Pembuatan Website</a>
<hr>
<div style="overflow:auto; width:100%; height:968px;">
	<div class="float-button-wrapper">
		<div class="float-button-page">
			<a href=""><img src='images/facebook-icon.png'></a>
			<a href=""><img src='images/twitter-icon.png'></a>
			<a href=""><img src='images/blogger-icon.png'></a>
			<a href=""><img src='images/linkedin-icon.png'></a>
			<a href=""><img src='images/gplus-icon.png'></a>
		</div>
	</div>
</div>
</body>
</html>

Jika Anda mengikuti tutorial membuat sendiri share button melayang ini dan langsung mempraktekannya maka jika script dijalankan pada web browser hasilnya akan tampil seperti gambar dibawah ini:

Membuat Sendiri Share Button Melayang Dengan CSS

Download Tutorial Membuat Sendiri Share Button Melayang

Download Script Share Button Melayang CSS

Demikian tutorial tentang bagaimana cara Membuat Sendiri Share Button Melayang Dengan CSS, lengkap dengan script HTML nya. Untuk mendapatkan script / source code nya Anda dapat langsung mendownload melalui link di atas, jika link download tidak aktif atau error mohon hubungi kami melalui SMS atau email atau melalui form komentar dan obrolan. Semoga dapat membantu.

Baca juga :