DEV Community: Imam Uddin

WhatsApp-Floating-Button-For-Website

Imam Uddin — Sat, 01 Jun 2024 10:38:02 +0000

WhatsApp Button HTML Code

Adding a WhatsApp Chat Button On Website HTML Code to your website can significantly enhance user interaction by providing a quick and convenient way for visitors to reach out to you directly through WhatsApp. This button, which stays fixed on the screen as users scroll, ensures that communication is always just a click away.

Below is a step-by-step guide to implementing this feature using HTML, CSS, and JavaScript codes of WhatsApp Floating Button.

HTML Code: Defines the structure of the WhatsApp Live Chat Button and includes a link to your WhatsApp number.
CSS Code: Styles the button to make it visually appealing and positions it appropriately on the webpage.
JavaScript Code: Although optional, can be used to add additional functionality or animations to the WhatsApp Floating Button For Website.

WhatsApp Floating Button HTML Code

<div class='nav-whatsapp'><div class='wrapperWA'><div class='wrapperWA-header'><h2>WhatsApp Live Chat</h2><div class='closeWA'> <svg class='h-6 w-6' fill='none' stroke='#f40076' viewbox='0 0 24 24'><path d='M6 18L18 6M6 6l12 12' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'></path></svg></div></div><div class='form-container' id='waform-IT'><div class='formC'><div class='Fcontrol'><input class='cName' id='cName' name='name' required='required' type='text'> <span class='nameC'>Name</span> <span class='valid' id='error_name'></span> </div> <div class='Fcontrol'> <input class='cEmail' id='cEmail' name='email' required='required' type='email'> <span class='emailC'>Email</span> <span class='valid' id='error_email'></span> </div> </div> <div class='formC'> <div class='Fcontrol'> <select class='cSubject' id='cSubject'> <option value='Help'>Help</option> <option value='Question'>Question</option> <option value='Request'>Request</option> </select> <span class='subjectC'>Select Subject</span> </div> <div class='Fcontrol'> <textarea class='cMessage' id='cMessage' name='message' required='required'></textarea> <span class='messageC'>Message</span> <span class='valid' id='error_message'></span> </div> </div> <div class='formB'> <a class='whatsapp-send' onclick='sendToWhatsApp()'><svg viewbox='0 0 32 32'> <path d='M16 2a13 13 0 0 0-8 23.23V29a1 1 0 0 0 .51.87A1 1 0 0 0 9 30a1 1 0 0 0 .51-.14l3.65-2.19A12.64 12.64 0 0 0 16 28a13 13 0 0 0 0-26Zm0 24a11.13 11.13 0 0 1-2.76-.36 1 1 0 0 0-.76.11L10 27.23v-2.5a1 1 0 0 0-.42-.81A11 11 0 1 1 16 26Z'></path><path d='M19.86 15.18a1.9 1.9 0 0 0-2.64 0l-.09.09-1.4-1.4.09-.09a1.86 1.86 0 0 0 0-2.64l-1.59-1.59a1.9 1.9 0 0 0-2.64 0l-.8.79a3.56 3.56 0 0 0-.5 3.76 10.64 10.64 0 0 0 2.62 4 8.7 8.7 0 0 0 5.65 2.9 2.92 2.92 0 0 0 2.1-.79l.79-.8a1.86 1.86 0 0 0 0-2.64Zm-.62 3.61c-.57.58-2.78 0-4.92-2.11a8.88 8.88 0 0 1-2.13-3.21c-.26-.79-.25-1.44 0-1.71l.7-.7 1.4 1.4-.7.7a1 1 0 0 0 0 1.41l2.82 2.82a1 1 0 0 0 1.41 0l.7-.7 1.4 1.4Z'></path></svg>Send WhatsApp</a> </div> </div> </div> <div class='whatsapp-float'> <div class='whatsapp-icon'> <svg viewbox='0 0 512 512'><path d='M414.73 97.1A222.14 222.14 0 0 0 256.94 32C134 32 33.92 131.58 33.87 254a220.61 220.61 0 0 0 29.78 111L32 480l118.25-30.87a223.63 223.63 0 0 0 106.6 27h.09c122.93 0 223-99.59 223.06-222A220.18 220.18 0 0 0 414.73 97.1zM256.94 438.66h-.08a185.75 185.75 0 0 1-94.36-25.72l-6.77-4-70.17 18.32 18.73-68.09-4.41-7A183.46 183.46 0 0 1 71.53 254c0-101.73 83.21-184.5 185.48-184.5a185 185 0 0 1 185.33 184.64c-.04 101.74-83.21 184.52-185.4 184.52zm101.69-138.19c-5.57-2.78-33-16.2-38.08-18.05s-8.83-2.78-12.54 2.78-14.4 18-17.65 21.75-6.5 4.16-12.07 1.38-23.54-8.63-44.83-27.53c-16.57-14.71-27.75-32.87-31-38.42s-.35-8.56 2.44-11.32c2.51-2.49 5.57-6.48 8.36-9.72s3.72-5.56 5.57-9.26.93-6.94-.46-9.71-12.54-30.08-17.18-41.19c-4.53-10.82-9.12-9.35-12.54-9.52-3.25-.16-7-.2-10.69-.2a20.53 20.53 0 0 0-14.86 6.94c-5.11 5.56-19.51 19-19.51 46.28s20 53.68 22.76 57.38 39.3 59.73 95.21 83.76a323.11 323.11 0 0 0 31.78 11.68c13.35 4.22 25.5 3.63 35.1 2.2 10.71-1.59 33-13.42 37.63-26.38s4.64-24.06 3.25-26.37-5.11-3.71-10.69-6.48z'></path></svg> </div> <span class="whatsapp-text">Talk to us?</span> </div> </div>

WhatsApp Floating Button CSS Code

`<br> .nav-whatsapp{position:fixed;bottom:20px;right:20px;z-index:1000;padding:12px 0}<br> .nav-whatsapp.active .wrapperWA{opacity:1;visibility:visible;width:400px;height:auto;z-index:6;display:block}<br> .nav-whatsapp.active .whatsapp-float{opacity:0;visibility:hidden}<br> .wrapperWA{position:fixed;right:20px;bottom:20px;width:60px;padding:25px;border-radius:5px;box-shadow:rgba(0,0,0,0.1) 0 4px 12px;z-index:-1;opacity:0;visibility:hidden;transition:opacity .3s ease;height:60px;margin:12px 0;background:#fff;display:none}<br> .wrapperWA-header{display:flex;align-items:center;margin-bottom:20px;justify-content:center;position:relative}<br> .wrapperWA-header h2{text-align:center;text-transform:uppercase;letter-spacing:3px;color:#332902;font-size:1rem;flex:1 1 auto;margin:0}<br> .wrapperWA-header .closeWA svg{width:20px;height:20px;float:right}<br> .form-container .formC:nth-child(1){display:grid;grid-template-columns:repeat(auto-fit,minmax(45%,1fr));gap:1rem;--gap:1rem}<br> .form-container .formC:nth-child(2){display:grid;grid-template-columns:repeat(auto-fit,minmax(100%,1fr))}<br> .form-container .formC .Fcontrol{position:relative}<br> .form-container .formC .Fcontrol input:focus,.form-container .formC .Fcontrol textarea:focus{border-color:#4caf50}<br> .Fcontrol input[type="text"],.Fcontrol input[type="email"],.Fcontrol .cSubject,.Fcontrol textarea{width:100%;height:calc(3.5rem + calc(1px * 2));padding:.375rem 2.25rem .375rem .75rem;padding-top:1.625rem;border-radius:5px;margin-bottom:15px;border:1px solid rgba(0,0,0,0.05);background:#fff}<br> .Fcontrol textarea{height:100px}<br> .Fcontrol input:focus ~ .nameC,.Fcontrol input:focus ~ .emailC,.Fcontrol textarea:focus ~ .messageC{top:-5px}<br> .Fcontrol input[type="text"],.Fcontrol input[type="email"],.Fcontrol textarea{padding:.75rem;padding-top:1.625rem;}<br> .Fcontrol .nameC,.Fcontrol .emailC,.Fcontrol .subjectC,.Fcontrol .messageC{position:absolute;top:0;left:0;z-index:2;height:auto;padding:1rem .75rem;transform:scale(0.85) translateY(-0.5rem) translateX(0.15rem);transform-origin:0 0;overflow:hidden;text-overflow:ellipsis;pointer-events:none;white-space:nowrap;color:rgba(33,37,41,0.65);transition:0.1s ease}<br> .formC .Fcontrol .cSubject{display:block;background:url("data:image/svg+xml,%3csvg xmlns='<a href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right .75rem center/16px 12px;border:1px solid rgba(0,0,0,0.08);-webkit-appearance:none;-moz-appearance:none;appearance:none}<br> .valid[data-text]:before{position:absolute;bottom:100%;left:12px;content:"";border:8px solid;border-color:transparent transparent #ffd91a transparent;top:calc(100% - 21px)}<br> .valid[data-text]:after,.valid[data-text]:before{opacity:1;transition:opacity 0.2s ease;pointer-events:none;z-index:3}<br> .valid[data-text]:after{content:attr(data-text);position:absolute;background:#ffd91a;left:0;top:calc(100% - 5px);font-size:12px;padding:5px;box-shadow:0 5px 10px rgb(0 0 0 / 8%);border-radius:5px}<br> .show#cName ~ .valid:after,.show#cEmail ~ .valid:after,.show#cMessage ~ .valid:after,.show#cName ~ .valid[data-text]:before,.show#cEmail ~ .valid[data-text]:before,.show#cMessage ~ .valid[data-text]:before{opacity:0}<br> .none#cName ~ .valid:after,.none#cEmail ~ .valid:after,.none#cMessage ~ .valid:after,.none#cName ~ .valid[data-text]:before,.none#cEmail ~ .valid[data-text]:before,.none#cMessage ~ .valid[data-text]:before{opacity:1}<br> .whatsapp-send{display:inline-flex;align-items:center;gap:0.3rem;padding:10px 20px;background-color:#4caf50;color:#fff;text-decoration:none;font-weight:bold;font-size:12px;border-radius:4px;transition:background-color 0.3s;cursor:default;height:auto;width:auto}<br> .whatsapp-send svg{fill:#fff;width:22px;height:22px}<br> .whatsapp-send:hover{background-color:#45a049}<br> .whatsapp-float{display:flex;align-items:center;flex-direction:column;gap:.2rem}<br> .whatsapp-float .whatsapp-icon{width:60px;height:60px;border-radius:50%;background-color:#4CAF50;display:flex;justify-content:center;align-items:center;animation-name:waAnimation;animation-duration:1.5s;animation-timing-function:ease-out;animation-iteration-count:infinite}<br> @keyframes waAnimation{0%{box-shadow:0 0 0 0 rgba(74,175,80,0.5)}80%{box-shadow:0 0 0 14px rgba(74,175,80,0)}}<br> .whatsapp-float .whatsapp-icon svg{fill:#fff;width:30px;height:30px}</p> <p>select:focus{outline:none}<br> select::-ms-expand{display:none}<br> @media screen and (max-width:620px){<br> .formC:nth-child(1){gap:0}<br> .nav-whatsapp.active .wrapperWA{width:auto;height:auto;right:0;left:0;bottom:0;top:auto;margin:0;transition:all .3s ease}<br> .form-container .formC:nth-child(1){grid-template-columns:auto;gap:0}<br> }<br> .drK .wrapperWA{background:#202426}<br> .drK .Fcontrol input[type="text"],.drK .Fcontrol input[type="email"],.drK .Fcontrol .cSubject,.drK .Fcontrol textarea{background:#272b2d}<br> .drK .wrapperWA-header h2,.drK .Fcontrol .nameC,.drK .Fcontrol .emailC,.drK .Fcontrol .subjectC,.drK .Fcontrol .messageC{color:#fff}<br> `

