Spanning | Free Blogger Tempate

Spanning is a free lightweight CSS template by I’ve converted it into a blogger template. It is a minimal and fast loading template with no images involved.

Spanning blogger template comes with a gallery where you can show your photos as a slideshow to your blog readers. The gallery is only visible in home page. It is powered by Gallerax (a jQuery plugin by NodeThirtyThree). You’re free to use/modify this template as you wish for anything as long as you link back to our site.

Editing Instructions

1. Navigation bar

        <div id='menu'>
		    <li class='active'><a expr:href='data:blog.homepageUrl'>Home</a></li>
		    <li><a href='#'>Products</a></li>
		    <li><a href='#'>About</a></li>
		    <li><a href='#'>Contact</a></li>

2. Gallery

<b:if cond='data:blog.url == data:blog.homepageUrl'>
	<div id='gallery'>
		<div id='gallery-wrapper'>
                    <img alt='' class='output' height='202' src='' width='512'/>
			<div class='caption-box'> <span class='caption'>Post Title</span> <span class='caption2'>Post Description</span> </div>
				<br class='clear'/>
				<ul class='thumbnails'>
					<li><img alt='' class='active' src='' title='Grilled Shrimp ; A nicely grilled shrimp.'/></li>
					<li><img alt='' src='' title='Blackened Shrimp ; Shrimp cooked in a tasty sauce.'/></li>
					<li><img alt='' src='' title='Hot Wings ; A delicious deep fry chicken wings.'/></li>
				<br class='clear'/>
<script type='text/javascript'>

       outputSelector:         '.output',                    // Output selector
       thumbnailsSelector:        '.thumbnails li img',        // Thumbnails selector
       captionSelector:        '.caption',                    // Caption selector
       captionLines:            2,                            // Caption lines (2 lines)
       fade:                     'fast',                        // Transition speed (fast)


<!-- end -->

You can change the image title and description by editing the text within the title=’ … ‘. Image title is followed by the description separated by a colon ; . For example, Grilled Shrimp is the image title and A nicely grilled shrimp is the description.

	<li><img class="active" title="Grilled Shrimp ; A nicely grilled shrimp." src="" alt="" /></li>

Replace the default image source with your photo URL. They will be cropped automatically and used as the thumbnails below the captions box.

4 Replies to “Spanning | Free Blogger Tempate”

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.