Cara Membuat Sosial Media Panel "Get In Touch" Di Blog
Penerbit: ( Seo Techman )

Cara Membuat Sosial Media Panel "Get In Touch" Di Blog

Cara Membuat Sosial Media Panel Get In Touch Di Blog
Untuk tutorial kali ini kami akan membagikan cara membuat sosial media panel atau bisa disebut, "get in touch".

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.

Untuk langkah awal,
Seperti biasa silahkan Anda 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 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;
 }
}

Sudah? Kita lanjut ke tahap selanjutnya. Dan 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.
Untuk langkah berikutnya adalah, kita buat Html nya. Kurang lebih seperti ini:


<!-- 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 memgikuti cara-caranya dengan benar seperti yang sudah dijelaskan diatas.

Semua kode ini 100% work! Dan sudah lulus uji coba sebelum kami mempublikasikannya. Nah, untuk demonya bisa dilihat dibawah.

Live Demo

Load comments

0 Response to "Cara Membuat Sosial Media Panel "Get In Touch" Di Blog"

Post a Comment