Once you've uploaded the blogger template, edit the slider images from Design--Edit Html and find this code -
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='pslider'>
<div class='spanel'>
<img alt='' class='slideimg' src='http://3.bp.blogspot.com/-MM04qAN48Ro/TsSZX30JE9I/AAAAAAAAGSs/K42XSHuVIgU/s1600/wallpaper-16004-1024x640.jpg' title=''/>
</div>
<div class='spanel'>
<img alt='' class='slideimg' src='http://1.bp.blogspot.com/-IanfKPcAQmk/TsSaxYedmEI/AAAAAAAAGS4/I0TpkpHd7ig/s1600/2010_porsche_boxster-1024x640.jpg' title=''/>
</div>
Replace the image urls (ideally image size should be 1024x640), add alt text and insert the title, follow the same steps for subsequent slides and save the changes. Below the slider is a select category bar where you display model year, maker, body type, price range etc., in dropdown format. To edit the text go to Edit Html and search for this code -
<div id='filter'>
<div class='clearfix' id='browselist'>
<p class='listin'>
<span>Car Condition</span>
<br/><script type='text/javascript'>
jQuery(document).ready(function($){
$("select#condition-dropdown").change(function(){
window.location.href = $(this).val();
});
});
</script>
<select id='condition-dropdown' name='condition-dropdown'><option value='#'> - Select - </option>
<option value='#Link'>New</option>
<option value='#Link'>Used</option>
</select>
</p>
<p class='listin'>
<span>Model Year</span>
<br/><script type='text/javascript'>
jQuery(document).ready(function($){
$("select#model_year-dropdown").change(function(){
window.location.href = $(this).val();
});
});
</script>
<select id='model_year-dropdown' name='model_year-dropdown'><option value='#'> - Select - </option>
<option value='#Post Label Link'>2008</option>
<option value='#Post Label Link'>2009</option>
<option value='#Post Label Link'>2010</option>
<option value='#Post Label Link'>2011</option>
</select>
</p>
<p class='listin'>
<span>Maker</span>
<br/><script type='text/javascript'>
jQuery(document).ready(function($){
$("select#make-dropdown").change(function(){
window.location.href = $(this).val();
});
});
</script>
<select id='make-dropdown' name='make-dropdown'><option value='#'> - Select - </option>
<option value='#Post Label Link'>Aston Martin</option>
<option value='#Post Label Link'>Audi</option>
<option value='#Post Label Link'>BMW</option>
<option value='#Post Label Link'>Dodge</option>
<option value='#Post Label Link'>Ferrari</option>
<option value='#Post Label Link'>Porsche</option>
</select>
</p>
<p class='listin'>
<span>Body type</span>
<br/><script type='text/javascript'>
jQuery(document).ready(function($){
$("select#body-dropdown").change(function(){
window.location.href = $(this).val();
});
});
</script><select id='body-dropdown' name='body-dropdown'><option value='#'> - Select - </option>
<option value='#Post Label Link'>Convertible</option>
<option value='#Post Label Link'>Coupe</option>
<option value='#Post Label Link'>Roadster</option>
</select>
</p>
<p class='listin'>
<span>Price range</span><br/>
<script type='text/javascript'>
jQuery(document).ready(function($){
$("select#car_price-dropdown").change(function(){
window.location.href = $(this).val();
});
});
</script><select id='car_price-dropdown' name='car_price-dropdown'><option value='#'> - Select - </option>
<option value='#Post Label Link'>120k - 130k</option>
<option value='#Post Label Link'>150k - 160k</option>
<option value='#Post Label Link'>160k - 170k</option>
<option value='#Post Label Link'>40k - 50k</option>
<option value='#Post Label Link'>50k - 60k</option>
<option value='#Post Label Link'>60k - 70k</option>
<option value='#Post Label Link'>80k - 90k</option>
</select></p>
</div></div>
Now replace #Post Label Link with your created post label url, and you can change the category options as well. Please note - All the options are labels, so make sure to include the right labels in your post. Although the user can only select one option at a time, there is no multiple selection of labels.
On entering a post there is a snippet giving complete information of the car, so whenever you create a new post you have to paste the below code, under New Post-Edit Html tab and insert the image link, alt text and fill in all the details or modify it if you like -
<img class="singimg" src="http://3.bp.blogspot.com/-MM04qAN48Ro/TsSZX30JE9I/AAAAAAAAGSs/K42XSHuVIgU/s1600/wallpaper-16004-1024x640.jpg" alt="" />Below the code you can post your entry or add a description. On the top right corner of the slider is the contact bar to include your name, email, phone number etc. To modify the details go to Design--Edit Html, find this code and insert your details -
<div class="cardetails clearfix">
<span><strong>Year :</strong> <a href="#Link" rel="tag">2010</a></span>
<span><strong>Body type :</strong> <a href="#Link" rel="tag">Coupe</a></span>
<span><strong>Make :</strong> <a href="#Link" rel="tag">Porsche</a></span>
<span><strong>Model :</strong> 911 GT3</span>
<span><strong>Color : </strong>Yellow</span>
<span><strong>Transmission : </strong>Automatic</span>
<span><strong>Fuel type :</strong> Gasoline</span>
<span><strong>Price :</strong> $130000</span>
</div>
<div id='contactlist'>
<ul>
<li>Name : <span>Thecarguy</span></li>
<li>Email :<span>carguy@xample.com</span></li>
<li>Phone : <span>1800-GETURCAR</span></li>
<li>Twitter : <span>cartweet</span></li>
</ul>
</div>
The template also includes a single sidebar and 4 column footer to display additional information, put up ads etc.
Download the Gears, an Auto Listing Blogger Theme
Share this Blogger Template:
0 Response to "Gears, an Auto Listing Blogger Theme"
Post a Comment