Gudang Ilmu: Cara Membuat Sendiri Share Button Melayang Dengan CSS

Tuesday, 1 August 2023

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.

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:

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

membuat sendiri share button melayang css
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.

  • code
  • source
  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4.     <title>Download Button Share Melayang | CSS Tutorial</title>

  5.     <style type="text/css" media="screen">

  6.         .float-button-wrapper {position: fixed;    left: 25px;    top: 160px;}

  7.         .float-button-wrapper p {left: 15px;    font-size: 11px; margin-bottom: 3px;}

  8.         .float-button-page img {background: none; border: none; padding: 0; margin: 0;}

  9.         .float-button-page a {float: left; clear: left; margin-bottom: 1px;}

  10.         .float-button-page a:hover img {background-color: #f1f1f1; filter: alpha(opacity=50); -moz-opacity: 0.5;    -khtml-opacity: 0.5; opacity: 0.5;}

  11.         .float-button-page {position: absolute;    background: none;}

  12.     </style>

  13. </head>

  14. <body>

  15. <h1>Download Button Share Melayang | CSS Tutorial</h1> By <a href="http://www.rajaputramedia.com" style="text-decoration:none">Jasa Pembuatan Website</a>

  16. <hr>

  17. <div style="overflow:auto; width:100%; height:968px;">

  18.     <div class="float-button-wrapper">

  19.         <div class="float-button-page">

  20.             <a href=""><img src='images/facebook-icon.png'></a>

  21.             <a href=""><img src='images/twitter-icon.png'></a>

  22.             <a href=""><img src='images/blogger-icon.png'></a>

  23.             <a href=""><img src='images/linkedin-icon.png'></a>

  24.             <a href=""><img src='images/gplus-icon.png'></a>

  25.         </div>

  26.     </div>

  27. </div>

  28. </body>

  29. </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:



By -
Label:

No comments:

Post a Comment

terimakasih telah mengunjungi blog saya.

Subscribe to: Post Comments (Atom)