How to Add Curved Screen Effect in Blogger

Hi to all, in this article I am going to tell you all about how to add curved screen effect in blogger website easily in just few minutes by using HTML and CSS.

Installing curved screen effect on your blogger website, makes your website look more cool and interesting and mobile users feel a new experience to visiting your blog.

You ca use the below codes in any blogger templates or even you can use in other websites like WordPress etc.

Read the below provided steps carefully and completely to get clear understanding about how to add curved screen effect in blogger website easily without any error, if you miss any one step then you may get error while saving the code in blogger theme editor, so read the complete article carefully.

Steps to Add Curved Screen Effect in Blogger

Step-1: First of all you need to login to your blogger website dashboard by using your login credentials.

Step-2: Go to blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on backup -> Click on download theme.

Step-3: Now go to blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on Edit HTML -> Blogger theme editor.

Step-4: Copy the below provided CSS code and paste the copied CSS code above closing body tag or </body> tag.

<style> .edge-right{z-index:99999999; background:#a8a8a8; height:100vh; width:0px; box-shadow: 10px 0px 10px 12px #333; position:fixed; top:0; right:0} .edge-left{z-index:99999999; background:#a8a8a8; height:100vh; width:0px; box-shadow: 0px 0px 10px 3px #333; position:fixed; top:0; left:0} </style> <div class='edge-right'/> <div class='edge-left'/>
Copy

OR

Step-5: To show the curved screen effect in only mobile devices, use the below code and paste the code above closing body tag or </body> tag.

<b:if cond='data:blog.isMobileRequest=="true"'> <style> .edge-right{z-index:99999999; background:#a8a8a8; height:100vh; width:0px; box-shadow: 10px 0px 10px 12px #333; position:fixed; top:0; right:0} .edge-left{z-index:99999999; background:#a8a8a8; height:100vh; width:0px; box-shadow: 0px 0px 10px 3px #333; position:fixed; top:0; left:0} </style> <div class='edge-right'/> <div class='edge-left'/> </b:if>
Copy

Step-6: After adding any one code from step-4 and step-5, click on save button.

Step-7: It will take few seconds to process your blogger theme code and after successful processing, you will get a message i.e. Updated Successfully.

Step-8: You have successfully added curved screen effect in blogger website easily in just few seconds.

Note

If you get any error while saving the theme code, then you need to restore your backup code and need to repeat the same as provided in the above steps carefully.

You need to add the codes in the respective place only, if you add the CSS in any other place then this curved screen effect will not work, so place code carefully.

Here there are two types of codes, first is given in step-4, this code will work in both desktop as well as mobile and the code in step-5 will work only in mobile versions, so add any one code based on your interest.

Conclusion

I hope that you have understood about how to add curved screen effect in blogger website easily in just few minutes.