Add Stylish Slide Show Widget for Blogger/Blogspot Blogs - How?

Hello Everyone, Today iam going to teach you How to Add the Slide Show widget on Blogger With some simple steps. The Given Script Below is the Code for the Widget.

Code for the Slide show widget:

<style type="text/css">
 /* JavaScript Image Slider By HiFiFun.Com */
#mcis {
 display: none;
}
#sliderFrame {
 position: relative;
 width: 670px;
 margin: 0 auto;
        border:5px solid #184583;
}
#ribbon {
 width: 111px;
 height: 111px;
 position: absolute;
 top: -4px;
 left: -4px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-151a6bSg8PvaIr65AsAOi96_9JbCtOLpyMF3DeNUkj7Ye3x8hUux_xHu9IFG6Mmq1GrgAw69K3AyQXDVhaGJpFZZ3J9nH43Xy4FcDSYJvp6CYmfQjFR28cXWuW_SvDeguzOlOP-OjSQ/s1600/HiFiFun.Com+Whats+Hot.png) no-repeat;
 z-index: 7;
}
#slider {
 width: 670px;
 height: 250px;
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKx1GWFbhDYZoti5QrNh_WjF481IMjiadLhS84jgw4V-DlPoQsITJA4TBOVrb6_S_W28_NMq9WnprMg1LMGRbJgPlVPUuaqkIzMfrrtZzcdb5VREQI-nkIr1pAYS6NKpHL33dfI2z5kGQ/s1600/HiFiFun.Com+Loading.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px #999999;
}
#slider img {
 position: relavive;
 border: none;
 display: none;
}
#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 left: 0px;
 border: 0;
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
}
div.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 left: 0px;
 bottom: 0px;
 z-index: 3;
 overflow: hidden;
 font-size: 0;
}
div.mc-caption-bg {
 background-color: black;
}
div.mc-caption {
 font: normal 20px/20px Arial;
 color: #ffffff;
 z-index: 4;
 padding: 10px 0;
 text-align: center;
}
div.mc-caption a {
 color: #FB0;
}
div.mc-caption a:hover {
 color: #DA0;
}
div.navBulletsWrapper {
 top: 250px;
 left: 190px;
 width: 150px;
 background: none;
 padding-left: 20px;
 position: relative;
 z-index: 5;
 cursor: pointer;
}
div.navBulletsWrapper div {
 width: 11px;
 height: 11px;
 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTzttEGpETADUiOEjoIWpMdfs2NMOmXghwj3uy4GTR1WTgUp1cUXEf4FsONDwuX8cfS9uSc-stVBO3tjobqDG7U5YjtJ8oH693Yg5uL7qqrylmW-QsAKye2ptrssGyg-vFEt8FSwCHwRg/s1600/HiFiFun.Com+Bullet.png) no-repeat 0 0;
 float: left;
 overflow: hidden;
 vertical-align: middle;
 cursor: pointer;
 _position: relative;
 padding-right: 3px;
}
div.navBulletsWrapper div.active {
 background-position: 0 -11px;
}
#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
 </style>
<script src="https://googledrive.com/host/0B-dv4rsl5_uZZVkyZG5oQ1hpck0" type="text/javascript"></script>
<br />
<div id="sliderFrame">
<div id="ribbon">
</div>
<div id="slider">
<a href="POST 1 Link"><img alt="POST 1 Title" src="Image 1 Link"/></a>
<a href="POST 2 Link"><img alt="POST 2 Title" src="Image 2 Link" /></a>
<a href="POST 3 Link"><img alt="POST 3 Title" src="Image 3 Link" /></a>
<a href="POST 4 Link"><img alt="POST 4 Title" src="Image 4 Link"/></a>
<a href="POST 5 Link"><img alt="POST 5 Title" src="Image 5 Link"/></a>
     </div>
   </div>

How to Add it to Blog?

1. Just goto Blogger Dashboard.

2. Now Layout --> Add a widget --> HTML/Javascript.

3. Now paste the Above Piece of code in HTML/Javascript with necessary changes in the code and then save it.

Necessary changes Before saving :

Change the Black bold text with your post Link.

Change the Green bold text with your post title

Change the Red Bold text with image link