BABHI G EARNING CENTER

noreply@blogger.com (RAVI SONI) — Tue, 09 May 2023 02:58:00 +0000

Hi,

You've unlocked an exclusive reward.

Here:

FLAT ₹50 Cashback
on PAYTM

Coupon code : PAYTM50
Valid till: 30.09.2022
Terms & Conditions

noreply@blogger.com (BABHI G) — Sun, 07 May 2023 15:38:00 +0000

Enjoy Your Gift

50% OFF

Coupon

Valid until May, 2023

87878521112

Internet Speed Test - 5g speed test

noreply@blogger.com (BABHI G) — Sun, 02 Apr 2023 13:27:00 +0000

computer Quiz - computer Question || test of computer

noreply@blogger.com (RAVI SONI) — Sat, 01 Apr 2023 15:20:00 +0000

Computer Science Quiz

Please fill above data!

Mark : 0

Name : Apu

Result : 9

Total Questions:

Correct: | Wrong:

Attempt: | Percentage:

All Important html code for blogger - html code for website

noreply@blogger.com (BABHI G) — Mon, 27 Mar 2023 16:02:00 +0000

All Important html code for website

--------------------*CODE (script) FOR TEMPLATE*----------------------------------

Google safe search & safe content || disable copypast (1)

   <script type='text/javascript'>   
  var isCtrl = false;   
  document.onkeyup=function(e)   
  {   
  if(e.which == 17)   
  isCtrl=false;   
  }   
  document.onkeydown=function(e)   
  {   
  if(e.which == 17)   
  isCtrl=true;   
  if((e.which == 85) || (e.which == 67) && isCtrl == true)   
  {   
  // alert(‘Keyboard shortcuts are cool!’);   
  return false;   
  }   
  }   
  var isNS = (navigator.appName == "Netscape") ? 1 : 0;   
  if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);   
  function mischandler(){   
  return false;   
  }   
  function mousehandler(e){   
  var myevent = (isNS) ? e : event;   
  var eventbutton = (isNS) ? myevent.which : myevent.button;   
  if((eventbutton==2)||(eventbutton==3)) return false;   
  }   
  document.oncontextmenu = mischandler;   
  document.onmousedown = mousehandler;   
  document.onmouseup = mousehandler;   
  </script>

