in , ,

Add a pure CSS Call To Action for Blogger

add follow us to blog,add a call to action, call to action, call to action for blogger, subscribe button, buttons for blogger, blogger widgets, blogger, mashbyte,cobietech,......

This tutorial is about the simple ways of making a follow us button or call to Action for our site which i know many always search for, so in my research, i came out with this simple means of developing a follow or subscribe button using just css…

So let’s move ahead and follow the procedures below to arrive at the solution….

HOW TO ACCESS THE FRAMEWORK?

  1. Go To Blogger.com 
  2.  Select Your Blog.
  3.  Select Theme >>  Always Remember to Backup first!!!
  4. Then click on the arrow near ‘Customize’ and click on Edit HTML

Now search for “]]></b:skin>” then Copy and Paste the CSS code below just above it.

Watch the Video below for Demo

CSS TYPE 1 No ICONS


/* Social link Redesign by CobieGh */
<div id="borderDemo" style="background: rgb(51, 255, 243); border-radius: 13px 1px; border: 3px solid rgb(244,52,18); heigh: 262px; width: responsive;">
<center> <b><span style="font-size: large;"><span style="color: #ff00fe;">Keep the conversation going...</span>
Join our <span style="color: #3d85c6;">FREE community</span> to <span style="color: #cc0000;">learn more.</span>
<style>
:root {
--mb-WA: #25D366; /* WhatsApp colour */
--mb-Line: #0072b1; /* Line colour */
--mb-Tele: #0088CC; /* Line colour*/
--mb-Fb-Page: #0084FF; /* Fb-Page colour */
--mb-YouTube: #ff0000; /* YouTube colour */
--mb-WA-uname: "mbgruop"; /* WhatsApp number or group name*/
--mb-Line-uname: "GiftedITInstitute"; /* Username Line */
--mb-Tele-uname: "CobieGh1"; /* Username Telegram */
--mb-Fb-Page-uname: "CobieGh"; /* Username Fb-Page */
--mb-YouTube-uname: "Cobie-Gh"; /* YouTube */
}

#mb .WA, #mb .Line, #mb .Tele, #mb .Fb-Page, #mb .YouTube {display:inline-block; width:90px; text-align:center; margin:0 5px}
#mb .onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
margin-top:5px;
}
#mb .onoffswitch-checkbox {
display: none;
}
#mb .onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.s ease-in 0s;
}
#mb .onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 25px; padding: 0; line-height: 25px;
color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; text-align: center;
box-sizing: border-box;
}
#mb .WA .onoffswitch-label {
display: block; overflow: hidden;
border: 2px solid var(--mb-WA); border-radius: 20px;
}
#mb .WA .onoffswitch-inner:before {
content: var(--mb-WA-uname);
background-color: var(--mb-WA); color: #FFFFFF;
font-size:11px;
}
#mb .WA .onoffswitch-inner:after {
content: "WhatsApp";
color: var(--mb-WA);
font-size:14px;
}
#mb .WA:hover .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
#mb .Line .onoffswitch-label {
display: block; overflow: hidden;
border: 2px solid var(--mb-Line); border-radius: 20px;
}
#mb .Line .onoffswitch-inner:before {
content: var(--mb-Line-uname);
background-color: var(--mb-Line); color: #FFFFFF;
font-size:11px;
}
#mb .Line .onoffswitch-inner:after {
content: "LinkedIn";
color: var(--mb-Line);
font-size:14px;
}
#mb .Line:hover .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
#mb .Tele .onoffswitch-label {
display: block; overflow: hidden;
border: 2px solid var(--mb-Tele); border-radius: 20px;
}
#mb .Tele .onoffswitch-inner:before {
content: var(--mb-Tele-uname);
background-color: var(--mb-Tele); color: #FFFFFF;
font-size:11px;
}
#mb .Tele .onoffswitch-inner:after {
content: "Telegram";
color: var(--mb-Tele);
font-size:14px;
}
#mb .Tele:hover .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
#mb .Fb-Page .onoffswitch-label {
display: block; overflow: hidden;
border: 2px solid var(--mb-Fb-Page); border-radius: 20px;
}
#mb .Fb-Page .onoffswitch-inner:before {
content: var(--mb-Fb-Page-uname);
background-color: var(--mb-Fb-Page); color: #FFFFFF;
font-size:11px;
}
#mb .Fb-Page .onoffswitch-inner:after {
content: "Fb-Page";
color: var(--mb-Fb-Page);
font-size:14px;
}
#mb .Fb-Page:hover .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
#mb .YouTube .onoffswitch-label {
display: block; overflow: hidden;
border: 2px solid var(--mb-YouTube); border-radius: 20px;
}
#mb .YouTube .onoffswitch-inner:before {
content: var(--mb-YouTube-uname);
background-color: var(--mb-YouTube); color: #FFFFFF;
font-size:11px;
}
#mb .YouTube .onoffswitch-inner:after {
content: "YouTube";
color: var(--mb-YouTube);
font-size:14px;
}
#mb .YouTube:hover .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
</style>

