Adding Elfsight widget to Blogger website
If you want to add an Elfsight widget to your Blogger website, follow this step-by-step guide to ensure a smooth integration. Copy your widget installation code and let's begin! 😊
In this article
Adding widget to a specific website page
- 1
-
Go to Blogger website admin panel
Log in to your Blogger website admin panel, click Pages and choose the page where you want to add the widget. In our example, it is the home page:
If you want to install the widget on the home page and there is no Pages option in your backend, skip to the next section - Adding widget to the website home page. - 2
-
Paste the installation code
Click on 🖊️:
Switch to HTML view, paste your installation code, and click Update:
- 3
-
Check the result
Click on Preview to see how the widget looks on the page:
Well done. You have successfully added your widget to a specific page of your Blogger website!
Adding widget to the website home page
- 1
-
Go to Blogger website admin panel
Log in to your Blogger website admin panel. Go to Theme, select your website's theme, and click on ⬇️ within Customize:
Choose
Edit HTML:
- 2
-
Prepare the installation code
Use this special code instead of the standard Elfsight widget installation code:
<b:if cond='data:view.isHomepage'> <script data-use-service-core='true' defer='defer' src='https://static.elfsight.com/platform/platform.js'/> <div class='elfsight-app-WIDGET_ID'/> </b:if>
Before using this code, replace WIDGET_ID with the ID of your own widget - Where to get your widget ID.
- 3
-
Choose the placement of the code
Add the widget code either after the opening <body> tag or before the closing </body> tag:- For static widgets
Placing the code after<body>(1) will position your static widget at the top of the page. Placing it before</body>(2) will position it at the bottom, in the footer:
If you need to place the widget in a specific spot on your home page, please contact our Support Team. Our developers will be happy to assist you. - For floating widgets
You can add your widget installation code both after the opening<body>tag or before the closing</body>tag. We recommend adding it before</body>to avoid potential z-index issues:
- For static widgets
- 4
-
Click
Save to apply the changes:
Well done. You have successfully added the widget to the home page of your Blogger website!
Choose
Edit HTML:
Adding widget to all website pages
- 1
-
Go to Blogger website admin panel
Log in to your Blogger website admin panel. Go to Theme, select your website's theme, and click on ⬇️ within Customize:
In the dropdown, choose Edit HTML:
- 2
-
Prepare the installation code
Use this special code instead of the standard Elfsight widget installation code:
<script data-use-service-core='true' defer='defer' src='https://static.elfsight.com/platform/platform.js'/> <div class='elfsight-app-WIDGET_ID'/>
Before using this code, replace WIDGET_ID with the ID of your own widget - Where to get your widget ID.
- 3
-
Choose the placement of the code
Add the widget code either after the opening <body> tag or before the closing </body> tag:- For static widgets
Placing the code after<body>(1) will position your static widget at the top of your website pages. Placing it before</body>(2) will position it at the bottom of the pages, in the footer:
If you need to place your static widget in a specific spot on your website pages, please contact our Support Team. Our developers will be happy to assist you. - For floating widgets
You can add the code both after the opening<body>tag or before the closing</body>tag. We recommend adding it before</body>to avoid potential z-index issues:
- For static widgets
- 4
-
Click
Save to apply the changes:
That's it. The widget has been successfully added to all pages of your Blogger website!
