Most Important HTML Codes use on Blog Post

Welcome to our bongobad.com website. In this post i will discuss you most important HTML codes use on Blog Post.HTML,CSS,Js language is more necessary  for web development.Bangabad website shares all informational blogs on Google's web platform Blogger. Let's go for learn topic most important HTML codes use on Blog Post.

Most Important HTML Codes use on Blog Post

Table Of Content:

1. PDF File And Google Form View HTML Code

2. Author Box HTML CSS Code Sidebar

3. Add HTML CODE BOX On Blog post

4. How to Remove date and html Extension from Blogger URL

5. Clickable Link Image html code

6. Clickable Text HTML CODE

7. Devide In Two Elements HTML Code 

8. Copy Past Disable For Website Code

9. Font Colour HTML Code

10. iframe Box Makinf on Page Html Code

11. Image Gallery Setting Code 

12. List Making Code 

13. Table makeing Menually html Code

14. Mobile Review Post Code 

15. add Read More post on blog post

16. Stylish Contact Us Page HTML,CSS Code

17. Table Of Content HTML Code

18. Text Border Code

19. World Map Add on Webpage Code

20. HTML CODE Insert on Blog post-Add HTML

21. Video player add On Blogger By HTML Code

22. Copy to Clip Board HTML CODE

23. Blogger Url XML remove script  

24. Download Button Timer HTML Code

25. Password protect Post or page html code

26. How to Remove Sidebar Web page or Post

27. Bangla News paper HTML Code 

28. Date And Time Code On Your Web page  

29. News Tricker HTML Code

30. Image Slider HTML Code

Let's go for read and use this codes step by step is given below. This post will discuss IN details Most Important HTML Codes use on Blog Post. If you want to add this codes your website blog post more html codes that's in here .

1. PDF File And Google Form View HTML Code

PDF File Add On Your Website HTML Code

<iframe loading="lazy"src=" https://drive.google.com/file/d/USE

          DRIVE ID/preview" width="750" height="800"></iframe>
  ---------------------------------------------------------------------------------------
          <nav id="breadcrumb"><br /></nav> <div
          class="post-body entry-content"> <div style="height: 0px; left:
          0px; padding-bottom: 129.412%; position: relative; width: 100%;" >
          <iframe allowfullscreen="" src="https://drive.google.com/file/d/USE
          DRIVE ID/preview" style="border: 0; height: 100%; left: 0; position:
          absolute; top: 0; width: 100%;" ></iframe> </div>
          <div style="height: 0px; left: 0px; padding-bottom: 129.412%;
          position: relative; width: 100%;" > <br /> </div>
          </div>
        

Google Form Add HTML Code On Your Website

-----------------------------------------------------------------

<iframe src="YOUR_GOOGLE_FORM_URL" width="100%" height="800"
          frameborder="0" marginheight="0"
          marginwidth="0">Loading...</iframe>

2. Author Box HTML CSS Code Sidebar

