Featuring You!

Somewhere along the way I was reading how to use Pinterest to draw visitors to your blog or website. The idea was good and the explanation was too. When it came time for me to attempt doing it myself it took many tries until I figured how to make it work on the sidebar of my blog.

I had written it down on paper but when the time came to revisit it my written notes were hardly helpful. So I thought I would develop a pictorial tutorial for all you visionaries like me out there who learn more by pictures. So lets go!

But first let me tell you how this can be helpful to your blog readers. It can serve two purposes. The sidebar of your blog is precious space that can be used to inform the reader very quickly what other treasures lie within your blog. They may see a picture or sign on your sidebar that intrigues them to visit a little longer. The picture will be a link to the original message.

This tutorial will show you how to add a "Pin It" button as well as a linked picture. When a reader sees something of interest they may choose to "Pin It", as well as dig deeper into your blog to read the original message. A pinned image on Pinterest will bring visitors to your blog that another visitor had pinned previously from your sidebar image.

In the above picture is a screen shot of my blog. The Raggedy Ann and Andy picture is linked to my original message and the "Pin It" button will link to the visitor's Pinterest Boards.

Below is the step by step pictorial tutorial:

1. Begin by opening a blank Word Document as we will be copying, pasting and doing some easy html code additives. This will be our Word Worksheet.

2. Go to the message in your blog. Copy the url for that particular message you are interested in drawing visitors to, or one that you know that has been one of your reader's favorite.  Click the title of your post and the url will change to that specific posted message. 

3.Below is what my url looks like pasted on my Word Worksheet. Note that it is a specific url  address of my post message titled Ann meets Andy. It is not my general url address.

 

4. I am going add html code to anchor the above url address that was pasted in the Word Worksheet. See the html code added in red text in the image below - !< a href =! and !>!.

 

5. Next we are going to copy and paste the html code for the image of Raggedy Ann and Andy that is shown in the original message. We will be copying the image source or image border html code in the design section of the specific posted message.  Click on the "HTML" tab as shown in the picture below. Follow the arrow.

6. Now that we are in the file labeled "HTML" - highlight the portion of the A href code for your desired image. Begin highlighting with "img border" or "img src". Be sure to include the beginning and ending html codes as shown in the red text overlay in the image below.

"
"

7. Next we need to resize the picture so that it will fit within the parameters of your sideborder. On my particular blog I like the width of 145. In the above image it shows that the width = 495. Since I know the width I want I divide 145 by 495 to determine the ratio. It equals .2929. I now multiply the height of 373 as shown above by .2929 to find the height in relationship that will work with my desired width. 373 x .2929 = 109.25 I round off  so below take notice that the height is 109.   Change the numbers in between the quote marks and make sure the quote symbols remain! Below in red text notice the changed height and width.

8. The next step we will be adding the "Pin It" button by building a widget from Pinterest Goodies.

Below is what you will find once you arrive at the Pinterest Goodies' link provided for you above.

Since we will be handling one picture on your sidebar choose the button type "One Image." Next choose the location of your PinCount if interested in having one. Your choices will be "Above the Button"," Beside the Button" or "Not Shown". Choose your preference. 

Next add the url of the location of the original message on your blog. This will be the first url pasted on your Word Worksheet we have been building. Do not copy the anchor html code, only the url address. In my example it will be 

!http://joanieinnc-quiltershaven.blogspot.com/2013/08/ann-meets-andy.html! .

9. The fill in for the image url will be the next step. Right click the image and choose "View Image Info." Follow the arrow.

Copy the url address show below and paste it in the Image field for the Pin It Button Widget.

Enter your description as how you want it to appear on Pinterest.Then click "Build It." Below is how it will appear on the screen. Copy and paste the html code as shown under "Insert the Link" and paste it in your Word Worksheet.

Your Word Worksheet should look like this after adding the "Pin It" html code.

Below the "Insert the Link" box is another box with html code for Java Script. It ends the html code relative to the "Pin It" code. Read and determine if it is something that you need to add to the bottom of any of your messages where you have used the "Pin It" Button Widget.

10. Copy and paste the completed html code from the Word Worksheet to  "Add Gadget" of the "Layout section of blogger. A pop up menu will appear after clicking on "Add Gadget." Look for the option "HTML/Java Script." Paste the entire html code developed from your Word Worksheet here. You can title it.  It will assist you in knowing the locations and titles of all the gadgets in order to manage them more efficiently.

You now can position the newly created Gadget by sliding it down in position between already created Gadgets. Save arrangement. 

Other helpful information

You may want to know the stats for Pinterest activity between Pinterest and your blog/website. Read more about Pinterest Analytics here.  It will provide valuable information,  such as "Site Metrics" "Most Recent Pins" and "Most Repinned."  This analytical tool will inform you which pins are driving visitors to and from your blog.