A Quick Guide to add Blockquote with Copy and Share Buttons in Blogger

A Quick Guide to add Blockquote with Copy and Share Buttons in Blogger

Hello everyone, in this post I will explain how to quickly and simply add a blockquote with copy and share buttons to a blogger page in a matter of minutes. 

To understand exactly how to add this blockquote with a copy and share button in Blogger without making any mistakes, carefully follow the instructions provided below. 

Step 1: You must first go to the official Blogger website and then use your login credentials to access the dashboard of your blogger domain. 

Step 2: Restore the theme You must adhere to the instructions below and make a backup of your blogger theme for future use: 

Blogger website dashboard -> Theme section -> Click on arrow icon -> Backup theme -> Download theme. 

Step 3: Now again you need to follow the below provided path and open your blogger website theme editor. 

Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on Edit HTML -> Blogger theme editor.

Step 4 : You must copy the CSS code that is provided below. Then, insert the copied CSS code above the </head> or closing head element. 

<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> 
<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 5: Copy below java script code
Once more, you must copy the JavaScript code that is provided below. 
and paste the copied javascript code just above closing body tag or </body> tag.

<script 
src='data:text/javascript;base64,ICAgZXZhbChmdW5jdGlvbihwLGEsYyxrLGUsZCl7d2hpbGUoYy0tKXtpZihrW2NdKXtwPXAucmVwbGFjZShuZXcgUmVnRXhwKCdcXGInK2MrJ1xcYicsJ2cnKSxrW2NdKX19cmV0dXJuIHB9KCcyOCAxMj1cJzwxMyAwPSI2LTI3LTEiPlxcNTw4IDA9XFxcJzI2LTFcXFwnPjwvOD5cXDU8MiAgMD0iMy05IiAxMD0iMS05LTMiPjw0IDA9IjYtOSI+PC80PjwvMj5cXDUgPDIgMjQ9IjIzIiAwPSIzLTciIDIyLTIxPSIxLzcvMSIgMTA9IjEtNy0zIj48NCAwPSI2LTciPjwvND48LzI+XFw1PDIgMD0iMy0xOSIgMTA9IjEtMTEtMyI+PDQgMD0iNi0xMSI+PC80PjwvMj5cXDU8MiAwPSIxNCI+PDggMD0iMTYiPjwvOD48LzI+IDwvMTM+XCc7MTcoIjE4IikuMjAoIjYtMjUtMSIpLjE1KDEyKTsnLDEwLDI5LCdjbGFzc3xzaGFyZXxhfGljb258aXxufGF0fHdoYXRzYXBwfHNwYW58ZmFjZWJvb2t8aWR8dHdpdHRlcnxzaGFyZV9odG1sfGRpdnxjb3B5aXR8YXBwZW5kfGNvcGllZHxqUXVlcnl8YmxvY2txdW90ZXx0ZWxlZ3JhbXxhZGRDbGFzc3xhY3Rpb258ZGF0YXxfMHx0YXJnZXR8c29jaWFsfHF8cXVvdGV8dmFyJy5zcGxpdCgnfCcpKSk7ZXZhbChmdW5jdGlvbihwLGEsYyxrLGUsZCl7d2hpbGUoYy0tKXtpZihrW2NdKXtwPXAucmVwbGFjZShuZXcgUmVnRXhwKCdcXGInK2MrJ1xcYicsJ2cnKSxrW2NdKX19cmV0dXJuIHB9KCcwKCIuMTgiKS41KDYoKXsxPTAoMikuNygiOCIpLjkoKS40KCIxMSIpLjEyKCJcXDEwXFwxMyIpLjE0KCkuMygpLDAoMikuMTUoIjE2LTE3LTMiLDEpfSk7JywxMCwxOSwnalF1ZXJ5fGNvb2x8dGhpc3x0ZXh0fGZpbmR8ZWFjaHxmdW5jdGlvbnxwYXJlbnRzfGJsb2NrcXVvdGV8Y2xvbmV8cnxicnxwcmVwZW5kfG58ZW5kfGF0dHJ8ZGF0YXxjbGlwYm9hcmR8Y29weWl0Jy5zcGxpdCgnfCcpKSk7ZXZhbChmdW5jdGlvbihwLGEsYyxrLGUsZCl7d2hpbGUoYy0tKXtpZihrW2NdKXtwPXAucmVwbGFjZShuZXcgUmVnRXhwKCdcXGInK2MudG9TdHJpbmcoYSkrJ1xcYicsJ2cnKSxrW2NdKX19cmV0dXJuIHB9KCcwKHkpLmgoImciLCIjZi0yLWQiLGMoKXtiIGU9MCg0KS44KCI3IikuNigpLjUoImkiKS5hKCJcXHJcXG4iKS5qKCkuaygpLG89Imw6Ly9tLjIucC8zLzMucT91PSIrMS5zLnQrIiZ2PSIrZTsxLncoeChvKSwiOSIpfSk7JywzNSwzNSwnalF1ZXJ5fHdpbmRvd3xmYWNlYm9va3xzaGFyZXJ8dGhpc3xmaW5kfGNsb25lfGJsb2NrcXVvdGV8cGFyZW50c3xfMHxwcmVwZW5kfHZhcnxmdW5jdGlvbnxpY29ufHxzaGFyZXxjbGlja3xvbnxicnxlbmR8dGV4dHxodHRwc3x3d3d8fHxjb218cGhwfHxsb2NhdGlvbnxocmVmfHxxdW90ZXxvcGVufGVuY29kZVVSSXxkb2N1bWVudCcuc3BsaXQoJ3wnKSkpO3ZhciBfMHg0ZWQ3PVsiXHg2M1x4NkNceDY5XHg2M1x4NkIiLCJceDIzXHg3M1x4NjhceDYxXHg3Mlx4NjVceDJEXHg3N1x4NjhceDYxXHg3NFx4NzNceDYxXHg3MFx4NzBceDJEXHg2OVx4NjNceDZGXHg2RSIsIlx4NjhceDc0XHg3NFx4NzBceDczXHgzQVx4MkZceDJGXHg3N1x4NjFceDJFXHg2RFx4NjVceDJGXHgzRlx4NzRceDY1XHg3OFx4NzRceDNEIiwiXHg3NFx4NjVceDc4XHg3NCIsIlx4NjVceDZFXHg2NCIsIlx4MERceDBBIiwiXHg3MFx4NzJceDY1XHg3MFx4NjVceDZFXHg2NCIsIlx4NjJceDcyIiwiXHg2Nlx4NjlceDZFXHg2NCIsIlx4NjNceDZDXHg2Rlx4NkVceDY1IiwiXHg2Mlx4NkNceDZGXHg2M1x4NkJceDcxXHg3NVx4NkZceDc0XHg2NSIsIlx4NzBceDYxXHg3Mlx4NjVceDZFXHg3NFx4NzMiLCJceDBEXHgwQVx4MERceDBBXHgyMFx4MkRceDc2XHg2OVx4NjFceDNBIiwiXHg2OFx4NzJceDY1XHg2NiIsIlx4NkNceDZGXHg2M1x4NjFceDc0XHg2OVx4NkZceDZFIiwiXHg1Rlx4NjJceDZDXHg2MVx4NkVceDZCIiwiXHg2Rlx4NzBceDY1XHg2RSIsIlx4NkZceDZFIl07alF1ZXJ5KGRvY3VtZW50KVtfMHg0ZWQ3WzE3XV0oXzB4NGVkN1swXSxfMHg0ZWQ3WzFdLGZ1bmN0aW9uKCl7dmFyIF8weDJmYmF4MT1fMHg0ZWQ3WzJdKyBqUXVlcnkodGhpcylbXzB4NGVkN1sxMV1dKF8weDRlZDdbMTBdKVtfMHg0ZWQ3WzldXSgpW18weDRlZDdbOF1dKF8weDRlZDdbN10pW18weDRlZDdbNl1dKF8weDRlZDdbNV0pW18weDRlZDdbNF1dKClbXzB4NGVkN1szXV0oKSsgXzB4NGVkN1sxMl0rIHdpbmRvd1tfMHg0ZWQ3WzE0XV1bXzB4NGVkN1sxM11dO3dpbmRvd1tfMHg0ZWQ3WzE2XV0oZW5jb2RlVVJJKF8weDJmYmF4MSksXzB4NGVkN1sxNV0pfSk7ZXZhbChmdW5jdGlvbihwLGEsYyxrLGUsZCl7d2hpbGUoYy0tKXtpZihrW2NdKXtwPXAucmVwbGFjZShuZXcgUmVnRXhwKCdcXGInK2MrJ1xcYicsJ2cnKSxrW2NdKX19cmV0dXJuIHB9KCc2KDMxKS4xNigiMTUiLCIjMTQtNS0xMyIsMTIoKXsxMSAzPSI5Oi8vNS44LzcvMTc/Mj0iKzYoMTkpLjIwKCIxOCIpLjIxKCkuMjIoIjIzIikuMjQoIlxcMVxcMCIpLjI1KCkuMigpKyJcXDFcXDBcXDFcXDAgLTI2OiIrNC4yNy4yODs0LjI5KDMwKDMpLCIxMCIpfSk7JywxMCwzMiwnbnxyfHRleHR8dHx3aW5kb3d8dHdpdHRlcnxqUXVlcnl8aW50ZW50fGNvbXxodHRwc3xfMHx2YXJ8ZnVuY3Rpb258aWNvbnxzaGFyZXxjbGlja3xvbnx0d2VldHxibG9ja3F1b3RlfHRoaXN8cGFyZW50c3xjbG9uZXxmaW5kfGJyfHByZXBlbmR8ZW5kfHZpYXxsb2NhdGlvbnxocmVmfG9wZW58ZW5jb2RlVVJJfGRvY3VtZW50Jy5zcGxpdCgnfCcpKSk7bmV3IENsaXBib2FyZEpTKCcuY29weWl0Jyk7alF1ZXJ5KGRvY3VtZW50KS5vbigiY2xpY2siLCIuY29weWl0IixmdW5jdGlvbigpe2pRdWVyeSh0aGlzKS5maW5kKCJzcGFuIikuZmFkZUluKDUwMCksalF1ZXJ5KHRoaXMpLmZpbmQoInNwYW4iKS5mYWRlT3V0KDFlMyl9KTsg  
'/>
Click the "Save" button to save your entire theme after you've added the three codes to your theme editor. 

Basically, processing your theme code will take a few seconds, and once it is successfully processed, you will receive a notice saying "Updated Successfully." 

Should an error occur during code saving, carefully repeat the process as outlined in the preceding steps and restore your backup code. 


I hope you now understand how simple and quick it is to add a blockquote with copy and share buttons to a blogger page.

FULL PROCESS SHOWN IN VIDEO ALSO