HTML 1 Paste it before </body> or any where


/* Social link Re-Design by CobieGh */
<div id="mb">
<div class="WA">
<a href="javascript:void(0)" onclick="window.open('https://bit.ly/'+getComputedStyle(document.querySelector('#mb .WA .onoffswitch-inner'), ':before').getPropertyValue('content').replace('&quot;','').replace('&quot;',''))" title="Join Whatsapp Group"><b><span style="font-size: large;">

</span></b><div class="onoffswitch">
<b><span style="font-size: medium;"><input checked="" class="onoffswitch-checkbox" id="myonoffswitch" name="onoffswitch" type="checkbox" /></span></b>
<label class="onoffswitch-label">
<span class="onoffswitch-inner"></span>
</label>
</div>
</a>
</div>

<div class="Tele">
<a href="javascript:void(0)" onclick="window.open('https://telegram.me/'+getComputedStyle(document.querySelector('#mb .Tele .onoffswitch-inner'), ':before').getPropertyValue('content').replace('&quot;','').replace('&quot;',''))" title="Join Telegram Channel">

<div class="onoffswitch">
<input checked="" class="onoffswitch-checkbox" id="myonoffswitch" name="onoffswitch" type="checkbox" />
<label class="onoffswitch-label">
<span class="onoffswitch-inner"></span>
</label>
</div>
</a>
</div>
<div class="Fb-Page">
<a href="javascript:void(0)" onclick="window.open('https://fb.com/'+getComputedStyle(document.querySelector('#mb .Fb-Page .onoffswitch-inner'), ':before').getPropertyValue('content').replace('&quot;','').replace('&quot;',''))" title="Like Facebook Page">

<div class="onoffswitch">
<input checked="" class="onoffswitch-checkbox" id="myonoffswitch" name="onoffswitch" type="checkbox" />
<label class="onoffswitch-label">
<span class="onoffswitch-inner"></span>
</label>
</div>
</a>
</div>
<div class="YouTube">
<a href="javascript:void(0)" onclick="window.open('https://bit.ly/'+getComputedStyle(document.querySelector('#mb .YouTube .onoffswitch-inner'), ':before').getPropertyValue('content').replace('&quot;','').replace('&quot;',''))" title="Subscribe YouTube Channel">

<div class="onoffswitch">
<input checked="" class="onoffswitch-checkbox" id="myonoffswitch" name="onoffswitch" type="checkbox" />
<label class="onoffswitch-label">
<span class="onoffswitch-inner"></span>
</label>
</div>
</a>
</div>
<div class="Line">
<a href="javascript:void(0)" onclick="window.open('https://bit.ly/'+getComputedStyle(document.querySelector('#mb .Line .onoffswitch-inner'), ':before').getPropertyValue('content').replace('&quot;','').replace('&quot;',''))" title="Join LinkedIn Group">

