How To Add Shayari Blockquotes With Copy Button [CSS & Java Script]

Hello friends, welcome to our article, in this article I am going to tell you how you can add a shayari block quote on your blogger website. To add a poetry block court, it is very easy to copy and paste some code, after which you can add stylish poetry to your blogger page.

So in this article, you just have to follow the steps as you are told, no, after following the mistake, you can easily add this code to your blogger's website.

(toc) Table Of Contents💡

Blockquotes With Copy Button [CSS & Java Script]

You have to paste both the CSS javascript code, below you have been given both codes separately. And there is also a button to copy all those codes, clicking on which you can copy all the code inside. So let's first paste the javascript

Step by Step Add Java Script 

1. Go To Your Blogger Dashboard
2. Click On Theme Section
3. Click On Edit HTML
4. Find </body> Tag
5. Paste Code Above the Body Tag

Java Script

<script>

    // Select all blockquote elements with class &quot;infinite-blockquote&quot;

    const blockquotes = document.querySelectorAll(&#39;.infinite-blockquote&#39;);

    // Loop through each blockquote element and append a copy button

    blockquotes.forEach(blockquote =&gt; {

      // Create a copy button

      const copyButton = document.createElement(&#39;button&#39;);

      copyButton.textContent = &#39;Copy&#39;;

      copyButton.classList.add(&#39;copy-button&#39;);

      // Append the copy button after the blockquote element

      blockquote.parentNode.insertBefore(copyButton, blockquote.nextSibling);

      // Add click event listener to copy button

      copyButton.addEventListener(&#39;click&#39;, () =&gt; {

        // Create a new textarea element to store the text to be copied

        const textarea = document.createElement(&#39;textarea&#39;);

        textarea.value = blockquote.textContent;

        // Append the textarea to the body

        document.body.appendChild(textarea);

        // Select the text in the textarea

        textarea.select();

        textarea.setSelectionRange(0, textarea.value.length);

        // Copy the selected text to clipboard

        document.execCommand(&#39;copy&#39;);

        // Remove the textarea from the body

        document.body.removeChild(textarea);

      });

    });

  </script>

Step by Step Add CSS

1. Go To Your Blogger Dashboard
2. Click On Theme Section
3. Click On Edit HTML
4. Find </body> Tag
5. Paste Code Above Body Tag

CSS

 <!-- This is CSS Code By Justakashk-->

<style> 

  .copy-button {

    color: white;

    padding: 5px;

    background: linear-gradient(-65deg, #f32121 0%, #f40372 35%, rgb(255 255 255) 100%);

    font-weight: bold;

    border-style: none;

    cursor: pointer;

    font-size: 19px;

    box-shadow: 2px 2px 0px #000000;

    padding-left: 19px;

    padding-right: 19px;

    margin: 8px;

    border-radius: 8px;

}

.copy-button:hover{

    background-color: #fff;

    scale: 1.08;

}

  </style>

Step by Step Add Your Shayari and Quotes

1. Go To Your Blogger Dashboard
2. Click On New Post
3. Now Open HTML View
4. Paste This Code, There You Want To Add Shayari
5. Replace Plan Text With Your Shayari

Shayari Post HTML

<blockquote class="infinite-blockquote">Your Quotes and Shayari </blockquote>

Additional Property

if you are using any such blogger theme. Which does not have any kind of design, then you can use it in your blockquote, only a little CSS has been added to it so that your Shayari Box is well designed, otherwise if you are doing any such theme Whose blockquote is already designed, so you do not need to add any other code.

Additional CSS

margin: 4rem 2rem 2.4rem;

    background: linear-gradient(-65deg, #2196F3 0%, #03A9F4 35%, rgb(255 255 255) 100%);

    color: black;

    padding: 15px;

    font-size: 18px;

    /* border: solid #dd5555; */

    border-radius: 14px;

    font-weight: bold;