Setelah memasang Widget Sosial Media Responsive pada situs blog, Tutorial kali ini adalah kita bisa memasang Sosial Media yang melayang dan menempel pada tampilan situs blog ketika layar di gulir ke bawah.
Cara berikut akan membuat pengunjung situs blog anda dapat dengan mudah mengikuti media sosial anda karena tombol widget ini akan selalu terlihat ketika orang-orang mengunjungi dan membaca artikel di situs blog Anda.
Tombol Media Sosial Melayang ini lengket dan menempel di layar saat pengunjung situs blog anda menggulirnya.
Cara Membuat Tombol Media Sosial Melayang Responsive
1. Login ke Akun Blog Anda
2. Klik Menu Template → Edit HTML
3. Tempelkan kode berikut di bawah tag <head>
4. Cari kode ]]></b:skin> atau </style>. Kemudian Copy kode CSS berikut ini, dan tempelkan diatas atau sebelum kode ]]></b:skin> atau </style>
3. Tempelkan kode berikut di bawah tag <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
4. Cari kode ]]></b:skin> atau </style>. Kemudian Copy kode CSS berikut ini, dan tempelkan diatas atau sebelum kode ]]></b:skin> atau </style>
/* Tombol Media Sosial Melayang Responsive */
.icon-bar {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
/* Style the icon bar links */
.icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
/* Style the social media icons with color, if you want */
.icon-bar a:hover {
background-color: #000;
}
.facebook {
background: #3B5998;
color: white;
}
.twitter {
background: #55ACEE;
color: white;
}
.google {
background: #dd4b39;
color: white;
}
.linkedin {
background: #007bb5;
color: white;
}
.youtube {
background: #bb0000;
color: white;
}
.icon-bar {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
/* Style the icon bar links */
.icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
/* Style the social media icons with color, if you want */
.icon-bar a:hover {
background-color: #000;
}
.facebook {
background: #3B5998;
color: white;
}
.twitter {
background: #55ACEE;
color: white;
}
.google {
background: #dd4b39;
color: white;
}
.linkedin {
background: #007bb5;
color: white;
}
.youtube {
background: #bb0000;
color: white;
}
5. Selanjutnya cari tag <body> dan pasang kode berikut ini di bawah tag <body>
<!-- The social media icon bar -->
<div class="icon-bar">
<a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
<a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
<a href="#" class="google"><i class="fa fa-google"></i></a>
<a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
<a href="#" class="youtube"><i class="fa fa-youtube"></i></a>
</div>
<div class="icon-bar">
<a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
<a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
<a href="#" class="google"><i class="fa fa-google"></i></a>
<a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
<a href="#" class="youtube"><i class="fa fa-youtube"></i></a>
</div>
8. Ganti tanda # dengan Link alamat media sosial anda.
9. Selanjutnya Simpan / Save dan lihat tombol media sosial anda melayang responsive pada blog.
Demikian Cara Membuat Tombol Media Sosial Melayang Responsive.
Mudah bukan?
Bila ada kendala dalam pemasangan. Jangan lupa tinggalkan komentar pada kolom di bawah ini yah
Demikian Cara Membuat Tombol Media Sosial Melayang Responsive.
Mudah bukan?
Bila ada kendala dalam pemasangan. Jangan lupa tinggalkan komentar pada kolom di bawah ini yah