How to add copy and share buttons in blockquotes

How to add copy and share buttons in blockquotes, How to add copy and share buttons function in each quote in the article, using CSS HTML, javascript, embed tweet option in each quotes in blogger, how to add share option in a quote box, in wordpress

Whenever You Visit A Website With Shayari Or Quotes content, You Must Have Often Seen That There Is a Copy Button Under The Shayari Text On Which Readers Click On Shayari, Or quotes to Copy along with share option.

So, If you have a Shayari or Quotes website then this will gone to help you a lot, not only by attracting visitors but also ultimately it will also increase your traffic. As if people like your content and having a share option within it then they find ease in sharing your Shayari and Quotes. In this tutorial, I will give you some coded script by which you can add copy and share button in your Shayari and quotes by using blockquotes

Let's have some knowledge of blockquotes. What is Blockquote? What are its uses? So let's discuss few things about it.

What is Blockquote

Blockquotes are sections of text which are used to highlight quotes from other text or simply a blockquote is used to highlight a text to make it different from other text on the page. Blockquotes are used to draw the attention of your readers to particular parts of your blog.

Silent features of this code snippet

You can add this feature in your blockquotes tag without changing your current blockquotes style
Uses of SVG path so no issue which front awesome version you uses all the icon appear properly
Responsive with every template
Attractive in look with a hover style

How to add copy and share buttons in blockquotes

Step 1: Login tou you blogger and go to theme > edit HTML

Step 2: Find you </body> tag and paste below css just above </body>

CSS:

<style>
/AT-Jokebox/Shayaribox/ .AT-share-wrapper{position: relative; display: flex;margin-top: 8px; justify-content: center; align-content: center; align-items: center;} .AT-share-wrapper span{text-align: center; display: flex;margin: 0 3px; float: left; line-height: 1.4; justify-content: center; align-items: center; cursor: pointer;} .AT-share-wrapper span i.cp{padding-right:7px} .at-share-tg{background: #0088cc; font-size: 15px; border: 1px solid #0088cc; border-radius: 15px; color: #fff; width: auto; padding: 4px 16px;} .at-share-tg i.stg{color:#fff!important;width:20px; height:20px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z' fill='%23fff'/%3E%3C/svg%3E") center / 20px no-repeat} .at-share-w{background: #0f9806; font-size: 15px; border: 1px solid #0f9806; border-radius: 15px; color: #fff; width: auto; padding: 4px 16px;} .at-share-f i.sf{color:#fff!important;width:20px; height:20px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z' fill='%23fff'/%3E%3C/svg%3E") center / 20px no-repeat} .at-share-f{background: #3b5998; font-size: 15px; border: 1px solid #3b5998; border-radius: 15px; color: #fff; width: auto; padding: 4px 16px;}.at-copy:hover{background:black} .at-share-w i.sw{color:#fff!important;width:20px; height:20px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z' fill='%23fff'/%3E%3C/svg%3E") center / 20px no-repeat} .at-copy i.cp{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z' fill='%23fff'/%3E%3C/svg%3E") center / 20px no-repeat;color:#fff!important;width:20px; height:20px;} .at-copy{background: linear-gradient( 90deg , rgba(253,29,29,1) 27%, rgba(252,176,69,1) 100%); font-size: 15px; font-style: normal; border: none; border-radius: 15px; color: #fff !important; padding: 4px 16px;}span.ats{font-size:18px!important;}
</style>

Step 4: Now copy the below javascript and paste it again just above the </body> tag

JS:

<script type='text/javascript'>
//<![CDATA[
$("blockquote").contents().filter(function () { return 1 !== this.nodeType }).wrap("<p class='copy-content'></p>"), $(".copy-content").wrap('<div class="blockquotes"/>'), $("blockquote .blockquotes").append('<div class="AT-share-wrapper"><span class="ats">Share:</span><span class="at-share-w"> <i class="sw" /></span><span class="at-share-f"> <i class="sf" /></span><span class="at-share-tg"> <i class="stg" /></span><span class="at-copy"><i class="cp" /> Copy</span></div>'),$("blockquote .blockquotes").append('<div class="AT-share-wrapper cp2"></div>'),$(function () { $(".at-copy").click(function (t) { t.preventDefault(); var n = $("<input>"); $("body").append(n), $(this).css({ background: "#d50000" }), n.val($(this).parent(".AT-share-wrapper").parent(".blockquotes").find("> .copy-content").text()).select(), document.execCommand("copy"), alert("copied the text"), n.remove() }), $(".at-share-w").click(function () { window.location.origin; var t = $(this).parent(".AT-share-wrapper").parent(".blockquotes").find(" > .copy-content").text(), n = "https://api.whatsapp.com/send?text=" + encodeURIComponent(t) + '%0A' + location.href + ""; window.open(n, "_blank") }), $(".at-share-f").click(function () { window.location.origin; var t = $(this).parent(".AT-share-wrapper").parent(".blockquotes").find(" > .copy-content").text(), n = "https://www.facebook.com/sharer/sharer.php?u=" + location.href + "&quote=" + encodeURIComponent(t); window.open(n, "_blank") }), $(".at-share-tg").click(function () { window.location.origin; var t = $(this).parent(".AT-share-wrapper").parent(".blockquotes").find(" > .copy-content").text(), n = "https://telegram.me/share/url?url=" + encodeURIComponent(t) + '%0A' + ""; window.open(n, "_blank") }) });
//]]>
</script>

Step 5: Now Save your theme and check you have done!

"Keep sharing and support us. Feel free to ask about any problem you are facing or and doubt in the comment box and give me a chance to help you out"