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
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
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 :
- Pengertian CSS dan apa itu CSS
- Belajar Pemrograman HTML Tingkat Lanjutan
- Belajar Membuat Website Sendiri di Localhost
- Cara Membuat Desain Web Dua Kolom
- Kumpulan Kode Warna HTML Lengkap
Cara Membuat Sendiri Share Button Melayang Dengan CSS
Tags: share button melayang css, cara membuat share button, share button css, share button melayang, membuat sendiri share button melayang