iPod Touch and iPhone template: Stylo Blogger Theme

Stylo is a 2 column blogger template created by Amaze Templates. It consists of featured posts slider, social icons, facebook widget and supports all the latest browsers.

Let's start by editing the first menu bar from Edit Html, this is the code you have to look for -

<ul class='menus menu-primary'>
<li class='current_page_item'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Templates<span class='sf-sub-indicator'> »</span></a>
<ul class='children' style='display: none; visibility: hidden; '>
<li><a href='#'>Archives</a></li>
<li><a href='#'>Contact Form</a></li>
<li><a href='#'>Full Width</a></li>
<li><a href='#'>Sitemap</a></li>
</ul>
</li>

Replace '#' with category links and the default text, under 'ul class children' you can add more sub-categories, that means under 'templates' you need to make the changes. The social media icons come in the header section, so find the following code and add your Twitter, facebook etc., account links.

<div class='social-profiles-widget'>
<a href='http://twitter.com/' target='_blank'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlAgVYlI0dddTAKg_HJlyDLBnQqAMl8i141LAPwFoSYg5DBiU4a4c-rSydDJAC1aLIsBrqdJkH7mRqBg-6XYTkXzLP0Mv_kTD7Xvb8R5ZYVLkm4aDfjq_DEXweNahxzFZwQfZVRuGBPOrO/s1600/twitter.png' title='Twitter'/></a><a href='http://facebook.com/' target='_blank'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO4u8O1x5JFKsAMbqvyGNxCoUzMuy_Hm5Jjp7XsF3VWXGciCU1i4o6VHXnVzdGYsH5N7ku2QDZloYqXIe3qyjo2ypF71ogWJEAKG4-0TQu7yJNJ3-KlwbBuI3gikfMgurS7iq3vptGwg6L/s1600/facebook.png' title='Facebook'/></a>

The second menu bar needs to be changed as well, here's the code in Edit Html -

<li><a href='#'>Browsers</a></li>
<li><a href='#'>Computers</a></li>
<li><a href='#'>Featured</a></li>
<li><a href='#'>News</a></li>
<li><a href='#'>Parent Category</a>
<ul class='children'>
<li><a href='#'>Child Category1</a>
<ul>
<li><a href='#'>Sub Child Category1</a></li>
<li><a href='#'>Sub Child Category2</a></li>
<li><a href='#'>Sub Child Category3</a></li>
</ul>
</li>

Here you can add sub sub-categories as well, under 'Child category' and replace '#' with relevant links. Coming to the featured posts slider, you can edit the code below in Html -

<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='http://www.amazetemplates.com/Stylo/SliderImages/1.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>This is default featured slide 1 title</a>
</h3>
<p>
Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>

Firstly, replace '#' with post url, change the image url, add the post title here 'This is default featured slide 1 title' and below it add brief post description. Follow the steps for the all the slides, keep the image size 645 x 300 px.

The main column has a short summary of the post linking to the full article. While the single sidebar on the right shows different blogger widgets and ads. The code for facebook like box is given in the download folder, you can add it in the sidebar from Layout.

Download the Stylo Blogger Theme