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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsEvEufEXjLrgYnUv7bFAHs5N3wXi9YJneSMfY8Mgtz-1ER7eNjQirDyhmJj_1pSllsgqvNlAQWKOCzEdwADyrGo1qTHZi6mM3-9DK8rWPh_DImtKcCk_IlRIwEwdVyrLxAEmstpw0ScA/s1600/1.png'/>
</div>

<div>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoX8v40VmW8UOhdVvnnWXLW92wYNxMDbyzTwjrQOgDyz3Po6aDAyp_2hmM2_eRDBC2qVHPYUJ3EThXP3ie_yONp2vjqoWyd8TdUAtcsoWRWQ5Zw0863LtZKei-_L9OWKAox1RhhzaraXU/s1600/2.png'/>
</div>

<div>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQcYFUL28aqRbWQPtU6_gUFeciLuxny1VJ2-_vioPmMtldHw_GKbhYLtWVmp7X5-uHfzdnPk8kYW-uLF7FMk_ygwTvCpQt9MVJJDScQmNiCYIN6yeq2uo6a_x5w6_ua86fFFC6Rn6X2So/s1600/3.png'/>
</div>

<div>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8wDqQlmiJcbb2wVc6eGkkIN_wWd3dqlPLbLGPiv9hWF8srSaVeHL3mEe0JxqHJNBj6X1pcAoQCcq-V1UufqSOhMiJ9ZC_TrZEoMRym8Z-GnU4dg1fL_TukMsRa1RUhpLgOVUNf3WyL6o/s1600/4.png'/>
</div>
</div>

</div>