Quote with Copy & Share Button | Shayari Box script for Blogger - UNPLUG.DOC

Quote with Copy & Share Button | Shayari Box script for Blogger and wordpress

What is Blockquote

 Quotes are sections of text that are used to make quotes stand out from other text, or simply quotes are used to make text stand out from other text on the page. Quotes are used to draw your readers' attention to specific parts of your blog.

Quiet functions of this piece of code

You can add this function to your quote tag without changing the current quote style.

Using SVG path, so no problem whichever front awesome version you are using, all icons display correctly

• Responsive with every template
• Attractive appearance with soaring style

How to add copy and publish buttons to quotes

Step 1. Log in as a blogger and go to Theme> Edit HTML.

Step 2. Find this code </head> and paste above </head>

HEAD CODE

<link href='https://cdn.statically.io' rel='dns-prefetch preconnect'/>
<script src='https://cdn.statically.io/gh/anupamxxx/anutrickzv1/master/copy-to-clipboard.js'/>

Step 4. Now copy the below Javascript and paste it again right above the </body> tag.

JAVASCRIPT CODE

<script src='data:text/javascript;base64,ICAgZXZhbChmdW5jdGlvbihwLGEsYyxrLGUsZCl7d2hpbGUoYy0tKXtpZihrW2NdKXtwPXAucmVwbGFjZShuZXcgUmVnRXhwKCdcXGInK2MrJ1xcYicsJ2cnKSxrW2NdKX19cmV0dXJuIHB9KCcyOCAxMj1cJzwxMyAwPSI2LTI3LTEiPlxcNTw4IDA9XFxcJzI2LTFcXFwnPjwvOD5cXDU8MiAgMD0iMy05IiAxMD0iMS05LTMiPjw0IDA9IjYtOSI+PC80PjwvMj5cXDUgPDIgMjQ9IjIzIiAwPSIzLTciIDIyLTIxPSIxLzcvMSIgMTA9IjEtNy0zIj48NCAwPSI2LTciPjwvND48LzI+XFw1PDIgMD0iMy0xOSIgMTA9IjEtMTEtMyI+PDQgMD0iNi0xMSI+PC80PjwvMj5cXDU8MiAwPSIxNCI+PDggMD0iMTYiPjwvOD48LzI+IDwvMTM+XCc7MTcoIjE4IikuMjAoIjYtMjUtMSIpLjE1KDEyKTsnLDEwLDI5LCdjbGFzc3xzaGFyZXxhfGljb258aXxufGF0fHdoYXRzYXBwfHNwYW58ZmFjZWJvb2t8aWR8dHdpdHRlcnxzaGFyZV9odG1sfGRpdnxjb3B5aXR8YXBwZW5kfGNvcGllZHxqUXVlcnl8YmxvY2txdW90ZXx0ZWxlZ3JhbXxhZGRDbGFzc3xhY3Rpb258ZGF0YXxfMHx0YXJnZXR8c29jaWFsfHF8cXVvdGV8dmFyJy5zcGxpdCgnfCcpKSk7ZXZhbChmdW5jdGlvbihwLGEsYyxrLGUsZCl7d2hpbGUoYy0tKXtpZihrW2NdKXtwPXAucmVwbGFjZShuZXcgUmVnRXhwKCdcXGInK2MrJ1xcYicsJ2cnKSxrW2NdKX19cmV0dXJuIHB9KCcwKCIuMTgiKS41KDYoKXsxPTAoMikuNygiOCIpLjkoKS40KCIxMSIpLjEyKCJcXDEwXFwxMyIpLjE0KCkuMygpLDAoMikuMTUoIjE2LTE3LTMiLDEpfSk7JywxMCwxOSwnalF1ZXJ5fGNvb2x8dGhpc3x0ZXh0fGZpbmR8ZWFjaHxmdW5jdGlvbnxwYXJlbnRzfGJsb2NrcXVvdGV8Y2xvbmV8cnxicnxwcmVwZW5kfG58ZW5kfGF0dHJ8ZGF0YXxjbGlwYm9hcmR8Y29weWl0Jy5zcGxpdCgnfCcpKSk7ZXZhbChmdW5jdGlvbihwLGEsYyxrLGUsZCl7d2hpbGUoYy0tKXtpZihrW2NdKXtwPXAucmVwbGFjZShuZXcgUmVnRXhwKCdcXGInK2MudG9TdHJpbmcoYSkrJ1xcYicsJ2cnKSxrW2NdKX19cmV0dXJuIHB9KCcwKHkpLmgoImciLCIjZi0yLWQiLGMoKXtiIGU9MCg0KS44KCI3IikuNigpLjUoImkiKS5hKCJcXHJcXG4iKS5qKCkuaygpLG89Imw6Ly9tLjIucC8zLzMucT91PSIrMS5zLnQrIiZ2PSIrZTsxLncoeChvKSwiOSIpfSk7JywzNSwzNSwnalF1ZXJ5fHdpbmRvd3xmYWNlYm9va3xzaGFyZXJ8dGhpc3xmaW5kfGNsb25lfGJsb2NrcXVvdGV8cGFyZW50c3xfMHxwcmVwZW5kfHZhcnxmdW5jdGlvbnxpY29ufHxzaGFyZXxjbGlja3xvbnxicnxlbmR8dGV4dHxodHRwc3x3d3d8fHxjb218cGhwfHxsb2NhdGlvbnxocmVmfHxxdW90ZXxvcGVufGVuY29kZVVSSXxkb2N1bWVudCcuc3BsaXQoJ3wnKSkpO3ZhciBfMHg0ZWQ3PVsiXHg2M1x4NkNceDY5XHg2M1x4NkIiLCJceDIzXHg3M1x4NjhceDYxXHg3Mlx4NjVceDJEXHg3N1x4NjhceDYxXHg3NFx4NzNceDYxXHg3MFx4NzBceDJEXHg2OVx4NjNceDZGXHg2RSIsIlx4NjhceDc0XHg3NFx4NzBceDczXHgzQVx4MkZceDJGXHg3N1x4NjFceDJFXHg2RFx4NjVceDJGXHgzRlx4NzRceDY1XHg3OFx4NzRceDNEIiwiXHg3NFx4NjVceDc4XHg3NCIsIlx4NjVceDZFXHg2NCIsIlx4MERceDBBIiwiXHg3MFx4NzJceDY1XHg3MFx4NjVceDZFXHg2NCIsIlx4NjJceDcyIiwiXHg2Nlx4NjlceDZFXHg2NCIsIlx4NjNceDZDXHg2Rlx4NkVceDY1IiwiXHg2Mlx4NkNceDZGXHg2M1x4NkJceDcxXHg3NVx4NkZceDc0XHg2NSIsIlx4NzBceDYxXHg3Mlx4NjVceDZFXHg3NFx4NzMiLCJceDBEXHgwQVx4MERceDBBXHgyMFx4MkRceDc2XHg2OVx4NjFceDNBIiwiXHg2OFx4NzJceDY1XHg2NiIsIlx4NkNceDZGXHg2M1x4NjFceDc0XHg2OVx4NkZceDZFIiwiXHg1Rlx4NjJceDZDXHg2MVx4NkVceDZCIiwiXHg2Rlx4NzBceDY1XHg2RSIsIlx4NkZceDZFIl07alF1ZXJ5KGRvY3VtZW50KVtfMHg0ZWQ3WzE3XV0oXzB4NGVkN1swXSxfMHg0ZWQ3WzFdLGZ1bmN0aW9uKCl7dmFyIF8weDJmYmF4MT1fMHg0ZWQ3WzJdKyBqUXVlcnkodGhpcylbXzB4NGVkN1sxMV1dKF8weDRlZDdbMTBdKVtfMHg0ZWQ3WzldXSgpW18weDRlZDdbOF1dKF8weDRlZDdbN10pW18weDRlZDdbNl1dKF8weDRlZDdbNV0pW18weDRlZDdbNF1dKClbXzB4NGVkN1szXV0oKSsgXzB4NGVkN1sxMl0rIHdpbmRvd1tfMHg0ZWQ3WzE0XV1bXzB4NGVkN1sxM11dO3dpbmRvd1tfMHg0ZWQ3WzE2XV0oZW5jb2RlVVJJKF8weDJmYmF4MSksXzB4NGVkN1sxNV0pfSk7ZXZhbChmdW5jdGlvbihwLGEsYyxrLGUsZCl7d2hpbGUoYy0tKXtpZihrW2NdKXtwPXAucmVwbGFjZShuZXcgUmVnRXhwKCdcXGInK2MrJ1xcYicsJ2cnKSxrW2NdKX19cmV0dXJuIHB9KCc2KDMxKS4xNigiMTUiLCIjMTQtNS0xMyIsMTIoKXsxMSAzPSI5Oi8vNS44LzcvMTc/Mj0iKzYoMTkpLjIwKCIxOCIpLjIxKCkuMjIoIjIzIikuMjQoIlxcMVxcMCIpLjI1KCkuMigpKyJcXDFcXDBcXDFcXDAgLTI2OiIrNC4yNy4yODs0LjI5KDMwKDMpLCIxMCIpfSk7JywxMCwzMiwnbnxyfHRleHR8dHx3aW5kb3d8dHdpdHRlcnxqUXVlcnl8aW50ZW50fGNvbXxodHRwc3xfMHx2YXJ8ZnVuY3Rpb258aWNvbnxzaGFyZXxjbGlja3xvbnx0d2VldHxibG9ja3F1b3RlfHRoaXN8cGFyZW50c3xjbG9uZXxmaW5kfGJyfHByZXBlbmR8ZW5kfHZpYXxsb2NhdGlvbnxocmVmfG9wZW58ZW5jb2RlVVJJfGRvY3VtZW50Jy5zcGxpdCgnfCcpKSk7bmV3IENsaXBib2FyZEpTKCcuY29weWl0Jyk7alF1ZXJ5KGRvY3VtZW50KS5vbigiY2xpY2siLCIuY29weWl0IixmdW5jdGlvbigpe2pRdWVyeSh0aGlzKS5maW5kKCJzcGFuIikuZmFkZUluKDUwMCksalF1ZXJ5KHRoaXMpLmZpbmQoInNwYW4iKS5mYWRlT3V0KDFlMyl9KTsg  '/>