WhatsApp Floating Button JavaScript Code

`//<![CDATA[<br> // WhatsApp Floating Button by imamuddinwp.com</p> <p>var menuToggle = document.querySelector(".whatsapp-float"),<br> wrapperMenu = document.querySelector(".nav-whatsapp"),<br> closeWA = document.querySelector(".closeWA");<br> var inputs = document.querySelectorAll('.Fcontrol input[type=text], .Fcontrol input[type=email], .Fcontrol textarea');</p> <p>menuToggle.onclick = function() {<br> wrapperMenu.classList.toggle('active');<br> }<br> closeWA.onclick = function() {<br> wrapperMenu.classList.remove('active');<br> };</p> <p>for (var i = 0; i < inputs.length; i++) {<br> var input = inputs[i];<br> input.addEventListener('input', function() {<br> var bg = this.value ? 'show' : 'none';<br> this.setAttribute('class', bg);<br> });<br> }</p> <p>function sendToWhatsApp() {<br> /* Input Form <em>/<br> var name = document.getElementById("cName").value;<br> var email = document.getElementById("cEmail").value;<br> var subject = document.getElementById("cSubject").value;<br> var massage = document.getElementById("cMessage").value;<br> var postLink = window.location.href;<br> /</em> Validation for Required Columns <em>/<br> var error_name = document.getElementById("error_name"),<br> error_email = document.getElementById("error_email"),<br> error_message = document.getElementById("error_message");<br> var text;<br> if (name == "") {<br> text = 'Please enter your name';<br> error_name.setAttribute('data-text', text);<br> return false;<br> }<br> if (email.indexOf("@") == -1 || email.length < 6) {<br> text = 'Please enter valid email';<br> error_email.setAttribute('data-text', text);<br> return false;<br> }<br> if (massage == "") {<br> text = 'Please enter your Massage';<br> error_message.setAttribute('data-text', text);<br> return false;<br> }<br> /</em> URL Final Whatsapp <em>/ <br> var message = "New message from " + name + "\n\n"; // Opening Message<br> message += "*Name:</em> " + name + "\n";<br> message += "<em>Email:</em> " + email + "\n";<br> message += "<em>Subject:</em> " + subject + "\n";<br> message += "<em>Massage:</em> " + massage + "\n\n";<br> message += "=============================" + "\n";<br> message += "<em>Form:</em> " + postLink + "\n";<br> message += "=============================";<br> /* WhatsApp Settings */<br> var walink = '<a href="https://api.whatsapp.com/send?">https://api.whatsapp.com/send?</a>',<br> phoneNumber = '+8801406070407'; // Your WhatsApp number<br> var encodedMessage = encodeURIComponent(message);<br> var whatsappUrl = walink + "?phone=" + phoneNumber + "&text=" + encodedMessage;<br> window.open(whatsappUrl, '_blank');<br> return true;<br> }<br> //]]>`

Full Guidelines & Demo is here: WhatsApp Floating Button For Website - [WhatsApp Button HTML Code].

WhatsApp Chat Button On Website HTML Code

Imam Uddin — Wed, 14 Feb 2024 12:53:57 +0000

How do I add a WhatsApp chat button to Blogger?

It's straightforward to Add A WhatsApp Chat Button To A Website. You have to follow just 3 simple steps to integrate the WhatsApp Live Chat Button into your website.

1st Step:- Add HTML code to your blogger website.
2nd Step:- Add CSS code to your blogger website, and
3rd Step:- Save and Preview WhatsApp Chat Button

If you are a website owner and looking for the WhatsApp Chat HTML Code For your Website, then you can do it easily by yourself. No need to have programming knowledge to do it. If you have a basic idea of HTML and CSS code, then you can easily add a WhatsApp Live Chat to your website.

WhatsApp Button HTML code

<input class='chat-menu hidden' id='offchat-menu' type='checkbox'/><div class='sticky-button' id='sticky-button'><label for='offchat-menu'><svg viewBox='0 0 24 24'><path d='M8.667 10.933 10.2 9.4 9.8 8H8S7.6 10.533 10.533 13.467 16 16 16 16V14.2L14.6 13.8 13.067 15.333' style='fill: none; stroke: rgb(44, 169, 188); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'/><path d='M20.867 13.467A9 9 0 0 1 7.867 20L3 21 4 16.133a9 9 0 1 1 16.867 -2.667Z' style='fill: none; stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'/></svg></label></div><div class='sticky-chat'><div class='chat-content'><div class='chat-header'><svg viewbox='0 0 32 32'><path d='M24,22a1,1,0,0,1-.64-.23L18.84,18H17A8,8,0,0,1,17,2h6a8,8,0,0,1,2,15.74V21a1,1,0,0,1-.58.91A1,1,0,0,1,24,22ZM17,4a6,6,0,0,0,0,12h2.2a1,1,0,0,1,.64.23L23,18.86V16.92a1,1,0,0,1,.86-1A6,6,0,0,0,23,4Z'/><rect height='2' width='2' x='19' y='9'/><rect height='2' width='2' x='14' y='9'/><rect height='2' width='2' x='24' y='9'/><path d='M8,30a1,1,0,0,1-.42-.09A1,1,0,0,1,7,29V25.74a8,8,0,0,1-1.28-15,1,1,0,1,1,.82,1.82,6,6,0,0,0,1.6,11.4,1,1,0,0,1,.86,1v1.94l3.16-2.63A1,1,0,0,1,12.8,24H15a5.94,5.94,0,0,0,4.29-1.82,1,1,0,0,1,1.44,1.4A8,8,0,0,1,15,26H13.16L8.64,29.77A1,1,0,0,1,8,30Z'/></svg><div class='title'><a href='https://imamuddinwp.blogspot.com' target='_new'>NextGen Digital</a> <span>Welcome to WhatsApp chat</span></div></div><div class='chat-text'><span>Howdy! How can we help you today?</span><span class='typing'><svg viewbox='0 0 512 512'><circle cx='256' cy='256' r='48'/><circle cx='416' cy='256' r='48'/><circle cx='96' cy='256' r='48'/></svg></span></div></div><a class='chat-button' href='https://api.whatsapp.com/send/?phone=8801406070407' rel='nofollow noreferrer' target='_blank'><span>Type here...</span><svg viewBox='0 0 32 32'><path class='cls-1' d='M19.47,31a2,2,0,0,1-1.8-1.09l-4-7.57a1,1,0,0,1,1.77-.93l4,7.57L29,3.06,3,12.49l9.8,5.26,8.32-8.32a1,1,0,0,1,1.42,1.42l-8.85,8.84a1,1,0,0,1-1.17.18L2.09,14.33a2,2,0,0,1,.25-3.72L28.25,1.13a2,2,0,0,1,2.62,2.62L21.39,29.66A2,2,0,0,1,19.61,31Z'/></svg></a></div>

