How to Create a Floating Contact Button in Tamil Bloggers

Created with by TamilBloggers.org

Follow My Social Media

How to Create a Floating Contact Button in Tamil Bloggers

0

How to Create a Floating Contact Button in Tamil Bloggers

Floating action button is used to perform the primary action on a web page or view. Typically it's miles round, brightly coloured  and, because the name indicates, floats above the view to attract the users attention. Also, it need to have a few sort of animation upon recognition and click on activities to provide customers seen comments.


This floating Get in contact button is completely responsive and works top notch with smaller devices like cellular and pills.


Adding this button will make it very much less difficult and fast for your target market to the touch you.


How to put in this Floating Button in your Blogger Template


First, open Blogger >> Themes >> Edit HTML >> Then add this CSS code Before </Head>


<style>
.social-button-container { position: fixed; right: 0; bottom: 80px; transform: translateX(100%); transition: transform 0.4s ease-in-out;z-index: 999; } .social-button-container.visible { transform: translateX(-10px);z-index: 999; } .social-button { border-radius: 16px;background: -webkit-linear-gradient(to right, #ee0979, #ff6a00); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #ee0979, #ff6a00);height: 50px; box-shadow: 0 10px 20px 0 rgba(30,30,30,.07); display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; height: 169px; width: 370px; max-width: calc(100% - 10px);border: 1px solid #ebeced; } .social-button button.close-btn { border: 0; color: #fff;background: none; cursor: pointer; font-size: 20px; position: absolute; top: 5px; right: 5px; } .social-button button.close-btn:focus { outline: none; } .social-button p { background-color:#fefefe; border-radius: 10px 10px 0px 0px; color: #000; font-size: 12px; line-height: 18px; padding: 2px 17px 0px; position: absolute; bottom: 0; left: 50%; margin: 0; transform: translateX(-50%); text-align: center; width: 235px; } .social-button p a { color: #FF7500; text-decoration: none; } .social-button h4 { margin-top: -22px;margin-bottom: 20px; color: #fff; font-size: 14px; line-height: 18px; text-transform: uppercase; } .social-button ul { display: flex; list-style-type: none; padding: 0; margin: 0; } button{border:none} .social-button ul li { margin: 0 10px; } .social-button ul li a svg{height: 24px; width: 24px; fill:#fff} .social-button ul li a { border: 1px solid #fff; border-radius: 50%; color: #001F61; font-size: 20px; display: flex; justify-content: center; align-items: center; height: 50px; width: 50px; text-decoration: none; } .social-button ul li a:hover { border: none; box-shadow: 0 9px 12px -9px #FF6A00; } .floating-btn svg{vertical-align: -12px;width: 24px; height: 24px;} .floating-btn { border-radius: 50px; background: -webkit-linear-gradient(to right, #ee0979, #ff6a00); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #ee0979, #ff6a00);padding: 6px 8px;color: #fff;right: 20px; cursor: pointer; position: fixed; bottom: 70px; z-index: 999;outline:none } .floating-btn:focus { outline: none; } @media screen and (max-width: 480px) { .social-panel-button.visible { transform: translateX(0px); } .floating-btn { } }
</style>


Next, add the code in <body> 


<div class='social-button-container'>
  <div class='social-button'>
    <p>Created with by
      <a href='/' target='_blank'>TamilBloggers.org</a></p>
    <button class='close-btn'><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
</svg></button>
    <h4>Get in touch on</h4>
    <ul>
      <li>
        <a href='https://www.facebook.com/TamilBloggersorg' target='_blank' title='facebook'>
<svg viewBox='0 0 512 512'>
<path d='M288,176v-64c0-17.664,14.336-32,32-32h32V0h-64c-53.024,0-96,42.976-96,96v80h-64v80h64v256h96V256h64l32-80H288z'/>
</svg>
</a>
      </li>
      <li>
        <a href='https://t.me/TamilBloggersorg' target='_blank' title='telegram'>
<svg viewBox='0 0 24 24'><path d='M9.78,18.65L10.06,14.42L17.74,7.5C18.08,7.19 17.67,7.04 17.22,7.31L7.74,13.3L3.64,12C2.76,11.75 2.75,11.14 3.84,10.7L19.81,4.54C20.54,4.21 21.24,4.72 20.96,5.84L18.24,18.65C18.05,19.56 17.5,19.78 16.74,19.36L12.6,16.3L10.61,18.23C10.38,18.46 10.19,18.65 9.78,18.65Z'/></svg>
</a>
      </li>
      <li>
        <a href='https://www.youtube.com/c/TamilBloggersorg' target='_blank' title='youtube'>
<svg viewBox='0 0 512 512'>
<path d='M490.24,113.92c-13.888-24.704-28.96-29.248-59.648-30.976C399.936,80.864,322.848,80,256.064,80    c-66.912,0-144.032,0.864-174.656,2.912c-30.624,1.76-45.728,6.272-59.744,31.008C7.36,138.592,0,181.088,0,255.904    C0,255.968,0,256,0,256c0,0.064,0,0.096,0,0.096v0.064c0,74.496,7.36,117.312,21.664,141.728    c14.016,24.704,29.088,29.184,59.712,31.264C112.032,430.944,189.152,432,256.064,432c66.784,0,143.872-1.056,174.56-2.816    c30.688-2.08,45.76-6.56,59.648-31.264C504.704,373.504,512,330.688,512,256.192c0,0,0-0.096,0-0.16c0,0,0-0.064,0-0.096    C512,181.088,504.704,138.592,490.24,113.92z M192,352V160l160,96L192,352z'/>
</svg>
</a>
      </li>
      <li>
        <a href='https://www.instagram.com/TamilBloggersorg ' target='_blank' title='instagram'>
<svg fill='#3f729b' viewBox='0 0 512.00096 512.00096'><path d='m373.40625 0h-234.8125c-76.421875 0-138.59375 62.171875-138.59375 138.59375v234.816406c0 76.417969 62.171875 138.589844 138.59375 138.589844h234.816406c76.417969 0 138.589844-62.171875 138.589844-138.589844v-234.816406c0-76.421875-62.171875-138.59375-138.59375-138.59375zm-117.40625 395.996094c-77.195312 0-139.996094-62.800782-139.996094-139.996094s62.800782-139.996094 139.996094-139.996094 139.996094 62.800782 139.996094 139.996094-62.800782 139.996094-139.996094 139.996094zm143.34375-246.976563c-22.8125 0-41.367188-18.554687-41.367188-41.367187s18.554688-41.371094 41.367188-41.371094 41.371094 18.558594 41.371094 41.371094-18.558594 41.367187-41.371094 41.367187zm0 0'/><path d='m256 146.019531c-60.640625 0-109.980469 49.335938-109.980469 109.980469 0 60.640625 49.339844 109.980469 109.980469 109.980469 60.644531 0 109.980469-49.339844 109.980469-109.980469 0-60.644531-49.335938-109.980469-109.980469-109.980469zm0 0'/><path d='m399.34375 96.300781c-6.257812 0-11.351562 5.09375-11.351562 11.351563 0 6.257812 5.09375 11.351562 11.351562 11.351562 6.261719 0 11.355469-5.089844 11.355469-11.351562 0-6.261719-5.09375-11.351563-11.355469-11.351563zm0 0'/></svg>
</a>
      </li>
    </ul>
  </div>
</div>
<button class='floating-btn'>
  <svg viewBox="0 0 24 24">
    <path fill="currentColor" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg>
</button>


After that , add the code below before </body>


<script>
//<![CDATA[
const floating_btn = document.querySelector('.floating-btn'); const close_btn = document.querySelector('.close-btn'); const social_panel_container = document.querySelector('.social-button-container'); floating_btn.addEventListener('click', () => { social_panel_container.classList.toggle('visible') }); close_btn.addEventListener('click', () => { social_panel_container.classList.remove('visible') });
//]]>
</script>


Then Save Theme .

 


Countdown Timer For Download Files Automatically - HTML, CSS & Javascript

 Download File 

Please wait..
If the download didn't start automatically, click here.


This is How to Create  Floating Contact Get in Touch Button with javascript and css . Hopefully it may be beneficial and see you next posting. Best regards, TamilBloggers.org

Post a Comment

0Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Post a Comment (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !