I’m very new to blogging and I don’t have any kind of web development background. There are so many things that I want to do with my little corner of the internet but it can take a lot of time to find the right resources and teach yourself. Also how annoying is it when you follow instructions to the letter and they don’t work?
I dedicated this weekend to making some improvements to my blog and thought that it might be useful to document some of the things that I did and what I learned along the way, in case it helps any fellow newbies.
I’ve tried to make it as straightforward as possible so that we can all spend more time on the good stuff – blogging!
I hope that one day people may want to pin some of the recipes, pictures or articles that I post, so making this as easy as possible seems like a good idea. It also makes it incredibly easy for me to pin my own posts to Pinterest for a bit of self marketing.
The instructions on Pinterest for building a widget aren’t great. They supply you with the code but not where to put it or what to do if you encounter a problem.
Luckily codeitpretty.com offer a brilliant step by step guide which got me up and running in 10 minutes.
Official Pin It Hover Buttons Widget Builder (select ‘Image Hover’ at the top of the page): https://business.pinterest.com/en/widget-builder#do_pin_it_button
Instructions:
How to Use the Official Pin It Hover Buttons on Blogger
I have the standard ‘Follow Me’ button on the right hand side of my main page, but including the button on each blog post provides another opportunity for any potential followers to see it. Like this:
To start with I obtained the code from Bloglovin using the ‘get this icon’ link (step 1). Then followed the instructions to paste the code into my template on Blogger (step 2).
If this works for you, great! Unfortunately for me, when I pasted the code into my template, I got an error saying that I had an open img tag without a closer. I tried adding an </img> tag which seemed the obvious thing to do, but it just brought up another error. My knowledge of HTML doesn’t extend any further! The instructions also said to change a bit of coding in the <border> tag, but I couldn’t find a border tag within the code it gave me. GAH WHY IS IT ALL SO DIFFICULT??!!
If this doesn’t work for you either, don’t worry as after my strop, I worked out another way to do it! Just follow step 3 below.
Step 1: Generate your widget code here:
Bloglovin Widget Builder
Step 2: Follow Bloglovin’s official step by step instructions:
http://help.bloglovin.com/knowledgebase/articles/217952-widget-button-under-blogpost-guide-blogger-blogspo
Step 3: If this doesn’t work, use this code instead:
<a href=’http://www.bloglovin.com/en/blog/<INSERT DATA-BLOG-ID HERE>’ title=’Follow Bloglovinblog on Bloglovin’><img alt=’Follow on Bloglovin’ border=’0′ src=’http://www.bloglovin.com/widget/bilder/en/lank.gif?id=<INSERT DATA BLOG ID HERE>’/></a>
Where it says <INSERT DATA-BLOG-ID HERE> replace this with the Bloglovin id that was generated in step one:
For example, if the blog id is 1234567 your code will look like this:
<a href=’http://www.bloglovin.com/en/blog/1234567′ title=’Follow Bloglovinblog on Bloglovin’><img alt=’Follow on Bloglovin’ border=’0′ src=’http://www.bloglovin.com/widget/bilder/en/lank.gif?id=1234567’/></a>
I’ve been wanting to do some shopping guides for a while now, but I didn’t know how to do a collage. Then I found a great step by step Vlog on earlgreyblog.com
Making product collages for your blog
It’s very clear to follow but does assume that you know some basic Photoshop. So just in case you get stuck like I did:
You can see my first attempt here: Christmas Gift Ideas For Her
If you like this and find it helpful, please do let me know and feel free to share your blog in the comments so that we can all
admire your newly found web developing prowess 🙂
Alternatively, if you have better ways to do any of these, please do share your tips below.
xoxo
