Revian Blogger Template

0
template custom slideshow drop down menu


Blogger Template Features: 2 columns, left sidebar; 2 columns footer; scroll-over slideshow; drop down menu; grey contrasts;

LVDemo

Download







 Blogger Template Design Details:
  •   Outer Wrapper Width : 900px
  •   Header Wrapper Width : 900px
  •   Slideshow Image : height: 200px; width: 650px
  •   Main Wrapper Width : 650px
  •   Left Sidebar Wrapper Width : 220px
  •   2 Columns Footer Wrapper Width : 600px


Blogger Template Compatibility:

Image01 Image01 Image01 Image01 Image01

Blogger Template Customize:


1.Edit PSlideshow:
Login to your blogger dashboard --- layout --- copy following code into HTML/JavaScript (above Blog Posts):

<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".nextb",
btnPrev: ".prevb",
       visible: 1,
   speed: 1500,
       auto:5000,
       mouseWheel: true,
       easing: "backout"

});

});
</script>

<div id="slidearea">
<div id="gallerycover">
<div class="mygallery">

<ul>

<!-- Slide-1 Code Start -->
<li>
<div class="mytext">
<a href="Your-Post1-Link-Here">
<img src="http://4.bp.blogspot.com/-MBfSnKUONb4/TjwPzLYkPxI/AAAAAAAAAI8/38mCsrEiqoU/s1600/slide2.jpg" alt="picture description"/>
</a>
<div class="inpost">
<p>Your-Post1-Small-Description [...] </p>
</div>
</div>
</li>
<!-- Slide-1 Code End -->


<!-- Slide-2 Code Start -->
<li>
<div class="mytext">
<a href="Your-Post2-Link-Here">
<img src="http://4.bp.blogspot.com/-KcTXspYa1Mc/TjwP1WrNvQI/AAAAAAAAAJE/EZmbzjGFsNM/s1600/slideimg1.jpg" alt="picture description"/>
</a>
<div class="inpost">
<p>Your-Post2-Small-Description [...] </p>
</div>
</div>
</li>
<!-- Slide-2 Code End -->


<!-- Slide-3 Code Start -->
<li>
<div class="mytext">
<a href="Your-Post3-Link-Here">
<img src="http://1.bp.blogspot.com/-o-dRRx8VZso/TjwP0atkdvI/AAAAAAAAAJA/CPFxCqhag1I/s1600/slide3.jpg" alt="picture description"/>
</a>
<div class="inpost">
<p>Your-Post3-Small-Description [...] </p>
</div>
</div>
</li>
<!-- Slide-3 Code End -->


</ul>

<div class="clear"></div>

</div>
</div>
</div>

<div class="clear"></div>

Replace Red words with your post link
Replace Brown words with your picture source link
Replace Blue words with your picture description
Replace Green words with your small post description


2.Edit Menu: Login to your blogger dashboard --- design / template --- edit html ---search (using CTRL+F command) for following lines:
<li><a href='#'>Menu Button 1</a>
Replace Red with your Link
Replace Green with your Button Name

<li><a href='#'>Submenu Button 1.1</a></li>
Replace Red with your Link
Replace Green with your Button Name


3.Edit Social Buttons:
Login to your blogger dashboard --- design / template --- edit html ---search (using CTRL+F command) for following lines:
href='http://twitter.com/YourTwitterID'
Replace Red words with your Twitter ID

href='http://www.facebook.com/YourFacebookID'
Replace Red words with your Facebook ID


4.Edit Meta Tags:
Login to your blogger dashboard --- design / template --- edit html ---search (using CTRL+F command) for following lines:
<meta content='DESCRIPTION HERE' name='description'/>
Replace Red words with your blog description

<meta content='KEYWORDS HERE' name='keywords'/>
Replace Red words with the keywords of your blog

<meta content='AUTHOR NAME HERE' name='author'/>
Replace Red words with the name of your blog author

<meta content='4 Days' name='Revisit-after'/>
Replace Red words with the period of time in which you want Google to revisit your blog
  • RSS Feed
  • Follow on Twitter
  • Become a Fan
  •  
    Copyright 2011 Blogger template