Blockquote with Copy and Share Button | Shayari Box Script for Blogger and WordPress

Blockquote with Copy and Share Button – Are you trying to make your shayari website or quotes blog look better? Well, I’ve got just the thing for you! In this guide, I’ll show you how to add a Blockquote with Copy and Share Buttons, and how to style your Shayari Box to make it look awesome.

Whether you’re using Blogger or WordPress, this CSS & JS Script will work for you. Let’s make your website stand out!

What is Quotify Styler?

Your Image Alt Text

I made a new tool for you called Quotify Styler. But before you use it, let’s understand what it does.

Quotify Styler is like magic for websites, especially those sharing shayari. It makes blockquote tags look great without needing complicated code.

Just use our tool, and your quotes will look amazing! Plus, you can choose different styles to match your site’s vibe easily.

Features of Quotify Styler:

Let’s take a closer look at what Quotify Styler can do for you:

1. Easy setup: You don’t need to be a tech whiz. Just copy and paste 2 lines of code, and you’re all set up to make your quotes look awesome.

2. Customization: Choose from a variety of colors to make sure your quotes blend seamlessly with the style of your website. Whether you like it bold or subtle, there’s something for everyone.

3. Works on all devices: No matter if your visitors are using a computer, tablet, or phone, your quotes will always look great. Quotify Styler ensures they’re optimized for any screen size.

4. Social share buttons: Make it super easy for your audience to share your quotes on their favorite social media platforms. Spread the love and let your quotes reach a wider audience with just a click.

5. Copy text: Give your visitors the convenience of copying text directly from your quotes. With a simple click, they can grab their favorite lines and share them anywhere they like.

Read More :

Blockquote with Copy and Share Button | Shayari Box Script for Blogger and WordPress

Now that we’ve got a good grasp of what the Quotify Styler Script (CDN) can do, let’s learn how to add Blockquote with Copy and Share Buttons on both Blogger and WordPress websites. First up, let’s set up Quotify Styler on a WordPress site.

How To Add Blockquote with Copy and Share Buttons On WordPress Site :

To set up Quotify Styler and add Blockquote with Copy and Share Buttons to your WordPress website, follow these steps:

1. Log in to your WordPress admin dashboard.

2. Navigate to the Plugins > Add New Plugin section.

Blockquote with Copy and Share Button On WordPress

3. Search for a plugin called Insert Headers And Footers.

How To Add Blockquote with Copy and Share Button On WordPress

4. Install and activate the Insert Headers And Footers plugin on your WordPress website.

5. Now, go to Settings > WP Headers and Footers. You’ll see a screen where you can input code.

6. In the Header section, paste the following two lines of CSS CDN link:

Add Blockquote with Copy and Share Button On WordPress
# CSS Code :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/MaheshTechnicals/Quotify-Styler-Cdn/styles/style-1/app.css"/>

7. In the Footer section, add the following JavaScript (JS) CDN code and then save the changes:

Shayari Box Script
# JS Code :
<script src="https://cdn.jsdelivr.net/gh/MaheshTechnicals/Quotify-Styler-Cdn/styles/style-1/app.js"></script>

8. If you’re using any cache plugin, be sure to clear the cache.

9. That’s it! Now, all your posts with blockquote tags or quotes will be styled perfectly.

Shayari Box Script For WordPress

By following these steps, you can easily add Blockquote with Copy and Share Buttons to your WordPress website.

How To Add Blockquote with Copy and Share Buttons On Blogger:

To set up Quotify Styler and add Blockquote with Copy and Share Buttons to your Blogger website, follow these steps:

1. Log in to your Blogger dashboard and go to the Theme section. You’ll need to modify your theme code.

2. Click on the Edit HTML option. You’ll see all your Blogger theme code displayed on your screen.

Blockquote with Copy and Share Button On Blogger

3. Paste the following CSS (CDN) code before the </head> tag in your theme code.

How To Add Blockquote with Copy and Share Button On Blogger
# CSS Code :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/MaheshTechnicals/Quotify-Styler-Cdn/styles/style-1/app.css"/>

4. Then, paste the following JS code (CDN) before the </body> tag. Make sure to add the code properly to ensure it works correctly.

Add Blockquote with Copy and Share Button On Blogger
# JS Code :
<script src="https://cdn.jsdelivr.net/gh/MaheshTechnicals/Quotify-Styler-Cdn/styles/style-1/app.js"></script>