<div class="onoffswitch">
<input checked="" class="onoffswitch-checkbox" id="myonoffswitch" name="onoffswitch" type="checkbox" />
<label class="onoffswitch-label">
<span class="onoffswitch-inner"></span>
</label>
</div>
</a>
</div>
</div>

CSS TYPE 2 With ICONS


/* Social link Re-Design by CobieGh */
:root {
--mb-WA: #25D366; /* Colour forWhatsApp */
--mb-Line: #00C300; /* Colour forLine */
--mb-Tele: #0088CC; /* Colour forLine */
--mb-Fb-Page: #0084FF; /* Colour forFb-Page */
--mb-YouTube: #ff0000; /* Colour forYouTube */
--mb-WA-uname: "mbgruop"; /* No WhatsApp */
--mb-Line-uname: "mashbyte"; /* Username Line */
--mb-Tele-uname: "CobieGh1"; /* Username Telegram */
--mb-Fb-Page-uname: "CobieGh"; /* Username Fb-Page */
--mb-YouTube-uname: "Cobie-Gh"; /* YouTube */
}

#mb .WA, #mb .Line, #mb .Tele, #mb .Fb-Page, #mb .YouTube {display:inline-block; width:90px; text-align:center; margin:0 5px}
#mb .onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
margin-top:5px;
}
#mb .onoffswitch-checkbox {
display: none;
}
#mb .onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
#mb .onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 25px; padding: 0; line-height: 25px;
color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; text-align: center;
box-sizing: border-box;
}
#mb .WA .onoffswitch-label {
display: block; overflow: hidden;
border: 2px solid var(--mb-WA); border-radius: 20px;
}
#mb .WA .onoffswitch-inner:before {
content: var(--mb-WA-uname);
background-color: var(--mb-WA); color: #FFFFFF;
font-size:11px;
}
#mb .WA .onoffswitch-inner:after {
content: "WhatsApp";
color: var(--mb-WA);
font-size:14px;
}
#mb .WA:hover .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
#mb .Line .onoffswitch-label {
display: block; overflow: hidden;
border: 2px solid var(--mb-Line); border-radius: 20px;
}
#mb .Line .onoffswitch-inner:before {
content: var(--mb-Line-uname);
background-color: var(--mb-Line); color: #FFFFFF;
font-size:11px;
}
#mb .Line .onoffswitch-inner:after {
content: "Line";
color: var(--mb-Line);
font-size:14px;
}
#mb .Line:hover .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
#mb .Tele .onoffswitch-label {
display: block; overflow: hidden;
border: 2px solid var(--mb-Tele); border-radius: 20px;
}
#mb .Tele .onoffswitch-inner:before {
content: var(--mb-Tele-uname);
background-color: var(--mb-Tele); color: #FFFFFF;
font-size:11px;
}
#mb .Tele .onoffswitch-inner:after {
content: "Telegram";
color: var(--mb-Tele);
font-size:14px;
}
#mb .Tele:hover .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
#mb .Fb-Page .onoffswitch-label {
display: block; overflow: hidden;
border: 2px solid var(--mb-Fb-Page); border-radius: 20px;
}
#mb .Fb-Page .onoffswitch-inner:before {
content: var(--mb-Fb-Page-uname);
background-color: var(--mb-Fb-Page); color: #FFFFFF;
font-size:11px;
}
#mb .Fb-Page .onoffswitch-inner:after {
content: "Fb-Page";
color: var(--mb-Fb-Page);
font-size:14px;
}
#mb .Fb-Page:hover .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
#mb .YouTube .onoffswitch-label {
display: block; overflow: hidden;
border: 2px solid var(--mb-YouTube); border-radius: 20px;
}
#mb .YouTube .onoffswitch-inner:before {
content: var(--mb-YouTube-uname);
background-color: var(--mb-YouTube); color: #FFFFFF;
font-size:11px;
}
#mb .YouTube .onoffswitch-inner:after {
content: "YouTube";
color: var(--mb-YouTube);
font-size:14px;
}
#mb .YouTube:hover .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}

HTML 2 Paste it before </body> or any where …………….. To change the icons then visit FlatIcon


