Pinterest Footer Widget Tutorial
4:11 PM
Pinterest makes you want to bake s'mores filled cupcakes, wash your hair with only baking soda, and sew your own panties. Nevertheless we all have one. The outfits are cute and sometimes the DIYs are successful. Oh and the wedding pictures. Don't forget the glorious wedding pictures.
I've been wanting to showcase my pins at the bottom of my blog page for some time. The official Pinterest widget is so easy to add, but it needs a little tweaking to actually look good on a blog. So here's an easy tutorial for creating a Pinterest footer widget.
First, add a new html widget into the footer section in Blogger Layout and name it as "Pinterest". Then, copy and paste the html code below into it. This html code is from the official Pinterest widget builder page. Change the bolded words to your own Pinterest username.
<a data-pin-do="embedUser" href="http://www.pinterest.com/sunlightery/"
data-pin-scale-width="115"
data-pin-scale-height="120"
data-pin-board-width="900"
>Visit Sunlightery's profile on Pinterest.</a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>
Change the dimensions of your widget to the ones below. Now these measurements worked for my blog, but you might need to tweak them a little depending on what theme you have.
data-pin-scale-width="150"
data-pin-scale-height="350"
data-pin-board-width="1100"
Save your widget and preview your blog, adjusting the width as necessary.
Now, in order to align the widget so it isn't flush against the left side of the page, you need change the html code in your template. Go to the Template section and click Back/Restore in the corner and save your template before making any changes.
Then, click on the Edit HTML button. Now, you're going to have to find the what the widget is called. Since you already named it Pinterest, hit CTL+F and search for it in your code.
See the line where Pinterest is highlighted? This is the line of code you want to be looking at.
<b:widget id='HTML1' locked='false' title='Pinterest' type='HTML'>
<b:includable id='main'>
The bolded text is the ID of your Pinterest widget, or in this case for me HTML1.
Now use the same search bar to find /head. Directly above that tag, add the following code. Instead of #HTML1, you will will write # followed by whatever your widget identifies as.
#HTML1 {
padding-left:100px;
padding-bottom:20px
}
If you hit the preview template button, for some reason you won't be able to see the widget at all. Don't worry, it will show up on the live blog. This is how my finished code looked:
Save your template and then view your blog. You should have a gorgeous Pinterest footer widget in that displays all your recent pins, just like at the bottom of this page. Also follow me on Pinterest! I think my pins are rather inspirational and I would love to follow my readers back.
<b:widget id='HTML1' locked='false' title='Pinterest' type='HTML'>
<b:includable id='main'>
The bolded text is the ID of your Pinterest widget, or in this case for me HTML1.
Now use the same search bar to find /head. Directly above that tag, add the following code. Instead of #HTML1, you will will write # followed by whatever your widget identifies as.
#HTML1 {
padding-left:100px;
padding-bottom:20px
}
If you hit the preview template button, for some reason you won't be able to see the widget at all. Don't worry, it will show up on the live blog. This is how my finished code looked:
0 comments