Cách thiết lập template Blogspot: Retina

DEMO - DOWNLOAD

I. About Retina: 
Retina is free template blogspot from Templateism. You can build  a technology website, personality, or style and magazine. With 3 columns 2 columns on the homepage and posts.
II. Template Blogspot Features:

• Slide show (slider) in home page
• Post Thumbnails
• Dropdown navigation menu
• 2 Column with Right Sidebar
• Responsive design
• Show featured posts in home page
• Widget Ready
• Footer Widgets
• SEO Ready
• Related Posts

III. Instructions Template:
1. Set up Home page Category sections
You go: Template -- Edit HTML and find below 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&orderby=published&alt=json-in-script&callback=recentthumbs&' 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&orderby=published&alt=json-in-script&callback=recentthumbs&' type='text/javascript'/> <a class='readmoretopic' href='/search/label/Category 2'>Browse More</a> </div> <div style='clear:both;'/> </b:if>

2. Set up Navigation Menu
You go: Template -- Edit HTML and find the below 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>

3. Set up Home Page Slider
You go: Template -- Edit HTML and find below code. Update Slider image to your own images. I used 980x325 image size for the demo.

<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>