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?
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 :
- How Long Does It Take To Learn HTML
- How To Build a Professional Website Using GeneratePress Premium WordPress Theme
- WordPress Locally On Android – How To Install WordPress Locally On Android
- Which CSS Attribute Would Change An Element’s Font Color To Blue?
- WordPress Website Speed Optimization With WP Rocket Best Settings
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.
3. Search for a plugin called Insert Headers And Footers.
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:
<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:
<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.
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.
3. Paste the following CSS (CDN) code before the </head> tag in your theme 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.
<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.
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.Â
# 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.Â
# 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.
# 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.
# 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.Â
# 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.
# 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.
# 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.Â
# 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.
# 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.