WhatsApp Button CSS code

/* --- WhatsApp Button For Blogger CSS code by imamuddinwp.blogspot.com --- */:root {--warna-background: #4dc247;--warna-bg-chat: #f0f5fb;--warna-icon: #fff;--warna-text: #505050;--warna-text-alt: #989b9f;--lebar-chatbox: 320px;}.sticky-button{display: flex;align-items: center;justify-content: center;position: fixed;right: 20px;bottom: 76px;width: 45px;height: 45px;background-color: #fefefe;border-radius: 20px;box-shadow: 0 10px 20px 0 rgba(30,30,30,.1);}.sticky-button a, .sticky-button label{display:flex;align-items:center;width:55px;height:55px;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;}.sticky-button a svg, .sticky-button label svg{margin:auto;fill:#4dc247}.sticky-button label svg.svg-2{display:none}.sticky-chat{position:fixed;bottom:70px;right:20px;width:var(--lebar-chatbox);-webkit-transition:all .3s ease-out;transition:all .3s ease-out;z-index:21;opacity:0;visibility:hidden;line-height:normal}.sticky-chat .chat-content{border-radius:10px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden}.sticky-chat .chat-header{position:relative;display:flex;align-items:center;padding:15px 20px;background-color:var(--warna-background);overflow:hidden}.sticky-chat .chat-header:after{content:'';display:block;position:absolute;bottom:0;right:0;width:70px;height:65px;background:rgba(0,0,0,.040);border-radius:70px 0 5px 0;}.sticky-chat .chat-header svg{width:35px;height:35px;flex:0 0 auto;fill:var(--warna-icon)}.sticky-chat .chat-header .title{padding-left:15px;font-size:14px;font-weight:600;font-family:'Roboto', sans-serif;color:var(--warna-icon)}.sticky-chat .chat-header .title a{color:#fff}.sticky-chat .chat-header .title span{font-size:11px;font-weight:400;display:block;line-height:1.58em;margin:0;}.sticky-chat .chat-text{display:flex;flex-wrap:wrap;margin:25px 20px;font-size:12px;color:var(--warna-text)}.sticky-chat .chat-text span{display:inline-block;margin-right:auto;padding:10px 10px 10px 20px;background-color:var(--warna-bg-chat);border-radius:3px 15px 15px}.sticky-chat .chat-text span:after{content:'Just now';display:inline-block;margin-left:15px;font-size:9px;color:var(--warna-text-alt)}.sticky-chat .chat-text span.typing{margin:15px 0 0 auto;padding:10px 20px 10px 10px;border-radius:15px 3px 15px 15px}.sticky-chat .chat-text span.typing:after, .chat-menu{display:none}.sticky-chat .chat-text span.typing svg{height:14px;fill:var(--warna-text-alt)}.sticky-chat .chat-button{display:flex;align-items:center;margin-top:15px;padding:12px 20px;border-radius:10px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden;font-size:12px;color:var(--warna-text)}.sticky-chat .chat-button svg{width:20px;height:20px;fill:var(--warna-text-alt);margin-left:auto;transform:rotate(40deg);-webkit-transform:rotate(40deg)}.chat-menu:checked + .sticky-button label{-webkit-transform: rotate(360deg);transform: rotate(360deg);}.chat-menu:checked + .sticky-button label svg.svg-1{display:none}.chat-menu:checked + .sticky-button label svg.svg-2{display:table-cell}.chat-menu:checked + .sticky-button + .sticky-chat{bottom: 77px;right: 81px;opacity: 1;visibility: visible;}

WhatsApp Chat Button On the Website

Now browse your website, reload, or refresh the page. if everything is done perfectly, you will see the WhatsApp Chat Button in the bottom right corner as shown below picture:

The full guidelines here:
WhatsApp Chat Button On Website HTML Code

WhatsApp Chat HTML Code For Website

Imam Uddin — Wed, 14 Feb 2024 12:29:17 +0000

How To Add WhatsApp Chat HTML Code On Blogger Website?

To add a WhatsApp Live Chat Widget to your blogger website, you have to follow 3 simple and easy steps:

Add The HTML Code Of WhatsApp Live Chat
Add The CSS Code Of WhatsApp Live Chat
Add The JavaScript code Of WhatsApp Live Chat So, let's see in detail How To Add WhatsApp Chat HTML Code On the Blogger Website from the below step-by-step guide.

WhatsApp Chat HTML Code For Blogger:

<div class='hide' id='whatsapp-chat'><div class='home-chat'><div class='info_box'><div class='info-avatar'><a href='https://imamuddinwp.blogspot.com'><img alt='imamuddinwp' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilCfU4CnwT_V5w5d_wotMKrg5hpB5nj2Ctwm0pTdCXsMmNUaZGrmjkHhafLLFIzbccP2FUrkQKEKMIhK5Piq7yDUYpoyB-vXlvl_tE3uBHRCvI-HqY85nZ44VrXtnAd_r-otV-l2Gwl3k0H3l4P1mPya8fftmJayW1HWsldsVQ_y-_yPt2Oc7QsgC9eaHx/s1600-rw/whatsapp-live-chat-imamuddinwp.png'/></a><span class='nime'/></div><div class='info-chat'><span class='chat-label'><a href='https://imamuddinwp.blogspot.com' target='_new'> NextGen Digital</a> </span><span class='chat-text'>Welcome to WhatsApp Live Chat. </span></div></div><div class='goophone'><a href='tel:+8801815682307' title='call us'><svg viewBox='0 0 384 384'><path d='M353.188,252.052c-23.51,0-46.594-3.677-68.469-10.906c-10.719-3.656-23.896-0.302-30.438,6.417l-43.177,32.594 c-50.073-26.729-80.917-57.563-107.281-107.26l31.635-42.052c8.219-8.208,11.167-20.198,7.635-31.448 c-7.26-21.99-10.948-45.063-10.948-68.583C132.146,13.823,118.323,0,101.333,0H30.813C13.823,0,0,13.823,0,30.813 C0,225.563,158.438,384,353.188,384c16.99,0,30.813-13.823,30.813-30.813v-70.323C384,265.875,370.177,252.052,353.188,252.052z'/></svg></a><a href='mailto:imamuddinwp@gmail.com' title='sent to mail'><svg viewBox='0 0 512 512'><path d='M10.688,95.156C80.958,154.667,204.26,259.365,240.5,292.01c4.865,4.406,10.083,6.646,15.5,6.646 c5.406,0,10.615-2.219,15.469-6.604c36.271-32.677,159.573-137.385,229.844-196.896c4.375-3.698,5.042-10.198,1.5-14.719 C494.625,69.99,482.417,64,469.333,64H42.667c-13.083,0-25.292,5.99-33.479,16.438C5.646,84.958,6.313,91.458,10.688,95.156z'/><path d='M505.813,127.406c-3.781-1.76-8.229-1.146-11.375,1.542c-46.021,39.01-106.656,90.552-152.385,129.885 c-2.406,2.063-3.76,5.094-3.708,8.271c0.052,3.167,1.521,6.156,4,8.135c42.49,34.031,106.521,80.844,152.76,114.115 c1.844,1.333,4.031,2.01,6.229,2.01c1.667,0,3.333-0.385,4.865-1.177c3.563-1.823,5.802-5.49,5.802-9.49V137.083 C512,132.927,509.583,129.146,505.813,127.406z'/><path d='M16.896,389.354c46.25-33.271,110.292-80.083,152.771-114.115c2.479-1.979,3.948-4.969,4-8.135 c0.052-3.177-1.302-6.208-3.708-8.271C124.229,219.5,63.583,167.958,17.563,128.948c-3.167-2.688-7.625-3.281-11.375-1.542 C2.417,129.146,0,132.927,0,137.083v243.615c0,4,2.24,7.667,5.802,9.49c1.531,0.792,3.198,1.177,4.865,1.177 C12.865,391.365,15.052,390.688,16.896,389.354z'/><path d='M498.927,418.375c-44.656-31.948-126.917-91.51-176.021-131.365c-4-3.26-9.792-3.156-13.729,0.24 c-9.635,8.406-17.698,15.49-23.417,20.635c-17.563,15.854-41.938,15.854-59.542-0.021c-5.698-5.135-13.76-12.24-23.396-20.615 c-3.906-3.417-9.708-3.521-13.719-0.24c-48.938,39.719-131.292,99.354-176.021,131.365c-2.49,1.792-4.094,4.552-4.406,7.604 c-0.302,3.052,0.708,6.083,2.802,8.333C19.552,443.01,30.927,448,42.667,448h426.667c11.74,0,23.104-4.99,31.198-13.688 c2.083-2.24,3.104-5.271,2.802-8.323C503.021,422.938,501.417,420.167,498.927,418.375z'/></svg></a></div></div><div class='first-msg'><div class='box-msg'><span class='chat-nama'>Imam Uddin...</span><span class='chat-cript'>Howdy!!</span><span>How can I help you today?</span><div class='jamwa'><div id='hours'/>:<div id='minutes'/></div></div></div><div class='goomwhats'><div class='poptamv' id='konsultasi'><div class='formtamv formWA'><div class='boxmsg'><label><textarea class='pesan wajib' placeholder='Type a message'/><span class='validasi'>(Required)</span></label></div><div id='btn-chat'><a class='submit' href='javascript:void;'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M1.101 21.757L23.8 12.028 1.101 2.3l.011 7.912 13.623 1.816-13.623 1.817-.011 7.912z' fill='#263238' fill-opacity='.45'/></svg></a></div></div></div></div><a class='close-chat' href='javascript:void' title='close'><svg viewBox='0 0 413.348 413.348'><path d='m413.348 24.354-24.354-24.354-182.32 182.32-182.32-182.32-24.354 24.354 182.32 182.32-182.32 182.32 24.354 24.354 182.32-182.32 182.32 182.32 24.354-24.354-182.32-182.32z'/></svg></a></div><div class='imam-live'><div class='box-live'><a href='javascript:void' title=''><span>Chat with WhatsApp</span><span class='svg'><svg viewBox='0 0 418.135 418.135'><path d='M198.929,0.242C88.5,5.5,1.356,97.466,1.691,208.02c0.102,33.672,8.231,65.454,22.571,93.536 L2.245,408.429c-1.191,5.781,4.023,10.843,9.766,9.483l104.723-24.811c26.905,13.402,57.125,21.143,89.108,21.631 c112.869,1.724,206.982-87.897,210.5-200.724C420.113,93.065,320.295-5.538,198.929,0.242z M323.886,322.197 c-30.669,30.669-71.446,47.559-114.818,47.559c-25.396,0-49.71-5.698-72.269-16.935l-14.584-7.265l-64.206,15.212l13.515-65.607 l-7.185-14.07c-11.711-22.935-17.649-47.736-17.649-73.713c0-43.373,16.89-84.149,47.559-114.819 c30.395-30.395,71.837-47.56,114.822-47.56C252.443,45,293.218,61.89,323.887,92.558c30.669,30.669,47.559,71.445,47.56,114.817 C371.446,250.361,354.281,291.803,323.886,322.197z' style='fill:#7AD06D;'/><path d='M309.712,252.351l-40.169-11.534c-5.281-1.516-10.968-0.018-14.816,3.903l-9.823,10.008 c-4.142,4.22-10.427,5.576-15.909,3.358c-19.002-7.69-58.974-43.23-69.182-61.007c-2.945-5.128-2.458-11.539,1.158-16.218 l8.576-11.095c3.36-4.347,4.069-10.185,1.847-15.21l-16.9-38.223c-4.048-9.155-15.747-11.82-23.39-5.356 c-11.211,9.482-24.513,23.891-26.13,39.854c-2.851,28.144,9.219,63.622,54.862,106.222c52.73,49.215,94.956,55.717,122.449,49.057 c15.594-3.777,28.056-18.919,35.921-31.317C323.568,266.34,319.334,255.114,309.712,252.351z' style='fill:#7AD06D;'/></svg></span></a></div></div>
WhatsApp Chat CSS Code For Blogger:

/* WhatsApp Live Chat CSS By imamuddinwp.blogspot.com *//* Pase below CSS codes before/above ]]></b:skin> in blogger theme */.box-live a,.imam-live,.info-chat{color:#fff}.box-msg span,.info-chat span,.info_box,.show{display:block}#whatsapp-chat,.imam-live{background:#fff;position:fixed;z-index:100;right:20px}.imam-live,.info_box{background:linear-gradient(45deg,#029abd 0,#05c537 100%)}.box-live,.goomwhats,.info-avatar,.info_box{position:relative}#whatsapp-chat{width:350px;border-radius:4px;box-shadow:0 8px 25px -5px rgba(45,62,79,.15);bottom:17%;overflow:hidden}#btn-chat,#tooltip i,.imam-live svg{vertical-align:middle}.imam-live{bottom:10%;line-height:30px;font-size:15px;padding:0;border-radius:50px;box-shadow:0 1px 5px rgba(154,154,154,.2)}.imam-live .svg{margin:0;position:absolute;top:0;padding:6.5px 15px;border-radius:0 50px 50px 0;right:-2px;background-color:#fff;color:#31c73a;width:25%;height:100%;line-height:18px;overflow:hidden;text-align:center;z-index:10}.box-live{padding:3px 20px}.box-live span{margin-right:40px;font-size:13px}.info-chat{padding-top:3px}.info-chat span.chat-label{font-size:15px;font-weight:700}.info-chat span.chat-text{font-size:13px;line-height:2.3;color:#d7ffee}.info-avatar{width:48px;height:48px;float:left;margin:5px 15px 0 0}.info-avatar img{border-radius:100%;width:100%;height:auto}.info_box{padding:15px;overflow:hidden;z-index:1;box-shadow:0 1px 5px rgba(0,0,0,.35)}#tooltip,#tooltip:after,.box-msg:before,.goophone{position:absolute}.goomwhats{color:#444;padding:5px 15px;background-color:#fff;font-size:14px;display:flow-root}.goomwhats a{color:#3bc743}.boxmsg{margin:8px 0 0;float:left;width:74%;display:block}.goophone{right:45px;top:10px;font-size:13px;z-index:10}.box-msg,.first-msg,.formtamv label{position:relative}.goophone a{color:#e6f9d2;margin-left:15px}.goophone a svg,a.close-chat svg{width:16px;height:auto;fill:#e6f9d2}.jamwa{display:block;float:right;font-size:11px;color:#717171}#tooltip i,.box-msg,.formtamv label>i,.jamwa div{display:inline-block}#btn-chat{float:right;margin-top:15px}.first-msg{background-color:#e6ddd4;padding:20px 20px 20px 10px}#tooltip,.box-msg{padding:10px 20px}.first-msg::before{display:block;position:absolute;content:"";left:0;top:0;height:100%;width:100%;z-index:0;opacity:.08;background-image:url(https://goomsite.github.io/img/wa-min.webp)}#tooltip:after,.box-msg:before{content:''}.box-msg{background:#e4fec8;box-shadow:0 1px 5px rgba(0,0,0,.13);color:#333;font-size:14px;line-height:1.7;border-radius:0 7.5px 7.5px;margin-left:30px;z-index:1}.box-msg:before{border-width:17px;border-style:none solid solid none;border-color:#e4fec8 #e4fec8 transparent transparent;top:0;left:-16px}.box-msg span.chat-nama{font-size:13px;line-height:18px;color:rgba(0,0,0,.4)}.box-msg span.chat-cript{margin-bottom:5px}#tooltip{text-align:center;color:#fff;background:#333;z-index:100;border-radius:4px;font-size:90%;box-shadow:0 1px 10px rgba(0,0,0,.6)}#tooltip i{margin:5px}#tooltip:after{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #333;left:50%;bottom:-10px;margin-left:-10px}#tooltip.top:after{border-top-color:transparent;border-bottom:10px solid #333;top:-20px;bottom:auto}#tooltip.left:after{left:10px;margin:0}#tooltip.right:after{right:10px;left:auto;margin:0}.formtamv *{outline:0;text-decoration:none}.formtamv .focus{box-shadow:inset 0 0 0 1px #36c83f}.formtamv label{display:block;width:100%;margin:0;padding:0}.formtamv label>input,.formtamv label>select,.formtamv label>textarea{position:relative;z-index:1;border:none;background:#f9f9f9;box-shadow:inset 0 0 0 1px rgba(0,0,0,.02),inset 1px 1px 5px rgba(0,0,0,.05);width:100%;border-radius:50px;padding:10px 20px 0}.formtamv label>i{position:absolute;z-index:0;vertical-align:top;width:40px;text-align:center;font-size:20px;height:auto;background:0 0;box-shadow:none;top:3px;left:0;color:rgba(0,0,0,.2)}.formtamv label small{position:relative;display:block;margin-top:10px;z-index:3}.formtamv label small>a.tooltip{margin-left:10px;font-size:20px;vertical-align:middle;display:inline-block;color:rgba(0,0,0,.4)}.formtamv label small>a.tooltip:hover{color:rgba(0,0,0,.6)}.formtamv label small a{font-weight:700}.formtamv select::-ms-expand{display:none}.formtamv select{-moz-appearance:none;-webkit-appearance:none;appearance:none}.formtamv select option{font-size:18px;background:#edf8f5;color:rgba(0,0,0,.7);text-shadow:none}.formtamv .nomor_whatsapp[type=number]::-webkit-inner-spin-button,.formtamv .nomor_whatsapp[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.nomor_whatsapp[type=number]{-moz-appearance:textfield}.formtamv label>:focus{background:0 0}.formtamv label textarea{min-height:20px;resize:none;margin-bottom:0}.formtamv label .validasi{position:absolute;z-index:2;right:-30px;background:#36c83f;color:#fff;padding:5px 10px;border-radius:3px;font-size:80%;box-shadow:0 5px 10px rgba(0,0,0,.1);transition:.4s;visibility:hidden;opacity:0;display:inline-block!important}.formtamv label .validasi.show{visibility:visible;opacity:1;bottom:100%}.formtamv label .validasi:after{position:absolute;top:100%;right:10px;content:"";border:8px solid;border-color:#36c83f transparent transparent}.nime,.nime:after,.nime:before{position:absolute;border-radius:100%}a.close-chat{position:absolute;top:10px;right:13px;color:#c3ffc7;font-size:18px;z-index:10}.nime{display:block;width:10px;height:10px;background-color:#05d436;right:-2px;bottom:8px}.nime:after,.nime:before{content:"";width:24px;height:24px;opacity:0;top:-8px;left:-8px;background:#05d436}.nime:before{-webkit-animation:2s ease-out infinite nime;animation:2s ease-out infinite nime}.nime:after{z-index:1;-webkit-animation:2s ease-out .4s infinite nime;animation:2s ease-out .4s infinite nime}@-webkit-keyframes nime{0%{opacity:0;-webkit-transform:scale(.80);transform:scale(.10)}5%{opacity:1}100%{opacity:0}}@keyframes nime{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}5%{opacity:1}100%{opacity:0}}@keyframes showhide{from{transform:scale(.5);opacity:0}}@keyframes showchat{from{transform:scale(0);opacity:0}}.hide,.show{animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}@media screen and (max-width:480px){#whatsapp-chat{width:auto;left:5%;right:5%;font-size:80%}}.hide{display:none}
JavaScript Code Of WhatsApp Chat To Blogger Website

<script language='javascript' type='text/javascript'>//<![CDATA[function kirimWA(e){var t=!0;if(jQuery("#"+e+" .wajib").each(function(){""!=$.trim(jQuery(this).val())&&"default"!=$.trim(jQuery(this).val())||jQuery(this).addClass("focus")}),jQuery("#"+e+" .wajib").each(function(){return""==$.trim(jQuery(this).val())?(t=!1,jQuery(this).parents("label").find(".validasi").addClass("show"),jQuery(this).focus(),!1):"default"==$.trim(jQuery(this).val())?(t=!1,jQuery(this).parents("label").find(".validasi").addClass("show"),!1):void 0}),t===!0){var i="",a="https://web.whatsapp.com/send";if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)&&(a="whatsapp://send"),"konsultasi"===e)var s=880,r=1406070407,n="Admin:- ",o="Howdy! I need your help, please...",l=(jQuery("#"+e+" .title-content").text(),jQuery("#"+e+" .pesan").val()),i=a+"?phone="+s+r+"&text=*"+o+" "+n+"...* %0A%0A"+l;jQuery(this).attr("href",i);var u=960,h=540,c=Number(screen.width/2-u/2),d=Number(screen.height/2-h/2),y=window.open(this.href,"","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=1, copyhistory=no, width="+u+", height="+h+", top="+d+", left="+c);return y.focus(),!1}}window.addEventListener("load",function(){var e=jQuery("title").text();jQuery(".waFix").on("click",function(){jQuery(this).removeClass("show"),jQuery("title").text(e)}),jQuery(".formWA input, .formWA textarea").on("keypress",function(){13===event.keyCode&&jQuery(this).parents(".formWA").find(".submit").trigger("click")}),jQuery(".formWA .wajib").each(function(){title=jQuery(this).attr("placeholder"),label=jQuery(this).parents("label"),jQuery('<span class="validasi">(Required)</span>').appendTo(label)}),jQuery(".formWA .wajib").keyup(function(){""!=jQuery(this).val()&&(jQuery(this).removeClass("focus"),jQuery(this).parents("label").find(".validasi").removeClass("show"))}),jQuery(".formWA select").change(function(){jQuery(this).removeClass("focus"),jQuery(this).parents("label").find(".validasi").removeClass("show")})},!1),jQuery(".formWA .submit").on("click",function(){return kirimWA(jQuery(this).parents(".poptamv").attr("id")),!1}),$(document).on("click",".close-chat",function(){$("#whatsapp-chat").addClass("hide").removeClass("show")}),$(document).on("click",".imam-live",function(){$("#whatsapp-chat").addClass("show").removeClass("hide")});//]]></script>

WhatsApp Chat HTML Code For Website - Preview & Test

Browse newly or reload your homepage. Now you will see the WhatsApp Chat option in the right-bottom corner of your website. Attached picture for your reference.

Full Guidelines are here:
WhatsApp Chat HTML Code For Website

How To Add Facebook Chat Plugin In Blogger?

Imam Uddin — Fri, 21 Jan 2022 16:31:47 +0000

Embed Facebook Messenger Chat widget in blogger

Here are the attached codes; Just copy and paste to your blogger website or any other website. Then change the Facebook Page ID number and WhatsApp Number.

<script type="text/javascript">
    (function () {
        var options = {
            facebook: "109530127628507", // Facebook page ID
            whatsapp: "+8801406070407", // WhatsApp number
            call_to_action: "Message Me!", // Call to action
            button_color: "#4caf50", // Color of button
            position: "left", // Position may be 'right' or 'left'
            order: "facebook,whatsapp", // Order of buttons
            pre_filled_message: "Hey There 🤝! How Can I Help You Today?", // WhatsApp pre-filled message
        };
        var proto = document.location.protocol, host = "getbutton.io", url = proto + "//static." + host;
        var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
        s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
        var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
    })();
</script>

Bonus: WhatsApp messenger is also added
Original Post Is Here: **
**Add Facebook Chat/Messenger to Blogger Website

Tags:
How to Add Facebook Chat/Messenger to Blogger Website
Facebook Chat Plugin - Messenger Platform **
**How do I add the Facebook chat plugin to Blogger?
How do you add a chatbot on Blogger?
How do I integrate Facebook chat into my website?

How To Create Stylish HTML Sitemap Page In Blogger?

Imam Uddin — Thu, 20 Jan 2022 08:13:26 +0000

Steps to add an HTML sitemap in Blogger

To add a stylish sitemap to your Blogger website you need to add an HTML code and create a page named sitemap.

Step-1: Go to your Blogger Dashboard and open the Page section.
Step-2: Create a new page and switch the Editor to HTML view.
Step-3: Now copy the below code and paste it into it.
Step-4: Now set the title as Sitemap and publish the page.

Now you have successfully created your stylish HTML sitemap on the Blogger website.

<h2>Welcome To Sitemap Of Imam Uddin; imamuddinwp</h2>
  <p>It's an HTML sitemap where you will get all the blog post by category, powered by Imam Uddin, imamuddinwp. Someone can easily navigate to the post. </p>
  <img alt="sitemap-html-sitemap-in-blogger-imamuddinwp" border="0" data-original-height="590" data-original-width="923" src="https://blogger.googleusercontent.com/img/a/AVvXsEja2CqLgXNbPC094eF4sNZmpyeui0Q7zAqzN39EQy4xmW5Meb2yvSgPnHc5ffFBjEy6w-GqoH2LTH_umcz_2QY0qh_OQn2O7zCMKNmHOeF_A-Y1rxeePm_ZrjtXmnS-tmnUMLi9zn9-BXwzJ5buBiocYT7gVcRFXiriE1gLLhC84KiVojpk7MlWoQqdxQ"/>

 <div class="separator" style="clear: both; text-align: center;"> <a href="https://1.bp.blogspot.com/-_9ORfH1qwXw/Xclr6MzOoQI/AAAAAAAABL0/UCdLuHsJfZwGMpPgwIRGR4-ayzrssW_cACLcBGAsYHQ/s1600/Simple%2BPitch%2BDeck%2BPresentation%25282%2529.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Sitemap Arlina Code" class="lazyload" data-original-height="444" data-original-width="1200" src="https://1.bp.blogspot.com/-_9ORfH1qwXw/Xclr6MzOoQI/AAAAAAAABL0/UCdLuHsJfZwGMpPgwIRGR4-ayzrssW_cACLcBGAsYHQ/s1600/Simple%2BPitch%2BDeck%2BPresentation%25282%2529.png" style="border: none;" title="Sitemap Arlina Code" /></a></div> <div id="bp_toc"> </div> <script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=99999&amp;callback=loadtoc" type="text/javascript"></script> <style scoped="" type="text/css">#comments,#Label1,#FollowByEmail1{display:none}#bp_toc{color:#000;margin:0 auto;max-height:686px;overflow:hidden;overflow-y:auto}span.toc-note{margin:0 auto 25px auto;text-align:center;line-height:normal;display:table;position:relative;overflow:hidden;font-size:14px;padding:10px 20px;background:#007bff;background-image:linear-gradient(50deg,#ff4169,#8b41f6);background-size:100%;color:#fff;border-radius:99em;font-weight:500;transition:all .3s}span.toc-note:hover{background-size:200%}.toc-header-col1{padding:10px;background-color:#f5f5f5;width:250px}.toc-header-col2{padding:10px;background-color:#f5f5f5;width:75px}.toc-header-col3{padding:10px;background-color:#fff;width:125px}#bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:1px solid rgba(0,0,0,0.05);background:#fff}#bp_toc td.toc-header-col1{}#bp_toc td.toc-header-col2{}#bp_toc td.toc-header-col3{}.post td{background:transparent}#bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:1px solid rgba(0,0,0,0.05)}#bp_toc td a{background:transparent;color:#222;float:none;border-radius:0;padding:0;font-size:100%;display:initial;box-shadow:none}#bp_toc td a:hover{color:#0984e3}.toc-header-col1 a:link,.toc-header-col1 a:visited,.toc-header-col2 a:link,.toc-header-col2 a:visited,.toc-header-col3 a:link,.toc-header-col3 a:visited{font-size:13px;text-decoration:none;color:#aaa;font-weight:500;letter-spacing:0.5px}.toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover{text-decoration:none}.toc-entry-col1,.toc-entry-col2,.toc-entry-col3{padding:10px 5px;font-size:90%}.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a{color:#000}.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover{color:#3498db}#bp_toc table{width:100%;margin:0 auto;counter-reset:rowNumber}.toc-entry-col1{counter-increment:rowNumber}#bp_toc table tr td.toc-entry-col1:first-child::before{content:counter(rowNumber);display:inline-block;min-width:38px;margin-right:.7em;background:#fc5c65;color:#fff;border-radius:99em;font-weight:500;text-align:center;font-size:12px;padding:0;line-height:1.7} #bp_toc td.toc-entry-col1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px} #bp_toc::-webkit-scrollbar{-webkit-appearance:none;width:4px;height:5px}#bp_toc::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px}#bp_toc::-webkit-scrollbar-track{background-color:transparent}#bp_toc::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.25)} @media screen and (max-width:768px) { #bp_toc td.toc-entry-col1{white-space:normal;overflow:visible;text-overflow:initial;max-width:100%}#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3,#bp_toc table tr td.toc-entry-col1:first-child::before{display:none}} </style>

Stylish HTML Sitemap Page In Blogger Demo

Original Tutorial Is Here:
How To Create Stylish HTML Sitemap Page In Blogger?

Image To Text Conversion By Using Google Drive

Imam Uddin — Sat, 13 Nov 2021 07:54:24 +0000

Most of the time we need to copy text from an image. Then we usually search this topic on Google or YouTube. But today I will show a very easy and simple way to get text from images like OCR (Optical Character Recognition), jpg, png, and many more. So Let's start with 'image editable text with google drive'.

How can I convert image to text?

There are a lot of online tools to convert images to text. Just go to google or any other popular search engine and type 'image to text', You will definitely find many more free and premium / paid tools to convert images to text. Choose your favorite one from your search list.

Know from Google Support page: Convert PDF and photo files to text.

How can I convert picture to text free?

To covert picture to text for free, please follow the below steps;

5 Easy Steps Of Convert Image To Editable Text By Using Google Drive

Image editable text with google drive; Let us follow the below 5 easy and simple steps to get editable text from an image, screenshot, picture, photo, or etc.

Step #01:
Simply log in to your google drive by using your email account. Step #02:
Then Upload your desired image from a directory.
Step #03:
After completing the upload, Right Click on the uploaded image in google drive.
Step #04:
Then go to the option 'Open With' and then select 'Google Docs'. It will open in a new tab in your browser. Please see the below image for a better understanding:
Step #5:
All Done! This is the Final Step; Wait a little moment to convert your image into a text or word document. Here is the screenshot for downloadable file types:

Now your image containing text is editable and copy able. And also it is downloadable in MS Word Format. You can simply copy the text and paste it into your desired location.

How do I convert a picture to text in Word?

There is two easy and very simple way to get a text or copy text from an image or picture. The First One is by online free tools and The Second One is Google Drive. I suggest my friends use google drive to get editable text from a picture or image. Because it is very much easy way. In this way no need for any other software to convert images into words or text.

How Can I Convert An Image To Editable Text Without Any software?

You can easily convert an image of OCR, png, jpg, or any other format without any software. Google Drive is a very interesting and amazing way to get a text from pictures. Here I have also attached a YouTube video. This video I have shown to get an editable and downloadable text from images by using google drive.

https://www.youtube.com/embed/46L7dtVrk1M

Conclusion:

Thank you for reading this post. If you have more questions on Image To Text By Using Google Drive, simply comment here. I'll try my best to reply.

Visit my website:

Dental Clinic WiKi

How To Create HTML Sitemap Page In Blogger (BlogSpot) Site 2021

Imam Uddin — Wed, 20 Oct 2021 16:08:26 +0000

How to Add Sitemap Page on Blogger:

Follow Below Steps To Add HTML Sitemap To your blogger/BlogSpot site in 2021

Step 1. Login to your Blogger account, then go to Pages > New page.
Step 2. Enter "Site Map" in Page title field.
Step 3. Switch to HTML mode.
Step 4. Enter following inside blank field.
Note: Clear any default code inside HTML field before pasting provided code.


<style type="text/css">

 #sitemap{width:100%;margin:3px auto;-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
.labl{color:#ff0000;font-weight:bold;margin:0 -5px;padding:1px 0 2px 11px;background:-moz-linear-gradient(right,#c2eafe 0%,#4caf50 40%);background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#4caf50),color-stop(1,#000));border:1px solid #fff;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;box-shadow:3px 3px 1px #a0a0a0;-moz-box-shadow:3px 3px 1px #a0a0a0;-webkit-box-shadow:3px 3px 1px #a0a0a0;display:block;}
.labl a{color:#fff;font-size: 20px;}
.labl:first-letter{text-transform:uppercase;}
.new{color:#ff0000;font-weight:bold;font-style:italic;}
.postname{font-weight:normal;background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);background:-webkit-gradient(linear,left 80,right 10,color-stop(0.50,#fff),color-stop(1,#00000078));}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>

<br />

<div id="sitemap">

<script type="text/javascript">
  eval(function(p,a,c,k,e,d)
{e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};
if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('2 3=F K();2 v=F K();2 w=F K();2 q=F K();2 6=F K();2 y=F K();2 i="N";2 1d=1s;2 2T=2M;2 E="";2 1j=0;r 2J(a){r b(){4("A"1G a.1h){2 d=a.1h.A.u;1j=d;C=0;B(2 h=0;h<d;h++){2 n=a.1h.A[h];2 e=n.P.$t;2 m=n.1N.$t.1t(0,10);2 j;B(2 g=0;g<n.J.u;g++){4(n.J[g].Z=="25"){j=n.J[g].s;Q}}2 o="";B(2 g=0;g<n.J.u;g++){4(n.J[g].Z=="1Q"){o=n.J[g].s;Q}}2 c="";4("12"1G n){B(2 g=0;g<n.12.u;g++){c=n.12[g].26;2 f=c.1m(";");4(f!=-1){c=c.1t(0,f)}6[C]=c;3[C]=e;q[C]=m;v[C]=j;w[C]=o;4(h<10){y[C]=16}G{y[C]=1s}C=C+1}}}}}b();i="N";O(i);1i();1d=16;1H();9.x()}r 1Y(a){1y(0,0);E=a;H(E)}r 1x(){1i();E="";H(E)}r O(d){r c(e,g){2 f=3[e];3[e]=3[g];3[g]=f;2 f=q[e];q[e]=q[g];q[g]=f;2 f=v[e];v[e]=v[g];v[g]=f;2 f=6[e];6[e]=6[g];6[g]=f;2 f=w[e];w[e]=w[g];w[g]=f;2 f=y[e];y[e]=y[g];y[g]=f}B(2 b=0;b<3.u-1;b++){B(2 a=b+1;a<3.u;a++){4(d=="N"){4(3[b]>3[a]){c(b,a)}}4(d=="1b"){4(3[b]<3[a]){c(b,a)}}4(d=="1e"){4(q[b]>q[a]){c(b,a)}}4(d=="V"){4(q[b]<q[a]){c(b,a)}}4(d=="1o"){4(6[b]>6[a]){c(b,a)}}}}}r 1i(){i="1o";O(i);2 a=0;2 b=0;T(b<3.u){I=6[b];X=a;1C{a=a+1}T(6[a]==I);b=a;1f(X,a);4(b>3.u){Q}}}r 1f(d,c){r e(f,h){2 g=3[f];3[f]=3[h];3[h]=g;2 g=q[f];q[f]=q[h];q[h]=g;2 g=v[f];v[f]=v[h];v[h]=g;2 g=6[f];6[f]=6[h];6[h]=g;2 g=w[f];w[f]=w[h];w[h]=g;2 g=y[f];y[f]=y[h];y[h]=g}B(2 b=d;b<c-1;b++){B(2 a=b+1;a<c;a++){4(3[b]>3[a]){e(b,a)}}}}r H(a){2 l=0;2 h="";2 e="1Z 1k";2 m="14 13 1W 1V 1R";2 d="1S";2 k="14 13 1T 1U 20";2 c="21";2 j="";4(i=="N"){m+=" (28)";k+=" (18 S)"}4(i=="1b"){m+=" (15)";k+=" (18 S)"}4(i=="1e"){m+=" (15)";k+=" (18 S)"}4(i=="V"){m+=" (15)";k+=" (29 S)"}4(E!=""){j="14 13 2a 27"}h+="<1D>";h+="<L>";h+=\'<5 7="8-R-1c">\';h+=\'<a s="17:1w();" P="\'+m+\'">\'+e+"</a>";h+="</5>";h+=\'<5 7="8-R-19">\';h+=\'<a s="17:1u();" P="\'+k+\'">\'+d+"</a>";h+="</5>";h+=\'<5 7="8-R-1a">\';h+=\'<a s="17:1x();" P="\'+j+\'">\'+c+"</a>";h+="</5>";h+=\'<5 7="8-R-11">\';h+="U 24";h+="</5>";h+="</L>";B(2 g=0;g<3.u;g++){4(a==""){h+=\'<L><5 7="8-A-1c"><a s="\'+v[g]+\'">\'+3[g]+\'</a></5><5 7="8-A-19">\'+q[g]+\'</5><5 7="8-A-1a">\'+6[g]+\'</5><5 7="8-A-11"><a s="\'+w[g]+\'">U</a></5></L>\';l++}G{z=6[g].1m(a);4(z!=-1){h+=\'<L><5 7="8-A-1c"><a s="\'+v[g]+\'">\'+3[g]+\'</a></5><5 7="8-A-19">\'+q[g]+\'</5><5 7="8-A-1a">\'+6[g]+\'</5><5 7="8-A-11"><a s="\'+w[g]+\'">U</a></5></L>\';l++}}}h+="</1D>";4(l==3.u){2 f=\'<D 7="8-1E">1l 1O \'+3.u+" 1k<M/></D>"}G{2 f=\'<D 7="8-1E">1l \'+l+" 1M 1K 1L \'";f+=E+"\' 22 "+3.u+" 2k 1k<M/></D>"}2 b=9.W("8");b.1g=f+h}r 1H(){2 a=0;2 b=0;T(b<3.u){I=6[b];9.x("<p/>");9.x(\'<D 7="2K"><a s="/2L/2H/\'+I+\'">\'+I+"</a></D><1z 7=\'2G\'>");X=a;1C{9.x("<1p>");9.x(\'<a s="\'+v[a]+\'">\'+3[a]+"</a>");4(y[a]==16){9.x(\' - <D 7="F">2F!</D>\')}9.x("</1p>");a=a+1}T(6[a]==I);b=a;9.x("</1z>");1f(X,a);4(b>3.u){Q}}}r 1w(){4(i=="N"){i="1b"}G{i="N"}O(i);H(E)}r 1u(){4(i=="V"){i="1e"}G{i="V"}O(i);H(E)}r 1A(){4(1d){H(E);2 a=9.W("1F")}G{2R("2B 2A... 1q 2l 2m")}}r 2n(){2 a=9.W("8");a.1g="";2 b=9.W("1F");b.1g=\'<a s="#" 2e="1y(0,0); 1A(); 2d.2f(\\\'8-2h\\\',\\\'2o\\\');">?? 1l 2p 2w</a> <2x 2y="1r://2z.2v.1I/2u.2q"/>\'}r 2s(){B(2 a=0;a<1j;a++){9.x("<M>");9.x(\'2i 2E         : <a s="\'+v[a]+\'">\'+3[a]+"</a><M>");9.x(\'U 2I  : <a s="\'+w[a]+\'">\'+3[a]+"</a><M>");9.x("<M>")}};9.x("<D 2C=\'Y-2Y:2t;2r:2g;Y-2j:2Q;2P:2O 2S 0 0;\'><a P=\'1B 1q 1v 2X 2W - 2V 1v 1n.2U.2N\' s=\'1r://1n.2D.1I\' 2c=\'1P\' Z=\'1J\'><Y 2b=\'#23\'>1B 1X</Y></a></D>");',62,185,'||var|postTitle|if|td|postLabels|class|toc|document|||||||||sortBy||||||||postDate|function|href||length|postUrl|postMp3|write|postBaru||entry|for|ii|span|postFilter|new|else|displayToc|temp1|link|Array|tr|br|titleasc|sortPosts|title|break|header|first|while|Download|datenewest|getElementById|firsti|font|rel||col4|category|untuk|Klik|ascending|true|javascript|newest|col2|col3|titledesc|col1|tocLoaded|dateoldest|sortPosts2|innerHTML|feed|sortlabel|numberfeed|Artikel|Menampilkan|lastIndexOf|www|orderlabel|li|TOC|http|false|substring|toggleDateSort|by|toggleTitleSort|allPosts|scroll|ol|showToc|Blogger|do|table|note|toclink|in|displayToc2|com|nofollow|dengan|kategori|artikel|published|Semua|_blank|enclosure|judul|Tanggal|Sortir|bedasarkan|berdasarkan|sortir|Widgets|filterPosts|Judul|tanggal|Kategori|dari|ff5f00|MP3|alternate|term|semua|descending|oldest|menampilkan|color|target|Effect|onclick|toggle|right|result|Post|family|Total|is|loading|hideToc|blind|Daftar|gif|float|looptemp2|0px|new_1|googlepages|Isi|img|src|radiorodja|wait|Just|style|bloggerwidgetgenerators|Link|New|postname|label|mp3|loadtoc|labl|search|250|net|20px|margin|arial|alert|5px|numChars|intert3chmedia|Style|Farhan|Abu|size'.split('|'),0,{}))
</script>

<script src="https://imamuddinwp.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">

</script></div>

Note: Dismiss any type of HTTPS errors.
Step 5. Configuration

Replace https://imamuddinwp.blogspot.com with your blog URL.

Step 6. Under Page settings > inside Search Description field add page description.
Step 7. Click on Options > under Reader comments > select Don't allow > Done.

Step 8. Click Publish.
Note: This tutorial is only about to add Simple HTML Sitemap. You can apply different colorful themes on this sitemap.

Example Page is Here:
https://imamuddinwp.blogspot.com/p/sitemap-imam-uddin-imamuddinwp.html

How To Add A 'Table Of Contents' - TOC in Blogger Post In 2021?

Imam Uddin — Wed, 20 Oct 2021 15:19:18 +0000

When you write or publish a post or article to your post, if it has a Table Of Contents aka TOC; the post looks more professional and also creates SEO value. In this post, I'll try to cover how to add a table of contents TOC in blogger posts.

Table Of Contents TOC in Blogger Post In 2021

For Good ranking, it's very important and also Good for SEO. I think it is very important for all bloggers who have a blog on the blogger platform. So Let's start to know how to add the TOC table of contents to your blogger post.

What is a Table Of Contents - TOC?

Whenever you are reading this paragraph, I think you have already noticed 'Table Of Contents TOC' in this post! And it is also a Clickable Table Of Contents! Right? By the way, in general, the title of the paper at the very top, followed by the chapter names and subtitles in chronological order is known as Table Of Contents. So a table of contents in blogger means basically a quick link or a jump link that helps the readers to skip to a specific part or heading with a single click. It highlights the parts of the blog post in order to improve the user experience.

How to Use Table of Contents on the Website?

Based on the website platform, there are many ways to add TOC to different websites. As an example, In the WordPress platform, there are many plugins for the table of contents like:

Nowadays like RankMath most of the popular SEO Plugins offer you to use it.

In the blogger platform, some premium blogger templates allow to use of Table Of Contents; But in this post, I'll describe how to add the table of contents to your blogger post for free.

SEO-Value Of TOC

As you may know 'Content Is King!' or content is most important for SEO, search engines won't have enough information to index your web pages correctly and help you rank if you don't have content. Adding a table of contents (TOC) to your blogger blog post will improve SEO in many ways like improvement of the usability of your post, once it's easier for the reader to see the data you cover in your post and supply a way for the reader to jump to sections of interest, the reader can spend more time on your page.

A blog post with a 'Table Of Contents' has a more professional appearance, stunning, and Eye-Catching look than a post without one.

A good table of contents will be easy to read, accurately formatted, and completed last so that it is 100% accurate to readers. So, I think you would not skip TOC to your blog post.

Get Jump Links in Google Search

As per the experiences of professional SEO experts, Google may include a 'Jump To' link in the SERP when it finds a table of contents in an article. It helps to improve CTR tremendously. Google treated it at its discretion, like rich snippets, by simply including a table of contents, there is no guarantee that you will get the 'Jump To' links. It is actually very beneficial especially for the large article with multiple headings. SEO Experts strongly recommend using the 'Table Of Contents' in post for your website's visitors.

Advantages Of Using Table Of Contents TOC In Blog Post

In a blog post, table of contents links are not new either but one that provides several values regardless of how search engines include them in SERP. A well-planned TOC can help us below ways:

Increase user experience to your website.
Show your contents well-structured, and well-formatted.
Helps to navigate easily between different content parts.
Increase CTR from search
Provide a clear and easy road map to visitor

How to add a simple table of content in blogger posts?

So, now we will follow below simple guide to add a TOC to our blogger post. Get set ready to do it correctly by following some easy steps.

Disclaimer: before you apply these steps, you should take a backup to your blogger template. It's very simple to backup. You may read this to backup your blogger website: Back up or Import Your Blog. I have added the below image to understand how to back up your blogger template or blogger website from the blogger dashboard.

Steps to create TOC In Blogger:

Go to your blogger dashboard by login to the blogger
Go to 'Edit HTML' from the 'Theme' option
Then search </head>
After that Copy the following code and paste above </head>

<!-- Table of contents Javascript start-->

 <script type='text/javascript'>              
//<![CDATA[           
//*************TOC plugin by MyBloggerTricks.com           
function mbtTOC() {var mbtTOC=i=headlength=gethead=0;           
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)           
{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}           
//]]>              
</script>
<!-- Table of contents Javascript end -->

After that search (by typing 'Ctrl+F' in keyboard) ]]></b:skin>
And copy the following code and paste above ]]></b:skin>

.mbtTOC{border:5px dashed dodgerblue;box-shadow:2px 0px 10px 4px silver;background-color:#f2f2f2;color:black;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:oswald, arial;display: block;width: 70%;}           
.mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}           
.mbtTOC ul {list-style:none;}           
.mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;}           
.mbtTOC a{color:#0080ff;text-decoration:none;}           
.mbtTOC a:hover{text-decoration:underline; }
.mbtTOC button{background:#f2f2f2; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:black;padding:0 0 0 15px;} 
.mbtTOC button:after{font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

Here I have attached an image for a better understanding of TOC in the blogger theme!

After That search for <data:post.body/>

Note:- You might found more than one code, simply replace the codes with the following codes:

<div id="post-toc"><data:post.body/></div>

After doing all the steps, just save the theme.
Go to Blogger Dashboard.
Choose your desired post to apply to TOC.
Open in HTML View
Choose the right place to show TOC.
Copy the Code and paste those places.

<div class="mbtTOC"> 
    <button onclick="mbtToggle()">Table Of Contents ✓</button> 
    <ul id="mbtTOC"></ul> 
    </div>

After that, go to the bottom of the post by scroll down.
Be sure the post is in HTML view
Copy the java scripts
Paste the code under the post where the post will end.


<pre class="wp-block-code"><code>&lt;script&gt;mbtTOC();&lt;/script&gt;</code></pre>

See the below image for a better understanding of the HTML view from my blog post:

Also please see it:

After completing all these steps, just save your post. You Are All Done! Now you can see the Table of Contents -TOC in Your Blog post. Here I have attached a screenshot of TOC from this post.

Pro Tips For Smooth Scrolling Of TOC

For easy smooth scroll and eye-catching scroll, you can easily add 'smooth scroll effects' to the Table of contents. It will also work as a smooth scroll on the whole website for any jumping links.

Just add the below CSS file to your blogger theme above the ]]></b:skin> tag or paste it in the "add CSS" section of your blogger theme customizer.


html{
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion:reduce){
    html{
        scroll-behaviour: auto;
    }
}

Conclusion:- If you face any problems in adding a table of contents in your blogger post, just comment here with details. I'll try my best to solve it asap. Thanks for reading this post, powered by Imam Uddin; imamuddinwp.

Best SEO Expert In BD - Imam Uddin | imamuddinwp | Portfolio Template

Imam Uddin — Tue, 10 Nov 2020 03:16:23 +0000

Hey there, it's me! Best SEO Expert In Chittagong - Best SEO Expert In BD - Imam Uddin, imamuddinwp; A passionate Front-End Web Developer & SEO Expert. I always loves to play with codes, blogging, Social Media, Search Engine Optimization, Local SEO, CMS (WordPress, WiX), Front-End Development andand especially Digital Marketing. I also love to keep me up-to-date with new technologies & innovative creations.
To review my online presence, find me in a popular search engine by searching with the keyword 🕵 'imamuddinwp' or 'Imam Uddin'. I'm here to say you that I have published my portfolio on GitHub.
Freelancing Geek

Embed Or Display Image to HTML page from Google Drive

Imam Uddin — Thu, 03 Oct 2019 04:52:28 +0000

Hey there; here is a secret tip for you to display images from google drive to your HTML web page.

Step:01 Upload your image to google drive.
Step:02 Share your image from the sharing option.
Step:03 Copy your sharing link.
Your sharing link looks like as shown below:
https://drive.google.com/file/d/14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp/view?usp=sharing

Step:04 copy the id from your link, in the above link, id is: 14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp

Step:05 Have a look at the below link and replace the ID.
https://drive.google.com/thumbnail?id=1jNWSPr_BOSbm7iIJQTTbl7lXX06NH9_r
After Replace ID: https://drive.google.com/thumbnail?id=14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp

Step:06 Now insert the link https://drive.google.com/thumbnail?id=14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp to your HTML img tag.

Note: This trick will more effective for you when you want to share your profile picture or portfolio image in your freeCodeCamp account, here is my freeCodeCamp Profile: https://www.freecodecamp.org/imamcu07

Thanx for reading this post.
If you have any suggestions, please place a comment.

imamcu07

Bootsrap 4 Collapse | Accordion

Imam Uddin — Thu, 03 Oct 2019 03:21:17 +0000

<!doctype html>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<title>Bootstrap Collapse Accordion</title>
<style>


        .card-header a {
          display: block;
          position: relative;
        }
        .card-header a:after {
          content: "\f06e"; 
          font-family: 'FontAwesome';
          position: absolute;
          right: 0;
        }
        .card-header  a[aria-expanded="true"]:after {
          content: "\f410"; 
        }


</style>

Bootstrap Collapse Accordion!!!

  <button class="btn btn-primary mb-4" data-target="#collaps-1" data-toggle="collapse">Read More</button>

  <div class="collapse show " id="collaps-1">
    <div class="card">
      <div class="card-body">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit repellendus placeat cumque nesciunt laborum ab cupiditate a laudantium, deserunt vero odit provident ratione voluptas unde? Quidem officiis eius obcaecati perferendis, fugit dolor eveniet sed fuga magni? Hic earum dolore ut natus, velit dicta totam possimus. Laborum eius quaerat porro quam in sit temporibus illo? Incidunt quaerat nostrum, magnam facilis laudantium deleniti inventore quod odio ipsam exercitationem perferendis neque ea minima architecto totam provident. Itaque, sed repellat, ad atque consequatur dignissimos magnam maiores aliquam molestias perferendis velit veniam iste laudantium, vel corrupti eveniet modi aliquid ipsa voluptatem! Sequi deleniti aliquam vel!</p>
      </div>
    </div>
  </div>




  <div id="accordion" role="tablist">
    <div class=" card m-1">
      <div class="card-header " role="tab">
        <h5 class="mb-0">
          <a data-toggle="collapse" href="#section-1" class="text-decoration-none">Section 1 </a>
        </h5>
      </div>
           <div class="collapse " id="section-1" data-parent="#accordion">
             <div class="card-body">
            <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor et corporis perspiciatis culpa quos aspernatur maxime iste repellat delectus, error officiis necessitatibus soluta eius quas labore fugiat nulla aliquam saepe.</p>
             </div>
           </div>
    </div>

    <div class="card m-1">
        <div class="card-header" role="tab">
          <h5 class="mb-0">
            <a data-toggle="collapse" href="#section-2" class="text-decoration-none" >Section 2 </a>
          </h5>
        </div>
             <div class="collapse " id="section-2" data-parent="#accordion">
               <div class="card-body">
              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor et corporis perspiciatis culpa quos aspernatur maxime iste repellat delectus, error officiis necessitatibus soluta eius quas labore fugiat nulla aliquam saepe.</p>
               </div>
             </div>
      </div>

      <div class="card m-1 ">
          <div class="card-header" role="tab">
            <h5 class="mb-0">
              <a data-toggle="collapse" class="text-decoration-none"  href="#section-3">Section 3 </a>
            </h5>
          </div>
               <div class="collapse " id="section-3" data-parent="#accordion">
                 <div class="card-body">
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor et corporis perspiciatis culpa quos aspernatur maxime iste repellat delectus, error officiis necessitatibus soluta eius quas labore fugiat nulla aliquam saepe.</p>
                 </div>
               </div>
        </div>

        <div class="card m-1 ">
            <div class="card-header" role="tab">
              <h5 class="mb-0">
                <a data-toggle="collapse" class="text-decoration-none" href="#section-4">Section 4 </a>
              </h5>
            </div>
                 <div class="collapse " id="section-4" data-parent="#accordion">
                   <div class="card-body">
                  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor et corporis perspiciatis culpa quos aspernatur maxime iste repellat delectus, error officiis necessitatibus soluta eius quas labore fugiat nulla aliquam saepe.</p>
                   </div>
                 </div>
          </div>
  </div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>