Demo

1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below one of below code.

<script type="text/javascript" src="http://bloggertrixcode.googlecode.com/files/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="http://bloggertrixcode.googlecode.com/files/jquery.scrollTo.js"></script>
<script>
$(document).ready(function() {

 //Speed of the slideshow
 var speed = 5000;
 
 //You have to specify width and height in #slider CSS properties
 //After that, the following script will set the width and height accordingly
 $('#mask-gallery, #gallery li').width($('#slider').width()); 
 $('#gallery').width($('#slider').width() * $('#gallery li').length);
 $('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());
 
 //Assign a timer, so it will run periodically
 var run = setInterval('newsscoller(0)', speed); 
 
 $('#gallery li:first, #excerpt li:first').addClass('selected');

 //Pause the slidershow with clearInterval
 $('#btn-pause').click(function () {
  clearInterval(run);
  return false;
 });

 //Continue the slideshow with setInterval
 $('#btn-play').click(function () {
  run = setInterval('newsscoller(0)', speed); 
  return false;
 });
 
 //Next Slide by calling the function
 $('#btn-next').click(function () {
  newsscoller(0); 
  return false;
 }); 

 //Previous slide by passing prev=1
 $('#btn-prev').click(function () {
  newsscoller(1); 
  return false;
 }); 
 
 //Mouse over, pause it, on mouse out, resume the slider show
 $('#slider').hover(
 
  function() {
   clearInterval(run);
  }, 
  function() {
   run = setInterval('newsscoller(0)', speed); });});


function newsscoller(prev) {

 //Get the current selected item (with selected class), if none was found, get the first item
 var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
 var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');

 //if prev is set to 1 (previous item)
 if (prev) {
  
  //Get previous sibling
  var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
  var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');
 
 //if prev is set to 0 (next item)
 } else {
  
  //Get next sibling
  var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
  var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
 }

 //clear the selected class
 $('#excerpt li, #gallery li').removeClass('selected');
 
 //reassign the selected class to current items
 next_image.addClass('selected');
 next_excerpt.addClass('selected');

 //Scroll the items
 $('#mask-gallery').scrollTo(next_image, 800);  
 $('#mask-excerpt').scrollTo(next_excerpt, 800);     }

</script>
<style>

#slider {

 /* You MUST specify the width and height */
 width:660px;
 height:275px;
 position:relative; 
 overflow:hidden;
-moz-box-shadow: 0px  0px 6px #000000;
-webkit-box-shadow: 0px 0px 6px #000000;
box-shadow: 0px 0px 6px #000000;
}
#mask-gallery {
 overflow:hidden; 
}

#gallery {
 list-style:none;
 margin:0;
 padding:0;
 z-index:0;
 width:900px;
 overflow:hidden;
}
 #gallery li {
  float:left;
 }
#mask-excerpt {
 position:absolute; 
 top:0;
 left:0;
 z-index:500;
 width:100px;
 overflow:hidden; 
 }
 
#excerpt {
 filter:alpha(opacity=60);
 -moz-opacity:0.6;  
 -khtml-opacity: 0.6;
 opacity: 0.6;  
 
 list-style:none;
 margin:0;
 padding:0;
 
 z-index:10;
 position:absolute;
 top:0;
 left:0;
 
 width:100px;
 background-color:#000;
 overflow:hidden;
 font-family:arial;
 font-size:14px;
 color:#fff; 
}

 #excerpt li {
  padding:5px;
 }
 
.clear {
 clear:both; 
}
#btn-prev {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   padding: 4px 8px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 9px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
#btn-prev:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
#btn-prev:active {
   border-top-color: #238acf;
   background: #238acf;
   }
#btn-next {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   padding: 4px 8px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 9px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
#btn-next:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
#btn-next:active {
   border-top-color: #238acf;
   background: #238acf;
   }
</style>
<div id="debug"></div>
<div id="slider">

 <div id="mask-gallery">
 <ul id="gallery">
  <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjohmDEF_Q1WBDFLnHVWN3sKKTiAlrUeIEZpN9KKUbZ-LLfFw5g8CQR6sM88LQpXs0MYCdHqtPM0TISLCMKlfMXSwL_P7r3Bvx_ov0CMOENIke5i8Zv1WZSu4vpFxoOvhBmbnIaeU6NUJs/s1600/btrix_image2" width="660" height="275" alt=""/></li>
  <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL5g5hUPmPeX4UYWaAm80ISediEyBBA7G-b4J1qD9L6is2lc7PxZIQdIqR40Q7m14bZxNq1AsoRb995o1oLSaysXfKDLKAeWRY0ts_gHM5aCz37mME85If0NczpvVKKO-3QoGzLK0TTCY/s1600/btrix_image1.jpg" width="660" height="275" alt=""/></li>
  <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjerUPZStdBB4JvNuaMfHcj0NwH8_Iq9Rn3Heb4C0kyGqFLh7qJKESxjcDkd63do8AEoeocLd_BLkJ2EXT4UdP0DLMHVckeosTwVKmP29Js2uefOdu2K_nZvdxnhROZ6apbPqxNyIstE2s/s1600/btrix_image3.jpg" width="660" height="275" alt=""/></li>
  <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje4LzPFz6cWJ00RKckDEHlohNbIlaXaKqXQHNdlUCFqEQ3u2glCBxJz5hCw_H1ZSvAJa3vlaX9yxdwQV2XXZIex4LFQDWpKrcXrJChn_apjYjgpXH5tfOoPJlEmKJiBKqsqk9lwtz-toE/s1600/btrix_image5.jpg" width="660" height="275" alt=""/></li>
  <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAbNxV5MUdGj5_1vtNQyQHgMg3WRqlf47rR6wichrz5xVLGGCWlUYJNJXB__a9a_k3t7hNieYpxNBBHrcFSMb_DyWm1CBi_nb0XRfo2oBvhDPqcXBH5ErlJXYKcT0R4heekbgz74WR7uI/s1600/btrix_image4.jpg" width="660" height="275" alt=""/></li>
 </ul>
 </div>

 <div id="mask-excerpt">
 <ul id="excerpt">
  <li>Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend.</li>
  <li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
  <li>Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.</li>
  <li>tristique senectus et netus et malesuada fames ac turpis egestas.</li>
  <li>Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.</li> </ul>
 </div>

</div>

<div id="buttons" style="width: 100px;margin-left: 260px;padding-left: 25px;height: 25px;">
 <a href="#" id="btn-prev">prev</a> 
 <a href="#" id="btn-next">next</a>
</div>

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

You can change photos by changing Image URLs
You can change image discription by changing red color text.


7. Now save your HTML/Javascript'.

    You are done...