Copy The CSS Code Paste In Above  ]]></b:skin> And Done

CSS CODE PASTE ABOVE

<style type='text/css'>.at-quote-share .copyit span.copied::after{content:'Copied ';color:#fff}
 blockquote.at-social-share { background-color: #fff; box-shadow: 0 2px 14px -4px rgb(0 0 0 / 20%); border-radius: 6px; margin-right: 1%; margin: 1.5em 0px 1.5em 0px; padding-bottom: 1.1rem; border: 2px solid; border-image-slice: 1; padding-top: 3.1rem; border-image-source: linear-gradient(to left, #f5d020, #f53803); padding-right: 1.1rem; padding-left: 1.1rem; text-align: center; display: block; } blockquote.at-social-share:before{ content:none; } blockquote.at-social-share p { line-height: 1.5;margin:0; } blockquote.at-social-share .at-quote-share { padding-top: 7px; margin-left: 10px; text-align: center; justify-content: center; align-items: center; display: flex; font-size: 12px; text-transform: uppercase; margin: 0; color: #444; margin-top: 13px; padding-bottom: 8px; } blockquote.at-social-share .at-quote-share span { font-size: 12px; font-style: normal; padding: 0px; padding-top: 4px; padding-right: 11px; word-break: initial; } blockquote.at-social-share .at-quote-share a {font-size: 22px; padding: 4px 20px; line-height: 1.4; margin: 0 3px; cursor: pointer; position: relative; color: #000; text-decoration: none; word-break: initial; } blockquote.at-social-share .at-quote-share a:hover {transition: .3s; } blockquote.at-social-share .at-quote-share a.icon-facebook { background: #3b5998; font-size: 15px; box-shadow: 0 3px 0 0 #91a6d4; border-radius: 15px; color: #fff; width: auto; } blockquote.at-social-share .at-quote-share a.icon-whatsapp { background: #0f9806; font-size: 15px;box-shadow: 0 3px 0 0 #8cfa85; border-radius: 15px; color: #fff; width: auto; } blockquote.at-social-share .at-quote-share a.icon-telegram { background: #32afed; font-size: 15px;box-shadow: 0 3px 0 0 #8ad1f5; border-radius: 15px; color: #fff; width: auto; } blockquote.at-social-share .at-quote-share .copyit {box-shadow: 0 3px 0 0 #ff9f80; background: #cc3300 ; font-size: 15px; font-style: normal; border: none; border-radius: 15px; color: #fff; width: auto; } blockquote.at-social-share .at-quote-share span.copied { background: #049a10; color: #fff; position: absolute; top: 0; left: 0; display: none; right: 0; text-align: center; padding: 5px; font-size: 15px; border-radius: 15px; } @media only screen and (max-width: 380px) { blockquote.at-social-share .at-quote-share a { padding: 4px 13px; } } span.q-share::after{content:'Share:';color:#666} .at-quote-share .copyit::after{content:'Copy ';color:#fff} .at-quote-share i.at-twitter::after{content:'';background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z' fill='%23fff'/%3E%3C/svg%3E") center / 20px no-repeat; width:20px; height:20px;display: block;} .at-quote-share i.at-whatsapp::after{content:'';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; width:20px; height:20px;display: block;} .at-quote-share i.at-facebook::after{content:'';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; width:20px; height:20px;display: block;}
        </style>

The social media widget is now fully built and working correctly if you follow all the steps correctly. If you have questions or steps that you do not understand, please write down the questions and concerns in the comment column below.