Layar Putih Blogger Template

It’s a long time released new blogger template after blogger template Ruang Biru. My new blogger template i called Layar Putih template. I add infinite carousel with jquery from Tutsvalley. (modified by me)

This template compatible with most user browsers but for IE, feature infinite carousel will not perfect view. I don’t know why. I just modified width size.

Here is screenshot blogger template Layar Putih


You can see demo live blogger template Layar Putih or download this blogger template for free.

Setting blogger template Layar Putih

1. Navigation and RSS Feed
Go to Layout > Edit HTML and find this code

<div class='nav'>
<ul>
<li><a expr:href='data:blog.homepageUrl' title='Take me home'>Home</a></li>
<li><a href='YOUR-LINK-HERE' title='About us'>About</a></li>
<li><a href='YOUR-LINK-HERE' title='Contact us'>Contact</a></li>
<li class='rssfeed'><a href='LINK-RSS-FEED-HERE' title='Subcribe RSS Feed'/></li>
</ul>
</div>

Change YOUR-LINK-HERE with yours and LINK-RSS-FEED-HERE with your RSS Feed link


2. Setting Menu
Go to Layout > Edit HTML and find this code

<div class='menu'>
<ul>
<li><a href='YOUR-LINK-HERE' title='Edit Me'>Edit Me</a></li>
<li><a href='YOUR-LINK-HERE' title='Edit Me'>Edit Me</a></li>
<li><a href='YOUR-LINK-HERE' title='Edit Me'>Edit Me</a></li>
</ul>
</div>


Change YOUR-LINK-HERE with yours and Edit Me with Title your link


3. Setting Infinite Carousel
Go to Layout > Page Element > Click Edit Features widget and copy paste these code below :

<div id='carousel_container'>
<div id='left_scroll'><a href='javascript:slide("left");'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxYFM_Rozbh3QMBB3UDI4fxpjscH3oN3wlcPgY64GMVK39qiYoqAMX86hK4xFJ3XzwHqT4I1G6kiKSLK0ZRxrVOzZkU1znHoc-qR1CyCQVL-3xA7kj1m5kjT_rFc0QtX9pdN8ZWuvPWI-l/s1600/slide_l.png" width="15" height="300" /></a></div>
<div id='carousel_inner'>
<ul id='carousel_ul'>
<li><a href='YOUR-LINK-HERE'><img width="300" height="280" src="IMAGE-LINK-HERE" /></a></li>
<li><a href='YOUR-LINK-HERE'><img width="300" height="280" src="IMAGE-LINK-HERE" /></a></li>
<li><a href='YOUR-LINK-HERE'><img width="300" height="280" src="IMAGE-LINK-HERE" /></a></li>
<li><a href='YOUR-LINK-HERE'><img width="300" height="280" src="IMAGE-LINK-HERE" /></a></li>
</ul>
</div>
<div id='right_scroll'><a href='javascript:slide("right");'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh835KROqzhoSAazxxBQ9L9eOfAlOHCDhc377P1XecBCxTQRMP3p19Tyc5ozjD_DRU9mZgSXrJewC_HndT-sjInz1wsvnWve4olWmnXwxjV98iUOp8fdaPVBkexO0UsH-4XqvsHXZNmcljw/s1600/slide-r.png" width="15" height="300" /></a></div>
<input type="hidden" id="hidden_auto_slide_seconds" value="0" />
</div>

Change YOUR-LINK-HERE with your link and IMAGE-LINK-HERE with image link.

Blue color is width and height image.