Blogging Tip : Creating a Thumbnail Gallery

This article is related to my article before. The objective is to create a photo sharing gallery on your webblog. And this is a much simpler way to do.

Here are the steps you can take to easily add a Thumbnail Gallery to your blog. Login to your Dashboard> Layout> Page Elements, then select sidebar's Add Page Elements. Next, select Link List option:



Add some sample pictures with their data urls:

>

Then, drag-n-drop the newly created link-list from sidebar to post body area.


Save the changes.

Go to Edit HTML. Make sure to check the Expand Widget Template check box. Search for the LinkList1 widget. Press Ctrl+F and type Linklist1 in the search box.

Replace that widget with the following code, please ensure they have the same name (LinkList1):
<b:widget id='LinkList1' locked='false' title='My Gallery' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<center><div class='hoctro_spacer'>
<b:loop values='data:links' var='link'>
<a expr:href='data:link.target' onblur='try {parent.deselectBloggerImageGracefully();} catch(e) {}'><img alt='' border='0'
expr:src='data:link.target' height='100' style='display:inline; margin:0px auto 10px; ;cursor:pointer;' width='100'/></a>
</b:loop>
</div></center>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Save the settings and you're done!
(Note - The red color indicates that you may change to your liking. Once the template is saved, you may also click and drag to rearrange page elements for My Gallery on your blog either to place below the header or at footer. If you have more than one Linklist, it will automatically name as Linklist2, then you have to search for Linklist2. This widget is brought to you by: Hoctro)