As you know that, you have to download this template , go to blogger sign in , goto design and load this template.. blah blah blah... let me skip to the main part..
First , the slider ... This is the slider code and things to be edited is show in red..
<div id='slider-content'>
<div class='container960'>
<div class='slider-top-shadow'/>
<ul id='accordion-slider'>
<li class='first'>
<span class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
<a href='#' rel='with a broken brush' title='ART OF PAINTING'/>
<img alt='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7U7mRHoJ6M9M9vS2aRNRrxYLBDgrQBUYSe2gmnmV5G3vq2gBiL6QscXUOssprG4vL31f-o-yNFeDcDh7LBatgMJe3RxiKJ_QVgQcAtRhDOoPjR27w1vmGOkgxlhu_NuIr84FWKlihpEDK/s1600/slide-item-1.jpg'/>
</li>
<li>
<span class='text'>Fusce urna tellus, semper et tempus vitae, varius a dolor. Praesent nec imperdiet lorem. </span>
<a href='#' rel='DESIGNERS & DESIGNS' title='Pixel Art'/>
<img alt='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkK1p8HIVI5l9bY2SLjeGtlB7dKd-_8-GCmyCKj6rZA1Vaqn_5R4MNXBr-V1Z-Z5lEnP-AutwQO46oEUoyOdIMhPr24BS66IvWPDzb2FhrYD8ERQ4HAcfyFEwgznoZ_yoPVLf50yQ7ssPR/s1600/slide-item-2.jpg.jpg'/>
LIKEWISE
</li>
<li>
<span class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
<a href='portfolio-single.html' rel='All over the world' title='Wall Painting'/>
<img alt='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7U7mRHoJ6M9M9vS2aRNRrxYLBDgrQBUYSe2gmnmV5G3vq2gBiL6QscXUOssprG4vL31f-o-yNFeDcDh7LBatgMJe3RxiKJ_QVgQcAtRhDOoPjR27w1vmGOkgxlhu_NuIr84FWKlihpEDK/s1600/slide-item-1.jpg'/>
</li>
<li>
<span class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
<a href='#' rel='Sharper pictures' title='Macro detail'/>
<img alt='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkmYKwp8FCY9Zn25Hf_KFd09CCZNbkG5cPNQUF_lrlsbBVJF1jtFkt-ytj9FQ3IcIfIF8SzupaSl2p4Hl0sgQv-9WA0tI1SXbTBxvkAv73PPLmIoIVeo3e70HBWyE5GORy7KfpWFctJ7ya/s1600/slide-item-3.jpg'/>
</li>
<li>
<span class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
<a href='#' rel='Posters with impact' title='One life cruise'/>
<img alt='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7U7mRHoJ6M9M9vS2aRNRrxYLBDgrQBUYSe2gmnmV5G3vq2gBiL6QscXUOssprG4vL31f-o-yNFeDcDh7LBatgMJe3RxiKJ_QVgQcAtRhDOoPjR27w1vmGOkgxlhu_NuIr84FWKlihpEDK/s1600/slide-item-1.jpg.jpg'/>
</li>
<li>
<span class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
<a href='#' rel='New fine lens' title='360 Technique'/>
<img alt='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkK1p8HIVI5l9bY2SLjeGtlB7dKd-_8-GCmyCKj6rZA1Vaqn_5R4MNXBr-V1Z-Z5lEnP-AutwQO46oEUoyOdIMhPr24BS66IvWPDzb2FhrYD8ERQ4HAcfyFEwgznoZ_yoPVLf50yQ7ssPR/s1600/slide-item-2.jpg.jpg'/>
</li>
</ul>
</div>
</div> <!-- END SLIDER -->
First , the slider ... This is the slider code and things to be edited is show in red..
<div id='slider-content'>
<div class='container960'>
<div class='slider-top-shadow'/>
<ul id='accordion-slider'>
<li class='first'>
<span class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
<a href='#' rel='with a broken brush' title='ART OF PAINTING'/>
<img alt='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7U7mRHoJ6M9M9vS2aRNRrxYLBDgrQBUYSe2gmnmV5G3vq2gBiL6QscXUOssprG4vL31f-o-yNFeDcDh7LBatgMJe3RxiKJ_QVgQcAtRhDOoPjR27w1vmGOkgxlhu_NuIr84FWKlihpEDK/s1600/slide-item-1.jpg'/>
</li>
<li>
<span class='text'>Fusce urna tellus, semper et tempus vitae, varius a dolor. Praesent nec imperdiet lorem. </span>
<a href='#' rel='DESIGNERS & DESIGNS' title='Pixel Art'/>
<img alt='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkK1p8HIVI5l9bY2SLjeGtlB7dKd-_8-GCmyCKj6rZA1Vaqn_5R4MNXBr-V1Z-Z5lEnP-AutwQO46oEUoyOdIMhPr24BS66IvWPDzb2FhrYD8ERQ4HAcfyFEwgznoZ_yoPVLf50yQ7ssPR/s1600/slide-item-2.jpg.jpg'/>
LIKEWISE
</li>
<li>
<span class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
<a href='portfolio-single.html' rel='All over the world' title='Wall Painting'/>
<img alt='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7U7mRHoJ6M9M9vS2aRNRrxYLBDgrQBUYSe2gmnmV5G3vq2gBiL6QscXUOssprG4vL31f-o-yNFeDcDh7LBatgMJe3RxiKJ_QVgQcAtRhDOoPjR27w1vmGOkgxlhu_NuIr84FWKlihpEDK/s1600/slide-item-1.jpg'/>
</li>
<li>
<span class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
<a href='#' rel='Sharper pictures' title='Macro detail'/>
<img alt='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkmYKwp8FCY9Zn25Hf_KFd09CCZNbkG5cPNQUF_lrlsbBVJF1jtFkt-ytj9FQ3IcIfIF8SzupaSl2p4Hl0sgQv-9WA0tI1SXbTBxvkAv73PPLmIoIVeo3e70HBWyE5GORy7KfpWFctJ7ya/s1600/slide-item-3.jpg'/>
</li>
<li>
<span class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
<a href='#' rel='Posters with impact' title='One life cruise'/>
<img alt='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7U7mRHoJ6M9M9vS2aRNRrxYLBDgrQBUYSe2gmnmV5G3vq2gBiL6QscXUOssprG4vL31f-o-yNFeDcDh7LBatgMJe3RxiKJ_QVgQcAtRhDOoPjR27w1vmGOkgxlhu_NuIr84FWKlihpEDK/s1600/slide-item-1.jpg.jpg'/>
</li>
<li>
<span class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
<a href='#' rel='New fine lens' title='360 Technique'/>
<img alt='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkK1p8HIVI5l9bY2SLjeGtlB7dKd-_8-GCmyCKj6rZA1Vaqn_5R4MNXBr-V1Z-Z5lEnP-AutwQO46oEUoyOdIMhPr24BS66IvWPDzb2FhrYD8ERQ4HAcfyFEwgznoZ_yoPVLf50yQ7ssPR/s1600/slide-item-2.jpg.jpg'/>
</li>
</ul>
</div>
</div> <!-- END SLIDER -->
Secondly editing the category box..
goto page elements and you can see three add a gadget box just above the blog post box.. click edit to open
Then, just type only one category[label] for each box and save it.. then it should look like this..



1 comments:
awasum templaeeeeeeeee i liked it so much
Post a Comment