Adding your Instagram, Facebook or Twitter widget to your Blogger blog is easy. Follow these steps to create your widget.
Once you've created your widget, follow the appropriate steps below to add it to your website.
Note: Depending on your theme, you can place your widget in a few areas, i.e. sidebar-right-1, Cross-Column or even in footer-1, footer-2-1 or footer-2-2. For this demonstration we use the Simple theme. Other themes follow the same principle, some have more areas where the widget can be placed.
Edit the Blogger Template
Select Layout
If you want to place your SnapWidget in the sidebar-right-1 area you will find it to be very narrow. You can change the width of the sidebar-right-1 area by going to Blogger Theme Designer and choose Adjust widths. You should also keep in mind the options of your widget when setting it up on your SnapWidget dashboard (no. of columns and width, etc.).
Set the width to your desired width
The preview will display the changes in the width in real time.
Click on Apply to Blog and then go Back to Blogger.
Select your area and click on Add a Gadget.
Select the HTML/JavaScript in the pop-up window
Paste your SnapWidget snippet in the Content box.
Add a title and click on Save.
You can also include the widget in the wider Cross-Column area. This will display your widget in the center of the page just under the Header.
Gadgets can also be dragged between different areas, e.g. move the gadget from sidebar-right-1 to Cross-Column (Note: it cannot be placed in the Header):
Click on Save arrangement to save your layout.
Your widget will now be displayed on your Blogger blog!
Changing the appearance of your widget by modifying the snippet content
Note: Any changes you make to the snippet contents will be only applicable to this Blogger instance, anywhere else you display your widget will be as you have set up your widget on your SnapWidget dashboard.
To separate the widget from any other part in the same area insert a <hr /> tag at the start of the snippet.
To horizontally center the widget on the page you will have to encapsulate the widget in a
<div></div>area. To do this include a<div>tag with a text-align: center style just after the newly included<hr />tag and close the <div> area with a</div>tag after the</iframe>tag. If you would like to include a header for your widget you can include a header just after the<div style=”text-align:center”>tag, e.g.<h1>Our Products</h1>. Depending on the size of header you want you can use<h1>,<h2>or<h3>
Example of an inserted snippet with the <hr> tag, header, widget width set to 75% and the widget encapsulated in a <div> area.
If inserted in the Cross-Column area, your widget will be displayed as follows:
