Blog Post Slide Show Widget

To See all the posts in Blogger that are displayed in slide show format ,that is useful for all readers to read all posts in slide show manner ,to put the slide show widget in your blog follow the bellow steps


1.First copy the bellow code 

<style type="text/css">
.gfg-root {
width : 100%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 20px;
border: 1px solid #BCCDF0;
}

.gfg-title {
  font-size: 24px;
  font-weight : bold;
  color : #3366cc;
  background-color: #E5ECF9;
  line-height : 1.4em;
  overflow : hidden;
  white-space : nowrap;
}

.gfg-title a {
  color : #3366cc;
}

.gfg-subtitle {
  font-size: 20px;
  font-weight : bold;
  color : #3366cc;
  background-color: #E5ECF9;
  line-height : 1.4em;
  overflow : hidden;
  white-space : nowrap;
  margin-bottom : 0px;
}

.gfg-subtitle a {
  color : #3366cc;
  display:none !important;
}

.gfg-entry {
  background-color : white;
  width : 100%;
  height : 6.9em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 3px;
}

/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
  position : relative;
  background-color : white;
  width : auto;
  height : 100%;
  padding-left : 20px;
  padding-right : 5px;
}

.gfg-list {
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-bottom : 5px;
  display:none !important;
}

.gfg-listentry {
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  padding-left : 15px;
  padding-right : 5px;
  margin-left : 5px;
  margin-right : 5px;
}

.gfg-listentry-odd {
  background-color : #F6F6F6;
}

.gfg-listentry-even {
}

.gfg-listentry-highlight {
  background-image : url('garrow.gif');
  background-repeat: no-repeat;
  background-position : center left;
}

/*
* FeedControl customizations.
*/

.gfg-root .gfg-entry .gf-result .gf-title {
  font-size: 24px;
  line-height : 1.2em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  margin-bottom : 2px;
}

.gfg-root .gfg-entry .gf-result .gf-snippet {
  height : 3.8em;
  color: #000000;
  margin-top : 3px;
}

/*
* Easy way to get horizontal mode, applicable via js options to gadget.

*/

.gfg-horizontal-container {
  position : relative;
}

.gfg-horizontal-root {
  height : 1.5em;
  _height : 100%;
  position : relative;
  white-space : nowrap;
  overflow : hidden;
  text-align : center;
  font-family: "Arial", sans-serif;
  font-size: 13px;
  border: 1px solid #AAAAAA;
  padding : 5px;
  margin-right : 80px;
}

.gfg-horizontal-root .gfg-title {
  font-weight : bold;
  background-color: #FFFFFF;
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
  float : left;
  padding-left : 10px;
  padding-right : 12px;
  border-right: 1px solid #AAAAAA;
}

.gfg-horizontal-root .gfg-title a {
  color : #444444;
  text-decoration : none;
}

.gfg-horizontal-root .gfg-entry {
  width : auto;
  height : 1.5em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 0px;
  margin-left : 0px;
  padding-left : 10px;
}

/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
  position : relative;
  background-color : white;
  width : 100%;
  height : 100%;
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
}

.gfg-horizontal-root .gfg-list {
  display : none;
}

/*
* FeedControl customizations.
*/

.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
  display : none;
}

.gfg-horizontal-root .gfg-entry  .gf-result .gf-title {
  color: #0000cc;
  margin-right : 3px;
  float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
  float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
  display : block;
  color: #AAAAAA;
}

.gfg-branding {
  white-space : nowrap;
  overflow : hidden;
  text-align : left;
  position : absolute;
  right : 0px;
  top : 0px;
  width : 80px;
}

.gfg-collapse-open, .gfg-collapse-closed {
  background-repeat : no-repeat;
  background-position : center;
  cursor : pointer;
  float : right;
  width : 17px;
  height : 20px;
}

.gfg-collapse-open {
  background-image : url('arrow_open.gif');
}

.gfg-collapse-closed {
  background-image : url('arrow_close.gif');
}

.gfg-collapse-href {
  float : left;
}

.clearFloat {
  clear : both;
}
body {
      background-color: white;
      color: black;
      font-family: Arial;
      font-size: small;
      margin: 0;
    }
    #feedGadget {
      margin-top : 5px;
      margin-left: auto;
      margin-right: auto;
      width : 270px;
      font-size: 16px;
      color: #9CADD0;
    }
</style>
<script src="http://www.google.com/jsapi/?key=internal-sample" 
type="text/javascript"></script>
  <script src="http://www.google.com/uds/solutions/dynamicfeed/

gfdynamicfeedcontrol.js" type="text/javascript"></script>

  <script type="text/javascript">

    function showGadget() {
      var feeds = [
       {title:'title',
        url:'http://mahigrafixdemo.blogspot.com/atom.xml?redirect=

false&start-index=1&max-results=999'},
      
       ];

      new GFdynamicFeedControl(feeds, 'feedGadget',
                               {numResults : 1000, stacked : true,
                               title: "MahiGrafix ~ All Posts."});
    }
    google.load("feeds", "1");
    google.setOnLoadCallback(showGadget);
  </script>
<div id="feedGadget">Loading...</div>

2.The above Code http://superblogtutorials.blogspot.com change the address

    to your blog address next learn blog edit - Post List

     change this to your blog tittle  

3.Go to your blog and go to page element ADD A GEDGET >>HTML/JAVA SCRIPT ,

   add above code and Save and see your blog