/* Social link Re-Design by CobieGh */
<div class="WA">
<a href="javascript:void(0)" onclick="window.open('https://bit.ly/'+getComputedStyle(document.querySelector('#mb .WA .onoffswitch-inner'), ':before').getPropertyValue('content').replace('&quot;','').replace('&quot;',''))" title="Join Whatsapp Group" target="_blank">
<svg height="512pt" viewBox="-1 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m10.894531 512c-2.875 0-5.671875-1.136719-7.746093-3.234375-2.734376-2.765625-3.789063-6.78125-2.761719-10.535156l33.285156-121.546875c-20.722656-37.472656-31.648437-79.863282-31.632813-122.894532.058594-139.941406 113.941407-253.789062 253.871094-253.789062 67.871094.0273438 131.644532 26.464844 179.578125 74.433594 47.925781 47.972656 74.308594 111.742187 74.289063 179.558594-.0625 139.945312-113.945313 253.800781-253.867188 253.800781 0 0-.105468 0-.109375 0-40.871093-.015625-81.390625-9.976563-117.46875-28.84375l-124.675781 32.695312c-.914062.238281-1.84375.355469-2.761719.355469zm0 0" fill="#e5e5e5"/><path d="m10.894531 501.105469 34.46875-125.871094c-21.261719-36.839844-32.445312-78.628906-32.429687-121.441406.054687-133.933594 109.046875-242.898438 242.976562-242.898438 64.992188.027344 125.996094 25.324219 171.871094 71.238281 45.871094 45.914063 71.125 106.945313 71.101562 171.855469-.058593 133.929688-109.066406 242.910157-242.972656 242.910157-.007812 0 .003906 0 0 0h-.105468c-40.664063-.015626-80.617188-10.214844-116.105469-29.570313zm134.769531-77.75 7.378907 4.371093c31 18.398438 66.542969 28.128907 102.789062 28.148438h.078125c111.304688 0 201.898438-90.578125 201.945313-201.902344.019531-53.949218-20.964844-104.679687-59.09375-142.839844-38.132813-38.160156-88.832031-59.1875-142.777344-59.210937-111.394531 0-201.984375 90.566406-202.027344 201.886719-.015625 38.148437 10.65625 75.296875 30.875 107.445312l4.804688 7.640625-20.40625 74.5zm0 0" fill="#fff"/><path d="m19.34375 492.625 33.277344-121.519531c-20.53125-35.5625-31.324219-75.910157-31.3125-117.234375.050781-129.296875 105.273437-234.488282 234.558594-234.488282 62.75.027344 121.644531 24.449219 165.921874 68.773438 44.289063 44.324219 68.664063 103.242188 68.640626 165.898438-.054688 129.300781-105.28125 234.503906-234.550782 234.503906-.011718 0 .003906 0 0 0h-.105468c-39.253907-.015625-77.828126-9.867188-112.085938-28.539063zm0 0" fill="#64b161"/><g fill="#fff"><path d="m10.894531 501.105469 34.46875-125.871094c-21.261719-36.839844-32.445312-78.628906-32.429687-121.441406.054687-133.933594 109.046875-242.898438 242.976562-242.898438 64.992188.027344 125.996094 25.324219 171.871094 71.238281 45.871094 45.914063 71.125 106.945313 71.101562 171.855469-.058593 133.929688-109.066406 242.910157-242.972656 242.910157-.007812 0 .003906 0 0 0h-.105468c-40.664063-.015626-80.617188-10.214844-116.105469-29.570313zm134.769531-77.75 7.378907 4.371093c31 18.398438 66.542969 28.128907 102.789062 28.148438h.078125c111.304688 0 201.898438-90.578125 201.945313-201.902344.019531-53.949218-20.964844-104.679687-59.09375-142.839844-38.132813-38.160156-88.832031-59.1875-142.777344-59.210937-111.394531 0-201.984375 90.566406-202.027344 201.886719-.015625 38.148437 10.65625 75.296875 30.875 107.445312l4.804688 7.640625-20.40625 74.5zm0 0"/><path d="m195.183594 152.246094c-4.546875-10.109375-9.335938-10.3125-13.664063-10.488282-3.539062-.152343-7.589843-.144531-11.632812-.144531-4.046875 0-10.625 1.523438-16.1875 7.597657-5.566407 6.074218-21.253907 20.761718-21.253907 50.632812 0 29.875 21.757813 58.738281 24.792969 62.792969 3.035157 4.050781 42 67.308593 103.707031 91.644531 51.285157 20.226562 61.71875 16.203125 72.851563 15.191406 11.132813-1.011718 35.917969-14.6875 40.976563-28.863281 5.0625-14.175781 5.0625-26.324219 3.542968-28.867187-1.519531-2.527344-5.566406-4.046876-11.636718-7.082032-6.070313-3.035156-35.917969-17.726562-41.484376-19.75-5.566406-2.027344-9.613281-3.035156-13.660156 3.042969-4.050781 6.070313-15.675781 19.742187-19.21875 23.789063-3.542968 4.058593-7.085937 4.566406-13.15625 1.527343-6.070312-3.042969-25.625-9.449219-48.820312-30.132812-18.046875-16.089844-30.234375-35.964844-33.777344-42.042969-3.539062-6.070312-.058594-9.070312 2.667969-12.386719 4.910156-5.972656 13.148437-16.710937 15.171875-20.757812 2.023437-4.054688 1.011718-7.597657-.503906-10.636719-1.519532-3.035156-13.320313-33.058594-18.714844-45.066406zm0 0" fill-rule="evenodd"/></g></svg>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
</label>
</div>
</a>
</div>

