How to add a quick edit button in Blogger

how to add,quick edit button, Blogger

how to add a quick edit button in Blogger

If you're looking to add a quick edit button to your Blogger posts, you've come to the right place! This tutorial will show you how to easily add a quick edit button to your Blogger posts using HTML and CSS.

Backing Up Your Template:

Before we begin, it's always a good idea to make a backup copy of your Blogger template. To do this, go to Settings > Templates and click on the "Backup" button next to your template. This will save a copy of your template in case anything goes wrong during the editing process.

Finding the HTML Code:

Next, we need to find the HTML code that controls the body of our posts. To do this, open up the HTML view of your Blogger template by clicking on the "HTML" tab at the top of the screen. Then, scroll down until you see the following code:
<data:post.body/>
This code controls the body of your posts, so we'll be modifying it shortly.

Pasting the New Code:

Now, below the code we just found, paste the following code:

<!--quickedit--> <style>.blog-admin {display: none;} .quickEditDiv { background: white; box-shadow: 0 0 3px 1px #6b9eb5; padding: 0px 10px; margin: 0px 16px; border-radius: 5px; position: fixed; top: 50%; left: 0; z-index: 99999; } .quickEditDiv a { display: flex;font-size: 20px; font-weight: 800; color: #505050; transition: 0.5s; cursor: pointer;text-decoration: none; } .quickEditDiv a:hover { color: #2196F3; transition: 0.25s; }</style> <b:if cond='data:view.isPost'><div expr:class='"quickEditDiv " + data:post.adminClass'> <a class='dashboardBTN' expr:href='"https://www.blogger.com/blog/posts/" + data:blog.blogId' rel='nofollow noopener noreferrer' target='_blank' title='Dashboard'>☷</a><a class='EditPostBTN' expr:href='"https://www.blogger.com/blog/post/edit/" + data:blog.blogId + "/" + data:post.id' rel='nofollow noopener noreferrer' target='_blank' title='Edit post'>✎</a> </div> </b:if> <!--quickedit-->

Note:before </b:includable> exactly !It is very important to determine blog post ID.

This code will add a quick edit button to your Blogger posts. The button will look like this: 

Saving the Template:

Finally, save your template by clicking on the "Save" button at the top of the screen. Your quick edit button should now be live on your blog!

Note: You can create a special style for the quick edit button by modifying the CSS styles in your template. To do this, open up the CSS file associated with your template and modify the styles as desired.

That's it! With these simple steps, you can easily add a quick edit button to your Blogger posts. This can be a useful feature for your readers, allowing them to quickly make changes to their posts without having to go through the full editing process. Happy blogging!

© Manajmnt code

شارك على :

☷✎