On April 5, 2012 In Free Mobile Website Templates with , , , , tags

Free Mobile Website Template – Blue Bwoy Mobi

Today’s mobile template is blue bwoy mobi. He’s packed with all the features of basic markup like contact page, complete markup reference page etc,.

Free Mobile Website Template - Blue Bwoy

Addition to those features it supports multiple post styles.before knowing about post formats, we should know how to create a basic article post in blue bwoy

<article class="underline">
<!-- content goes here -->
</article>

Inside article goes the content and class “underline” add a border line after the post

Post style one

This post style contains title and date of the post.

<article class="underline">
	<h2><a href="url">title of the post</a></h2>
	<div class="date"><span>published on date</span></div>
</article>

Title of the post is wrapped inside h2 then a and date is wrapped inside div class “date” then span

title and date of the post - blue bwoy mobi

Post style two

This post style contains title, excerpt and date of the post.

<article class="underline">
	<h2><a href="url">title of the post</a></h2>
	<p>content of the excerpt</p>
	<div class="date"><span>published on date</span></div>
</article>

In addition to previous post we will add excerpt inside p tag

title, excerpt and date of the post - blue bwoy mobi

Post style three

This post style contains title, banner image, excerpt and date of the post.

<article class="underline">
	<h2><a href="url">title of the post</a></h2>
	<a href="url"><img src="image-url" alt="title of the image"/></a>
	<p>content of the excerpt</p>
	<div class="date"><span>published on date</span></div>
</article>

We will add a banner wrapped in a then img tag for image before the paragraph tag

title, banner image, excerpt and date of the post  - blue bwoy mobi

Post style four

This post style contains title, thumb image and date of the post.

<article class="underline">
	<div class="post-preview">
			<a href="url"><img src="image-url" alt="title of the image"/></a>
	</div>
	<div class="post-content">
		<h2><a href="url">title of the post</a></h2>
		<div class="date"><span>published on date</span></div>
	</div>
	<div class="clear"></div>
</article>

this is same as other post style, but instead of adding banner image we will add thumbnail image wrap inside div class “post-preview”. And add remaining content like title and date wrapped inside div class “post-content”
title, thumb image and date of the post - blue bwoy mobi

Post style five

This post style contains title, thumb image, excerpt and date of the post.

<article class="underline">
	<div class="post-preview">
			<a href="url"><img src="image-url" alt="title of the image"/></a>
	</div>
	<div class="post-content">
		<h2><a href="url">title of the post</a></h2>
		<p>content of the excerpt</p>
		<div class="date"><span>published on date</span></div>
	</div>
	<div class="clear"></div>
</article>

Here we will add p inside div class “post-content” before the date

title, thumb image, excerpt and date of the post - blue bwoy mobi

This is our first time we wrote some documentation for our mobile website template. Hope we will continue adding docs.As always its free for personal and non-commercial purpose, by using this mobile website template you agree to link back to the source i.e. this page or mobifreaks.com

<a href="http://mobifreaks.com" title="Design By Mobifreaks.com">http://mobifreaks.com</a>

for more licensing info visit Creative Commons Attribution 3.0 Unported. Don’t forget to leave a comment. Show us your work done using blue bwoy mobi through our comments

One response to “Free Mobile Website Template – Blue Bwoy Mobi”

  1. Mike Loris says:

    Thanks for great codes

Leave a Reply

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