With this tutorial, you will be able to change the PIN IT Hover Button image in Blogger Templates designed by Georgia Lou Studios.
* This tutorial DOES NOT apply to the Marissa template.
We recommend using a .png file with a transparent background for best appearance. You will need to supply the URL (Web address) for your image. Your image can be uploaded to your Blogger blog or a image hosting site like Flickr or Photobucket. Make sure your image is publicly viewable.
Step 1: Backup your current template
Just to be safe, make sure you backup your current template.
- Log in to your Blogger dashboard.
- Go to the Theme configuration page.
- Click on the Backup/Restore button in the top right hand corner of the screen. The Template > Backup/Restore box will open up.
- To backup your current template, click on the orange Download full theme button. Your template will download to your computer’s download folder with a name like template-##############. If want to restore your old template at any time you can upload this file using the Backup/Restore feature.
Step 2: Edit Pin It Script
- Navigate to your Blogger Dashboard > Theme page.
- Click the Edit HTML button under the Live on Blog image. A new screen will open with the HTML code that is installed on your blog.
- Click anywhere INSIDE the Template Editor Window.
- Press [Cntrl] + [F] keys (Command + F on Mac) to open the Find/Search function inside the Template editor. The search box will appear in the upper right-hand corner.
- Search for: PIN IT HOVER. Hit ENTER to start search.
- Locate the following text in the Editor:
<!-- PIN IT HOVER BUTTON START -->
var bs_pinButtonURL = "https://2.bp.blogspot.com/-Vx9NZIC_Dj0/V2QpCtRsWBI/AAAAAAAADC4/hHMCUda7BzgZE1LKcxx9We3WoQyDX54OwCLcB/s180/pin-this.png";
var bs_pinButtonPos = "topleft";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
7. The code that determines the appearance of the Pin It Hover button is: var bs_pinButtonURL = "https://2.bp.blogspot.com/-Vx9NZIC_Dj0/V2QpCtRsWBI/AAAAAAAADC4/hHMCUda7BzgZE1LKcxx9We3WoQyDX54OwCLcB/s180/pin-this.png";
8. You can point the program to a different image stored at any publicly accessible URL (Web address). To change the image, replace the above URL with your own image URL.
9. Click the Save Theme button at the top of the Editor to save your changes.