1.Upload all of your images in your photobucket.com account and create
your own thumbnails for more details of using photobucket.com images
editor
2. Login into Blogger account, go to Template –> Edit HTML. Then
edit your blogger template and add the code below between your header
tag (<head>.. </head>)
Lightbox v2.04 Integration with Blogger Template
1.Upload all of your images in your photobucket.com account and create
your own thumbnails for more details of using photobucket.com images
editor.
2. Login into Blogger account, go to Template –> Edit HTML. Then
edit your blogger template and add the code below between your header
tag (<head>.. </head>)
<link href="http://www.virtuosomaster.com/tutorials/samples/lightbox/css/lightbox.css"
media="screen" rel="stylesheet" type="text/css"/>
<script src="http://www.virtuosomaster.com/tutorials/samples/lightbox/js/prototype.js" type="text/javascript"/>
<script src="http://www.virtuosomaster.com/tutorials/samples/lightbox/js/scriptaculous.js?load=effects,builder"
type="text/javascript"/>
<script src="http://www.virtuosomaster.com/tutorials/samples/lightbox/js/lightbox.js" type="text/javascript"/>
See images below:
3. Creating a blog entry in Blogger system and click add images button.
google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);
4. Copy your thumbnail image code photobucket.com in the blogger adding
image in the web panel and click upload wait to load the image and
click done.
5. Once you have uploaded the image you will see an entry similar shown in the figure below.
6. Replace the highlighted code with rel=”lightbox”. example below:
8.Publish your work .
If you have a set of related images that you would like to group,
follow step six but additionally include a group name between square
brackets in the rel attribute. Example: rel=”lightbox[group_name]“.
|
