Ad Code

Ticker

6/random/ticker-posts

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
How-to-add-copy-and-share-buttons-in-blockquotes

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(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 16 16&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath 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-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(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath 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-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(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath 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-repeat} .at-copy i.cp{background:url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath 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-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:

    <!-- inspired by FBIJ

     here:https://factsbyteinjournal.blogspot.com/ -->

    <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"

    Post a Comment

    6 Comments

    1. please make this also for wordpress

      ReplyDelete
    2. Hlo bro yehh copy wordpress k laye hai ja Phair blogger k laye?

      ReplyDelete
      Replies
      1. Dono jageh use kar sakte to bas ye changes apne template me karna hai

        Delete
    3. How can I use this code in wordpress?

      ReplyDelete
      Replies
      1. I would Like to inform you all that this will not work on WordPress{except few template}. Very soon I will comeup with another post for Wordpress User.

        Delete
    4. https://hindimarathisms.com/true-love-facts-hindi

      I added this in my site but it not showing buttons. is the code working?

      ReplyDelete

    Any Comment having the intention of spamming will not publish nor any irrelevant advertisment link will allow in the comment. Thanks!

    Ad Code