5. Save the changes. That’s it! Now, all your blockquotes and quotes will be designed properly.

Quotify Styler CDN On Blogger

By following these steps, you can easily add Blockquote with Copy and Share Buttons to your Blogger website.

Quotify Styler all Available Styles :

The Quotify Styler CDN offers multiple styles for your website. You can choose the one that best suits your site’s aesthetic. We’ll be adding more styles in the future, but for now, here are the ones available.

Style 1 : Gradient Red Block. 

Your Image Alt Text

# CSS Code :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/MaheshTechnicals/Quotify-Styler-Cdn/styles/style-1/app.css"/>

# JS code :

<script src="https://cdn.jsdelivr.net/gh/MaheshTechnicals/Quotify-Styler-Cdn/styles/style-1/app.js"></script>

Style 2 : Dark Mode. 

Your Image Alt Text

# CSS code :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/MaheshTechnicals/Quotify-Styler-Cdn/styles/style-2/app.css"/>

# JS code :

<script src="https://cdn.jsdelivr.net/gh/MaheshTechnicals/Quotify-Styler-Cdn/styles/style-2/app.js"></script>

Style 3 : Light Gray Mode.

Your Image Alt Text

# CSS code :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/MaheshTechnicals/Quotify-Styler-Cdn/styles/style-3/app.css"/>

# JS code :

<script src="https://cdn.jsdelivr.net/gh/MaheshTechnicals/Quotify-Styler-Cdn/styles/style-3/app.js"></script>

Style 4 : Material Blue Mode.

Your Image Alt Text

# CSS code :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/MaheshTechnicals/Quotify-Styler-Cdn/styles/style-4/app.css"/>

# JS code :

<script src="https://cdn.jsdelivr.net/gh/MaheshTechnicals/Quotify-Styler-Cdn/styles/style-4/app.js"></script>

Style 5 : White Mode. 

Your Image Alt Text

# CSS code :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/MaheshTechnicals/Quotify-Styler-Cdn/styles/style-5/app.css"/>

# JS code :

<script src="https://cdn.jsdelivr.net/gh/MaheshTechnicals/Quotify-Styler-Cdn/styles/style-5/app.js"></script>

Style 7 :Material Purple Mode.

Quotify Styler Style 7

# CSS code :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/MaheshTechnicals/Quotify-Styler-Cdn/styles/style-7/app.css"/>

# JS code :

<script src="https://cdn.jsdelivr.net/gh/MaheshTechnicals/Quotify-Styler-Cdn/styles/style-7/app.js"></script>

Style 8 : Dark Purple Mode.

Quotify Styler Style 8

# CSS code :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/MaheshTechnicals/Quotify-Styler-Cdn/styles/style-8/app.css"/>

# JS code :

<script src="https://cdn.jsdelivr.net/gh/MaheshTechnicals/Quotify-Styler-Cdn/styles/style-8/app.js"></script>

Style 9 : Multi Color Mode. 

Quotify Styler Style 9

# CSS code :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/MaheshTechnicals/Quotify-Styler-Cdn/styles/style-9/app.css"/>

# JS code :

<script src="https://cdn.jsdelivr.net/gh/MaheshTechnicals/Quotify-Styler-Cdn/styles/style-9/app.js"></script>

Style 10: Shinier Yellow Mode.

Quotify Styler CDN style 10

# CSS code :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/MaheshTechnicals/Quotify-Styler-Cdn/styles/style-10/app.css"/>

# JS code :

<script src="https://cdn.jsdelivr.net/gh/MaheshTechnicals/Quotify-Styler-Cdn/styles/style-10/app.js"></script>

Youtube Video :

Conclusion :

In simple terms, combining Blockquote with Copy and Share Buttons, along with the Shayari Box Script, makes it easy for both Blogger and WordPress users to improve their websites.

By following the steps outlined, you can make your quotes and shayaris look great and allow visitors to share them easily.

This makes your website more attractive and user-friendly, encouraging people to interact and connect with your content. Overall, these tools help create a better experience for everyone involved.

7 thoughts on “Blockquote with Copy and Share Button | Shayari Box Script for Blogger and WordPress”

  1. I have tried pasting code on my website, and it’s working fine, but the issue is, whether it is English or Hindi language on the site, dono language ITALIC style me hi show ho rha hai. In the Hindi language, this “|” vertical sign is showing in normal style.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top