Add Copy And Share Buttons In Blockquote (Shayari Box) - TechyWebTech -->

Add Copy And Share Buttons In Blockquote (Shayari Box)

Also Read

If you have a Shayari website or Quotes Website it helps you a great deal not only because it attracts people but also since it will finally enhance your flow. As if you like content and have a share button, then you can easily share your quotes and Shayari.




What is Blockquote Shayari Box Script

Add Copy And Share Buttons In Blockquote (Shayari Box)

Whenever you visit a web page with Shayari content or quotes, you often need to see the Shayari text button on which you click Shayari, or quotes you need to copy and share.


Features of Script Code

  • Without modifying block quotes, you can include this feature in your blockquotes tag.
  • responsive For Every Blogger Or Other CMS template .
  • Attractive in a hover-style appearance.

Copy And Share Buttons Blockquote Code

To use this code you need to use Two Code HTML And CSS in your CMS Source file. First is CSS And Second is JavaScript.

Copy And Share Buttons CSS Blockquote Code :

<style>
.TWT-share-wrapper{position: relTWTive; display: flex;margin-top: 8px; justify-content: center; align-content: center; align-items: center;} .TWT-share-wrapper span{text-align: center; display: flex;margin: 0 3px; floTWT: left; line-height: 1.4; justify-content: center; align-items: center; cursor: pointer;} .TWT-share-wrapper span i.cp{padding-right:7px} .TWT-share-tg{background: #0088cc; font-size: 15px; border: 1px solid #0088cc; border-radius: 15px; color: #fff; width: auto; padding: 4px 16px;} .TWT-share-tg i.stg{color:#fff!important;width:20px; height:20px;background:url(&quot;dTWTa:image/svg+xml,%3Csvg viewBox=&#39;0 0 16 16&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3CpTWTh d=&#39;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&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) center / 20px no-repeTWT} .TWT-share-w{background: #0f9806; font-size: 15px; border: 1px solid #0f9806; border-radius: 15px; color: #fff; width: auto; padding: 4px 16px;} .TWT-share-f i.sf{color:#fff!important;width:20px; height:20px;background:url(&quot;dTWTa:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3CpTWTh d=&#39;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&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) center / 20px no-repeTWT} .TWT-share-f{background: #3b5998; font-size: 15px; border: 1px solid #3b5998; border-radius: 15px; color: #fff; width: auto; padding: 4px 16px;}.TWT-copy:hover{background:black} .TWT-share-w i.sw{color:#fff!important;width:20px; height:20px;background:url(&quot;dTWTa:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3CpTWTh d=&#39;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&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) center / 20px no-repeTWT} .TWT-copy i.cp{background:url(&quot;dTWTa:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3CpTWTh d=&#39;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&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) center / 20px no-repeTWT;color:#fff!important;width:20px; height:20px;} .TWT-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.TWTs{font-size:18px!important;}
</style>

Copy And Share Buttons JavaScript Blockquotes Code :

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

How To Add Copy And Share Buttons In Blockquote (Shayari Box)

1. Copy the both code mentioned the above.
2. Paste these codes blogger themes before </body> tag.
3. Save the theme.


Bottom Line :
Continue to share and to help us. Fill in the Comment Box and give me a chance to help you with any problems you face or doubt about these post.