Adding Method :
add code box with copy button this code is one of the best code with only html and css only without javascript only add on css to theme section and now css is add on theme and second copy html code and paste to your post section finally add this code box on your blogger website
How To Add HTML On Blogger.
Step-1: Open add or edit post page in Blogger.
Step-2: Change post editor mode to “HTML view” from editor toolbar.
Step-3: Add your HTML code in post.
Step-4: For more understanding, following image given which shows editor tool icons and post editor mode options.
How To Add JavaScript On Blogger.
Step-1: Login to blogger.com and visit the dashboard of your blog.
Step-2: Now, click on template menu from the left sidebar.
Step-3: From template window, click on Edit HTML.
Step-4: Finally, you have to decide where the JavaScript codes should be inserted.
In maximum cases JavaScript codes works fine by adding it within <head> </head> tag.
Similarly, if any JavaScript code is necessary for article/post pages then you may insert the script codes within conditional tag as shown below and paste the whole codes just above/before closing </head> tag.
<b:if con='data:blog.pageType == "item"'>
Paste Your JavaScript Here for post page
</b:if>
If you are using third party JavaScript codes then make sure you have copied entire codes properly. Most of cases I found that they miss either the opening <scripttype='text/javascript'> tag or the closing </script> end-tag or both. As a result of which your all codes will appear on live webpage and shall not work properly.
How To Add CSS On Blogger.
Step-1: Login to blogger.com and visit the dashboard of your blog.
Step-2: Now, click on template menu from the left sidebar.
Step-3: From template window, click on Edit HTML.
Step-4: Finally, you have to decide where the CSS codes should be inserted.
1- Press CTRL+F and search for ]]></b:skin>. Then paste your CSS code above the tag.
2- Click Save to add the code.
3- Check your blog for the change.HTML CODE
<!--[ Code Box 1 ]-->
<div class='K2_CBox'>
<div class='CB_Heading'>
<span>HTML</span>
<button id='copy1' class='C_box_main' onclick="copyC('copy1','code1')">
<i class='CBox_icn'></i>
</button>
</div>
<!--Add Your Parse HTML code Here-->
<div id='code1'>
<pre><p>This is a simple HTML code </p></pre>
</div>
</div>CSS CODE
<style>
.K2_CBox{position:relative;background:#fff;width:100%;border-radius:6px;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;padding:10px;margin:30px 0 30px}
.K2_CBox .CB_Heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.K2_CBox .CB_Heading span{margin:0;font-weight:700;font-family:inherit;font-size:1.1rem}
.K2_CBox .C_box_main{cursor:pointer;display:inline-flex;align-items:center;padding:12px;outline:0;border:0;border-radius:50%;background:#004cbd;transition:all .3s ease;-webkit-transition:all .3s ease}.K2_CBox .C_box_main:hover{opacity:.8}.K2_CBox .C_box_main .CBox_icn{flex-shrink:0;display:inline-block;width:18px;height:18px;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><rect x='5.54615' y='5.54615' width='16.45385' height='16.45385' rx='4'/><path d='M171.33311,181.3216v-8.45385a4,4,0,0,1,4-4H183.787' transform='translate(-169.33311 -166.86775)'/></svg>");background-size:cover;background-repeat:no-repeat;background-position:center}
.K2_CBox .C_box_main.copied{background:#2dcda7}
.K2_CBox .C_box_main.copied .CBox_icn{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'/><polyline points='23 3 12 14 9 11'/></svg>")}
.K2_CBox pre{margin:0;background:#f6f6f6;padding:15px;border-radius:5px;color:#08102b;font-size:.8rem;font-family:monospace;overflow:scroll;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch; white-space: pre-wrap;}
.K2_CBox pre::before, .K2_CBox pre::after{content:''}
.dark-Mode .K2_CBox{background:#2d2d30}.dark-Mode .K2_CBox pre{background:#252526;color:#fffdfc}
.tNtf span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards}
@media screen and (max-width:500px){.tNtf span{margin-bottom:20px;left:20px;right:20px;font-size:13px}}
@keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
@-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
.darkMode .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}
</style>
<div id='toastNotif' class='tNtf'></div>
<script>/*<![CDATA[*/ function copyC(e,t){var o=document.getElementById(e),n=document.getElementById(t),e=getSelection(),t=document.createRange();e.removeAllRanges(),t.selectNodeContents(n),e.addRange(t),document.execCommand("copy"),e.removeAllRanges(),o.classList.add("copied"),document.getElementById("toastNotif").innerHTML="<span>Copied to Clipboard!</span>",setTimeout(()=>{o.classList.remove("copied")},3e3)} /*]]>*/</script>The social media widget is now fully built and working correctly if you follow all the steps correctly. If you have questions or steps that you do not understand, please write down the questions and concerns in the comment column below.
Post a Comment
Post a Comment