This is an image walk thru test for snippits on blogger - its easy with blogger

Bookmarking 101

this example has  id tags placed with names image1 image2 image3.etc

What i did using blogger as the example

I first placed images using bloggers : insert image

I then switched from compose to html  and started looking for a block of code for the image
something like this :

 <div class="separator"  style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4y1y6NU9PtLdN58AvEWO50t5kEYGJhKmo_q2olEme4hDjRVc5B_sGm8rNRAb5FJtIcG0M1OK5Su-yPzmt2x12p5pDYNHdw0rVb3fccFRRKWVb_3QHlNwPz20g_OeWz3IsLw8uME-euCJ7/s1600/%2521happyMiroslav_Hajnos_Slovak_Republic.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4y1y6NU9PtLdN58AvEWO50t5kEYGJhKmo_q2olEme4hDjRVc5B_sGm8rNRAb5FJtIcG0M1OK5Su-yPzmt2x12p5pDYNHdw0rVb3fccFRRKWVb_3QHlNwPz20g_OeWz3IsLw8uME-euCJ7/s320/%2521happyMiroslav_Hajnos_Slovak_Republic.jpg" width="226" /></a></div>

keep in mind that every image is a little different but the give away is the .jpg which tells me its an image

example from above:
happyMiroslav_Hajnos_Slovak_Republic.jpg


Now i place the  id="image1" between  class="separator" and  style="clear: both; text-align: center;"

so the html now looks like this:

 <div class="separator" id="image1" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4y1y6NU9PtLdN58AvEWO50t5kEYGJhKmo_q2olEme4hDjRVc5B_sGm8rNRAb5FJtIcG0M1OK5Su-yPzmt2x12p5pDYNHdw0rVb3fccFRRKWVb_3QHlNwPz20g_OeWz3IsLw8uME-euCJ7/s1600/%2521happyMiroslav_Hajnos_Slovak_Republic.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4y1y6NU9PtLdN58AvEWO50t5kEYGJhKmo_q2olEme4hDjRVc5B_sGm8rNRAb5FJtIcG0M1OK5Su-yPzmt2x12p5pDYNHdw0rVb3fccFRRKWVb_3QHlNwPz20g_OeWz3IsLw8uME-euCJ7/s320/%2521happyMiroslav_Hajnos_Slovak_Republic.jpg" width="226" /></a></div>

this now gives everything in this image a unique id on that page 

I have now bookmarked this image with a unique id

now i completed the same steps with all the other images changing the id for each..... id="image2"
id="image3" id="image4" and so on - id must be unique for the page - no 2 alike image2 X image2

Now anyone on the web can access that bookmark by using the pound sign and that id I named after the web address of the page

www.address#image1  www.address#image2


example:


http://helpfultimbo-test.blogspot.ca/2016/01/this-is-image-walkthru-test-for.html#image1

http://helpfultimbo-test.blogspot.ca/2016/01/this-is-image-walkthru-test-for.html#image2

http://helpfultimbo-test.blogspot.ca/2016/01/this-is-image-walkthru-test-for.html#image3 

with this

Social media now can be pulled directly to your website using that image - technically a store front window  - people can share the image but it directs back centering on the page's image

and you can quickly refer to that image on a future blog post you write by linking that address and id - it will take them back to that page and center the image


btw id can be used for text ,video , audio,  just use

<div id="bbbbb" > 
content you want bookmarked
</div>

#bbbbb is now a live bookmark

and the more descriptive the id the better google can pick up and catalog. 

hope this helps