All Important html code for website
.gif "All Important html code for Blogger")
- Google safe search & safe content || disable copypast (1)
- Make sticky navbar(header)
- Auto internal linking in blogger
- Best back-top style (design )
- Meta tag and meta decription
- Remove "?m=1" From URL ( blogger )
- Best footer (man sweeming style )
- Add custom scrollbar in Website
- easy table of contents || Normal-light-code
- Remove stratch in all imag
- Youtube subcribe than download Button
- Make Cool Note Boxes in Blog Posts
- Best image Slide for your Blogger
- Spilt (Broken) of page
- Best FAQ style in blogger
- Multi Tab in Post
- Most Imp website for blogger
--------------------*CODE (script) FOR TEMPLATE*----------------------------------
<script type='text/javascript'>
अगर आप केवल Right Click को Disable करना चाहते है तो oncontextmenu='return false' को अपने Template में सबसे ऊपर HTML section में लगा दें
और अगर केवल Copy paste को Disable करना चाहते है तो नीचे दिये गये कोड को अपने Template के लास्ट में body section के ऊपर डाल दीजिये
Disable only copy paste in website
<style> body {
-webkit-user-select: none !important;
-moz-user-select: -moz-none !important;
-ms-user-select: none !important;
user-select: none !important;
}</style>
Make sticky navbar(header)
css adding this in above </b:skin> or inside menu css
-------------------------------------------------------------
.sticky{position:fixed!important;top:0;z-index:99;-webkit-transform:translateZ(0);}
-----------------------------------------------------------------------
js put this on </body> tag above
------------------------------------------------------
<script type='text/javascript'>
//<![CDATA[
function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" sticky",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky("menu-wrap");
//]]>
</script>
----------------------------------------------------------------------------------------------------
pls note* replace "menu-wrap" with your approprieate nav id. likes { nav,css-menu, etc}
------------------------------------------------------------------------------------------------------
Auto internal linking in blogger
Search </head> and Paste CSS code Above it. <b:if cond='data:blog.pageType != "index"'> <style type='text/css'> /* Multi Related Post */ .gourabdesignmultiRelated{background-color:#e3feff;color:#002bff;margin:15px auto;display:-moz-box;display:-ms-flexbox;border-radius: 50px;border: 2px solid #00eaff;display:flex;flex-wrap:nowrap;justify-content:space-between;overflow:hidden;transition:all .3s} .gourabdesignmultiRelated:hover{background-color:#feffe6} .gourabdesignmultiRelated .content{padding:6px 27px} .gourabdesignmultiRelated .content .text{margin-right:9px} .gourabdesignmultiRelated .content a{color:#f00;text-decoration:none;line-height:1.5em} .gourabdesignmultiRelated .content a:hover{text-decoration:underline} .gourabdesignmultiRelated .icon{height:auto;min-width:55px;background:#20757d url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23fff'/%3E%3C/svg%3E") center / 40px no-repeat;transition:all .3s} </style> </b:if> Now search this <data:post.body/> code and paste below under it, then save it. <b:if cond='data:view.isPost'> <script type='text/javascript'> //<,a = jumlah + 1,b = post['length'] / a;c = Array['from']({length: jumlah}, (redfx, blufx) => blufx + 1); for (let d = 0; d < c['length']; d++) {let e = c[d],f = parseInt((b * e)),g = document['createElement']('div');g['className'] = 'gourabdesignmultiRelated';if (post[f]['nodeName'] == 'P') {post[f]['parentNode']['insertBefore'](g, post[f])} else {post[f]['parentNode']['insertBefore'](g, post[f]['nextSibling'])}}})(); var relatedTitles = new Array();var relatedTitlesNum = 0;var relatedUrls = new Array();function related_results_labels(nerdfx) {for (var desfx = 0; desfx < nerdfx['feed']['entry']['length']; desfx++) {var nefx = nerdfx['feed']['entry'][desfx];relatedTitles[relatedTitlesNum] = nefx['title']['$t'];for (var ciafx = 0; ciafx < nefx['link']['length']; ciafx++) {if (nefx['link'][ciafx]['rel'] == 'alternate') {relatedUrls[relatedTitlesNum] = nefx['link'][ciafx]['href'];relatedTitlesNum++;break}}}} function removeRelatedDuplicates() {var viefx = new Array(0);var labfx = new Array(0);for (var desfx = 0; desfx < relatedUrls['length']; desfx++) {if (!contains(viefx, relatedUrls[desfx])) {viefx['length'] += 1;viefx[viefx['length'] - 1] = relatedUrls[desfx];labfx['length'] += 1;labfx[labfx['length'] - 1] = relatedTitles[desfx]}};relatedTitles = labfx;relatedUrls = viefx} function contains(yelfx, yufx) {for (var grefx = 0; grefx < yelfx['length']; grefx++) {if (yelfx[grefx] == yufx) {return true}};return false} //]]> </script> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:view.isPost'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=100"'/> </b:if> </b:loop> </b:if> <script type='text/javascript'> //< * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.gourabdesignmultiRelated');while (i < relatedTitles['length'] && i < jumlah['length']) {for (let a = 0; a < jumlah['length']; a++) {jumlah[a]['innerHTML'] = '<span class="content"><span class="text">' + text + '</span><a href="' + relatedUrls[r] + '" title="' + relatedTitles[r] + '">' + relatedTitles[r] + '</a></span><span class="icon"></span>';if (r < relatedTitles['length'] - 1) {r++} else {r = 0};i++}}})(); //]]> </script> </b:if>
Best back-top style (design )
#mybacktotop{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRlHUqs7wiyWSDDQQlwDgDObhGxWOATbCKe-efGzXCKQe_EMzYUTgc30Cclxf6z3fQeSdVqjDQzscpwQRVgmR8qHaUHf1Icsy8gc63a4DWCOEkuQ3hDVFhNbceb0Ei_Jz4TF8iz7hmdr5g/s1600/back-to-top-sprite-30224d9b.png) 0 0 no-repeat;
height: 130px;
width: 72px;
padding:5px;
position:fixed;
bottom: 5px;
right: 5px;
cursor:pointer;
transition:none;
z-index:15;
}
#mybacktotop:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRlHUqs7wiyWSDDQQlwDgDObhGxWOATbCKe-efGzXCKQe_EMzYUTgc30Cclxf6z3fQeSdVqjDQzscpwQRVgmR8qHaUHf1Icsy8gc63a4DWCOEkuQ3hDVFhNbceb0Ei_Jz4TF8iz7hmdr5g/s1600/back-to-top-sprite-30224d9b.png)no-repeat;
background-position: 0 -142px;
}
---------------------------------------------------------------------------------------------------
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100)
{$("#mybacktotop").removeAttr("href");$("#mybacktotop").stop().animate(
{bottom:"0"},{duration:100,queue:false})}
else{$("#mybacktotop").stop().animate({bottom:"30000"},
{duration:8000,queue:false})}});$(function()
{$("#mybacktotop").click(function()
{$("html, body").animate({scrollTop:0},"slow");
return false})});
//]]>
</script>
<a href='#' id='mybacktotop'/>
Meta tag and meta decription
<meta name="title" content="SHIVANI BABHI EARNING CENTER"/>
Remove "?m=1" From URL ( blogger )
<script type='text/javascript'>
Best footer (man sweeming style )
Add the following code above </head>
--------------------------------------------------------
<style>
.swimmer { position: absolute; bottom:-3em; left:0; right:0; margin:auto; animation: swimmer 3s infinite; } @keyframes swimmer { 50%{bottom:-2em;} } section{ position:relative; width:100%; height:300px; overflow:hidden; } section .wave{ position:absolute; bottom:0; left:0; width:100%; height:100px; background:url('https://cdn.kcak11.com/codepen_assets/wave_animation/wave.svg'); background-size:1000px 100px; } section .wave.wave1{ animation:animate 30s linear infinite; z-index:1000; opacity:1; animation-delay:0s; bottom: 0; } section .wave.wave2{ animation:animate2 15s linear infinite; z-index:999; opacity:0.5; animation-delay:-5s; bottom: 10px; } section .wave.wave3{ animation:animate 30s linear infinite; z-index:998; opacity:0.2; animation-delay:-2s; bottom: 15px; } section .wave.wave4{ animation:animate2 5s linear infinite; z-index:997; opacity:0.7; animation-delay:-5s; bottom: 20px; } @keyframes animate{ 0%{ background-position-x: 0; } 100%{ background-position-x: 1000px; } } @keyframes animate2{ 0%{ background-position-x: 0; } 100%{ background-position-x: -1000px; } }
</style>
--------------------------------------------------------------------------------
Add the following code just above footer
<section>
<div class="wave wave1"></div>
<div class="wave wave2"></div>
<img src="https://i.giphy.com/media/Lpd3Jzzzudg0j7REiX/giphy.webp" class="swimmer"/>
<div class="wave wave3"></div>
<div class="wave wave4"></div>
</section>
Add custom scrollbar in Website
How to add a custom scrollbar in Blogger using CSS
--------------------------------------------------
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
--------------------------------------------------
1)--------Gradient Style-------------
::-webkit-scrollbar {
width: 14px;
}
::-webkit-scrollbar-track {
background-image: linear-gradient(
100deg,
rgb(0, 0, 0) 11%,
rgb(16, 44, 50) 92%
);
border-radius: 8px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background-image: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%);
border: 2px solid rgba(255, 255, 255, 0.5);
}
2)--------Blue Materialized Look-------------
<style>
::-webkit-scrollbar-track{
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
background:#fff 0% 0% repeat scroll;
}
::-webkit-scrollbar{
width:12px;
background-color:#FFF
}
::-webkit-scrollbar-thumb{
background-color:#00ACF5;
background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent)
}
::-webkit-scrollbar-thumb:hover{
background:#008BC5;
}
::-webkit-scrollbar-thumb:active{
background:#00ACF5;
-webkit-box-shadow:inset 1px 1px 2px rgba(0,0,0,.3)
}
</style>
3)--------SKY Blue Scrollbar-------------
<style>
::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%,
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.5, transparent), to(transparent));
}
::-webkit-scrollbar-thumb:hover{
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%,
color-stop(.5, transparent), to(transparent));
}
</style>
easy table of contents || Normal-light-code
<style type='text/css'>
easy table of contents - use this code in post
<div id="toc">
नोट - Responseble Table of conten बनाते समय ऊपर दिये गये कोड लगाने के बाद इस कोड को जरूर लगाये,
इसके बिना Table of content काम नहीं करेगा
id="1"
इसे आप Title में > से पहले लगाये , ठिक Title name से पहले, चाहे span हो या न हो
Make Automatic table of content
>><<1>><< Copy and Paste above </head> tag in your HTML Code of Blogger
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
//*************TOC Plugin V2.0 by MyBloggerTricks.com
function mbtTOC2(){var a=1,b=0,c="";document.getElementById("post-toc").innerHTML=document.getElementById("post-toc").innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#point'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='point"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("mbtTOC2").innerHTML+=c}function mbtToggle2(){var a=document.getElementById("mbtTOC2"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.display="block",b.innerHTML="hide"):(a.style.display="none",b.innerHTML="show")}
//]]>
</script>
<<2>><<>> Next search ]]></b:skin> and just above it paste the following CSS code:
/*####TOC Plugin V2.0 by MyBloggerTricks####*/
.mbtTOC2{
border:5px solid #0008FC ;
border-radius: 10px 50px 10px 50px;
box-shadow:5px 5px 5px 5px grey;
border-style:dashed;
background-color:#ACDEFB;
color:#707037;
line-height:1.4em;
margin:30px auto;
padding:20px 30px 20px 10px;
font-family:Oswald, arial;
display: block;width: 70%;
}
.mbtTOC2 button{
background:#ACDEFB;
font-family:oswald, arial; font-size:22px;
position:relative;
outline:none;
border:none;
color:#2E2E2E;
padding:0 0 0 15px;
}
.mbtTOC2 button a {
color:#FF0313;
padding:0px 2px;
cursor:pointer;
}
.mbtTOC2 button a:hover{
text-decoration:underline;
}
.mbtTOC2 button span {
font-size:15px; margin:0px 10px;
}
.mbtTOC2 li{margin:10px 0; }
.mbtTOC2 li a {
color:#EA1414;
text-decoration:none;
font-size:18px;
text-transform:capitalize;
}
.mbtTOC2 li a:hover {
text-decoration: underline;
}
.mbtTOC2 li li {margin:4px 0px;}
.mbtTOC2 li li a{
color:#040404;
font-size:15px;
}
.mbtTOC2 ol{counter-reset:section1;list-style:none}
.mbtTOC2 ol ol{counter-reset:section2}
.mbtTOC2 ol ol ol{counter-reset:section3}
.mbtTOC2 ol ol ol ol{counter-reset:section4}
.mbtTOC2 ol ol ol ol ol{counter-reset:section5}
.mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}
.mbtTOC2 li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px}
.mbtTOC2 li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}
.mbtTOC2 li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}
.mbtTOC2 li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}
/*
.point2 {list-style-type:lower-alpha}
.point3 {list-style-type:lower-roman}
.point4 {list-style-type:disc}
*/
<<>> Finally search for <data:post.body/> and replace it with the code below:
<div id="post-toc"><data:post.body/></div>
<<3>> It is best to display TOC right after your starting paragraph or show it before the first heading on your blog post.
To do this, switch to "HTML" mode of blogger editor and then paste the following HTML code just before the first heading.
<div class="mbtTOC2">
<button>Contents <span>[<a onclick="mbtToggle2()" id="Tog">hide</a>]</span></button>
<div id="mbtTOC2"></div>
</div>
<<4>> Paste this code in the Html view of your post in the last.
<script>mbtTOC2();</script>
NOTE:--- Follow 3rd and 4th step for each posts to show the table in your articles. each time when
you will write article then you have to put 3rd and 4th code in your post HTML view.
Automatic Post toc float on left
=========== Automatic Post toc float on left js======
-----CSS---------
<b:if cond='data:view.isPost'>
<style>
.active{color:#f88;font-weight:700}.anutrickzTOC{padding:5px 10px}.anutrickzTOC,.anutrickzTOC ol{list-style:none;margin:0;position:relative}.anutrickzTOC ol{padding:5px 0}.anutrickzTOC ol li:before{border-radius:50px;color:#222;content:" "counter(toc) ". ";display:flex;float:left;font-size:14px;font-weight:400;line-height:30px;margin-right:5px;padding:0;position:relative;text-align:center;vertical-align:middle;z-index:9999}.anutrickzTOC ol li{counter-increment:toc}#anutrickzTOC a{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;font-size:15px;line-height:1.2;opacity:.9;overflow:hidden;transition:all .3s}#at_T ol::-webkit-scrollbar{width:3px}#at_T ol::-webkit-scrollbar-track{background:#157ba6;border-radius:0}#at_T ol::-webkit-scrollbar-thumb{background:#153b4b;border-radius:0}:target{background:#40739e;color:#fff!important;padding:5px 10px;scroll-margin-top:70px}ul.toc-module--tableofcontents--9o5Ey{background-color:#fff;border:1px solid #40739e;border-bottom-right-radius:15px;border-left:none;border-top-right-radius:15px;height:auto;left:0;margin:0;max-height:233px;overflow:hidden;padding:0;position:fixed;scrollbar-color:#367ee9 rgba(48,113,209,.3);scrollbar-width:thin;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);-webkit-transform:translate3d(-93%,-50%,0);transform:translate3d(-93%,-50%,0);transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;width:192px;z-index:9}ul.toc-module--tableofcontents--9o5Ey .toc-module--tochead--1veCW{background-color:#40739e;bottom:0;box-shadow:0 8px 15px #40739e;cursor:pointer;position:absolute;right:0;top:0;width:12px;z-index:5}ul.toc-module--tableofcontents--9o5Ey .toc-module--tochead--1veCW>p{align-items:center;color:#fff;display:flex;font-size:10px;font-weight:700;height:100%;justify-content:center;letter-spacing:3px;margin:0;pointer-events:none;position:absolute;-webkit-transform:rotate(-180deg);transform:rotate(-180deg);-webkit-transform-origin:center center;transform-origin:center center;width:100%;-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr}ul.toc-module--tableofcontents--9o5Ey .toc-module--list--3ZllP{height:auto;max-height:233px;overflow-y:auto;padding-bottom:11.2px;padding-top:11.2px;top:0;z-index:2}ul.toc-module--tableofcontents--9o5Ey.toc-module--slideOut--2iwp0{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}
</style>
</b:if>
------HTML-----
<b:if cond='data:view.isPost'>
<ul class='toc-module--tableofcontents--9o5Ey css-0' id='tocUl'>
<div class='toc-module--tochead--1veCW css-0' id='tocTrigger'>
<p class='css-1'>TOC</p>
</div>
<div class='toc-module--list--3ZllP css-0'>
<div class='anutrickzTOC' id='at_T'>
<ol id='anutrickzTOC'/>
</div>
</div>
</ul>
</b:if>
------warp code----
<div id='post-toc'>
<data:post.body/></div>
-------------JS ----
<b:if cond='data:view.isPost'>
<script>//<![CDATA[
$(function(){$("#tocUl").click(function(){$(this).toggleClass("toc-module--slideOut--2iwp0")})});var TOCLirge="on";function anutrickzTOC(){for(var t=document.getElementById("post-toc").querySelectorAll("h2"),e=0;e<t.length;e++)t[e].setAttribute("attr","h2");for(var l=document.getElementById("post-toc").querySelectorAll("h3"),e=0;e<l.length;e++)l[e].setAttribute("attr","h3");for(var r=document.getElementById("post-toc").querySelectorAll("h4"),e=0;e<r.length;e++)r[e].setAttribute("attr","h4");for(var o=document.getElementById("post-toc").querySelectorAll("h5"),e=0;e<o.length;e++)o[e].setAttribute("attr","h5");for(var h=document.getElementById("post-toc").querySelectorAll("h6"),e=0;e<h.length;e++)h[e].setAttribute("attr","h6");var n=e=headlength=gethead=attr=0;for(e=0,headlength=document.getElementById("post-toc").querySelectorAll("h2, h3, h4, h5, h6").length;e<headlength;e++)getheada=(gethead=document.getElementById("post-toc").querySelectorAll("h2, h3, h4, h5, h6")[e].textContent).split(" ").join("_").replace(/(\r\n|\n|\r)/gm,""),document.getElementById("post-toc").querySelectorAll("h2, h3, h4, h5, h6")[e].setAttribute("id",getheada),n="<li class='at_toc-"+(attr=document.getElementById("post-toc").querySelectorAll("h2, h3, h4, h5, h6")[e].getAttribute("attr"))+"'><a href='#"+getheada+"'>"+gethead+"</a></li>",document.getElementById("anutrickzTOC").innerHTML+=n}
//]]></script>
<script>//<![CDATA[
anutrickzTOC()
//]]></script></b:if>
-----
End of template code
----------------------------Best widget code (script)-------------------------------------
Remove stratch in all imag
1: .post-body img { width: 100%; height: auto }
logo size in blogger
.#Header1 img {
Stylish Social Icon html for blogger
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.1/css/all.css'>
Subscribe by email - widget
https://be075e8d.sibforms.com/serve/MUIEAM0UKoN8OYM0JwbWNEffDqBgBgDKuJOt8MUT4xRoZt3QnGcSULt4SVKnDSJl30T7PZ-eKk4PXiHDyV3BU0fJr73eLdUGXhTLY5oavcO0I0DDaUlnd-XplEBhe9k1b5XDK9wJAH9gvy-GA7URRf3g5eyiogd8rwaB4u3ZnL-pD73DxW7tElpKRwOK3unn0IDnjxF4QWXAhNjJ
Youtube subcribe than download Button
<div class="buttons" style="border-radius: 6px; font-size: 15px; text-align: center;">
<a class="fa fa-youtube-play" href="#" id="btn_yt" onclick="show()" onmouseout="this.style.background='blue'" onmouseover="this.style.background='#0000ff'" style="background: blue; border-radius: 6px; color: white; display: inline-block; font-size: 25px; font-weight: 700; margin: 15px 30px; padding: 14px 0px; text-decoration: none; transition: all 0.2s linear 0s; width: 250px;"> <strong>Download</strong></a>
<div style="margin: auto;">
<a href="DOWNLOAD LINK" id="yt" onmouseout="this.style.background='grey'" onmouseover="this.style.background='#808080'" style="background-color: grey; border-radius: 6px; color: white; display: none; font-size: 25px; font-weight: 700; margin: 15px 30px; padding: 14px 0px; text-decoration: none; transition: all 0.2s linear 0s; width: 250px;"><strong>Download</strong></a>
<a class="fa fa-download" href="#" id="ytv" style="background-color: brown; border-radius: 6px; color: white; display: none; font-size: 25px; font-weight: 500; margin: 15px 30px; padding: 14px 0px; text-decoration: none; transition: all 0.2s linear 0s; width: 250px;"> <strong>Checking......</strong></a>
</div>
</div>
<!--Start Youtube subcribe javascript-->
<script type="text/javascript">
var _0x28f9 = ["\x3C\x68\x32\x20\x61\x6C\x69\x67\x6E\x3D\x22\x63\x65\x6E\x74\x65\x72\x22\x3E\x3C\x69\x66\x72\x61\x6D\x65\x20\x73\x72\x63\x3D\x22", "\x2F\x3E\x3C\x2F\x69\x66\x72\x61\x6D\x65\x3E\x3C\x2F\x68\x31\x3E", "\x77\x72\x69\x74\x65"]; document[_0x28f9[2]](_0x28f9[0] + src1 + _0x28f9[1])
</script>
<script type="text/javascript">
document.getElementById("yt").style.display = "none";
document.getElementById("ytv").style.display = "none";
function show() {
window.open('https://youtube.com/@RaviOYuMiku?sub_confirmation=1');
// sleep(3000);
setTimeout(function () {
document.getElementById("yt").style.display = "block";
document.getElementById("btn_yt").style.display = "none";
document.getElementById("ytv").style.display = "none";
}, 10000);
//alert();
document.getElementById("btn_yt").style.display = "none";
document.getElementById("ytv").style.display = "block";
}
</script>
<!--End Youtube subcribe javascript-->
Stylish Download button
<a href="https://drive.google.com/uc?export=download&id=1r_TZWVoEhAKUGI4MzrLvpoQGgfo8s_On" class="btn-slide2">
<span class="circle2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zM432 456c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24z"/></svg></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
<a href="https://drive.google.com/uc?export=download&id=1r_TZWVoEhAKUGI4MzrLvpoQGgfo8s_On" class="btn-slide2">
<span class="circle2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M0 24C0 10.7 10.7 0 24 0H96c11.5 0 21.4 8.2 23.6 19.5L122 32H312V134.1l-23-23c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0l64-64c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-23 23V32H541.8c21.2 0 36.5 20.3 30.8 40.7l-54 192c-3.9 13.8-16.5 23.3-30.8 23.3h-317l9.1 48H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H160c-11.5 0-21.4-8.2-23.6-19.5L76.1 48H24C10.7 48 0 37.3 0 24zM224 464c0 26.5-21.5 48-48 48s-48-21.5-48-48s21.5-48 48-48s48 21.5 48 48zm240 48c-26.5 0-48-21.5-48-48s21.5-48 48-48s48 21.5 48 48s-21.5 48-48 48z"/></svg></span>
<span class="title2">Buy Now</span>
<span class="title-hover2">Click here</span>
</a>
<style>
.btn-slide2 span.circle2,.btn-slide2:hover{background-color:#efa666}.btn-slide2{position:relative;display:inline-block;height:50px;width:200px;line-height:50px;padding:0;border-radius:50px;background:#fdfdfd;margin:10px;transition:.5s;border:2px solid #efa666;fill:black}.btn-slide2 svg{fill:white; width:22px; height:22px; margin-left:8px;}.btn-slide2:hover span.circle2{left:100%;margin-left:-45px;background-color:rgb(0 0 0 / 20%);color:#efa666}.btn-slide2:hover span.title2{left:40px;opacity:0}.btn-slide2:hover span.title-hover2{opacity:1;left:40px}.btn-slide2 span.circle2{display:block;color:#fff;position:absolute;float:left;margin:4px;line-height:48px;height:40px;width:40px;top:0;left:0;transition:.5s;border-radius:50%}.btn-slide2 span.title-hover2,.btn-slide2 span.title2{position:absolute;text-align:center;margin:0 auto;font-size:16px;font-weight:700;transition:.5s;color:#efa666;left:80px}.btn-slide2 span.title-hover2{left:80px;opacity:0;color:#fff}
</style>
Pdf file in blogger ( pdf downloader from google drive )
<iframe height="480" loading="lazy" src="https://drive.google.com/file/d/Fill id/preview" width="640"></iframe> ( for view pdf file )
https://drive.google.com/uc?export=download&id=fill id ( for download pdf file )
Make Cool Note Boxes in Blog Posts
-------------- How to Make Cool Note Boxes in Blog Posts ---------------
/* Note Boxes with Animation Icon */
.notes{position:relative;border-radius:4px;display:block;font-size:14px;margin:16px 0;padding:12px 24px 12px 60px} .notes:before{float:left;font-size:30px; font-family:FontAwesome;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;word-wrap:normal;margin-left:-46px;}
.notes1:before{color:#21a796;content:'\2600';} .notes1{background:#cfffe6;color:#565656}
.notes2:before{color:#f95060;content:'\2600';} .notes2{background:#f9bfc5;color:#565656}
.notes3:before{color:#2387c1;content:'\2600';} .notes3{background:#c8d9e2;color:#565656}
.notes4:before{color:#1aa687;content:'\2600';} .notes4{background:#6dedd0;color:#565656}
.notes5:before{color:#f63a50;content:'\2600';} .notes5{background:#fb818f;color:#fff}
.notes6:before{color:#f7871a;content:'\2600';} .notes6{background:#f5b474;color:#fff}
.notes7:before{color:#969696;content:'\2600';} .notes7{background:#f5f68e;color:#565656}
.notes1:hover:before,.notes2:hover:before,.notes3:hover:before,.notes4:hover:before,.notes5:hover:before,.notes6:hover:before,.notes7:hover:before,.notes8:hover:before,.notes9:hover:before,.notes10:hover:before{-webkit-animation:ripple 0.65s linear;-moz-animation:ripple 0.65s linear;-ms-animation:ripple 0.65s linear;-o-animation:ripple 0.65s linear;animation:ripple 0.65s linear}@keyframes ripple{100%{opacity:0;transform:scale(2.5)}}
----------------------
<div class="notes notes1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="notes notes2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="notes notes3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="notes notes4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="notes notes5">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="notes notes6">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="notes notes7">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
Breaking News html code
<!-- Codes by HTML.am -->
--------------------*End of Widget coding ( script )*----------------------------------
--------------------*CODE (script) FOR POST(page) design----------------------------------
Stylish About us page for your website -
<div class="aboutAuthor">
<div class="K2_bio">
<img alt="About Techyleaf" src="https://blogger.googleusercontent.com/img/a/AVvXsEgWbMp_6DTx-j9wlpuj858lpEqzkizVHK6VDvhHG1WIX_6DxXjcIeeJ0I4Oqe3JLyn8qVGMUb4ZF_dSU06cz-EQnD6_yb15zWaselHSjH9vTLEAIVKUgoPAeNIN0SF6P0wavViVZhix2ZU7phNgBeR9HLgEGzDAe1hSPfKOFKOZimT6JrjAxa3IUjGb">
<h2> About Techyleaf </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pretium augue non orci pharetra, eget dictum ante sagittis. Suspendisse eu nibh justo. Cras scelerisque urna lectus. Praesent rhoncus ut risus quis convallis. Praesent nec lorem eros.</p>
<div class="k2About-bt">
<a class="button" href="#"><svg class="K2svg" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g><path d="M28.59,4.29a2.23,2.23,0,0,0-2.27-.36L3.41,13.1a1.83,1.83,0,0,0,0,3.38l1.48.61a1,1,0,0,0,1.31-.53,1,1,0,0,0-.54-1.31L4.56,14.8l22.51-9a.22.22,0,0,1,.23,0,.24.24,0,0,1,.08.23L23.27,25.21a.4.4,0,0,1-.26.3.39.39,0,0,1-.39-.06l-8-6.24,7.83-7.91a1,1,0,0,0-1.22-1.56L9.75,16.54a1,1,0,1,0,1,1.72l4.83-2.85L13.23,17.8a2,2,0,0,0,.2,3.08l8,6.15a2.4,2.4,0,0,0,1.47.5,2.47,2.47,0,0,0,.83-.15,2.37,2.37,0,0,0,1.52-1.75L29.33,6.47A2.23,2.23,0,0,0,28.59,4.29Z"></path></g></svg> Join the Community</a>
</div>
</div>
</div>
<style>
.aboutAuthor {
padding: 60px 0 20px 0;
}
.aboutAuthor .K2_bio {
justify-content: center;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
max-width: 95%;
margin: auto;
padding: 80px 15px 65px 15px;
/*background-color: #FFF;*/
box-shadow: 0 10px 40px rgba(149,157,165,.2);
border-radius: 20px;
border: 5px solid #404040;
}
.aboutAuthor .K2_bio img {
background-image: linear-gradient(to top right,#ffffff,#ffa24d);
box-shadow: 0 5px 20px rgba(0,0,0,.2);
padding: 0;
border: 7px solid #ffc2b4;
width: 120px;
height: 120px;
position: absolute;
border-radius: 50%;
top: -60px;
pointer-events: none;
}
.aboutAuthor .K2_bio h2{
margin:0px!important;
padding: 0;
}
.aboutAuthor .K2_bio p {
margin: 1em 0!important;
text-align: center;
}
.aboutAuthor .K2_bio .k2About-bt {
text-align: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.k2About-bt svg {
width: 22px;
height: 22px;
fill: #FFF;
margin-right:3px;
}
.darkmoade .aboutAuthor .K2_bio {
background-color: var(--dark-bgAlt);
}
</style>
Best image Slide for your Blogger
1: <meta name="viewport" content="width=device-width, initial-scale=1">
Best slides in html image
<meta name="viewport" content="width=device-width, initial-scale=1">
Best slides in html image for your website
<meta name="viewport" content="width=device-width, initial-scale=1">
Spilt (Broken) of page
<div class="page-content">
<div class="page active">
<!--Page 1 content Here-->
</div>
<div class="page">
<!--Page 2 content Here-->
</div>
<div class="page">
<!--Page 3 content Here-->
</div>
</div>
----------------------------------------------------------------------------------------------
<!--Pagination Button-->
<div class="pagination-container">
<div class="page-numbers-container">
</div>
</div>
<style>
/* Post Pagination by Key2Blogging */
.pagination-container {
display: flex;
justify-content: center;
}
.pagination-container .page-numbers-container {
display: flex;
font-size: 18px;
overflow: hidden;
font-weight: bold;
font-family: "raleway", sans-serif;
border-radius: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.page-numbers-container .page-number {
padding: 8px 24px;
transition: all 400ms;
}
.page-numbers-container .page-number:hover {
background: #c5c5e9;
cursor: pointer;
}
.page-numbers-container .page-number.active {
background: #17A589;
color: #fff;
}
/* Page Content */
.page-content .page {
display: none;
}
.page-content .page.active {
display: block;
}
</style>
<script>
const pages = document.querySelectorAll(".page-content .page");
const pageNumbersContainer = document.querySelector(".page-numbers-container");
if (pageNumbersContainer) {
let pn = localStorage.getItem("pageNumber") ? localStorage.getItem("pageNumber") : 0;
const createPagination = () => {
pages.forEach((p, i) => {
const pageNumber = document.createElement("div");
pageNumber.classList.add("page-number");
pageNumber.textContent = i + 1;
pageNumber.addEventListener("click", () => {
localStorage.setItem("pageNumber", i);
location.reload();
})
pageNumbersContainer.appendChild(pageNumber);
})
document.querySelector(".page-number").classList.add("active");
pages[0].classList.add("active");
}
createPagination();
const pageNumbers = document.querySelectorAll(".page-numbers-container .page-number");
const activatePage = (pageNumber) => {
pages.forEach(p => {
p.classList.remove("active");
})
pages[pageNumber].classList.add("active");
pageNumbers.forEach(p => {
p.classList.remove("active");
})
pageNumbers[pageNumber].classList.add("active");
localStorage.removeItem("pageNumber");
history.scrollRestoration = "manual";
}
activatePage(pn);
}
</script>
Best FAQ style in blogger
<html lang="en">
<meta charset="UTF-8">
<title>CSS Animated Accordion</title>
<link href="styles.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
$(".accordion_header").click(function(){
$(".accordion_header").removeClass("active");
$(this).addClass("active");
});
});
</script>
<div class="wrapper">
<h4> Stylish FAQ in Blogger Website </h4>
<div class="accordion_wrap accordion_1">
<div class="accordion_header">
How to Add FAQ
</div>
<div class="accordion_body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!</p>
</div>
</div>
<div class="accordion_wrap accordion_2">
<div class="accordion_header">
Blogger Monetization
</div>
<div class="accordion_body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi! 1234567</p>
</div>
</div>
<div class="accordion_wrap accordion_3">
<div class="accordion_header">
Subscribr YouTube Channel
</div>
<div class="accordion_body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!</p>
</div>
</div>
<div class="accordion_wrap accordion_4">
<div class="accordion_header">
Make Money Online
</div>
<div class="accordion_body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi! 1234567</p>
</div>
</div>
<div class="accordion_wrap accordion_5">
<div class="accordion_header">
100 % HTML CSS
</div>
<div class="accordion_body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!</p>
</div>
</div>
</div>
<style>
@import url('https://fonts.googleapis.com/css?family=Muli:400,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
}
body{
background: #1f938a;
}
.wrapper{
width: 100%;
margin: 80px auto 0;
}
.wrapper .accordion_wrap .accordion_header{
width: 100%;
height: 50px;
background: #fff;
border-radius: 25px;
padding: 15px;
color: #5a1bab;
font-weight: 700;
border-bottom: 2px solid #ffc400;
position: relative;
cursor: pointer;
}
.wrapper .accordion_wrap:first-child .accordion_header{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.wrapper .accordion_wrap:last-child .accordion_header{
border-bottom: 2px solid transparent;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.wrapper .accordion_wrap:last-child .accordion_header:hover{
border-bottom: 2px solid transparent;
}
.wrapper .accordion_wrap .accordion_header:before,
.wrapper .accordion_wrap .accordion_header:after{
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 15px;
width: 20px;
height: 2px;
background: #39a098;
}
.wrapper .accordion_wrap .accordion_header:hover{
color: #01645d;
border-color: #01645d;
}
.wrapper .accordion_wrap .accordion_header:hover:before,
.wrapper .accordion_wrap .accordion_header:hover:after{
background: #01645d;
}
.wrapper .accordion_wrap .accordion_header:after{
transform: rotate(-90deg);
transition: all 0.5s ease;
}
.wrapper .accordion_wrap .accordion_body{
width: 100%;
height: 0px;
transition: all 0.5s ease;
background: #e0f9ff;
border-end-start-radius: 45px;
overflow: hidden;
}
.wrapper .accordion_wrap .accordion_body p{
padding: 15px;
font-size: 15px;
line-height: 22px;
color: #080300;
}
.wrapper .accordion_wrap .accordion_header.active{
color: #01645d;
border-color: #01645d;
}
.wrapper .accordion_wrap:last-child .accordion_header.active{
border-bottom: 2px solid #01645d;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.wrapper .accordion_wrap .accordion_header.active:before,
.wrapper .accordion_wrap .accordion_header.active:after{
background: #01645d;
}
.wrapper .accordion_wrap .accordion_header.active:after{
transform: rotate(0deg);
}
.wrapper .accordion_wrap .accordion_header.active + .accordion_body{
height: 180px;
}
</style>
Multi Tab in Post
--------------------code 2-----------------
<div class="tabs">
<div class="tab-2">
<label for="tab2-1">One</label>
<input checked="checked" id="tab2-1" name="tabs-two" type="radio" />
<div>
<h4>Tab One</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat id velit quis vestibulum. Nam id orci eu urna mollis porttitor. Nunc nisi ante, gravida at velit eu, aliquet sodales dui. Sed laoreet condimentum nisi a egestas.</p><p>Donec interdum ante ut enim consequat, quis varius nulla dapibus. Vivamus mollis fermentum augue a varius. Vestibulum in sapien at lectus gravida lobortis vulputate sed metus. Duis scelerisque justo et maximus efficitur. Donec eu eleifend quam. Curabitur aliquet commodo sapien eget vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel aliquet nunc, finibus posuere lorem. Suspendisse consectetur volutpat est ut ornare.</p>
</div>
</div>
<div class="tab-2">
<label for="tab2-2">Two</label>
<input id="tab2-2" name="tabs-two" type="radio" />
<div>
<h4>Tab Two</h4>
<p>Quisque sit amet turpis leo. Maecenas sed dolor mi. Pellentesque varius elit in neque ornare commodo ac non tellus. Mauris id iaculis quam. Donec eu felis quam. Morbi tristique lorem eget iaculis consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean at tellus eget risus tempus ultrices. Nam condimentum nisi enim, scelerisque faucibus lectus sodales at.</p>
</div>
</div>
</div>
<style>
.tabs { display: block; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; flex-wrap: wrap; margin: 0; overflow: hidden; } .tabs [class^="tab"] label, .tabs [class*=" tab"] label { color: #333; cursor: pointer; display: block; font-size: 1.1em; font-weight: 300; line-height: 1em; padding: 2rem 0; text-align: center; } .tabs [class^="tab"] [type="radio"], .tabs [class*=" tab"] [type="radio"] { border-bottom: 1px solid rgba(239, 237, 239, 0.5); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; width: 100%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .tabs [class^="tab"] [type="radio"]:hover, .tabs [class^="tab"] [type="radio"]:focus, .tabs [class*=" tab"] [type="radio"]:hover, .tabs [class*=" tab"] [type="radio"]:focus { border-bottom: 1px solid #fd264f;list-style:none;border:none } .tabs [class^="tab"] [type="radio"]:checked, .tabs [class*=" tab"] [type="radio"]:checked { border-bottom: 2px solid #fd264f; } .tabs [class^="tab"] [type="radio"]:checked + div, .tabs [class*=" tab"] [type="radio"]:checked + div { opacity: 1; } .tabs [class^="tab"] [type="radio"] + div, .tabs [class*=" tab"] [type="radio"] + div { display: block; opacity: 0; padding: 2rem 0; width: 90%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .tabs .tab-2 { width: 50%; } .tabs .tab-2 [type="radio"] + div { width: 200%; margin-left: 200%; } .tabs .tab-2 [type="radio"]:checked + div { margin-left: 0; } .tabs .tab-2:last-child [type="radio"] + div { margin-left: 100%; } .tabs .tab-2:last-child [type="radio"]:checked + div { margin-left: -100%; }
</style>
--------------------Code -3-----------
<h1>PureCSS Tabs</h1>
<br/>
<div class="pc-tab">
<input checked="checked" id="tab1" name="pct" type="radio" />
<input id="tab2" name="pct" type="radio" />
<input id="tab3" name="pct" type="radio" />
<nav>
<ul>
<li class="tab1">
<label for="tab1">First Tab</label>
</li>
<li class="tab2">
<label for="tab2">Second Tab</label>
</li>
<li class="tab3">
<label for="tab3">Third Tab</label>
</li>
</ul>
</nav>
<section>
<div class="tab1">
<h2>First</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque quidem minus nostrum, voluptatem accusamus aspernatur quia harum ratione, officia laudantium inventore autem doloribus atque labore numquam non. Hic, animi.</p>
</div>
<div class="tab2">
<h2>Second</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum nesciunt ipsum dolore error repellendus officiis aliquid a, vitae reprehenderit, accusantium vero, ad. Obcaecati numquam sapiente cupiditate. Praesentium eaque, quae error!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, maiores.</p>
</div>
<div class="tab3">
<h2>Third</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, nobis culpa rem, vitae earum aliquid.</p>
</div>
</section>
</div>
<style>
.pc-tab > input, .pc-tab section > div { display: none; } #tab1:checked ~ section .tab1, #tab2:checked ~ section .tab2, #tab3:checked ~ section .tab3 { display: block; } #tab1:checked ~ nav .tab1, #tab2:checked ~ nav .tab2, #tab3:checked ~ nav .tab3 { color: red; } } .pc-tab { width: 100%; max-width: 700px; margin: 0 auto; } .pc-tab ul {display: flex; list-style: none; margin: 0; padding: 0; } .pc-tab ul li label { float: left; padding:15px; border: 1px solid #ddd; border-bottom: 0; background: #eee; color: #444; } .pc-tab ul li label:hover { background: #ddd; } .pc-tab ul li label:active { background: #fff; } .pc-tab ul li:not(:last-child) label { border-right-width: 0; } .pc-tab section { clear: both; } .pc-tab section div { padding: 20px; background: #fff; line-height: 1.5em; letter-spacing: 0.3px; color: #444; } .pc-tab section div h2 { margin: 0; letter-spacing: 1px; color: #34495e; } #tab1:checked ~ nav .tab1 label, #tab2:checked ~ nav .tab2 label, #tab3:checked ~ nav .tab3 label { background: white; color: #111; position: relative; } #tab1:checked ~ nav .tab1 label:after, #tab2:checked ~ nav .tab2 label:after, #tab3:checked ~ nav .tab3 label:after { content: ''; display: block; position: absolute; height: 2px; width: 100%; background: #fff; left: 0; bottom: -1px; }
</style>
Best amazzing Multi Tab in Post
<style>
body {
display: grid;
place-items: center;
height: 100vh;
margin: 0;
}
.tabs-container,
.tabs-container * {
box-sizing: border-box;
}
.tabs-container {
width: 800px;
height: 400px;
font-family: "Roboto", sans-serif;
padding: 16px;
background: #fff;
color: #14213d;
box-shadow: 0 5px 50px -8px rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
.tabs-container .tab-heading .icon svg {
height: 30px;
}
.tabs-container .tab-heading-container {
display: flex;
background: #e63946;
margin: -16px;
border-radius: 10px;
overflow: hidden;
}
.tabs-container .tab-heading {
padding: 12px 30px;
cursor: pointer;
color: #fff;
display: flex;
align-items: center;
flex-direction: column;
text-transform: uppercase;
font-weight: 800;
gap: 4px;
}
.tabs-container .tab-heading.active {
background: #1d3557;
}
.tabs-container .tab-content {
display: none;
overflow-y: scroll;
height: 300px;
margin-top: 24px;
}
.tabs-container .tab-content.active {
display: block;
}
.tabs-container .tab-content h2 {
font-size: 40px;
margin-top: 16px;
margin-bottom: 8px;
}
.tabs-container .tab-content .content {
line-height: 2;
}
.tabs-container .tab-content .content img {
width: 100%;
}
@media (max-width: 900px) {
.tabs-container {
width: 80%;
}
.tabs-container .tab-heading-container {
justify-content: space-between;
}
.tabs-container .tab-heading {
flex: 1;
}
}
@media (max-width: 600px) {
.tabs-container {
width: 90%;
}
.tabs-container .tab-content h2 {
font-size: 30px;
margin-top: 16px;
margin-bottom: 8px;
}
.tabs-container .tab-heading {
font-size: 14px;
padding: 8px;
}
}
</style>
<div class="tabs-container">
<div class="tab-heading-container">
<div class="tab-heading active">
<div class="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
/>
</svg>
</div>
Bookmarks
</div>
<div class="tab-heading">
<div class="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
</div>
Analytics
</div>
<div class="tab-heading">
<div class="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"
/>
</svg>
</div>
Comments
</div>
</div>
<div class="tab-content-container">
<div class="tab-content active">
<h2>Bookmarks</h2>
<div class="content">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse
architecto consequatur iure reiciendis sit atque veritatis non
magni quaerat odio, voluptatibus est dolor eligendi dolorem
voluptates alias accusamus quasi cumque hic? In quasi, expedita
molestiae sunt iste saepe reprehenderit ea?
</p>
</div>
</div>
<div class="tab-content">
<h2>Analytics</h2>
<div class="content">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse
architecto consequatur iure reiciendis sit atque veritatis non
magni quaerat odio, voluptatibus est dolor eligendi dolorem
voluptates alias accusamus quasi cumque hic? In quasi, expedita
molestiae sunt iste saepe reprehenderit ea?
</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Fvg9N6yKYxVCjLEttL-IojH5mgqsPTCNcD1hTbqo8ZCbU_piGP9sNlkGFJpI2NGnkC9f35NCLHsl0UVwJTwYVEn8tM5ad2_15p1cUPbSz4pxLMfyH7YlSnsiuPA6O6W7iXeHHmNiYN0kdVE8dZzXWQBRZl3ICej-1Cys5BetFd0_kD9EUYIPjDm4bQ/s1600/biology.png" alt="" />
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse
architecto consequatur iure reiciendis sit atque veritatis non
magni quaerat odio, voluptatibus est dolor eligendi dolorem
voluptates alias accusamus quasi cumque hic? In quasi, expedita
molestiae sunt iste saepe reprehenderit ea?
</p>
</div>
</div>
<div class="tab-content">
<h2>Comments</h2>
<div class="content">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse
architecto consequatur iure reiciendis sit atque veritatis non
magni quaerat odio, voluptatibus est dolor eligendi dolorem
voluptates alias accusamus quasi cumque hic? In quasi, expedita
molestiae sunt iste saepe reprehenderit ea?
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse
architecto consequatur iure reiciendis sit atque veritatis non
magni quaerat odio, voluptatibus est dolor eligendi dolorem
voluptates alias accusamus quasi cumque hic? In quasi, expedita
molestiae sunt iste saepe reprehenderit ea?
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse
architecto consequatur iure reiciendis sit atque veritatis non
magni quaerat odio, voluptatibus est dolor eligendi dolorem
voluptates alias accusamus quasi cumque hic? In quasi, expedita
molestiae sunt iste saepe reprehenderit ea?
</p>
</div>
</div>
</div>
</div>
<script>
const tabHeadingAll = document.querySelectorAll(".tabs-container .tab-heading");
const tabContentAll = document.querySelectorAll(".tabs-container .tab-content");
const removeAllActive = () => {
tabContentAll.forEach((c) => {
c.classList.remove("active");
});
tabHeadingAll.forEach((h) => {
h.classList.remove("active");
});
};
tabHeadingAll.forEach((h, i) => {
h.addEventListener("click", () => {
removeAllActive();
tabContentAll[i].classList.add("active");
h.classList.add("active");
});
});
</script>
Left side Multi Tab in Post
<style>
.tabs-container {
font-family: "Roboto", sans-serif;
max-width: 700px;
min-height: 400px;
margin: 30px auto;
display: flex;
box-shadow: 0 4px 40px -8px rgba(0, 0, 0, 0.2);
}
.tabs-container .tabs {
width: 300px;
background: #000;
color: #fff;
text-transform: uppercase;
text-align: center;
}
.tabs-container .tabs .tab {
padding: 24px 32px;
background: #222;
cursor: pointer;
font-weight: bold;
}
.tabs-container .tabs .tab.active {
background: #f6fdff;
color: #222;
}
.tabs-container .content-container {
background: #f6fdff;
}
.tabs-container .content-container .content {
display: none;
padding: 32px;
}
.tabs-container .content-container .content.active {
display: block;
}
.tabs-container .content-container h3 {
margin: 0;
font-size: 30px;
color: #000;
}
.tabs-container .content-container p {
line-height: 2;
color: #000;
}
</style>
<div class="tabs-container">
<div class="tabs">
<div class="tab active">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
<div class="tab">Tab 4</div>
</div>
<div class="content-container">
<div class="content active">
<h3>Heading 1</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi sed
iure perferendis deleniti possimus consequatur ducimus officia sunt
minima amet!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi sed
iure perferendis deleniti possimus consequatur ducimus officia sunt
minima amet!
</p>
</div>
<div class="content">
<h3>Heading 2</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi sed
iure perferendis deleniti possimus consequatur ducimus officia sunt
minima amet!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
deserunt consequuntur unde aperiam deleniti amet.
</p>
</div>
<div class="content">
<h3>Heading 3</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
deserunt consequuntur unde aperiam deleniti amet.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi sed
iure perferendis deleniti possimus consequatur ducimus officia sunt
minima amet!
</p>
</div>
<div class="content">
<h3>Heading 4</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi sed
iure perferendis deleniti possimus consequatur ducimus officia sunt
minima amet!
</p>
</div>
</div>
</div>
<script>
const tabs = document.querySelectorAll(".tabs-container .tab");
const contents = document.querySelectorAll(".tabs-container .content");
const removeActiveClass = () => {
tabs.forEach((t) => {
t.classList.remove("active");
});
contents.forEach((c) => {
c.classList.remove("active");
});
};
tabs.forEach((t, i) => {
t.addEventListener("click", () => {
removeActiveClass();
contents[i].classList.add("active");
t.classList.add("active");
});
});
</script>
End of page coding
--------------------*best website ( usefull website and tips-tricks )*-----------------------
Most Imp website for blogger
1. https://archive.org ( find contant of deleted website in google )
2. https://www.duplichecker.com ( check copyright content )
3. https://bit.ly/3LsCd8C ( find deleted website )
4. https://telegram.im/en ( telegram button )
5. https://tiny-img.com/webp/ ( webp converter )
6. https://bit.ly/3oPL6kW ( Best Quiz maker )
7 .https://bit.ly/42bpTQY ( best pdf compressor )
8. https://bit.ly/3LmYrZB ( shadow box-code box/button ) 9. https://linkdeploy.com/ (shell own backlink)10. https://flippa.com/ ( Shell Your Website )11. https://ifttt.com/create ( create automatics content on website )1
2
3
4
