We are going to use Pinterest's official widget builder for this, so the first thing to do is visit the widget builder for Blogger over here. The page shoud look like this:
I am going to show you how you can make a widget that shows the latest pins from your total Pinterest feed, so the next thing I am going to do is select the 'profile' option:
I want to create a custom widget that will fit my sidebar perfectly, so this is how you do it:
• make sure you are logged in to your Pinterest page
• select the 'profile' option
• put your Pinterest profile link in the HTML line
• then select the 'create your own' option
Now build your custom widget to make it fit for your sidebar. The width of your sidebar is 280 pixels. So I fill in 280 for the board width.
For image width I am filling in 140 pixels. That is half of 280 and will make the images show up in 2 columns. I set the height to 400 pixels, just because I like it, but you can play around with it. In the box underneath the pixel numbers you will see a preview of what your board widget will look like.
Once you are satisfied with how your board widget looks, it is time to put it on your blog.
HOW TO PLACE YOUR PINTEREST BOARD WIDGET IN YOUR SIDEBAR
Just below the preview of your board you will find two pieces of HTML coding. That is the coding you will need to place this widget in your Blogger sidebar. The first piece of coding you see is the actual coding for the board, the second piece of coding is needed to get your blog ready to display a Pinterest widget, so we are going to start with that.
• go to your Blogger dashboard and select 'theme' on the left side of the screen
• then select option 'edit HTML'
• this will bring you into the coding of your blog template
We will now have to put the second piece of coding into your blog's coding, but it needs to be done at the right place:
• press the key combination CTRL - f
• this will open a little search bar in the upper right corner of the HTML coding
• type in </body> in this search bar
• and press 'enter'
• now you are taken to the place in the coding that says </body>
• go back to the Pinterest widget builder page and copy the second piece of coding
• then paste that piece of coding right before </body>
• and save this by clicking the orange button that says 'save theme'
I am going to show you how you can make a widget that shows the latest pins from your total Pinterest feed, so the next thing I am going to do is select the 'profile' option:
I want to create a custom widget that will fit my sidebar perfectly, so this is how you do it:
• make sure you are logged in to your Pinterest page
• select the 'profile' option
• put your Pinterest profile link in the HTML line
• then select the 'create your own' option
Now build your custom widget to make it fit for your sidebar. The width of your sidebar is 280 pixels. So I fill in 280 for the board width.
For image width I am filling in 140 pixels. That is half of 280 and will make the images show up in 2 columns. I set the height to 400 pixels, just because I like it, but you can play around with it. In the box underneath the pixel numbers you will see a preview of what your board widget will look like.
Once you are satisfied with how your board widget looks, it is time to put it on your blog.
HOW TO PLACE YOUR PINTEREST BOARD WIDGET IN YOUR SIDEBAR
Just below the preview of your board you will find two pieces of HTML coding. That is the coding you will need to place this widget in your Blogger sidebar. The first piece of coding you see is the actual coding for the board, the second piece of coding is needed to get your blog ready to display a Pinterest widget, so we are going to start with that.
• go to your Blogger dashboard and select 'theme' on the left side of the screen
• then select option 'edit HTML'
• this will bring you into the coding of your blog template
We will now have to put the second piece of coding into your blog's coding, but it needs to be done at the right place:
• press the key combination CTRL - f
• this will open a little search bar in the upper right corner of the HTML coding
• type in </body> in this search bar
• and press 'enter'
• now you are taken to the place in the coding that says </body>
• go back to the Pinterest widget builder page and copy the second piece of coding
• then paste that piece of coding right before </body>
• and save this by clicking the orange button that says 'save theme'
Now that your blog has been prepared for the Pinterest widget it is time to actually put the widget in the sidebar:
• go to your Blogger dashboard and select 'layout'
• then go to the sidebar section and select 'add gadget'
• choose the 'HTML/Javascript' gadget
• now go back to the Pinterest widget builder page and copy the first piece of coding
• paste this coding into the content box of the HTML/Javascript gadget
• and save the gadget
• your new gadget has now been added to the top of the sidebar
• if you want it to appear in another position in your sidebar, click on it with your mouse button and drag it to a position of choice
• then save it by clicking the orange button that says 'save layout'
When you view your blog now, the Pinterest board widget shows up in your sidebar. Your readers will be able to see your latest pins and when they click on the widget, it will take them to your Pinterest page.