अगर आप केवल 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 != &quot;index&quot;'>
<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(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) 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'>  
 //<![CDATA[  
 // Multi Related Post  
 (function() {var jumlah = 4;let post = document['querySelectorAll']('.post-body br, .post-body p'),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='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=100&quot;'/> 
    </b:if>  
   </b:loop>  
  </b:if>  
 <script type='text/javascript'>  
 //<![CDATA[  
 (function gourabdesignmultiRelated() {var text = 'Also read :';let r = Math['floor']((relatedTitles['length'] - 1) * 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"/>  
 <meta name="description" content="Shivani Babhi is online generating tool, make money online and offline. Here you can find the best earning app' promo code, cashback, Quiz, discount."/>  
 <meta name="keywords" content="Shivani babhi earning center, Earn money online, Online tool, jokes, shayri, Status, heart touching, coupon code, Discount or cashback, Review, Quiz"/>  
 <meta name="robots" content="index, follow"/>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
 <meta name="language" content="English">  
 <meta name="author" content="SHIVANI BABHI"/>

Remove "?m=1" From URL ( blogger )

  <script type='text/javascript'>   
  //<![CDATA[   
  var uri = window.location.toString();   
  if (uri.indexOf("%3D","%3D") > 0) {   
  var clean_uri = uri.substring(0, uri.indexOf("%3D"));   
  window.history.replaceState({}, document.title, clean_uri);   
  }   
  var uri = window.location.toString();   
  if (uri.indexOf("%3D%3D","%3D%3D") > 0) {   
  var clean_uri = uri.substring(0, uri.indexOf("%3D%3D"));   
  window.history.replaceState({}, document.title, clean_uri);   
  }   
  var uri = window.location.toString();   
  if (uri.indexOf("&m=1","&m=1") > 0) {   
  var clean_uri = uri.substring(0, uri.indexOf("&m=1"));   
  window.history.replaceState({}, document.title, clean_uri);   
  }   
  var uri = window.location.toString();   
  if (uri.indexOf("?m=1","?m=1") > 0) {   
  var clean_uri = uri.substring(0, uri.indexOf("?m=1"));   
  window.history.replaceState({}, document.title, clean_uri);   
  }   
  //]]>   
  </script>

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'>  
 /* CSS Table of Contents */  
 #light-toc{background:#f5f5f5;border-radius:3px;padding:10px 20px}  
 #toc_list{font-weight:700;cursor:pointer;margin:10px 0}  
 #toc_list:focus,#toc li:focus,.back_tocontent:focus{outline:none}  
 #toc_list svg{vertical-align:middle}  
 #toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em}  
 #toc ol li:before{left:-2em}  
 #toc li a{color:#222}  
 #toc li a:hover{color:#1e90ff}  
 #toc{display:grid}  
 .back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s}  
 .back_tocontent:hover{background:#2d3436;color:#fff}  
 :target::before{content:'';display:block;height:40px;margin-top:-40px;visibility:hidden}  
 </style>

easy table of contents - use this code in post

 <div id="toc">  
 <ol>  
 <li><a href="#1"><span style="font-family: arial;">paste title ( heading ) name</span></a></li>  
 <li><a href="#2"><span style="font-family: arial;">paste title ( heading ) name</span></a></li>  
 <li><a href="#3"><span style="font-family: arial;">paste title ( heading ) name</span></a></li>  
 <li><a href="#14"><span style="font-family: arial;">paste title ( heading ) name </span></a></li>  
 </ol>  
 </div>  
 </div>

नोट - 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 {  
  max-height: 150px;                   
 Max-width: 200px;  
 }

Stylish Social Icon html for blogger

  <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.1/css/all.css'>   
  <style>   
  .social-buttons {   
  display: flex;   
  flex-wrap: wrap;   
  justify-content: center;   
  margin-top: -10px;   
  }   
  .social-buttons__button {   
  margin: 10px 5px 0;   
  }   
  .social-button {   
  position: relative;   
  display: flex;   
  justify-content: center;   
  align-items: center;   
  outline: none;   
  width: 40px;   
  height: 40px;   
  text-decoration: none;   
  border-radius: 100%;   
  background: #fff;   
  text-align: center;   
  }   
  .social-button::after {   
  content: "";   
  position: absolute;   
  top: -1px;   
  left: 50%;   
  display: block;   
  width: 0;   
  height: 0;   
  border-radius: 100%;   
  transition: 0.3s;   
  }   
  .social-button:focus, .social-button:hover {   
  color: #fff;   
  }   
  .social-button:focus::after, .social-button:hover::after {   
  width: calc(100% + 2px);   
  height: calc(100% + 2px);   
  margin-left: calc(-50% - 1px);   
  }   
  .social-button i,   
  .social-button svg {   
  position: relative;   
  z-index: 1;   
  transition: 0.3s;   
  }   
  .social-button i {   
  font-size: 18px;   
  }   
  .social-button svg {   
  height: 40%;   
  width: 40%;   
  }   
  .social-button--mail {   
  color: #0072c6;   
  }   
  .social-button--mail::after {   
  background: #0072c6;   
  }   
  .social-button--facebook {   
  color: #3b5999;   
  }   
  .social-button--facebook::after {   
  background: #3b5999;   
  }   
  .social-button--linkedin {   
  color: #0077b5;   
  }   
  .social-button--linkedin::after {   
  background: #0077b5;   
  }   
  .social-button--github {   
  color: #6e5494;   
  }   
  .social-button--github::after {   
  background: #6e5494;   
  }   
  .social-button--codepen {   
  color: #212121;   
  }   
  .social-button--codepen::after {   
  background: #212121;   
  }   
  .social-button--pinterest {   
  color: #E60023;   
  }   
  .social-button--pinterest::after {   
  background: #E60023;   
  }   
  .social-button--twitter {   
  color: #55acee;   
  }   
  .social-button--twitter::after {   
  background: #55acee;   
  }   
  .social-button--instagram {   
  color: #e4405f;   
  }   
  .social-button--instagram::after {   
  background: #e4405f;   
  }   
  .social-button--npmjs {   
  color: #c12127;   
  }   
  .social-button--npmjs::after {   
  background: #c12127;   
  }   
  </style>   
  <div class="social-buttons">   
  <a href="#" class="social-buttons__button social-button social-button--facebook" aria-label="Facebook">   
   <i class="fab fa-facebook-f"></i>   
  </a>   
  <a href="#" class="social-buttons__button social-button social-button--twitter" aria-label="Twitter">   
   <i class="fab fa-twitter"></i>   
  </a>   
  <a href="#" class="social-buttons__button social-button social-button--instagram" aria-label="Instagram">   
   <i class="fab fa-instagram"></i>   
  </a>   
  <a href="#" class="social-buttons__button social-button social-button--linkedin" aria-label="Linkedin">   
   <i class="fab fa-linkedin"></i>   
  </a>   
  <a href="#" class="social-buttons__button social-button social-button--pinterest" aria-label="Pinterest">   
   <i class="fab fa-pinterest"></i>   
  </a>   
  </div>

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 -->  
 <!-- CSS Code -->  
 <style type="text/css" scoped>  
 .GeneratedMarquee {  
 font-family:'Arial Black', sans-serif;  
 font-size:1em;  
 font-weight:bold;  
 line-height:1.3em;  
 color:#330099;  
 background-color:#CCFFFF;  
 padding:1.0em;  
 margin:auto;  
 }  
 </style>  
 <!-- HTML Code -->  
 <marquee class="GeneratedMarquee" direction="left" scrollamount="2" behavior="scroll"><a href="https://www.facebook.com/AmitOfficial786" target="_blank">(1) My Facebook Page </a>         <a href="https://www.youtube.com/channel/UClTTVzIwqbmQwz8tVffKdwA" target="_blank">(2) My YouTube Channel </a>       <a href="https://twitter.com/AmitOfficial786">(3) My Twitter Account</a>  <a href="https://www.instagram.com/amitofficial.786/"> (4) Instagram Account</a></marquee>

--------------------*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">    
  2: <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">    
  3: <style>    
  4: .mySlides {display:none;}    
  5: </style>    
  6: <body>    
  7: <div class="w3-content" style="max-width:400px">    
  8: <div class="mySlides w3-container w3-red">    
  9: </div>    
  10: <img class="mySlides" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGNRU8eXdfVovUtbSf9JzdtHkMD95O5wh_l6oyCpelOPWhFJVGTlqz8aSl8gYb7JVbDJqNSrZ9XBB-J1Uj-_2RT7F4BnAQKRt7WmvN6NJR4tW4RxJER7HI_q8Ycw_oth7kCn3PH3FX1OfTdLeLCNRhtvqcvs2e8FmsEE5x6VRijaexzTj10RIUoSpT/s640/500%20question.jpg" style="width:100%">    
  11: <img class="mySlides" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK3OQI3YosfqcdH_9cj6yKJJtKPFl7Tv7Qrmmf3SoShEkzapf6VJo3H8TDXPSftSTeYimUIlMMyPrRCquseE2nkJfwGEkhNht5Qlj1ZtzJA7jFqtuBtQGiWDVrEEw7sTUFzxFBZCoAHDWS-oxhlQYKkvVX1YzYuHUEyAdk_WGiRZjfc-9MD4v9W9QY/s640/500%20question.gif" style="width:100%">    
  12: <img class="mySlides" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3ScTHp2IJSOMNYfDgMOGt0IFmYjUat5P4X26gb-aPXsOfUyTzbrybVqYZT4s-cp5SBI6sBta1jET7JzQeRayLOvtRPls5KCvvXrkjf7DUom8XTj-fYWgviTlzCZws5tOthgdCNVlNN4aWo3hU1mH9Jusk25_rz5PA0YqkTFkHsjGXDv_dTZWGzXjg/s690/computer%20quiz.png" style="width:100%">    
  13: <img class="mySlides" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYlye1iVrA8CBTqlriKaSr_m2dfYbI0HHPCHECx2xvih3I-0Ismv1CHBuD8RXOvrZASagI8WZwa0h0r9a1sJ6S6PoQbIzLHRsBo87_jHZnKgJRQKxtzjq0Z6BQiYsy6Gqgzd_vvQiG8KxkOcjmLSDxczPIRIDEdPAT7AFzCBAi0QtT0azLAVVWqS2/s640/computer%20quiz%20babhi%20G.gif" style="width:100%">    
  14: </div>    
  15: <script>    
  16: var slideIndex = 0;    
  17: carousel();    
  18: function carousel() {    
  19: var i;    
  20: var x = document.getElementsByClassName("mySlides");    
  21: for (i = 0; i < x.length; i++) {    
  22: x[i].style.display = "none";    
  23: }    
  24: slideIndex++;    
  25: if (slideIndex > x.length) {slideIndex = 1}    
  26: x[slideIndex-1].style.display = "block";    
  27: setTimeout(carousel, 8000);    
  28: }

Best slides in html image

  <meta name="viewport" content="width=device-width, initial-scale=1">   
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">   
  <style>   
  .mySlides {display:none;}   
  </style>   
  <body>   
  <h2 class="w3-center">HTML Slides</h2>   
  <div class="w3-content" style="max-width:400px">   
  <div class="mySlides w3-container w3-red">   
   <h1><b>Did You Know?</b></h1>   
   <h1><i>We plan to sell trips to the moon in the 2020s</i></h1>   
  </div>   
  <img class="mySlides" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4sFD6lVAbegwQy247m1MtH-gajXCNBab1oBdu-TIMCbTy7uYg1MSBbXsuM1DUy-HeJAJIOrbSzzQuBKhZnRGKt53tGEd1D5g8Ci1a2BTlOJmzgGCg1Fm7hxIF8rH1-IdEXN7qVQHYW8Gd/s320/valentines-day.gif" style="width:100%">   
  <div class="mySlides w3-container w3-xlarge w3-white w3-card-4">   
   <p><span class="w3-tag w3-yellow">New!</span>   
   <p>6 Crystal Glasses</p>   
   <p>Only $99 !!!</p>   
  </div>   
  <img class="mySlides" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0k-1OYz1F3OT7FgZn5JKSFKUuJd912uzlpGpIABJ1QOfA8A9XmCK80AhK-lbxSfSwfdGuYBR14U216EuMGcOLl5v7xWW3Dw3m8T6WIJB-HVpqeiBfkcDk1d35yr3ZYtZhJ59FjsjZPG87/s1600/animated-heart.gif" style="width:100%">   
  </div>   
  <script>   
  var slideIndex = 0;   
  carousel();   
  function carousel() {   
  var i;   
  var x = document.getElementsByClassName("mySlides");   
  for (i = 0; i < x.length; i++) {   
   x[i].style.display = "none";    
  }   
  slideIndex++;   
  if (slideIndex > x.length) {slideIndex = 1}    
  x[slideIndex-1].style.display = "block";    
  setTimeout(carousel, 2000);    
  }   
  </script>

Best slides in html image for your website

  <meta name="viewport" content="width=device-width, initial-scale=1">   
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">   
  <body>   
  <div class="w3-content w3-section" style="max-width:500px">   
  <p>The w3-animate-fading class animates an element in and out (takes about 5 seconds).</p>   
  <img class="mySlides w3-animate-fading" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4sFD6lVAbegwQy247m1MtH-gajXCNBab1oBdu-TIMCbTy7uYg1MSBbXsuM1DUy-HeJAJIOrbSzzQuBKhZnRGKt53tGEd1D5g8Ci1a2BTlOJmzgGCg1Fm7hxIF8rH1-IdEXN7qVQHYW8Gd/s320/valentines-day.gif" style="width:100%">   
  <img class="mySlides w3-animate-fading" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0k-1OYz1F3OT7FgZn5JKSFKUuJd912uzlpGpIABJ1QOfA8A9XmCK80AhK-lbxSfSwfdGuYBR14U216EuMGcOLl5v7xWW3Dw3m8T6WIJB-HVpqeiBfkcDk1d35yr3ZYtZhJ59FjsjZPG87/s1600/animated-heart.gif" style="width:100%">   
  <img class="mySlides w3-animate-fading" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw3A9FxB_Mu-ltDqGKF8lcU__w8cffBviBY5Zc1UodrDcGRhqhLtR1F2HWvjhKIPNpDp3U7mEG8xfOW721zRV3sLHvjd6d8BGEJ_-Qlf6ZsDK_mJqBqK5f87KU57hyBdXhuGMlEWxEGHoI/s320/Happy+Valentine%2527s+Day+2019+miss+you.gif" style="width:100%">   
  <img class="mySlides w3-animate-fading" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0k-1OYz1F3OT7FgZn5JKSFKUuJd912uzlpGpIABJ1QOfA8A9XmCK80AhK-lbxSfSwfdGuYBR14U216EuMGcOLl5v7xWW3Dw3m8T6WIJB-HVpqeiBfkcDk1d35yr3ZYtZhJ59FjsjZPG87/s1600/animated-heart.gif" style="width:100%">   
  </div>   
  <script>   
  var myIndex = 0;   
  carousel();   
  function carousel() {   
  var i;   
  var x = document.getElementsByClassName("mySlides");   
  for (i = 0; i < x.length; i++) {   
   x[i].style.display = "none";    
  }   
  myIndex++;   
  if (myIndex > x.length) {myIndex = 1}    
  x[myIndex-1].style.display = "block";    
  setTimeout(carousel, 5000);    
  }   
  </script>

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 )

Hindi Grammer Quiz text - हिंदी ग्रामर प्रश्‍न

noreply@blogger.com (RAVI SONI) — Fri, 10 Mar 2023 08:11:00 +0000

Hindi Grammer text

Please fill the above data!

Mark : 0

Name : Apu

Result : 9

Total Questions:

Correct: | Wrong:

Attempt: | Percentage:

Download pdf

Quora se paise kaise kamaye - कोरा से पैसे कमाने का तरीका

noreply@blogger.com (BABHI G) — Mon, 27 Feb 2023 15:39:00 +0000

Learn Quora , Review & Ask questions

Quora से पैसे कमाने का तरीका - दोस्‍तो आज आपकों इस पोस्‍ट के माध्‍यम से पैसे कमाने का एक जरिया दीया जा रहा है , जो Quora के बारे में है , दोस्‍तों Quora पर आप आसान प्रश्‍नों के उत्‍तर देकर बहुत सारा पैसा कमा सकते है , क्‍योंकि मैं खुद इसके माध्‍यम से अपनी income करती हूँ ,

तो दोस्‍तों आप नीचे दीये गये Step से Quora के बारे पहले अच्‍छे से जान लें फिर नीचे दीये गये तरीके से Quora को चलायें और अपनी Income शुरू करें

1 video , basic video

2. how to ask questions

3. Good looking profile setup

4. about space & monetize your space , this video is very important video

5. Answer collapse proplem

Solution answer collapse problem -

https://chat.openai.com/chat

6. kis question ka answer krna hai is video me achhe se dek le

7.ये क्या चीज है मुझे कुछ ज्यादा ही काम की चीज इसमें वीडियो है, आप भी देके, हा तोड़ा पेसो बालो का काम जरा एलजी राह, या हम तेरे गरीब, लेकिन वीडियो देखने में क्या जा रहा कलिया

8. Most important steps for grow quora

click on add ( frend se follow krbao , upvote krbao , or most important add pr click krbao )
kisi toppic pr Trend Question , Qapop se nikalo or 2:1 ( follow : answer ) bale Quesion ke hee answer do
answer dene ke liye peppertype.ai ki bhi help le skte hai
namelix , website se kisi toppic ka best name lekar , space ka name rkna hai

Thanx

By - Ravi Soni

Dominating Instagram Marketing Secrets:

noreply@blogger.com (BABHI G) — Tue, 21 Feb 2023 04:54:00 +0000

Dominating Instagram Marketing Secrets:

Dominating #1: Be Professional. -- You should should always use professional pictures for each Instagram account you post. Any picture that are less than professional should be removed at all cost.

Dominating #2: Engage With Your Audience. -- Always engage with your audience on every level especially in public. This allows your audience to build a bonded-relationship with your audience.

REMEMBER: Everything you do in business is all about building relationship.

Dominating #3: Post New Picture Daily. -- Constant update is the key.
Why? Well, it is because your audience wants to know every move and every step that you take in your business. So, do NOT post one new picture per month and expect your business will grow. That's not possible.

Dominating #4: Track Your Links. -- Be a geek. Always test the type of pictures that will result in a higher engagement rate versus the pictures that will waste your time. This allows you to increase your traffic with the right images on your Instagram account.

Dominating #5: Regram Other Users Images. -- Regram other users posts, contact Instagram users in your niche, and find common ground on helping each other to grow each other followers. That's the key to grow your followers on Instagram.

Disclaimer Page Generator Tool

noreply@blogger.com (BABHI G) — Fri, 10 Feb 2023 15:15:00 +0000

Free Online Copyright Disclaimer Generator Tool

The Online Disclaimer Generator is a free copyright disclaimer generator tool that allows you to generate a copyright disclaimer for any blog or website, all you have to do is enter a website URL and the text of your disclaimer, and the disclaimer generator will do the rest, now you can have a copyright disclaimer generator for practically any website, the online disclaimer generator, disclaimer generator, is a one-click copyright disclaimer generator tool that allows anyone to create a personalized copyright disclaimer generator in simple way.

A copyright disclaimer is a notice indicating that the material within it is not protected by copyright. It may also refer to an author's declaration of intent not to enforce a copyright, sometimes called a "copyright disclaimer." Many countries have laws that allow for copyright disclaimers to be applied to creative works, but the language used may vary.

A copyright disclaimer is a statement that must be included in any copyrighted work that grants the creator protection of their work and disallows others from using it without permission. Disclaimers are commonly found on websites, such as YouTube, and on printed materials such as books and magazines. A copyright disclaimer is usually very simple and can be stated in a few words such as: “All rights reserved.”

Copyright disclaimer is a legal declaration that one grants to give up some rights to the copyright of a work. It is usually found in the fine print or legal disclaimers at the end of a copyrighted work, such as a book, music, film, software program, photograph, etc.

The purpose of this essay is to provide information and support for the thesis that the copyright disclaimer "All rights reserved" should be abolished. This essay will outline the current copyright law and its implications, as well as discuss the counter-arguments for why "All rights reserved" should remain.

Advance Free Privacy Policy Generator Online

noreply@blogger.com (BABHI G) — Wed, 01 Feb 2023 13:31:00 +0000

FAQs

What is a Privacy Policy?

An official declaration or legal document known as a privacy policy describes how a party collects, uses, discloses, and manages the data of its clients or customers. Privacy policies are most frequently linked to websites that collect user personal information for the purposes of registration and user experience customisation. They also notify people of their rights regarding said data.
Privacy policies are legal documents that describe how a company or organisation will gather and use a person's personal information. Designed to safeguard customers from data breaches and other problems, privacy policies must be made available to customers before any personal information is gathered.

Why Privacy Policy is Need For Business, Blog, or Website?

For every company, blog, or website, privacy policies are crucial. Users are made aware of what information is gathered and how it is utilised. Additionally, they inform people of their rights and how to exercise them. The security of users' personal information requires privacy policies.
Any company, blog, or website that gathers users' personal information must have privacy policies.

These rules are intended to explain to users how their data is gathered, stored, and used. Users won't be aware of how their information is being utilised if there is no privacy policy.
Websites, blogs, and enterprises all need privacy policies.

It's crucial to learn about the company's privacy policies before making a purchase or signing up for a service or subscription. This policy describes the data that the company obtains about you and how it is used. It also highlights your rights, including the ability to request deletion of your data or the right to object. In the present era, where technology is continually improving and businesses are gathering more and more information about their consumers to better focus adverts and products in their direction, privacy policies are essential.

Whether it's a blog or a company, privacy policies are an essential component of any organisation or business. They are required for each website or blog that gathers user data since they

Favicon & Logo Maker

noreply@blogger.com (BABHI G) — Sun, 19 Sep 2021 05:45:00 +0000

XML Sitemap Generator For Blogger || Tool - online tool

noreply@blogger.com (BABHI G) — Sun, 08 Aug 2021 09:43:00 +0000

Generate robots.txt

Website URL:
Platform:

Enter Website URL Here:
Enter Website Name Here:
Enter Email Address Here:

BABHI G EARNING CENTER

Hi,

Here:

50% OFF

Coupon

Internet Speed Test - 5g speed test

computer Quiz - computer Question || test of computer

Computer Science Quiz

Please fill above data!

Name : Apu

Result : 9

Total Questions:

Correct: | Wrong:

Attempt: | Percentage:

All Important html code for blogger - html code for website

Google safe search & safe content || disable copypast (1)

Disable only copy paste in website

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

easy table of contents - use this code in post

Make Automatic table of content

Automatic Post toc float on left

Remove stratch in all imag

logo size in blogger

Stylish Social Icon html for blogger

Subscribe by email - widget

Youtube subcribe than download Button

Stylish Download button

Pdf file in blogger ( pdf downloader from google drive )

Make Cool Note Boxes in Blog Posts

Breaking News html code

Stylish About us page for your website -

Best image Slide for your Blogger

Best slides in html image

Best slides in html image for your website

Spilt (Broken) of page

Best FAQ style in blogger

Multi Tab in Post

Best amazzing Multi Tab in Post

Left side Multi Tab in Post

Most Imp website for blogger

Hindi Grammer Quiz text - हिंदी ग्रामर प्रश्‍न

Hindi Grammer text

Please fill the above data!

Name : Apu

Result : 9

Total Questions:

Correct: | Wrong:

Attempt: | Percentage:

Quora se paise kaise kamaye - कोरा से पैसे कमाने का तरीका

Learn Quora , Review & Ask questions

1 video , basic video

2. how to ask questions

3. Good looking profile setup

4. about space & monetize your space , this video is very important video

5. Answer collapse proplem

6. kis question ka answer krna hai is video me achhe se dek le

Read more - Dominating Instagram Marketing Secrets:

8. Most important steps for grow quora

Thanx

By - Ravi Soni

Dominating Instagram Marketing Secrets:

Dominating Instagram Marketing Secrets:

Disclaimer Page Generator Tool

Disclaimer Page Generator Tool

Website URL:

Website Name:

Email Id:

Free Online Copyright Disclaimer Generator Tool

Advance Free Privacy Policy Generator Online

Enter Website URL Here:

Enter Website Name Here:

Enter Email Address Here:

FAQs