Retina

Set up Home page Category sections

After installing this template, go to Template -- Edit HTML and find following code. Update Category 1, Category 2 etc., to your Category/label name. For each Category, you have change it in 3 places - #Category 1, /Category 1?max-results, /Category 1.

<!--Label Feature-->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='featurebottom1'><h2 class='headingfeature'>#Category 1</h2>
<div class='left-corner-canvas'/>
<script src='/feeds/posts/summary/-/Category 1?max-results=4&amp;orderby=published&amp;alt=json-in-script&amp;callback=recentthumbs&amp;' type='text/javascript'/>
<a class='readmoretopic' href='/search/label/Category 1'>Browse More</a>
</div>
<div style='clear:both;'/>
</b:if>
<!--Label Feature-->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='featurebottom1'><h2 class='headingfeature'>#Category 2</h2>
<div class='left-corner-canvas'/>
<script src='/feeds/posts/summary/-/Category 2?max-results=4&amp;orderby=published&amp;alt=json-in-script&amp;callback=recentthumbs&amp;' type='text/javascript'/>
<a class='readmoretopic' href='/search/label/Category 2'>Browse More</a>
</div>
<div style='clear:both;'/>
</b:if>
..........

Set up Navigation Menu

Go to Template -- Edit HTML and find the following code. Update the Menu URL and text as per your needs.

<ul class='menus menu-secondary'>

<li class='forstm'><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>Blog</a>
<ul class='children'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>

<li><a href='#'>Tech</a>
<ul class='children'>
<li><a href='#'>Dvd</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Software</a>
<ul class='children'>
<li><a href='#'>Office</a>
</li>
</ul>
</li>
</ul>
</li>............

Set up Home Page Slider

Go to Template -- Edit HTML and find following code. Update Slider image to your own images. I used 980x325 image size for the demo. You have to use the same dimension. Otherwise remove the slider by deleting the whole <div class='slider-wrap-bodo'> code in the template html. You may use CSS also to hide the slider ( .slider-wrap-bodo { display:none;} )

<div class='slider'>
<div>
<img alt='' src='http://3.bp.blogspot.com/-18kh3g09boc/UcDmxv_RBpI/AAAAAAAABck/56Nb-O1l6x0/s1600/1.png'/>
</div>

<div>
<img alt='' src='http://2.bp.blogspot.com/-i_yGVzjrVZQ/UcDmzcUnUkI/AAAAAAAABcs/OLoUdyBQw-Q/s1600/2.png'/>
</div>

<div>
<img alt='' src='http://1.bp.blogspot.com/-9Rfwoe7OypY/UcDm0l-MdTI/AAAAAAAABeE/uIslbAtO5bg/s1600/3.png'/>
</div>

<div>
<img alt='' src='http://1.bp.blogspot.com/-Yi_ZOJVkfWM/UcDm0PIRzfI/AAAAAAAABc8/O151-FBzAeU/s1600/4.png'/>
</div>
</div>

</div>

Layout for Retina Blogger Template