Cara Membuat Sosial Media Panel Get in Touch di Blog
Seotechman.com, Bogor 17/10/2019. Cara Membuat Sosial Media Panel Get in Touch di Blog. Seperti yang kita ketahui, arti dari kata get in touch ini adalah (terhubung, berhubungan, menghubungi).
Menurut kami ini lumayan bermanfaat untuk memberi tahu kepada pengunjung bahwasannya website/blog kita tertaut/tehubung dengan media sosial dan mereka bisa menghubungi kita melalui, Facebook, Twitter, Instagram, dan lain-lain.
Nah, maka dari itu kami disini berniat untuk sharing kepada Anda semua melalui tutorial hari ini.
Untuk yang ingin memasangnya dan penasaran, yuk! Langsung saja kita ke tahap-tahap cara pembuatannya.
Cara Membuat Sosial Media Panel Get in Touch di Blog
Langkah 1
Login ke akun blogger masing-masing. Setelah itu tap menu Template atau Tema, tap Edit Html.
Jika sudah, silahkan Anda kopi paste kode CSS berikut ini dan tempatkan ke dalam //]]><b:skin> atau <style>, bisa juga di atas kode <head>.
/* SOCIAL PANEL CSS seotechman.com */
.social-panel-container {
position: fixed;
right: 0;
bottom: 80px;
transform: translateX(100%);
transition: transform 0.4s ease-in-out;
}
.social-panel-container.visible {
transform: translateX(-10px);
}
.social-panel {
background-color: #fff;
border-radius: 16px;
box-shadow: 0 16px 31px -17px rgba(0,31,97,0.6);
border: 5px solid #ddd;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: 'Muli';
position: relative;
height: 169px;
width: 370px;
max-width: calc(100% - 10px);
}
.social-panel button.close-btn {
border: 0;
color: #97A5CE;
cursor: pointer;
font-size: 20px;
position: absolute;
top: 5px;
right: 5px;
}
.social-panel button.close-btn:focus {
outline: none;
}
.social-panel p {
background-color: #2196f3;
border-radius: 0 0 10px 10px;
color: #fff;
font-size: 14px;
line-height: 18px;
padding: 2px 17px 6px;
position: absolute;
top: 0;
left: 50%;
margin: 0;
transform: translateX(-50%);
text-align: center;
width: 235px;
}
.social-panel p i {
color: #E91E63;
margin: 0 5px;
}
.social-panel p a {
color: #f44336;
text-decoration: none;
}
.social-panel h4 {
margin: 20px 0;
color: #97A5CE;
font-family: 'Muli';
font-size: 14px;
line-height: 18px;
text-transform: uppercase;
}
.social-panel ul {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
}
.social-panel ul li {
margin: 0 5px;
}
.social-panel ul li a {
border: 1px solid #DCE1F2;
border-radius: 50%;
color: #2196f3;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
width: 50px;
text-decoration: none;
}
.social-panel ul li a:hover {
border-color: #FF6A00;
box-shadow: 0 9px 12px -9px #FF6A00;
}
.floating-btn {
border-radius: 26.5px;
background-color: #2196f3;
border: 1px solid #ddd;
box-shadow: 0 16px 22px -17px #03153B;
color: #fff;
cursor: pointer;
font-size: 16px;
line-height: 20px;
padding: 12px 20px;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999;
}
.floating-btn:hover {
background-color: #ffffff;
color: #001F61;
}
.floating-btn:focus {
outline: none;
}
@media screen and (max-width: 480px) {
.social-panel-container.visible {
transform: translateX(0px);
}
.floating-btn {
right: 10px;
}
}Langkah 2
Untuk javascriptnya, bisa Anda lihat kodenya dibawah ini:
// SOCIAL PANEL JS
const floating_btn = document.querySelector('.floating-btn');
const close_btn = document.querySelector('.close-btn');
const social_panel_container = document.querySelector('.social-panel-container');
floating_btn.addEventListener('click', () => {
social_panel_container.classList.toggle('visible')
});
close_btn.addEventListener('click', () => {
social_panel_container.classList.remove('visible')
});Kopi dan pastekan javascript diatas tepat sebelum </body>, atau lebih tepatnya sebelum kode penutup body ditemplate blog Anda.
Langkah 3
<!-- SOCIAL PANEL HTML -->
<div class="social-panel-container">
<div class="social-panel">
<p>Created with <i class="fa fa-heart"></i> by
<a target="_blank" href="https://seotechman.com">Seo Techman</a></p>
<button class="close-btn"><i class="fas fa-times"></i></button>
<h4>Get in touch on</h4>
<ul>
<li>
<a href="#" target="_blank">
<i class="fab fa-discord"></i>
</a>
</li>
<li>
<a href="#" target="_blank">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#" target="_blank">
<i class="fab fa-linkedin"></i>
</a>
</li>
<li>
<a href="#" target="_blank">
<i class="fab fa-facebook"></i>
</a>
</li>
<li>
<a href="#" target="_blank">
<i class="fab fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
<button class="floating-btn">
Get in Touch
</button>Tahap yang terakhir yang harus Anda selesaikan yaitu simpan tema tersebut.
Selanjutnya, silahkan Anda cek dan lihat seperti apa hasilnya.
Apabila terdapat eror atau yang lainnya, mungkin Anda tidak mengikuti cara diatas dengan benar.
Semua kode ini 100% work, dan sudah lulus uji coba sebelum kami mempublikasikannya.
Kurang lebih seperti itulah, cara membuat sosial media panel get in touch di blog.
Semoga bermanfaat!