<div class="Tele">
<a href="javascript:void(0)" onclick="window.open('https://telegram.me/'+getComputedStyle(document.querySelector('#mb .Tele .onoffswitch-inner'), ':before').getPropertyValue('content').replace('&quot;','').replace('&quot;',''))" title="Join Telegram Channel" target="_blank">
<svg enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" fill="#039be5" r="12"/><path d="m5.491 11.74 11.57-4.461c.537-.194 1.006.131.832.943l.001-.001-1.97 9.281c-.146.658-.537.818-1.084.508l-3-2.211-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.121l-6.871 4.326-2.962-.924c-.643-.204-.657-.643.136-.953z" fill="#fff"/></svg>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
</label>
</div>
</a>
</div>
<div class="Fb-Page">
<a href="javascript:void(0)" onclick="window.open('https://fb.com/'+getComputedStyle(document.querySelector('#mb .Fb-Page .onoffswitch-inner'), ':before').getPropertyValue('content').replace('&quot;','').replace('&quot;',''))" title="Like Facebook Page" target="_blank">
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m511.917969 256c0-141.386719-114.597657-256-255.957031-256-141.363282 0-255.960938 114.613281-255.960938 256s114.597656 256 255.960938 256c141.359374 0 255.957031-114.613281 255.957031-256zm0 0" fill="#407fff"/><path d="m393.070312 39.800781c46.359376 46.332031 75.035157 110.359375 75.035157 181.082031 0 141.386719-114.597657 256-255.960938 256-50.445312 0-97.472656-14.601562-137.109375-39.800781 46.3125 46.289063 110.277344 74.917969 180.925782 74.917969 141.359374 0 255.957031-114.613281 255.957031-256 0-90.933594-47.40625-170.785156-118.847657-216.199219zm0 0" fill="#406aef"/><path d="m373.394531 247.140625c0-13.941406-11.296875-25.238281-25.234375-25.238281h-35.769531c10.332031-25.851563 11.085937-47.046875 11.019531-53.835938-.007812-.746094.160156-3.390625.160156-3.976562v-1.175782c-.75-24.550781-8.265624-32.066406-17.917968-35.644531-9.898438 0-17.921875 8.019531-17.921875 17.917969v1.792969c-.097657 6.136719-8.71875 18.796875-8.71875 18.796875l-65.757813 66.515625-1.109375 1.363281-20 53.484375 20 82.929687c0 2.515626 2.039063 4.550782 4.550781 4.550782h123.800782c8.421875 0 15.582031-6.140625 16.855468-14.46875 4.867188-31.835938 16.042969-105.710938 16.042969-113.011719zm0 0" fill="#e3faff"/><path d="m197.863281 384.734375h-45.058593c-7.886719 0-14.28125-6.394531-14.28125-14.285156v-135.28125c0-7.890625 6.394531-14.28125 14.28125-14.28125h45.058593c7.886719 0 14.28125 6.390625 14.28125 14.28125v135.28125c0 7.890625-6.394531 14.285156-14.28125 14.285156zm0 0" fill="#48d8ff"/><path d="m197.863281 357.824219h-45.058593c-7.886719 0-14.28125-6.394531-14.28125-14.285157v26.910157c0 7.890625 6.394531 14.285156 14.28125 14.285156h45.058593c7.886719 0 14.28125-6.394531 14.28125-14.285156v-26.910157c0 7.890626-6.394531 14.285157-14.28125 14.285157zm0 0" fill="#43c5ff"/><path d="m348.160156 221.902344h-4.628906c-.234375 2.21875-.589844 5.125-1.035156 8.570312-8.476563 65.542969-64.273438 114.621094-130.351563 114.621094v24.972656c0 2.515625 2.039063 4.554688 4.550781 4.554688h123.800782c8.421875 0 15.582031-6.144532 16.855468-14.46875 4.867188-31.835938 16.042969-105.710938 16.042969-113.015625 0-13.9375-11.296875-25.234375-25.234375-25.234375zm0 0" fill="#ccf4ff"/></svg>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
</label>
</div>
</a>
</div>
<div class="YouTube">
<a href="javascript:void(0)" onclick="window.open('https://bit.ly/'+getComputedStyle(document.querySelector('#mb .YouTube .onoffswitch-inner'), ':before').getPropertyValue('content').replace('&quot;','').replace('&quot;',''))" title="Subscribe YouTube Channel" target="_blank">
<svg height="512pt" viewBox="0 -77 512.00213 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m501.453125 56.09375c-5.902344-21.933594-23.195313-39.222656-45.125-45.128906-40.066406-10.964844-200.332031-10.964844-200.332031-10.964844s-160.261719 0-200.328125 10.546875c-21.507813 5.902344-39.222657 23.617187-45.125 45.546875-10.542969 40.0625-10.542969 123.148438-10.542969 123.148438s0 83.503906 10.542969 123.148437c5.90625 21.929687 23.195312 39.222656 45.128906 45.128906 40.484375 10.964844 200.328125 10.964844 200.328125 10.964844s160.261719 0 200.328125-10.546875c21.933594-5.902344 39.222656-23.195312 45.128906-45.125 10.542969-40.066406 10.542969-123.148438 10.542969-123.148438s.421875-83.507812-10.546875-123.570312zm0 0" fill="#f00"/><path d="m204.96875 256 133.269531-76.757812-133.269531-76.757813zm0 0" fill="#fff"/></svg>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
</label>
</div>
</a>
</div>
</div>

Note: Change the highlighted codes with your own

Once everything is done, Save the template..

I hope you find this useful, but if in any case you find it difficult to apply it to your site, then leave a comment below for help and a quick reply, or use our Contact page for a personal assistant.

Note: You have the right to share this with anyone of your choice or on your blog….but Don’t forget to link back to MashByte.com…. Read our ToC  or our DMCA here to understand how our Terms very well.

Remember to Subscribe and  share……. 

What do you think?

Written by Kwabena

Kwabena is a tech freak, passionate about every new gadget and technology that comes his way. Always searching, always curios, he managed to gather an astounding experience that is very useful in his Info-Tech career.....
You can reach him by using any of his Social Media Handles below

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

GIPHY App Key not set. Please check settings

How to Add Colour Gradient Effects on your site like MashByte

How To Auto Publish your latest Post to Any Social Media Platform