You can easily add borders or shadows to any image that you use in a Blogger blog or on any other website. Here I am going to show you how I use such effects in my Blogger-based blog posts.
Wait, did you notice something around this image? ☝️
By now, you might have probably noticed the shadow of the image around the border. I did not need a sophisticated industry to do this. In fact, it is a matter of simple steps (below).
You might be interested on : How to Access/Delete Blogger Image
How to Put Shadows and Borders Around Blogger Images in 2023
Please learn this by following the steps that I pursued.
1. Copy the desired CSS script
Visit the CSS Box repository of CSS Scan and look for your favorite CSS effect of shadow and/or border. You can click on the box itself so that the script gets copied into the clipboard.
2. Edit the Post in HTML
Edit the blog post in HTML mode and wrap the <img> .... </img> tag with <div class="separator" style="box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;"> .... </div> tag.
Save the blog post (or page) and view the outcome!
Recommended Article: Jet Theme Customization Techniques
NOTE: You can always replace style="box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;" part with the script that you copy from CSS Scan's repository (or your own CSS craft).
Please note that some shadow/border effects may not show while the website is in displayed in 'dark mode'. However, this would not prevent us from offering aesthetic dimensions on the websites.
I hope that you can implement these CSS scripts to add border/shadow effects to the images used on the Blogger posts.
Post a Comment