Menambahkan Icon Sosial Media di Sidebar

Menambahkan Icon Sosial Media di Sidebar

Menambahkan Icon Sosial Media di Sidebar
Menambahkan Icon Sosial Media di Sidebar

Cara Membuat atau Menambahkan, Memasang Icon Sosial Media di Sidebar di Website, Menggunakan HTML, CSS, nah untuk membuat tombol atau button icon sosial media pada website / blog sangatlah mudah. widget Sidebar biasa digunakan oleh banyak situs web. Pada dasarnya, ini adalah jenis plugin WordPress yang membuat jenis widget share sosial yang sama. Kalian akan melihat sebagian besar tombol berbagi semacam itu di banyak situs web, karena desain ini adalah bentuk default dari banyak plugin.

Hari ini kalian akan belajar membuat Widget share HTML dengan posisi di sidebar . Pada dasarnya, sidebar atau elemen tempat samping pada posisi kiri-tengah dan terdapat beberapa ikon media sosial seperti facebook, twitter, dribble, GitHub, dll. Semua ikon berwarna abu-abu secara default tetapi saat di-hover menjadi warna asli dan akan muncul tooltip untuk menginformasikan jaringan mana itu.

Jadi, Hari ini admin akan membagikan CSS Fixed Social Media Sidebar With Icons . Desain ini sepenuhnya didasarkan pada HTML dan CSS , Kalian dapat menyebutnya sebagai CSS murni program. Ini hanyalah konsep desain Kalian meletakkan format URL di dalam hyperlink untuk berbagi konten secara langsung.

Nah jika kalian tertarik dengan programnya bisa melihat preview nya dibawah ini tentu dengan source code yang admin sediakan.


Cara Menambahkan atau Membuat Icon Sosial Media di Sidebar


mari kita bahas tentang program ini. Pertama admin telah membuat daftar menggunakan tag HTML <ul> & <li> dan meletakkan hyperlink dan span pada setiap bagian <li> Di tag hyperlink admin telah menempatkan nama kelas untuk ikon dan di dalam rentang ditempatkan nama yang berfungsi sebagai tooltip . Untuk menempatkan ikon admin menggunakan keluarga font bernama entypo dengan welovefonts API.

Sekarang menggunakan CSS untuk menempatkan elemen di posisi tengah kiri , dan menggunakan CSS @import untuk mendapatkan font dan ikon google. Sekarang letakkan beberapa nilai seperti warna pada hover, show tooltip , dll. Untuk memperbaiki penempatan admin telah menggunakan posisi CSS:fixed;

Kalian akan paham setelah mendapatkan kode, admin tidak dapat menjelaskan secara tertulis. Untuk membuat widget ini kalian harus membuat hanya 2 file, satu untuk HTML dan satu untuk CSS. 
Ikuti langkah-langkah untuk membuat ini tanpa kesalahan.


Buat file HTML bernama index.html dan masukkan kode-kode ini di bawah ini.

<!DOCTYPE html>
<!--Code By RuangCoder ( https://www.ruangcoder.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Fixed Social Sidebar | RuangCoder.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<link rel="stylesheet" href="./style.css">

</head>
<body>

 <ul id="social-sidebar">
  <li>
    <a class="entypo-twitter"><span>Tweeter</span></a>
  </li>
  <li>
    <a class="entypo-facebook"><span>Facebook</span></a>
  </li>
  <li>
    <a class="entypo-gplus"><span>Google+</span></a>
  </li>
  <li>
    <a class="entypo-dribbble"><span>Dribbble</span></a>
  </li>
  <li>
    <a class="entypo-dropbox"><span>Dropbox</span></a>
  </li>
  <li>
    <a class="entypo-github"><span>Github</span></a>
  </li>
  <li>
    <a class="entypo-evernote"><span>Evernote</span></a>
  </li>
</ul>

</body>
</html>

Sekarang buat file CSS bernama style.css dan masukkan kode-kode ini di sini.

/* Code By RuangCoder ( https://www.ruangcoder.com ) */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
@import url(https://weloveiconfonts.com/api/?family=entypo);

[class^="entypo-"]:before {
    font-family: 'entypo', sans-serif;
}
body {
  background: #e6e6e6;
}
#social-sidebar {
    left: 0;
    position: fixed;
    top: 30%;
}
#social-sidebar li:first-child a { border-top-right-radius: 5px; }
#social-sidebar li:last-child a { border-bottom-right-radius: 5px; }

#social-sidebar a {
    background: rgba(0, 0, 0, .7);
    color: #fff;
    text-decoration: none;
    display: block;
    height: 50px;
    width: 50px;  
    font-size: 24px;
    line-height: 50px;
    position: relative;
    text-align: center;
    cursor: pointer;
}
#social-sidebar a:hover span {
    left: 120%;
    opacity: 1;
}
#social-sidebar a span {
  font: 12px "Open Sans", sans-serif;
  text-transform: uppercase;
    border-radius: 3px;
    line-height: 24px;
    left: -100%;
    margin-top: -16px;
    opacity: 0;
    padding: 4px 8px;
    position: absolute;
    transition: opacity .3s, left .4s;
    top: 50%;
    z-index: -1;
}

#social-sidebar a span:before {
    content: "";
    display: block;
    height: 8px;
  width: 8px;
    left: -4px;
    margin-top: -4px;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
}

#social-sidebar a[class*="twitter"]:hover,
#social-sidebar a[class*="twitter"] span,
#social-sidebar a[class*="twitter"] span:before {background: #00aced;}

#social-sidebar a[class*="facebook"]:hover,
#social-sidebar a[class*="facebook"] span,
#social-sidebar a[class*="facebook"] span:before {background: #3B5998;}

#social-sidebar a[class*="gplus"]:hover,
#social-sidebar a[class*="gplus"] span,
#social-sidebar a[class*="gplus"] span:before {background: #E34429;}

#social-sidebar a[class*="dribbble"]:hover,
#social-sidebar a[class*="dribbble"] span,
#social-sidebar a[class*="dribbble"] span:before {background: #ea4c89;}

#social-sidebar a[class*="dropbox"]:hover,
#social-sidebar a[class*="dropbox"] span,
#social-sidebar a[class*="dropbox"] span:before {background: #8DC5F2;}

#social-sidebar a[class*="github"]:hover,
#social-sidebar a[class*="github"] span,
#social-sidebar a[class*="github"] span:before {background: #9C7A5B;}

#social-sidebar a[class*="evernote"]:hover,
#social-sidebar a[class*="evernote"] span,
#social-sidebar a[class*="evernote"] span:before {background: #6BB130;}

Penutup

Nah sampai disini kalian telah berhasil Menambahkan Icon Sosial Media di Sidebar, mungkin artikel nya sampai disini saja, semoga bermanfaat buat kalian, dan terimakasih sudah berkunjung, jangan bosan - bosan untuk berkunjung.

Anda mungkin menyukai postingan ini