Wednesday 25 July 2018
Setelah postingan sebelumnya yakni Cara Membuat Social Media Button untuk Blogger, pada kesempatan kali ini saya kan membagikan Tutorial Cara Membuat Sticky Social Media Bar. Kok judulnya hampir mirip sih, apa bedanya?
Sangat berbeda karena Sticky Social Bar ini akan mengikuti apabila kita Scroll kebawah atau keatas Blog, Sedangkan yang sebelumnya hanya berupa Button dan hanya berhenti tidak mengikuti layar Pengguna. Untuk lebih selengkapnya bisa dilihat di bagian kiri Blog saya dan pastikan untuk Follow semua akun media sosial saya ya...
Langsung saja kita mulai tutorialnya :
Langkah Pertama 1) :
-Tambahkan Link eksternal CSS berikut dan letakkan tepat dibawah tag ]]></b:skin>
<link
href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'
rel='stylesheet' type='text/css'/>
Fungsi Ekternal CSS adalah untuk library dari Social Media Button yang akan digunakan sehingga bisa muncul di blog kalian apabila digunakan.
Langkah Kedua 2) :
-Langkah selanjutnya tambah tag HTML dan letakkan di bawah tag <body>
<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="instagram"><i class="fa fa-instagram"></i></a>
<a href="#" class="youtube"><i class="fa fa-youtube"></i></a>
</div>
Catatan : untuk Jenis dan Jumlah Sosial Media yang akan ditampilkan bisa mengutak-atik pada syntax ini. <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="instagram"><i class="fa fa-instagram"></i></a>
<a href="#" class="youtube"><i class="fa fa-youtube"></i></a>
</div>
Langkah Ketiga 3) :
-Pada Langkah ini kita akan menambahkan CSS untuk styling Social Media Bar yang kita gunakan dengan menambahkan syntax
.icon-bar {
position: fixed;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
.icon-bar a:hover {
background-color: #000;
}
.facebook {
background: #3B5998;
color: white;
}
.twitter {
background: #55ACEE;
color: white;
}
.google {
background: #dd4b39;
color: white;
}
.instagram {
background: #007bb5;
color: white;
}
.youtube {
background: #bb0000;
color: white;
}
.content {
margin-left: 75px;
font-size: 30px;
}
position: fixed;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
.icon-bar a:hover {
background-color: #000;
}
.facebook {
background: #3B5998;
color: white;
}
.twitter {
background: #55ACEE;
color: white;
}
.google {
background: #dd4b39;
color: white;
}
.instagram {
background: #007bb5;
color: white;
}
.youtube {
background: #bb0000;
color: white;
}
.content {
margin-left: 75px;
font-size: 30px;
}
Catatan :
- Apabila kalian ingin merubah warna Background sosial media yang diinginkan bisa merubah pada CSS background dan rubah value warna Hex (#007bb5) menjadi sesuka kalian, untuk mencari warna dengan code Hex bisa searcing google dengan Keyword "Hex Color Picker".
- Pada CSS icon-bar pastikan isikan Postion Fixed agar Social bar mengikuti anda waktu sedang browsing keatas maupun ke bagian bawah blogger.
-Syntax Left pada CSS icon-bar bisa dirubah menjadi right tergantung selera anda apakah Social bar mau muncul dibagian kanan ataupun kiri blogger kalian, value 0 agar posisi Social bar bisa mepet dengan pojok Blog wkwkwk.
Langkah Keempat 4) :
-Apabila Syntax HTML dan CSS sudah dimasukkan langkah terakhir adalah penyesuaian ukuran sesuai selera. Silahkan di edit sendiri untuk bagian lainnya sesuai selera masing-masing.
Sekian dulu Tutorial Cara Membuat Sticky Social Media Bar yang sangat mudah digunakan dan bermanfaat untuk blog.
Apabila mengalami kesulitan bisa komentar langsung di blog ini atau
kalian bisa kunjungi Website Ini untuk lebih banyak guide menarik Website dan Blogger lainnya.
Sekian dan terimakasih.