<div class="k2-author"> <img class="author-pic" src="IMAGE
        LINK ADDRESS" alt="Author bio image" width="150" height="150" />
        <h2 style="font-size: 22px;" >About the Author</h2><br
        /> <p style="font-size: 19px;"> Hi there! I'm Abhishek and the
        founder of Key2Blogging.In my free time, I enjoy making blogging
        tutorials. </p><br /> <!-- Customize Readmore Button
        --> <a href='https://example.blogspot.com/'> <button
        class="k2-button"> Read More ➔ </button> </a><br/>
        <div class="k2-social"> <a href="#"> <i class="fab
        fa-facebook"></i> </a> <a href="#"> <i
        class="fab fa-twitter"></i> </a> <a href="#"> <i
        class="fab fa-telegram"></i> </a> <a href="#">
        <i class="fab fa-linkedin"></i> </a> </div>
        </div> <style> .k2-author{ border: 2px solid #162536;
        background-color: #FFFFFF; text-align: center; padding: 30px 25px 30px
        25px; } /*profile photo */ .author-pic{ background-color: #4C4A4B;
        border: 1px; border-radius: 100px; } /* Button Customization*/
        .k2-button { background-color: #4CAF50; border: none; border-radius:
        30px; color: white; padding: 15px 32px; text-align: center;
        text-decoration: none; display: inline-block; font-size: 19px; margin:
        4px 2px; cursor: pointer; } /* Social button CSS */ .k2-social a {
        font-size: 32px; text-decoration: none; padding: 5px 5px; display:
        inline-block; transition: all 400ms; } .k2-social a:hover { transform:
        scale(1.1); } /* Official icon colors*/ .k2-social .fa-facebook { color:
        #3b5998; } .k2-social .fa-twitter { color: #1da1f2; } .k2-social
        .fa-telegram { color: #0088cc; } .k2-social .fa-linkedin { color:
        #0077b5; } </style>

3. Add HTML CODE BOX On Blog post

<div id="generatedDoc" style="border-style: solid; border-width:
        thin; box-sizing: inherit; height: 300px; overflow: auto; padding: 20px;
        text-rendering: geometricprecision; white-space: pre-wrap;"><p
        style="box-sizing: inherit; color: black; font-family: Arial; font-size:
        11pt; margin: 0px; text-rendering: geometricprecision;">PASTE HTML
        CODE</p><br style="box-sizing: inherit; text-rendering:
        geometricprecision;"> </div>

4. How to Remove date and html Extension from Blogger URL

</head> এই ট্যাগ এর ভেতর পেস্ট করে সেভ করতে হবে।
        ------------------------------------------------------------------------

------------------------------------------------------------------------
        <script type='text/javascript'> //<![CDATA[ // BloggerJS v0.3.1
        // Copyright (c) 2017-2018 // Licensed under the MIT License var
        urlTotal,nextPageToken,postsDatePrefix=!1,accessOnly=!1,useApiV3=!1,apiKey="",blogId="",postsOrPages=["pages","posts"],jsonIndex=1,secondRequest=!0,feedPriority=0,amp="&"[0];function
        urlVal(){var
        e=window.location.pathname,t=e.length;return".html"===e.substring(t-5)?0:t>1?1:2}function
        urlMod(){var
        e=window.location.pathname;"p"===e.substring(1,2)?(e=(e=e.substring(e.indexOf("/",1)+1)).substr(0,e.indexOf(".html")),history.replaceState(null,null,"../"+e)):(e=(e=postsDatePrefix?e.substring(1):e.substring(e.indexOf("/",7)+1)).substr(0,e.indexOf(".html")),history.replaceState(null,null,"../../"+e))}function
        urlSearch(e,t){var
        n=e+".html";t.forEach(function(e){-1!==e.search(n)&&(window.location=e)})}function
        urlManager(){var
        e=urlVal();0===e?accessOnly||urlMod():1===e?getJSON(postsOrPages[feedPriority],1):2===e&&(accessOnly||history.replaceState(null,null,"/"))}function
        getJSON(e,t){var n=document.createElement("script");if(useApiV3){var
        o="https://www.googleapis.com/blogger/v3/blogs/"+blogId+"/"+e+"?key="+apiKey+"#maxResults=500#fields=nextPageToken%2Citems(url)#callback=bloggerJSON";nextPageToken&&(o+="#pageToken="+nextPageToken),nextPageToken=void
        0}else
        o=window.location.protocol+"//"+window.location.hostname+"/feeds/"+e+"/default?start-index="+t+"#max-results=150#orderby=published#alt=json-in-script#callback=bloggerJSON";o=o.replace(/#/g,amp),n.type="text/javascript",n.src=o,document.getElementsByTagName("head")[0].appendChild(n)}function
        bloggerJSON(e){var t=[];if(useApiV3||void
        0===urlTotal&&(urlTotal=parseInt(e.feed.openSearch$totalResults.$t)),useApiV3){try{e.items.forEach(function(e,n){t.push(e.url)})}catch(e){}nextPageToken=e.nextPageToken}else
        try{e.feed.entry.forEach(function(n,o){var
        r=e.feed.entry[o];r.link.forEach(function(e,n){"alternate"===r.link[n].rel&&t.push(r.link[n].href)})})}catch(e){}urlSearch(window.location.pathname,t),urlTotal>150?(jsonIndex+=150,urlTotal-=150,getJSON(postsOrPages[feedPriority],jsonIndex)):nextPageToken?getJSON(postsOrPages[feedPriority]):secondRequest&&(nextPageToken=void
        0,urlTotal=void
        0,jsonIndex=1,secondRequest=!1,0===feedPriority?(feedPriority=1,getJSON("posts",1)):1===feedPriority&&(feedPriority=0,getJSON("pages",1)))}function
        bloggerJS(e){e&&(feedPriority=e),urlManager()}bloggerJS();
        //]]> </script>

5. Clickable Link Image html code




HTML CODE FOR ADDING IMAGE/AD BANNER TO GOOGLE BLOGGER:    
    ---------------------------------------------------------------------------------------------------------------------------------------- <a href="OUTGOING
    URL TO YOUR LANDING PAGE" target="_blank"><img src="IMAGE URL FROM
    BLOGGER" /></a>
    ----------------------------------------------------- <a
    href="https://html.com/tags/img/" target="_blank"> <img
    style="border:5px double black;"
    src="https://images.pexels.com/photos/2104152/pexels-photo-2104152.jpeg?auto=compress&cs=tinysrgb&w=600"
    width="1200" alt="Photo of Milford Sound in New Zealand" /></a>

6. Clickable Text HTML CODE

No# 01

 <p style='text-align:left;'><a
        href='https://rubelmeer.blogspot.com/'>Meer Tours & Travels
        Agency</a></p> <div class='ty-copy-container row'
        style='font-size:1px; opacity:0;'> 


No#02
<a href="https://www.wbbackend.com/">ghostpeppers</a>

7. Devide In Two Elements HTML Code 

   <br style="clear:both;"/>

8. Copy Past Disable For Website Code

CODE TO DISABLE COPY AND PASTE OF TEXT CONTENT ON BLOGGER: (past here
        on theme lyout on HTML Code Any Where On Sidebar) 

        <script
        src='demo-to-prevent-copy-paste-on-blogger_files/googleapis.
        js'></script><script type='text/javascript'> if(typeof
        document.onselectstart!="undefined" ) {document.onselectstart=new
        Function ("return false" ); } else{document.onmousedown=new Function
        ("return false" ); document.onmouseup=new Function ("return false"); }
        </script>
      
-----------------------------------------------------------------------------------------


Simple steps to disable copy-paste option in blogger.

Log in to the Blogger Account Dashboard. Now Go to the Theme Section.
        In the Theme Section go to customize with Edit HTML. Now Search tag
        using Ctrl + F. Copy the code below and paste it before the
        </body> tag.

<script>

      //<![CDATA[ 

         $(document).ready(function() {

        //Disable cut copy paste

        $('body').bind('cut copy paste',
        function(e) {

            e.preventDefault();

        });

        //Disable mouse right click

        $("body").on("contextmenu", function(e)
        {

            return false;

        });

    });

//]]>


    </script>

9. Font Colour HTML Code

<font color="#9900FF"> Welcome to freeCodeCamp. </font>

10. iframe Box Makinf on Page Html Code

<iframe
        src="https://www.blogearns.com/2021/06/custom-robots-header-tags-settings-in-blogger.html"
        style="border: 2px solid #1288ff; height: 400px; width: 100%;"
        title="Custom Robot Header Tags"></iframe>

11. Image Gallery Setting Code

    <p>&nbsp;</p> <style> .gallery {padding: 0 5px;float:
    left; width: 24.99999%;} div.gallery img {width: 100%;height: auto;}
    div.gallery img:hover {opacity: 0.8;} div.img-desc {padding:
    10px;text-align: center;} * {box-sizing: border-box;} @media only screen and
    (max-width: 700px){.gallery {width: 49.99999%; margin: 6px 0;}} @media only
    screen and (max-width: 500px){.gallery {width: 100%;}} .image-gallery:after
    {content: "";display: table;clear: both;} </style> <div
    class="image-gallery">

    <!--Image One--> <div class="gallery"> <a href="#"
    target="_blank"> <img src="IMAGE-URL" alt="Add Image Alt tag
    here"> </a> <div class="img-desc">image-Caption</div>
    </div>

    <!--Image Two--> <div class="gallery"> <a href="#"
    target="_blank"> <img src="IMAGE-URL" alt="Add Image Alt tag here"> </a> <div
    class="img-desc">image-Caption</div> </div>

    <!--Image Three--> <div class="gallery"> <a href="#"
    target="_blank"> <img src="IMAGE-URL" alt="Add Image Alt tag here"> </a> <div
    class="img-desc">image-Caption</div> </div>
  
   <!--Image Four--> <div class="gallery"> <a href="#"
    target="_blank"> <img src="IMAGE-URL" alt="Add Image Alt tag here"> </a> <div
    class="img-desc">image-Caption</div> </div>
  
    <!--Image Five--> <div class="gallery"> <a href="#"
    target="_blank"> <img src="IMAGE-URL" alt="Add Image Alt tag here"> </a> <div
    class="img-desc">image-Caption</div> </div> </div>
    ------------------------------------------------------------- <div
    class="masonry"> <div class="mItem"> <img src="IMAGE URL"> </div>

    
      <div class="mItem"> <img src="IMAGE URL"> </div>
    
      <div class="mItem"> <img src="IMAGE URL"> </div>
    
      <div class="mItem"> <img src="IMAGE URL"> </div>
    
      <div class="mItem"> <img src="IMAGE URL"> </div>
  
      <div class="mItem"> <img src="IMAGE URL"> </div>

    </div> <style> .masonry img { width: 100%; } .masonry {
    column-count: 4; column-gap: 16px; } .masonry .mItem { display:
    inline-block; margin-bottom: 16px; width: 100%; } @media (max-width: 1199px)
    { .masonry { column-count: 3; } } @media (max-width: 991px) { .masonry {
    column-count: 2; } } @media (max-width: 767px) { .masonry { column-count: 1;
    } } </style>

12. List Making html Code

    Unorder List: (Dot Wise)
   ---------------------------------
    <ul> <li>TEXT PAST HERE</li> <li>TEXT PAST
    HERE</li> <li>TEXT PAST HERE</li> <li>TEXT PAST
    HERE</li> <li>TEXT PAST HERE</li> <li>TEXT PAST
    HERE</li> <li>TEXT PAST HERE</li> </ul>
  

Order List: (Number Wise)
-----------------------------------
  

<ol> <li>TEXT PAST HERE</li> <li>TEXT PAST
        HERE</li> <li>TEXT PAST HERE</li> <li>TEXT PAST
        HERE</li> <li>TEXT PAST HERE</li> <li>TEXT PAST
        HERE</li> <li>TEXT PAST HERE</li> </ol>

13. Table makeing Menually html Code

<table> <tr> <td>Row 1 - Column 1</td>
        <td>Row 1 - Column 2 </td> </tr> <tr>
        <td>Row 2 - Column 1</td> <td>Row 2 - Column
        2</td> </tr> </table>
      
    

14. Mobile Review Post Code 

  

    <!--------start---> <h1 style="display: inline-block; font-size:
    30px;"><b>Sony Xperia Pro-I</b></h1> <div
    class="all-content"> <div class="mobile-img"> <img src="image
    url" /> </div> <div class="mobile-price-text"> <h3
    class="mobile-price"><b>Official ৳12000</b></h3>
    <span style="font-size: 15px;">4/32gb</span> <p
    class="price-text"><b>Brand:</b> Vivo<br
    /><b>Category:</b> Smartphones<br /><b>Last
    updated:</b> 19th, Oct, 2021</p> <div class="top-feature">
    <h3 style="display: inline-block; font-size: 20px;"><b>Top
    Feature</b></h3> <ul> <li><i class="fas
    fa-camera"></i> <b>Camera:</b> 13mp 1080p</li>
    <li><i class="fas fa-memory"></i> <b>RAM:</b>
    2GB RAM Helio P35</li> <li><i class="fas
    fa-mobile-alt"></i> <b>Display:</b> 6.51" 720x1600
    pixel</li> <li><i class="fas fa-battery-full"></i>
    <b>Battery:</b> 13mp 1080p</li> </ul> </div>
    </div> </div> <!----------bar----------> <link
    href="https://www.w3schools.com/w3css/4/w3.css"
    rel="stylesheet"></link> <h3 style="display: inline-block;
    font-size: 20px;"><b>Our Rating</b></h3><span
    style="font-size: 13px;"> (58% out of 100%)</span> <div
    class="w3-light-grey w3-round-xlarge" style="border: 0.5px solid rgb(221,
    221, 221);"> <div class="w3-container w3-blue w3-round-xlarge"
    style="width: 70%;">Display 70%</div> </div> <div
    class="w3-light-grey w3-round-xlarge" style="border: 0.5px solid rgb(221,
    221, 221);"> <div class="w3-container w3-blue w3-round-xlarge"
    style="width: 40%;">Design 40%</div> </div> <div
    class="w3-light-grey w3-round-xlarge" style="border: 0.5px solid rgb(221,
    221, 221);"> <div class="w3-container w3-blue w3-round-xlarge resbar1"
    style="width: 30%;">Camera 30%</div> </div> <div
    class="w3-light-grey w3-round-xlarge" style="border: 0.5px solid rgb(221,
    221, 221);"> <div class="w3-container w3-blue w3-round-xlarge"
    style="width: 60%;">Connectivity 60%</div> </div> <div
    class="w3-light-grey w3-round-xlarge" style="border: 0.5px solid rgb(221,
    221, 221);"> <div class="w3-container w3-blue w3-round-xlarge"
    style="width: 70%;">Features 70%</div> </div> <div
    class="w3-light-grey w3-round-xlarge" style="border: 0.5px solid rgb(221,
    221, 221);"> <div class="w3-container w3-blue w3-round-xlarge resbar2"
    style="width: 20%;">Performance 20%</div> </div> <div
    class="w3-light-grey w3-round-xlarge" style="border: 0.5px solid rgb(221,
    221, 221);"> <div class="w3-container w3-blue w3-round-xlarge"
    style="width: 70%;">Battery 70%</div> </div> <div
    class="w3-light-grey w3-round-xlarge" style="border: 0.5px solid rgb(221,
    221, 221);"> <div class="w3-container w3-blue w3-round-xlarge"
    style="width: 90%;">Usability 90%</div> </div>
    <!----------------table----------------> <h1 style="border-top:
    0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px;
    padding-top: 5px;"><b>Launch</b></h1> <div
    class="container table-responsive py-5"> <table class="table
    table-bordered table-hover"> <tbody> <tr> <th
    scope="row">Announced</th> <td>2021, October</td>
    </tr> <tr> <th scope="row">Status</th>
    <td>Available. Released 2021, October 18</td> </tr>
    </tbody> </table> <h1 style="border-top: 0.5px dotted
    rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top:
    5px;"><b>Network</b></h1> <div class="container
    table-responsive py-5"> <table class="table table-bordered
    table-hover"> <tbody> <tr> <th
    scope="row">Technology</th> <td>GSM / CDMA / HSPA /
    LTE</td> </tr> <tr> <th scope="row">2G
    bands</th> <td>GSM 850 / 900 / 1800 / 1900 - SIM 1 &amp; SIM
    2 CDMA 800 &amp; TD-SCDMA</td> </tr> <tr> <th
    scope="row">3G bands</th> <td>HSDPA 850 / 900 /
    2100</td> </tr> <tr> <th scope="row">4G
    bands</th> <td>1, 3, 5, 8, 34, 38, 39, 40, 41</td>
    </tr> <tr> <th scope="row">Speed</th>
    <td>ehfewfkjfhejfkrjekr</td> </tr> <tr> <th
    scope="row">GPRS</th> <td>❌</td> </tr>
    <tr> <th scope="row">EDGE</th> <td>✅</td>
    </tr> </tbody> </table> <h1 style="border-top: 0.5px
    dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top:
    5px;"><b>Body</b></h1> <div class="container
    table-responsive py-5"> <table class="table table-bordered
    table-hover"> <tbody> <tr> <th
    scope="row">Dimensions</th> <td>164.4 x 76.3 x 8.4 mm (6.47 x
    3.00 x 0.33 in)</td> </tr> <tr> <th
    scope="row">Weight</th> <td>190 g (6.70 oz)</td>
    </tr> <tr> <th scope="row">Build</th>
    <td>Glass front, plastic back, plastic frame</td> </tr>
    <tr> <th scope="row">SIM</th> <td>Dual SIM
    (Nano-SIM, dual stand-by)</td> </tr> </tbody>
    </table> <h1 style="border-top: 0.5px dotted rgb(127, 140, 141);
    font-size: 20px; margin-top: 20px; padding-top:
    5px;"><b>Display</b></h1> <div class="container
    table-responsive py-5"> <table class="table table-bordered
    table-hover"> <tbody> <tr> <th
    scope="row">Type</th> <td>IPS LCD capacitive touchscreen, 16M
    colors</td> </tr> <tr> <th
    scope="row">Size</th> <td>6.51 inches, 102.3 cm2 (~81.6%
    screen-to-body ratio)</td> </tr> <tr> <th
    scope="row">Resolution</th> <td>720 x 1600 pixels, 20:9 ratio
    (~270 ppi density)</td> </tr> <tr> <th
    scope="row">Multitouch</th> <td>Dual SIM (Nano-SIM, dual
    stand-by)</td> </tr> </tbody> </table> <h1
    style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px;
    margin-top: 20px; padding-top:
    5px;"><b>Platform</b></h1> <div class="container
    table-responsive py-5"> <table class="table table-bordered
    table-hover"> <tbody> <tr> <th
    scope="row">OS</th> <td>Android 11 (Go edition), Funtouch
    11</td> </tr> <tr> <th
    scope="row">Chipset</th> <td>Mediatek MT6765 Helio P35
    (12nm)</td> </tr> <tr> <th
    scope="row">CPU</th> <td>Octa-core (4x2.3 GHz Cortex-A53
    &amp; 4x1.8 GHz Cortex-A53)</td> </tr> <tr> <th
    scope="row">GPU</th> <td>PowerVR GE8320</td>
    </tr> </tbody> </table> <h1 style="border-top: 0.5px
    dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top:
    5px;"><b>Memory</b></h1> <div class="container
    table-responsive py-5"> <table class="table table-bordered
    table-hover"> <tbody> <tr> <th scope="row">Card
    slot</th> <td>microSDXC (dedicated slot)</td> </tr>
    <tr> <th scope="row">Internal (ROM)</th> <td>32 GB
    eMMC 5.1</td> </tr> <tr> <th
    scope="row">RAM</th> <td>O2 GB</td> </tr>
    </tbody> </table> <h1 style="border-top: 0.5px dotted
    rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top:
    5px;"><b>Camera</b></h1> <div class="container
    table-responsive py-5"> <table class="table table-bordered
    table-hover"> <tbody> <tr> <th scope="row">Primary
    camera</th> <td>13 MP, f/2.2, 27mm (wide), AF</td>
    </tr> <tr> <th scope="row">Secondary camera</th>
    <td>5 MP, f/1.8</td> </tr> <tr> <th
    scope="row">Features</th> <td>LED flash, HDR,
    panorama</td> </tr> <tr> <th
    scope="row">Video</th> <td>1080p@30fps</td> </tr>
    </tbody> </table> <h1 style="border-top: 0.5px dotted
    rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top:
    5px;"><b>Sound</b></h1> <div class="container
    table-responsive py-5"> <table class="table table-bordered
    table-hover"> <tbody> <tr> <th scope="row">Alert
    types</th> <td>Vibration, MP3, WAV ringtones</td>
    </tr> <tr> <th scope="row">Loudspeaker</th>
    <td>Yes</td> </tr> <tr> <th scope="row">3.5mm
    jack</th> <td>Yes</td> </tr> </tbody>
    </table> <h1 style="border-top: 0.5px dotted rgb(127, 140, 141);
    font-size: 20px; margin-top: 20px; padding-top:
    5px;"><b>Connectivity</b></h1> <div class="container
    table-responsive py-5"> <table class="table table-bordered
    table-hover"> <tbody> <tr> <th
    scope="row">WLAN</th> <td>Wi-Fi 802.11 b/g/n, Wi-Fi Direct,
    hotspot</td> </tr> <tr> <th
    scope="row">Bluetooth</th> <td>5.0, A2DP, LE</td>
    </tr> <tr> <th scope="row">GPS</th> <td>Yes,
    with A-GPS, GLONASS, GALILEO, BDS</td> </tr> <tr> <th
    scope="row">NFC</th> <td>❌</td> </tr> <tr>
    <th scope="row">FM radio</th> <td>✅</td>
    </tr> <tr> <th scope="row">USB</th>
    <td>microUSB 2.0, USB On-The-Go</td> </tr> <tr>
    <th scope="row">Infrared port</th> <td>❌</td>
    </tr> </tbody> </table> <h1 style="border-top: 0.5px
    dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top:
    5px;"><b>Features</b></h1> <div class="container
    table-responsive py-5"> <table class="table table-bordered
    table-hover"> <tbody> <tr> <th
    scope="row">Sensors</th> <td>Accelerometer, proximity,
    compass</td> </tr> <tr> <th
    scope="row">Messaging</th> <td>SMS(threaded view), MMS,
    Email, IM</td> </tr> <tr> <th
    scope="row">Browser</th> <td>HTML5</td> </tr>
    <tr> <th scope="row">Java</th> <td>❌</td>
    </tr> </tbody> </table> <h1 style="border-top: 0.5px
    dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top:
    5px;"><b>Battery</b></h1> <div class="container
    table-responsive py-5"> <table class="table table-bordered
    table-hover"> <tbody> <tr> <th scope="row">Battery
    type</th> <td>Non-removable Li-Po</td> </tr>
    <tr> <th scope="row">Battery capacity</th> <td>5000
    mAh</td> </tr> <tr> <th
    scope="row">Charging</th> <td>Charging 10W and Reverse
    charging 5W</td> </tr> </tbody> </table> <h1
    style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px;
    margin-top: 20px; padding-top: 5px;"><b>More</b></h1>
    <div class="container table-responsive py-5"> <table class="table
    table-bordered table-hover"> <tbody> <tr> <th
    scope="row">Made by</th> <td>China</td> </tr>
    <tr> <th scope="row">Color</th> <td>Starry Blue,
    Pearl White, Mint Green</td> </tr> </tbody> </table>
    <h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px;
    margin-top: 20px; padding-top: 5px;"><b>Your Mobile
    Name</b></h1> <iframe class="BLOG_video_class"
    allowfullscreen="" youtube-src-id="N8hR2BVTPNk" width="320" height="266"
    src="https://www.youtube.com/embed/videocode"></iframe> <br
    /> <p style="text-align: justify;">short review </p> <h1
    style="font-size: 20px; margin-top: 20px; padding-top:
    5px;"><b>Phone Name</b></h1> <p style="text-align:
    justify;">medium review </p> <h1 style="font-size: 20px;
    margin-top: 20px; padding-top: 5px;"><b>Your FAQs about Phone Name
    Review Year</b></h1> <p style="text-align: justify;">Which
    question you will have about this phone. Let’s justify these. There we are
    including the major question and answers about this phone. So, let’s start
    now.... <br /><br /><b>Question 1: </b> <br />
    <span>&nbsp;&nbsp; &nbsp;</span>Answer: It will
    launch in October 2021. <br /><b>Question 2: </b> <br
    /> <span>&nbsp;&nbsp; &nbsp;</span>Answer: <br
    /><b>Question 3: </b> <br />
    <span>&nbsp;&nbsp; &nbsp;</span>Answer: </p>
    <h1 style="font-size: 20px; margin-top: 20px; padding-top:
    5px;"><b>Our Decision about Phone Name</b></h1> <p
    style="text-align: justify;">Your Decision </p> <br />
    <p>If you have any question or want to give a feedback about
    <b>Phone Name</b>, leave a comment. Thanks for connecting with
    us.</p> <!-----------table end-----------> <style>
    .all-content{ min-height:400px; margin-bottom:10px; } .all-content
    .mobile-img img{ float:left; width:50%; padding:10px; border:.5px solid
    rgba(149, 165, 166,.3); } .all-content .mobile-price-text{ float:right;
    width:50%; padding:10px; margin-top:15px; } .mobile-price{ font-size:20px;
    display:inline-block; color:black; } .top-feature ul li{ font-size:15px;
    list-style-type:none; } .top-feature ul li i{ background-color:#8e44ad;
    color:#fff; font-size:13px; padding:5px; border-radius:7px; } .post-body th{
    background:rgba(189, 195, 199,.3); } .post-body th:hover{
    background:rgba(189, 195, 199,.7);} @media (max-width: 661px){ .all-content
    .mobile-img img{ width:100%; } .all-content .mobile-price-text{ width:100%;
    } @media (max-width: 794px){ .resbar2{ font-size:10px; } @media (max-width:
    450px){ .resbar1{ font-size:10px; } .resbar2{ font-size:5px; } }
    </style>
    </div></div></div></div></div></div></div></div></div></div></div></div>

15. Add Read More post on blog post

<blockquote> <h3><strong>🔥🔥<a
    href="https://news.google.com/publications/CAAqBwgKMIWprwswkrTHAw?hl=en-US&amp;gl=US&amp;ceid=US%3Aen"
    target="_blank" rel="nofollow noopener">Click here to follow US IT
    BARI-All about Healthy Foods site in Google
    News</a>🔥🔥</strong></h3> </blockquote>

02) <div style="border:2px dashed #000099;"> <p><b style="color:
    #04ff00; font-size: large;">More Article For You...</b></p>
    <p> <span style="font-size:
    medium;"><b></b></span></p><ul><span
    style="font-size: medium;"><b> <li><a href="LINK HERE" target="_blank">TITLE HERE</a></li> <li><a href="LINK HERE" target="_blank">TITLE HERE</a></li> </b></span></ul><span
    style="font-size: medium;"><b> </b></span>
    <p></p> </div>

16. Stylish Contact Us Page HTML,CSS Code

    <style> .tb-contact-form-widget{ background:radial-gradient(rgba(8,
    85, 252, 0.05),#dfe6e9);; background-repeat: repeat; background-position:
    100% 100%; color:#000; padding:25px; font-size:15px;} .srbtn{
    display:inline-block;} .cform-button, .btn-reset{ background-color:rgba(44,
    62, 80,1.0); padding:5px 30px; border-radius:10px; color:#ffffff; }
    .cform-button:hover { background-color: #2980b9; color: #fff;}
    .btn-reset:hover { background-color: red; color: #fff;}
    .tb-contact-form-widget h3{ text-align:center; margin:20px 0 0 0;
    padding:10px 0; border-top: 1px dotted #000;} .c-form-name, .c-form-email {
    width: 100%; max-width: 100%; margin-bottom: 10px; padding: 10px; border:
    1px solid #CCC; border-radius: 5px; -moz-border-radius: 5px;
    -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0
    #fff; -webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF; box-shadow: 0
    1px 1px #CCC inset, 0 1px 0 #FFF;} .c-form-email-message { width: 100%;
    max-width: 100%; margin-bottom: 10px; padding: 10px; border: 1px solid #CCC;
    border-radius: 5px; box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;
    -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px
    1px #ccc inset, 0 1px 0 #fff; -webkit-box-shadow: 0 1px 1px #CCC inset, 0
    1px 0 #FFF;} .c-form-name, .c-form-email, .c-form-email-message input:focus{
    background-color: #FFF; box-shadow: 0 0 0 1px #E8C291 inset; border-color:
    #E8C291;outline: none; -moz-box-shadow: 0 0 0 1px #e8c291 inset;
    -webkit-box-shadow: 0 0 0 1px #E8C291 inset;} .b-social-buttons{
    list-style-type:none; text-align:left;} .b-social-buttons li{
    display:inline-block; } .btn-lg{ border-radius:10%; border:1px solid #ddd;
    background:linear-gradient(to right, #ff105f, #ffad06); color:#fff;
    text-decoration:none; font-size:15px; margin-right:10px; padding:2px 5px 2px
    5px;} #ContactForm1_contact-form-success-message,
    #ContactForm1_contact-form-error-message{ width:100%; margin-top:15px;}
    .network-name{ padding-right:10px; color:#ff5722;} #-name{ margin-left:5px;}
    .form-a{ float: right; width:50%; } .con-info p{ text-align:justify; }
    .c-info{ float:left; width:50%; } .c-info h1{ font-size:25px; } .c-info p{
    font-size:15px; text-align:justify; padding-right:10px; } .c-info ul li{
    list-style-type:none; } .c-info li i{ font-size:15px; background:#2c3e50;
    color:#fff; border-radius:10%; padding:5px; margin-bottom:5px; } @media
    screen and (max-width:629px) { .c-info{ width:100%; } } @media screen and
    (max-width:629px) { .form-a{ width:100%; margin-top:10px; } } </style>
    <div class="con-info"> <p>এই যোগাযোগ পেজটি এই সাইট সম্পর্কিত
    সাধারণ প্রশ্ন, প্রযুক্তিগত সমস্যার প্রতিবেদন এবং বিজ্ঞাপন সম্পর্কিত
    অনুসন্ধানের জন্য। আপনার যদি এই সাইট সম্পর্কিত কোন পরামর্শ, মতামত, প্রশ্ন বা
    পরামর্শ থাকে তাহলে দয়া করে আমাদের লিখুন। আমরা আমাদের সকল পাঠকদের মূল্য দিই
    এবং তাদের পাঠানো প্রতিটি ইমেইলে রিপ্লে দেওয়ার চেষ্টা করি। যদি আপনি একটি
    বিনামূল্যে ফ্রিল্যান্সিং সাপোর্ট চান তাহলে এই ফর্মটি ব্যবহার করবেন। আর আপনি
    যদি নতুন ‍ফ্রিল্যান্সারদের জন্যে এই সাইটে লিখতে চান তবে এই ফর্মটি ব্যবহার
    করবেন না বরং আমাদের <b><a href="/p/submit-guide.html"
    target="_blank">সাবমিট গাইড</a></b> এই বাটনটি ব্যবহার করবেন।
    ওখানে একটি টিউটোরিয়াল পাবলিশ করার সকল নির্দেশিকা দেওয়া আছে। এছাড়াও আপনি ‍যদি
    কোনো প্রকার পেইড সাপোর্ট বা সার্ভিস পেতে চান তাহলেও এই ফর্মটি ব্যবহার করবেন।
    ধন্যবাদ। <div class="c-info"> <h1>Important Notice</h1>
    <p>আমরা ফ্রিল্যান্সিং গাইডলাইন এবং খণ্ডকালীন চাকরির প্রশিক্ষণ সম্পর্কে
    অতিথি পোস্ট জমা নিয়ে থাকি এবং সেগুলো এই ওয়েবসাইটে পাবলিশ করে থাকি। আপনার
    ব্লগ বা নিবন্ধনটি আমাদের জন্য মূল্যবান। আপনার যদি এই বিষয়ে আগ্রহ থাকে তাহলে
    <a href="/p/guest-post-policy.html" target="_blank"><b>অতিথি
    পোষ্ট পলাইসি</b></a> পরে আপনার ব্লগ বা নিবন্ধনটি <a
    href="/p/submit-guide.html" target="_blank"><b>সাবমিট
    করুন</b></a> ধন্যবাদ।</p> <h1>Contact
    Info</h1> <p><b> ওয়েব ডেভেলপমেন্ট এবং ডিজিটাল মেকেটিং
    </b> সম্পর্কে কোন প্রশ্নের উত্তর বা সার্ভিস পেতে নির্দ্বিধায় আমার সাথে
    যোগাযোগ করুন।</p> <li><i class="far fa-clock"></i>
    SUN to SAT, Bangladesh (GMT+6)</li> <li><i class="fas
    fa-map-marker-alt"></i> Shibalaya, Manikganj -
    Bangladesh</li> <li><i class="far fa-envelope"></i>
    contact.mdrajumolla@gmail.com</li> <li><i class="fab
    fa-whatsapp"></i> +880 1794606140</li> </div> <div
    class="c-form-tittle"><h1>Contact Form</h1></div>
    <div class="form-a"> <div class="tb-contact-form-widget">
    <form name="contact-form"> <div class="form-name"> <span>
    <i class="fa fa-pencil-square-o"></i> Your Name*
    </span><br /> <input class="c-form-name"
    id="ContactForm1_contact-form-name" name="name" size="30" type="text"
    value="" /> </div> <div class="form-email"> <span>
    <i class="fa fa-envelope-o"></i> E-mail Address*
    </span><br /> <input class="c-form-email"
    id="ContactForm1_contact-form-email" name="email" size="30" type="text"
    value="" /> </div> <div style="clear: both;"> </div>
    <div class="form-message"> <span> <i class="fa
    fa-keyboard-o"></i> Message*</span><br /> <textarea
    class="c-form-email-message" cols="25"
    id="ContactForm1_contact-form-email-message" name="email-message"
    rows="7"></textarea> <div class="srbtn"> <input
    class="cform-button" id="ContactForm1_contact-form-submit" type="button"
    value="Submit" /> <input class="btn-reset" type="reset" value="Clear"
    /> </div> <div class="contact-form-error-message"
    id="ContactForm1_contact-form-error-message"> </div> <div
    class="contact-form-success-message"
    id="ContactForm1_contact-form-success-message"> </div> </div>
    </form> </div> </div>

17. Table Of Content HTML Code

<!DOCTYPE html> <html lang="en"> <head> <meta
        charset="UTF-8"> <meta name="viewport"
        content="width=device-width, initial-scale=1.0"> <title>Table
        of Contents</title> <style> body { font-family: Arial,
        sans-serif; margin: 20px; } h1 { text-align: center; } .toc { margin:
        20px 0; padding: 10px; background-color: #f5f5f5; border: 1px solid
        #ddd; border-radius: 5px; } ol { list-style-type: none; padding: 0; } li
        { margin-bottom: 5px; } a { text-decoration: none; color: #333; }
        a:hover { text-decoration: underline; } </style> </head>
        <body> <h1>Your Document Title</h1> <div class="toc"> <h2>Table of
        Contents</h2> <ol> <li><a
        href="#section1">Section 1</a></li> <li><a
        href="#section2">Section 2</a></li> <li><a
        href="#section3">Section 3</a></li> <!-- Add more
        entries as needed --> </ol> </div> <section
        id="section1"> <h2>Section 1</h2> <p>This is the
        content of Section 1.</p> </section> <section
        id="section2"> <h2>Section 2</h2> <p>This is the
        content of Section 2.</p> </section> <section
        id="section3"> <h2>Section 3</h2> <p>This is the
        content of Section 3.</p> </section> <!-- Add more
        sections as needed --> </body> </html>

18. Text Border Code

<p style="border:2px dashed #000099;">Text Here</p> With
        Boarder: -------------------- <p style="border:2px dashed
        #000099;"><a href='https://rubelmeer.blogspot.com/'>Meer
        ToursTravels Agency</a></p> With Rear More:
        -------------------- <p style="border:2px dashed #000099;">Read
        More:<a href='LINK HERE'>TEXT HERE</a></p>

19. World Map Add on Webpage Code

 <!--Code by W3codegenerator.com--> <iframe allowfullscreen=""
    frameborder="1" height="300" marginheight="0" marginwidth="0"
    name="myiFrame" scrolling="yes"
    src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&amp;layer=mapnik"
    style="border: 1px #000000 solid;" width="720"> <p>Your browser
    does not support iframes.</p> </iframe>

20. HTML CODE Insert on Blog Post

<div class="pre html"> <pre style="max-height: none;
        white-space: pre-wrap;">
        HTML CODE PAST HERE </pre> </div>

21. Video player add On Blogger By HTML Code

<video
    id="my-video"
    class="video-js vjs-fluid vjs-big-play-centered"
    controls
    preload="auto"
    width="640"
    height="500"
    poster="FETURED IMAGE LINK"
    data-setup="{}"
  >
    <source src="PASTE VIDEO LINK HERE">
      To watch this video, please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video.
    </p>
  </video>

22. Copy to Clip Board HTML CODE

   <blockquote id="myInput">TEST PAST HERE</blockquote><button class="k2-copy-button"
    id="k2button"><svg aria-hidden="true" height="1em"
    preserveaspectratio="xMidYMid meet" role="img" viewbox="0 0 24 24"
    width="1em" xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M13
    6.75V2H8.75A2.25 2.25 0 0 0 6.5 4.25v13a2.25 2.25 0 0 0 2.25 2.25h9A2.25
    2.25 0 0 0 20 17.25V9h-4.75A2.25 2.25 0 0 1 13 6.75z"
    fill="currentColor"><path d="M14.5 6.75V2.5l5 5h-4.25a.75.75 0 0
    1-.75-.75z" fill="currentColor"><path d="M5.503 4.627A2.251 2.251 0 0
    0 4 6.75v10.504a4.75 4.75 0 0 0 4.75 4.75h6.494c.98 0 1.813-.626
    2.122-1.5H8.75a3.25 3.25 0 0 1-3.25-3.25l.003-12.627z"
    fill="currentColor"></path></path></path></g></svg>Copy</button> 
    <style>.k2-copy-button svg{margin-right: 10px;vertical-align:
    top;}  .k2-copy-button{  height: 45px; width: 155px; color: #fff;
    background: #265df2; outline: none; border: none; border-radius: 8px;
    font-size: 17px; font-weight: 400; margin: 8px 0; cursor: pointer;
    transition: all 0.4s ease;}.k2-copy-button:hover{background: #2ECC71;}@media
    (max-width: 480px) {#k2button{width:
    100%;}}</style><script>  function copyFunction() { 
    const copyText = document.getElementById("myInput").textContent;  const
    textArea = document.createElement('textarea');  textArea.textContent =
    copyText;  document.body.append(textArea); 
    textArea.select();  document.execCommand("copy"); 
    k2button.innerText = "Text copied";   
    textArea.remove();}document.getElementById('k2button').addEventListener('click',
    copyFunction);  </script>

23.Blogger Url XML remove script

</head> এই ট্যাগ এর ভেতর পেস্ট করে সেভ করতে হবে।
-------------------------------------------------

<script type='text/javascript'>

//<![CDATA[

// BloggerJS v0.3.1

// Copyright (c) 2017-2018 

// Licensed under the MIT License

var urlTotal,nextPageToken,postsDatePrefix=!1,accessOnly=!1,useApiV3=!1,apiKey="",blogId="",postsOrPages=["pages","posts"],jsonIndex=1,secondRequest=!0,feedPriority=0,amp="&"[0];function urlVal(){var e=window.location.pathname,t=e.length;return".html"===e.substring(t-5)?0:t>1?1:2}function urlMod(){var e=window.location.pathname;"p"===e.substring(1,2)?(e=(e=e.substring(e.indexOf("/",1)+1)).substr(0,e.indexOf(".html")),history.replaceState(null,null,"../"+e)):(e=(e=postsDatePrefix?e.substring(1):e.substring(e.indexOf("/",7)+1)).substr(0,e.indexOf(".html")),history.replaceState(null,null,"../../"+e))}function urlSearch(e,t){var n=e+".html";t.forEach(function(e){-1!==e.search(n)&&(window.location=e)})}function urlManager(){var e=urlVal();0===e?accessOnly||urlMod():1===e?getJSON(postsOrPages[feedPriority],1):2===e&&(accessOnly||history.replaceState(null,null,"/"))}function getJSON(e,t){var n=document.createElement("script");if(useApiV3){var o="https://www.googleapis.com/blogger/v3/blogs/"+blogId+"/"+e+"?key="+apiKey+"#maxResults=500#fields=nextPageToken%2Citems(url)#callback=bloggerJSON";nextPageToken&&(o+="#pageToken="+nextPageToken),nextPageToken=void 0}else o=window.location.protocol+"//"+window.location.hostname+"/feeds/"+e+"/default?start-index="+t+"#max-results=150#orderby=published#alt=json-in-script#callback=bloggerJSON";o=o.replace(/#/g,amp),n.type="text/javascript",n.src=o,document.getElementsByTagName("head")[0].appendChild(n)}function bloggerJSON(e){var t=[];if(useApiV3||void 0===urlTotal&&(urlTotal=parseInt(e.feed.openSearch$totalResults.$t)),useApiV3){try{e.items.forEach(function(e,n){t.push(e.url)})}catch(e){}nextPageToken=e.nextPageToken}else try{e.feed.entry.forEach(function(n,o){var r=e.feed.entry[o];r.link.forEach(function(e,n){"alternate"===r.link[n].rel&&t.push(r.link[n].href)})})}catch(e){}urlSearch(window.location.pathname,t),urlTotal>150?(jsonIndex+=150,urlTotal-=150,getJSON(postsOrPages[feedPriority],jsonIndex)):nextPageToken?getJSON(postsOrPages[feedPriority]):secondRequest&&(nextPageToken=void 0,urlTotal=void 0,jsonIndex=1,secondRequest=!1,0===feedPriority?(feedPriority=1,getJSON("posts",1)):1===feedPriority&&(feedPriority=0,getJSON("pages",1)))}function bloggerJS(e){e&&(feedPriority=e),urlManager()}bloggerJS();

//]]>

</script>

24. Download Button Timer HTML Code

01.

<div class="download-container">
  <a href="#" class="download-btn">Download files <i class="fas fa-download"></i></a>
  <div class="countdown"></div>
  <div class="pleaseWait-text">Please wait ...</div>
  <div class="manualDownload-text">
    If the download didn't start automatically, <a href="#" class="manualDownload-link" target="_top">click here</a>
  </div>
</div>

02.

<div dir="ltr" style="text-align: left;" trbidi="on">
<center>
<span id="countdown">You have to wait 15 seconds.</span></center>
<br />
<div style="text-align: center;">
<b>Generating Download Link...</b><br />
<a class='button' href="#####Insert Link#####" target="_blank" id="download_link" style="display: none;">Download Now</a>
<noscript>JavaScript needs to be enabled in order to be able to download.</noscript>
<script type="application/javascript">
(function(){
   var message = "%d seconds before download link appears";
   // seconds before download link becomes visible
   var count = 15;
   var countdown_element = document.getElementById("countdown");
   var download_link = document.getElementById("download_link");
   var timer = setInterval(function(){
      // if countdown equals 0, the next condition will evaluate to false and the else-construct will be executed
      if (count) {
          // display text
          countdown_element.innerHTML = "You have to wait %d seconds.".replace("%d", count);
          // decrease counter
          count--;
      } else {
          // stop timer
          clearInterval(timer);
          // hide countdown
          countdown_element.style.display = "none";
          // show download link
          download_link.style.display = "";
      }
   }, 1000);
})();
</script></div></div>


03.

<div class='download-box'
     data-link='#####Insert Link#####'
     data-image='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-MJfJjegO4N7txAwyFBfNJMEUNLV4aaADlXmR8ZdOspFNqbx2UR2GsRW_g4rtdpAf39rvwooMe1n1IHD_7eP32nKqpkq8tnZ_HwWAhuLVfDWQv045PLMCa_-LXccLUkeiG7dPp7YycZ2nQj2uY2QqeQm-QsbARoQfaj_4EkEl3DrEB3Soc0ZPAO1tUQ/s160-rw-e30/fd_logo.webp'
     data-timeout='30'
     data-name='Example Image'
     data-category='Image'
     data-size='879KB'
     data-resolution='1980x1080'></div>



<style>
  .dld-container {
  --box-color: #08102b;
  --box-bg: #fffdfc;
  --box-bg-alt: rgba(0, 0, 0, .08);
  --font-family: inherit;
  --svg-color: #fffdfc;
  --button-bg: #482dff;
}
.darkMode .dld-container {
  --box-color: #fffdfc;
  --box-bg: #2d2d30;
  --box-bg-alt: #252526;
  --button-bg: #e91e63;
}
.dld-container{-webkit-tap-highlight-color:transparent;box-sizing:border-box;position:relative;display:flex;flex-direction:column;max-width:480px;margin:30px 0;color:var(--box-color);font-family:var(--font-family);transition:margin .6s;-webkit-transition:margin .6s}
.dld-container svg{width:22px;height:22px;fill:currentColor}
.dld-box,.dld-image{position:relative;display:flex}
.dld-container svg.line{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2}
.dld-box{z-index:2;background:var(--box-bg);width:100%;padding:15px;flex-direction:row;font-size:14px;border-radius:10px;box-shadow:0 0 35px rgba(0,0,0,.09)}
.dld-image{flex-shrink:0;align-items:center;justify-content:center;width:60px;height:60px;padding:10px;margin-right:15px;background:var(--box-bg-alt);border-radius:6px;transition:.4s;-webkit-transition:.4s}
.dld-image[style*=background-image]{width:100px;height:100px;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 0 10px rgba(0,0,0,.1)}
.dld-image:not([style*=background-image])::before{content:attr(data-placeholder);opacity:.7}svg.dld-svg{width:calc(100% + 12px);height:calc(100% + 12px);position:absolute;top:-6px;bottom:-6px;right:-6px;left:-6px;opacity:0;stroke-width:1.5;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);transition:.5s;-webkit-transition:.5s}
.dld-image[style*=background-image] .dld-svg{width:calc(100% + 20px);height:calc(100% + 20px);top:-10px;bottom:-10px;right:-10px;left:-10px}.dld-svg .b{fill:none;stroke:var(--box-bg-alt)}
.dld-svg .c{fill:none;stroke:var(--button-bg);stroke-dasharray:100 100;stroke-dashoffset:100;stroke-linecap:round;transition:.5s;-webkit-transition:.5s}
.dld-info{flex-grow:1;width:calc(100% - 115px)}
.dld-info>*{line-height:20px;font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dld-bottom,.dld-button{position:absolute;display:flex}
.dld-info>::before{content:attr(data-name) ': ';text-transform:capitalize;opacity:.8}
.dld-info>::after{content:attr(data-value)}
.dld-button{background:var(--button-bg);width:40px;height:40px;bottom:-20px;right:20px;outline:0;border:none;border-radius:50%;align-items:center;justify-content:center;box-shadow:0 0 15px rgba(0,0,0,.09);transition:.3s;-webkit-transition:.3s;cursor:pointer}
.dld-button:hover{-webkit-transform:scale(1.03);-ms-transform:scale(1.03);transform:scale(1.03)}
.dld-button svg.line{width:24px;height:24px;stroke:var(--svg-color)}
.dld-download{visibility:visible;opacity:1}
.dld-container.alt .dld-download,.dld-retry{visibility:hidden;opacity:0;bottom:-40px}
.dld-bottom{z-index:1;bottom:0;right:0;align-items:center;justify-content:center;height:60px;width:100%;padding-top:20px;font-size:14px;background:var(--box-bg);border-radius:0 0 10px 10px;transition:.6s;-webkit-transition:.6s}
.dld-bottom>* span{color:var(--button-bg);font-size:18px;font-weight:600}
.dld-container.alt{margin:30px 0 70px}
.dld-container.alt .dld-image{-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);border-radius:50%}
.dld-container.alt .dld-svg{opacity:1}
.dld-container.retry .dld-retry{visibility:visible;opacity:1;bottom:-20px}
.dld-container.alt .dld-bottom{bottom:-40px;background:var(--box-bg-alt);box-shadow:0 0 35px rgba(0,0,0,.09)}
  
</style>



<script type='module'>/*<![CDATA[*/
(({selector:a,messages:{startingDownload:b,pleaseWait:c}})=>{const d=a=>("string"==typeof a?a:a+"").replace(/&/g,"&amp;").replace(/'/g,"&#39;").replace(/"/g,"&#34;"),e=document.querySelectorAll(a);e.forEach(e=>{e.classList.add("dld-container"),e.innerHTML=`<div class='dld-box'><div class='dld-image'${e.dataset.image?` style='${d(`background-image: url(${e.dataset.image})`)}'`:""} data-placeholder='${e.dataset.placeholder||".ext"}'><svg class='dld-svg' viewBox='0 0 34 34'><circle class='b' cx='17' cy='17' r='15.92' /><circle class='c dld-progress' cx='17' cy='17' r='15.92' /></svg></div><div class='dld-info'>${(Object.keys(e.dataset).reduce((b,a)=>(["link","image","placeholder","target","timeout"].includes(a)||(!b&&(b=[]),b.push([a,e.dataset[a]])),b),null)||[["Info","No information provided"]]).map(([a,b])=>`<span data-name='${d(a)}' data-value='${d(b)}'></span>`).join("")}</div><button class='dld-button dld-download'><svg class='line' viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg></button><button class='dld-button dld-retry'><svg class='line' viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button></div><div class='dld-bottom'></div>`;const f=e.dataset.link||"#",g=e.dataset.target,[h,i,j,k]=[".dld-download",".dld-retry",".dld-bottom",".dld-progress"].map(a=>e.querySelector(a));h.addEventListener("click",()=>{e.classList.add("alt");let a=+(e.dataset.timeout||10);(Number.isNaN(a)||!Number.isFinite(a))&&(a=10);const d=a;j.innerHTML=`<span>${b.replace(/%d/g,a)}</span>`;const h=setInterval(()=>{a-=1,j.innerHTML=`<span>${b.replace(/%d/g,a)}</span>`,k.style.strokeDashoffset=Math.floor(100*(a/d));0>=a&&(clearInterval(h),j.innerHTML=c,g?window.open(f,g):window.location.href=f,i.onclick=()=>{g?window.open(f,g):window.location.href=f},setTimeout(()=>{e.classList.remove("alt"),e.classList.add("retry")},4e3))},1e3)})})})({
  selector: ".download-box",
  messages: {
    startingDownload: "Starting Download in <span>%d</span> seconds",
    pleaseWait: "Please wait..."
  }
});
/*]]>*/</script>


04.

<div style="text-align: center;"><a class="button" id="Count_Time">Show Content</a> </div>
 <div id="Stop_Timer" target="_blank">
  
   <!-- Add your content here to show after the timer finish -->
<p>Click the Button Below to Download the File.<p/> 
<a class="button" href="#####Insert Link#####" >Tutorial</a>

</div>

<style>
 Cnt-Timer{font-size:16px;opacity:.8;display:inline-flex;align-items:center}
 Cnt-Timer svg{width:20px; height:20px;}
</style>  
   <script>/*<![CDATA[*/
var counter = 9; // Add time here in seconds 
var id,downloadButton=document.getElementById("Stop_Timer"),newElement=document.createElement("p");function startDownload(){this.style.display="none",id=setInterval(function(){counter--,counter<0?(newElement.parentNode.replaceChild(downloadButton,newElement),clearInterval(id)):newElement.innerHTML="<center><strong>Please wait <span>"+counter.toString()+"</span> seconds</strong><p/><Cnt-Timer><svg viewBox='0 0 40 50' x='0px' y='0px'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z'><animateTransform attributeName='transform' attributeType='xml' dur='0.6s' from='0 25 25' repeatCount='indefinite' to='360 25 25' type='rotate'></animateTransform></path></svg> Generating... Please Wait!</Cnt-Timer></center>"},1e3)}newElement.innerHTML="<span></span>",downloadButton.parentNode.replaceChild(newElement,downloadButton);var clickbtn=document.getElementById("Count_Time");clickbtn.onclick=startDownload;
/*]]>*/ </script> 

25. Password protect Post or page html code

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var password = 'password'
password=prompt('Please enter the password to enter this post:','');
if (password != 'password') {
location.href='URL';
}
// End -->
</SCRIPT>
-----------------------------------------D

উপরের কোড গুলোর মধ্যে  password এবং URL দিয়ে পূরণ করে যে পেইজ বা পোস্ট লক করতে হবে সেটার উপরের দিকে পেস্ট করে সেভ করতে হবে।

26. How to Remove Sidebar Web page or Post

 <style>
   .flex-center #sidebar-wrapper{
     display:none;
     width:0%;
    }
     .flex-center #main-wrapper{
        width:100%;
    }
  </style>
--------------------------------
<style>
#sidebar-container{
  display:none;
   width:0%;
  }
  
  #feed-view{
  width:100%;
  }
</style>

27. Bangla News paper HTML Code 

<div style="text-align: center;">আমাদের ওয়েবসাইটে বাংলা নিউজ পেপার লিঙ্ক করা আছে, আপনি ড্রপ ডাউন মেনু নির্বাচন করে যেকোনো নিউজ পেপার পড়তে পারেন</div><div><br /></div>&nbsp; &nbsp;&nbsp;<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<select id="name_1jbarh" name="name_1jbarh">
	<option value="https://www.prothomalo.com/">Prothomalo</option>
	<option value="https://www.bd-pratidin.com/">Bangladesh Protidin</option>
	<option value="https://www.dailynayadiganta.com/">Noya Digonto</option>
	<option value="https://www.jugantor.com/">Jugantor</option>
	<option value="https://samakal.com/">Samakal</option>
	<option value="https://www.dailyjanakantha.com/">Janakantha</option>
    <option value="  https://www.ittefaq.com.bd/">Ittefaq</option>
    <option value=" https://dhakapost.com/">Dhakapost</option>
    <option value="https://www.cricbuzz.com/">CricBuzz</option>
    <option value="https://dailyinqilab.com/">Inqilab</option>
	<option value="https://www.narayanganjtimes.com/">Narayanganj Times</option>
	<option value="https://livenarayanganj24.com/">LiveNarayangonj24</option>
    <option value="https://sonargaonpost.com/">সোনারগাঁওপোস্ট</option>
</select>
<input onclick="window.open(document.getElementById('name_1jbarh').value, 'window_name', 'width=900,height=600, left=283,top=84')" type="button" value="GO" />

</div>

<style>
#sidebar-wrapper{
  display:none;
   width:0%;
  }
  
  #main-wrapper{
  width:100%;
  }
  
</style>

28. Date And Time Code On Your Web page

<div id="current-time"></div>


<script>
   function updateTime() {
      var currentTime = new Date();
      var hours = currentTime.getHours();
      var minutes = currentTime.getMinutes();
      var seconds = currentTime.getSeconds();
      
      if (minutes < 10) {
         minutes = "0" + minutes;
      }
      
      if (seconds < 10) {
         seconds = "0" + seconds;
      }
      
      var timeString = hours + ":" + minutes + ":" + seconds;
      
      document.getElementById("current-time").innerHTML = timeString;
   }
   

   setInterval(updateTime, 1000);
</script>

29.News Ticker HTML Code 

<span data-no="5" data-type="recent"></span>
<marquee scrollamount="10"><h3 style="color: #1dcfc7"><p style='text-align:left;'>

<a href="https://sonargaonpost.blogspot.com/2023/06/blog-post_82.html">সোনারগাঁ উপজেলা বিএনপির ছয় নেতা কারাগারে</a>

 || 

<a href="https://sonargaonpost.blogspot.com/2022/12/blog-post_35.html">নিজেকে নিজে মেসেজ পাঠানোর নিয়ম হোয়াটসঅ্যাপে</a>


</p>
<div class='ty-copy-container row' style='font-size:1px; opacity:0;'></div></h3></marquee>

-----------------------------------------

<span data-no="5" data-type="recent"></span>
<marquee scrollamount="10"><h3 style="color: #BF06F6 "><p style='text-align:left;'><a href='INSERT URL'> PAST WRITE HERE</a></p>
<div class='ty-copy-container row' style='font-size:1px; opacity:0;'></div></h3></marquee>
-------------------------------------------

                                                   Non Clickable Code

<span data-no="5" data-type="recent"></span>
<marquee scrollamount="10"><h3 style="color: #D0ABDB ;">PASTE WRITE HERE</h3></marquee>
-------------------------------------------------------

<span data-no="5" data-type="recent"></span>
<marquee><h3>PASTE WRITE HERE</h3></marquee>

30.Image Slider HTML Code

<div id="hcg-slider-1" class="hcg-slider">
	<div class="hcg-slide-container">
	<div class="hcg-slider-body">
		<a class="hcg-slides animated" style="display:flex">
			<span class="hcg-slide-number">1/5</span>
			<img src="https://img.freepik.com/free-photo/travel-concept-with-worldwide-landmarks_23-2149153263.jpg?size=626&ext=jpg&ga=GA1.1.671518612.1700385096&semt=ais" alt="Image 1">
			<span class="hcg-slide-text">Image 1</span>
		</a>
	</div>
</div>
<div class="hcg-slide-dot-control"></div>
</div>
<style>
#hcg-slider-1 .hcg-slide-container {
	width: auto;
	height: auto;
}
.hcg-slider {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
}
.hcg-slide-container {
	max-width: 100%;
	display: inline-block;
	position: relative;
}
.hcg-slides {
	display: none;
	overflow: hidden;
	justify-content: center;
	align-items: center;
	border-radius: 5px;
	border: solid 1px #a0a0a0;
}
.hcg-slides img {
	max-width: 100%;
	max-height: 100%;
	display: inline-block;
}
.hcg-slide-text {
	color: #ffffff;
	font-size: 14px;
	padding: 3px 5px;
	position: absolute;
	bottom: 0;
	border-radius: 5px;
	left: 50%;
	text-align: center;
	text-shadow: 0 0 2px #000;
	background-color: rgba(255,255,255,0.30);
	display: inline-block;
	transform: translate(-50%, -5px);
}
.hcg-slide-dot-control {
	margin-top: 10px;
	text-align: center;
}
.hcg-slide-dot {
	cursor: pointer;
	height: 13px;
	width: 13px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
}
.hcg-slide-dot.dot-active {
	background-color: #717171;
}
.hcg-slide-number {
	color: #ffffff;
	font-size: 12px;
	padding: 4px 7px;
	position: absolute;
	border-radius: 5px;
	top: 5px;
	left: 5px;
	background-color: rgba(255,255,255,0.30);
}
/************CSS Animation***********/

.animated { 
	animation-name: bounceIn; 
	animation-duration: 1s;
}
@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale(.3);
	}
	50% {
		opacity: 1;
		transform: scale(1.05);
	}
	70% {
		transform: scale(.9);
	}
	100% {
		transform: scale(1);
	}
}
.bounceIn {
	animation-name: bounceIn;
}


</style>
<script>
(() => {
//If you want to add more images, add the link name and URL image URL in the array list below.
	const images_list = [
{
    "url": "https://img.freepik.com/free-photo/travel-concept-with-worldwide-landmarks_23-2149153263.jpg?size=626&ext=jpg&ga=GA1.1.671518612.1700385096&semt=ais",
    "alt": "",
    "name": "Image 1",
    "link": ""
},
{
    "url": "https://img.freepik.com/free-photo/woman-standing-rock-atuh-beach-nusa-penida-island-bali-indonesia_335224-344.jpg?size=626&ext=jpg&ga=GA1.1.671518612.1700385096&semt=ais",
    "alt": "",
    "name": "",
    "link": ""
},
{
    "url": "https://img.freepik.com/premium-photo/photo-three-trip-luggage-earth-plane-background_835197-10707.jpg?size=626&ext=jpg&ga=GA1.1.671518612.1700385096&semt=ais",
    "alt": "",
    "name": "",
    "link": ""
},
{
    "url": "https://img.freepik.com/free-vector/vacation-holidays-background-with-realistic-globe-suitcase-photo-camera_1284-10476.jpg?size=626&ext=jpg&ga=GA1.1.671518612.1700385096&semt=sph",
    "alt": "",
    "name": "",
    "link": ""
},
{
    "url": "https://img.freepik.com/premium-photo/travel-concept-with-landmarks_950002-14477.jpg?size=626&ext=jpg&ga=GA1.1.671518612.1700385096&semt=ais",
    "alt": "",
    "name": "",
    "link": ""
},
{
    "url": "https://img.freepik.com/free-photo/chair-table-dinning-beach-sea-with-blue-sky_74190-6094.jpg?size=626&ext=jpg&ga=GA1.1.671518612.1700385096&semt=sph?size=626&ext=jpg&ga=GA1.1.671518612.1700385096&semt=ais",
    "alt": "",
    "name": "",
    "link": ""
},
{
    "url": "https://img.freepik.com/premium-photo/concept-vacation-travel-earth-globe-with-airline-boarding-pass-tickets-luggage-airplane_252025-727.jpg?size=626&ext=jpg&ga=GA1.1.671518612.1700385096&semt=ais",
    "alt": "",
    "name": "",
    "link": ""
},
{
    "url": "https://img.freepik.com/free-vector/earth-globe-airplane_1308-28892.jpg?size=626&ext=jpg&ga=GA1.1.671518612.1700385096&semt=sph",
    "alt": "",
    "name": "",
    "link": ""
},
{
    "url": "https://img.freepik.com/premium-photo/creative-background-red-suitcase-sneakers-plane-blue-background_99433-28.jpg?size=626&ext=jpg&ga=GA1.1.671518612.1700385096&semt=ais",
    "alt": "",
    "name": "",
    "link": ""
},
{
    "url": " https://img.freepik.com/free-photo/empty-chair-beach_74190-1630.jpg?size=626&ext=jpg&ga=GA1.1.671518612.1700385096&semt=ais",
    "alt": "",
    "name": "",
    "link": ""
}
	];

// generated by https://www.html-code-generator.com/html/image-slideshow-generator
	let slider_id = document.querySelector("#hcg-slider-1");

	// append all images
	let dots_div = "";
	let images_div = "";
	for (let i = 0; i < images_list.length; i++) {
		// if no link without href="" tag
		let href = (images_list[i].link == "" ? "":' href="'+images_list[i].link+'"');
		images_div += '<a'+href+' class="hcg-slides animated"'+(i === 0 ? ' style="display:flex"':'')+'>'+
						'<span class="hcg-slide-number">'+(i+1)+'/'+images_list.length+'</span>'+
						'<img src="'+images_list[i].url+'" alt="'+images_list[i].name+'">'+
						'<span class="hcg-slide-text">'+images_list[i].name+'</span>'+
					 '</a>';
		dots_div += '<a href="#" class="hcg-slide-dot'+(i === 0 ? ' dot-active':'')+'" data-id="'+i+'"></a>';
	}
	slider_id.querySelector(".hcg-slider-body").innerHTML = images_div;
	slider_id.querySelector(".hcg-slide-dot-control").innerHTML = dots_div;

	let slide_index = 0;

	const images = slider_id.querySelectorAll(".hcg-slides");
	const dots = slider_id.querySelectorAll(".hcg-slide-dot");
	const showSlides = () => {
		if (slide_index > images.length-1) {
			slide_index = 0;
		}
		if (slide_index < 0) {
			slide_index = images.length-1;
		}
		for (let i = 0; i < images.length; i++) {
			images[i].style.display = "none";
			dots[i].classList.remove("dot-active");
			if (i == slide_index) {
				images[i].style.display = "flex";
				dots[i].classList.add("dot-active");
			}
		}
	}

	const dot_click = event => {
		event.preventDefault();
		slide_index = event.target.dataset.id;
		showSlides();
	}

	for (let i = 0; i < dots.length; i++) {
		dots[i].addEventListener("click", dot_click, false);
	}
	// auto play
	setInterval(() => {
		slide_index++;
		showSlides();
	}, 2000);

})();
</script>

----------------------------------------------------------------

<!doctype html>

<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 7</div>
  <img src="https://1.bp.blogspot.com/-ppgWUUp89vg/XvvrSw_ytBI/AAAAAAAAAG0/C9BMHkQBKMYxUeIIzubmPQNTLMZhyMxQACK4BGAsYHg/w625-h416/IMG_3082.JPG" style="width:100%" />
  
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 7</div>
  <img src="https://1.bp.blogspot.com/-slTzotVN4Dc/XvvrO15bVzI/AAAAAAAAAG0/0CjpDuDjKVY7neI1iVO6TtIWNQHNY__nQCK4BGAsYHg/w625-h426/17.jpg" style="width:100%" />
  
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 7</div>
  <img src="https://1.bp.blogspot.com/-pjBIBCDvPI8/XvvrQO8r1iI/AAAAAAAAAG0/BgE6uOI-2FoKJyd_k9MB_yesjrlgZVnqgCK4BGAsYHg/w625-h420/25.jpg" style="width:100%" />
  
</div>

<div class="mySlides fade">
  <div class="numbertext">4 / 7</div>
  <img src="https://1.bp.blogspot.com/-8fqRc-Pn4_Q/XvvrPiI80gI/AAAAAAAAAG0/I780Gjk24DoVcQHBesjJeXZxvLkEY29gwCK4BGAsYHg/w625-h426/20.jpg" style="width:100%" />
 
</div>

<div class="mySlides fade">
  <div class="numbertext">5 / 7</div>
  <img src="https://1.bp.blogspot.com/-EzU_hwGME2U/XvvrUDsPnTI/AAAAAAAAAG8/7HJoa5zAaVwF2W_qy52TsEC9Bm1rs8h4gCK4BGAsYHg/w625-h423/Library%2B%25281%2529.jpg" style="width:100%" />

</div>

<div class="mySlides fade">
  <div class="numbertext">6 / 7</div>
  <img src="https://1.bp.blogspot.com/-zHUbEfINiLQ/XvvrTIOP2mI/AAAAAAAAAG0/xtxsOtvPMAIJe8lAyz-PQDXzUucWl419QCK4BGAsYHg/w625-h416/IMG_3171.JPG" style="width:100%" />

</div>

<div class="mySlides fade">
  <div class="numbertext">7 / 7</div>
  <img src="https://1.bp.blogspot.com/-2Q5SWa5ZVzg/XvvrRKwZYkI/AAAAAAAAAG8/AyYdbhGFKPgwlL9vEaWx3Tc-684_yTuqQCK4BGAsYHg/w625-h413/class%2Broom.jpg" style="width:100%" />
  
</div>

</div>
<br />

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>

</div>

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>

</!doctype>

 

Conclusion

If you have read this post carefully from the beginning to the end, then the various HTML, CSS, JavaScript codes used in this post will help you a lot in creating your website.  Visit this website for all information related to website making, various blogger tips and tricks.  If you have any problem in creating Blogger chart, please contact us on contact page of our website.  You will be fully assisted soon.

More Read:

How to make Code Box On any website blogpost

কিভাবে এসইও ফ্রেন্ডলি ব্লগপোস্ট লিখতে হয় (নতুন আপডেট)