How to Add Blockquote with Copy and Share Buttons in Blogger
Hi to all, in this article I am going to tell you all about how to add blockquote with copy and share buttons in blogger website easily in just few minutes.
Read the below provided steps carefully to get clear understanding about adding this blockquote with copy and share button in blogger without any error.
Steps to Add Blockquote with Copy & Share Buttons in Blogger
Step-1: Login to Blogger
First of all you need to visit blogger official website and then you need to sign-in to your blogger website dashboard by using your login credentials.
Step-2: Backup Theme
You need to follow the below path and backup your blogger theme for future purpose:
Blogger website dashboard -> Theme section -> Click on arrow icon -> Backup theme -> Download theme.
Step-3: Open Blogger Theme Editor
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: Copy Below CSS Code
You need to copy below provided CSS Code.
And paste the copied CSS code above closing head tag or </head> tag.
<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>
Step-5: Copy Below Script Tags
Now you need to copy below provided script tags.
And paste the copied script tags just above closing head tag or </head> tag.
<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-6: Copy Below JavaScript Code
Now again you nee to copy below provided JavaScript code.
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 '/>
Step-7: Saving the code
After adding the three codes in your theme editor then click on save button, to save your complete theme.
Basically it will take few seconds to process your theme code and after successful processing you will get a message i.e. Updated Successfully.
You have successfully added blockquote with copy and share buttons in blogger easily in just few minutes.
Note:
If you get any error while saving the code then you need to restore your backup code again and then repeat the same process as mentioned in the above steps carefully.
Conclusion
I hope that you have understood about how to add blockquote with copy and share buttons in blogger website easily in just few minutes.
