New Blogger Template : Stylify

Stylify Blogger Template ImageIts been really a while since i was trying to make a template.  I am really happy to release my first Blogger template. I have tried to make this template as simple as possible to use. This template is based on the current design of my blog and extensively uses CSS3 and jQuery. Its rich in features and easy to use.

See Demo

Download


After many days of working on this template I am finally happy to present this new blogger template “STYLIFY”. Its my first template and its a simple blogger template with extensive use of CSS3 and jQuery.
Features
  • Simple design
  • Cross browser compatibility 
  • Page Navigation
  • Widgets ready sidebar
  • One click Show/Hide side sharing options
  • ShareThis.com Sharing Buttons Pre-Installed
  • Its own Related Post widget
  • Stylish commenting system with comments having gradient background style
  • Attractive Post Title
  • Every image has Rounded edges 
  • jQuery powered “Back To Top” Button
  • Four column footer
  • Stylish Search Box
  • Use of BonBon Buttons
  • Reply feature for Blogger Comment system
  • Eye-catching Sidebar Design
  • Search Engine Optimized
So as you can see the theme is full of features




How To Install this on your Blog:


1. Download the template from the Download Link Above

2. In your Blog, Go to Design > Edit HTML and Then Click on Choose File and after selecting the Downloaded File ,Click on Open . After that Click on Upload.

3. During this process a Dialog-Box will appear asking Whether you want to Delete or Keep Your Widgets. Its up to you to decide. After this the template is installed. 


Configurable Features:


This templates has lot of customizations possibility. Its Features can be configured as per your Needs. In here I would be explaining how to modify features of this template according to your nrequirement. I would also be explaining some hidden features of this template.

1.Navigation

There is a Green Navigation bar present in this theme. To modify this Go to Design > Edit HTML. Tick the “Expand Widget Template” option. Now Search for ( Using CTRL+F ) the term navmenu. After that you can change the URLS and Names according to your Needs.

2.Pagination


To change the number of posts to be shown on using pagination find the term postperpage ( Using CTRL+F ) ,There will be a script something like this 

<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=3;
var numshowpage=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>

You can change the number values as you like in the above code.
var postperpage=9; → Changes the no of posts that will show up on clicking any page number.
var numshowpage=3;→ Changes the number of linking to show in the widget

Note: Make sure that you also set the value of Number of Posts on Main Page (Go to Design > Page Elements , Click on Edit option of Blog Post and then Number of posts on main page: ) to same as that of the postperpage value.

3.Rounded Edges of Image

By default any image added to the blog will have Rounded Edges. In case you want to disable this feature search for the term Rounded Edges ,it will be followed by a code like this

img {
 -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
 -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;
 background-color: transparent;
}

img:hover { 
cursor:pointer !important;
filter:alpha(opacity=50); 
-moz-opacity: 0.80; 
opacity:0.8;
}

If you want you can delete it ,but if you want to use this selectively then I suggest add a .image attribute before img like this. 

.image img {
 -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
 -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;
 background-color: transparent;
}

.image img:hover { 
cursor:pointer !important;
filter:alpha(opacity=50); 
-moz-opacity: 0.80; 
opacity:0.8;
}

Now for applying this to any image just add class=”image” into that image’s HTML code

4.Link Nudging

There is a CSS code present in the template for using simple link Nudging . If you want to apply it in blog, then just see the following code:

<div class="css3_nudge nudge">
     <ul >
      <li><a href="#" target="_blank" >BlogLovin</a></li>
      <li><a href="#" target="_blank" >Bloggers</a></li>

     </ul>
</div>

You can see the demo of Link Nudging in the Demo Blog’s Sidebar.

5.Floating Sharing Widget

On the post pages there is a Side floating Sharing Widget present on the left side of the Blog. It uses SharThis.com Buttons. To modify it just search for the </body> tag and above it there will be a code like this

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#pageshare {position:fixed; top:25%; left:5px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#f8f8f8;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

span.linkopacity {
filter:alpha(opacity=0.1);
-moz-opacity: 0.1; 
opacity: 0.1;
-khtml-opacity: 0.1;}

span.linkopacity:hover {
filter:alpha(opacity=100); 
-moz-opacity: 1.0; 
opacity: 1.0;
-khtml-opacity: 1.0; }
</style> 
<div style='margin-left: auto; margin-right: auto;'>
<div id='pageshare'><input class='button' onclick='fade(&apos;pageshare&apos;, this)' type='button' value='Close'/>

<script>

function fade(div_id, button) {



 if(button.value == &#39;Close&#39;) {

  $(&#39;#&#39; div_id).fadeOut(&#39;slow&#39;);

  button.value = &#39;Reappear&#39;;

 }

 else {

  $(&#39;#&#39; div_id).fadeIn(&#39;slow&#39;);

  button.value = &#39;Close&#39;;

 }

}

</script>
<br/><br/><span class='st_facebook_vcount' displaytext='facebook'/><br/><span class='st_twitter_vcount' displaytext='tweet'/><br/><span class='st_digg_vcount' displaytext='digg'/><center><span class='st_delicious_vcount' displaytext='save'/><br/><span class='st_stumbleupon_vcount' displaytext='share'/></center></div></div>
<!-- floating page sharers End -->
</b:if>



To change the buttons just get code from the ShareThis website and place it in the above code.  
There are two more sets of Share Buttons present in the Blog, one above the Post and the Other Below the Post.

6.Enabling Reply option for the comments

The the reply option in the comment will have to enabled . Just search for the term class=’MBT-replycomments’ ( using CTRL+F ). Below it you will see “blogID=XXXXXXXXXXXX” replace this XXXXXXXXXXX number with your Blog’s ID. [To find your Blog’s ID just Open Design Tab and in the Address bar of your browser there will be a very long number , just paste that here]

7.Modifying Header Text

To modify this Go to Design > Edit HTML. Tick the “Expand Widget Template” option. Now Search for ( Using CTRL+F ) </header> tag. Below it you will find code something like this 


Now just change the Underlined Word with the Title of your Choice

If you find any problem with the template please do tell us by leaving a comment below.

See Demo

Download

Zen Audio Player for your Blog

Zen Audio Player Image

Zen Audio Player a single-song HTML5 Music Player, powered by jPlayer, styled and mostly animated with CSS3. It works more or less in Firefox4, Chrome, Safari, Opera, iOS, but there are some differences in the visuals. This blends jQuery, JavaScript and CSS3 in such a way that the end product is nothing less then a visual masterpiece.There are some known cross browser compatibility issues, but none the less its a funky looking Music Player which shows whats achievable with jQuery and CSS3 alone.

In this tutorial we will be discussing how to add this Music Player into your Blogs.

See DemoDownload

Simple Steps for Adding This into your Blog:


1. Go to the Post/Page you want to add this Music Player or 

    Go to Design > Page Elements > Add a Gadget > HTML/JavaScript type Gadget for adding this in the Sidebar

2. Copy the Following Code: (How to copy code easily)

<link rel="stylesheet" href="http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css">
 <link rel="stylesheet" href="style.css">
 <link rel="stylesheet" href="zen.css">
    
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>   
 <script type="text/javascript" src="jquery.rotate.js"></script>
 <script type="text/javascript" src="jquery.grab.js"></script> 
 <script type="text/javascript" src="jquery.jplayer.min.js"></script>
 <script type="text/javascript" src="zen.js"></script>
 

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!

Note: If you already have jQuery library in your Header, then don’t include it again

Here zen.js contains the link of the audio file you want to play through this player. As you may observe that there are three different formats of the same file namely mp3, m4a and ogg. This is done as different Browsers have different native audio supports. Therefore it is suggested that you add the link to different formats of your Music file for better Cross Browser compatibility.

3. Now add the Following HTML markup:

<div id="zen">
  <span class="player"></span>
  <span class="circle"></span>
  <span class="progress"></span>
  <span class="buffer"></span>
  <span class="drag"></span>
  <div class="button">
   <span class="icon play"></span>
   <span class="icon pause"></span>
  </div>
 </div>
 

This code calls in the different CSS and JavaScript classes to give you the end product a.k.a. a super stylish Music Player.

4. Now just save and enjoy the Music.

See DemoDownload

Implementing Flex Slider in Blogger

Flexslider is a jQuery slider plugin which has been created, developed and maintained by Tyler Smith and released for Smashing Magazine and its readers. As usual, the plugin is absolutely free to use in private and commerical projects. The plugin includes fade and slide animations, customizable options as well as all the navigation options you would expect in such a plugin — touch gestures inclusive! It uses simple, semantic markup to create the slider and is lightweight, weighing only 5 Kb (minified). The plugin has been tested in Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, and IE7+. iOS and Android devices are supported as well. In five simple steps, you can have a fully responsive slider for your responsive design.

See Demo

Download

Steps to Add it to Blogger:

1.Login to the Blogger account

2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it. (How to copy code easily)
<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 <script src="jquery.flexslider-min.js"></script>
<link rel="stylesheet" href="demo.css" type="text/css" media="screen" />
 

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!


2.Go to the Post/Page/Gadget you want to add this plugin and then go to Edit HTML tab .


3.Now copy the code from below and paste it there. (How to copy code easily)

<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 <script src="jquery.flexslider-min.js"></script>
<link rel="stylesheet" href="demo.css" type="text/css" media="screen" />

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!

4.Now for adding the images into this plugin see the following markup:

<div id="container">
<div class="flexslider">
     <ul class="slides">
      <li>
       <img src="1.jpg" />
       <p class="flex-caption">Captions</p>
      </li>
      <li>
       <a href="http://www.google.com"><img src="2.jpg" /></a>
       <p class="flex-caption">This image is wrapped in a link!</p>
      </li>
      <li>
       <img src="3.jpg" />
      </li>
      <li>
       <img src="4.jpg" />
      </li>
     </ul>
   </div></div>

The div block with id “container” is the outer wrapper of the images to be displayed.

The class “flex-caption” is used for displaying captions below the image

Now for hooking this to the Slider using this JavaScript:

<script type="text/javascript">
  $(window).load(function() {
   $('.flexslider').flexslider();
  });
 </script>

5.Now save the Post/Page.

See Demo

Download

Implementing Slicebox into Blogger

Slicebox is a simple 3D Slider which makes use of the 3D transforms properties and allows a different kind of effects. The main idea is to create three-dimensional image slices that will rotate and reveal the next image as another side of the 3d object. In case the browser does not support 3D transformations, a simple slider will be used as fallback. It comes in 6 versions.

See Demo

Download

Steps to Add it to Blogger:

1.Login to the Blogger account

2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it. (How to copy code easily)
<link rel="stylesheet" type="text/css" href="demo.css" /> 
<link rel="stylesheet" type="text/css" href="slicebox.css" /> 
 <script type="text/javascript" src="modernizr.custom.13303.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
  <script type="text/javascript" src="jquery.slicebox.min.js"></script> 
  <script type="text/javascript"> 
   $(function() {
    $('#sb-slider').slicebox({
     slicesCount   : 15,
     sequentialRotation : true,
     sequentialFactor : 50,
     speed3d    : 250
    });
     if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script>
 

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!. If this code shows error while adding into the template, then Click Here to Escape Code and then copy into it


2.Go to the Post/Page/Gadget you want to add this plugin and then go to Edit HTML tab .


3.Now copy the code from below and paste it there. (How to copy code easily)

<link rel="stylesheet" type="text/css" href="demo.css" /> 
<link rel="stylesheet" type="text/css" href="slicebox.css" /> 
 <script type="text/javascript" src="modernizr.custom.13303.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
  <script type="text/javascript" src="jquery.slicebox.min.js"></script> 
  <script type="text/javascript"> 
   $(function() {
    $('#sb-slider').slicebox({
     slicesCount   : 15,
     sequentialRotation : true,
     sequentialFactor : 50,
     speed3d    : 250
    });
     if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script>

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!

4.Now for adding the images into this plugin see the following markup:

<div id="sb-slider" class="sb-slider"> 
    <img src="1.jpg" title="The Title that will appear below the Image"/> 
    <img src="2.jpg" /> 
    <img src="3.jpg" /> 
    <img src="4.jpg" /> 
    <img src="5.jpg" />  
   </div>

Here are some customized JavaScript for changing default Options:

Vertical Effect

<script type="text/javascript"> 
   $(function() {
    $('#sb-slider').slicebox({
     slicesCount   : 5,
     disperseFactor  : 30,
     sequentialRotation : true,
     sequentialFactor : 100
    });
    if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     $('#sb-examples > li:gt(2)').remove();
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script> 

Horizontal Effect

<script type="text/javascript"> 
   $(function() {

    $('#sb-slider').slicebox({
     orientation   : 'h',
     slicesCount   : 3,
     disperseFactor  : 25,
     sequentialRotation : true,
     sequentialFactor : 140
    });
    
    if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     $('#sb-examples > li:gt(2)').remove();
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script> 

Vertical Flipping

<script type="text/javascript"> 
   $(function() {
 
    $('#sb-slider').slicebox();
    
    if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script> 

Horizontal Flipping

<script type="text/javascript"> 
   $(function() {
    
    $('#sb-slider').slicebox({
     orientation   : 'h'
    });
    
    if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script> 

Expanding Effect

<script type="text/javascript"> 
   $(function() {
 
    $('#sb-slider').slicebox({
     slicesCount   : 9,
     disperseFactor  : 50,
     sequentialRotation : true,
     sequentialFactor : 20
    });
    
    if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script> 

5.Now save the Post/Page.


See Demo

Download

Implementing Flux Slider in Blogger

At some point in a site you might have used a slider of images for e.g. your featured articles or something. While there are literally hundreds of these out there, Flux goes a step further and while browser support is not the best , have a look at it as it utilizes some really great CSS3 effects. As the author states, you can either use jQuery or Zepto.js. In order to view the demo you need a browser that supports CSS3 transitions (Chrome or Safari ). It utilizes hardware acceleration wherever possible to improve performace on less powerful devices, such as mobiles & tablets making it mobile friendly specially iPad/Android.

See Demo

Download

Steps to Add it to Blogger:

1.Login to the Blogger account

2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it. (How to copy code easily)
<!--[if lte IE 8]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 
<link rel="stylesheet" href="demo.css" type="text/css" media="screen" title="no title" charset="utf-8"> 
<!-- <script src="zepto.js" type="text/javascript" charset="utf-8"></script> -->   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
<script src="flux.min.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript" charset="utf-8"> 
   $(function(){
    if(!flux.browser.supportsTransitions)
     alert("Flux Slider requires a browser that supports CSS3 transitions");
     
    window.f = new flux.slider('#slider', {
     pagination: true
    });
   });
</script> 

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!


2.Go to the Post/Page/Gadget you want to add this plugin and then go to Edit HTML tab .


3.Now copy the code from below and paste it there. (How to copy code easily)

<!--[if lte IE 8]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 
<link rel="stylesheet" href="demo.css" type="text/css" media="screen" title="no title" charset="utf-8"> 
<!-- <script src="zepto.js" type="text/javascript" charset="utf-8"></script> -->   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
<script src="flux.min.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript" charset="utf-8"> 
   $(function(){
    if(!flux.browser.supportsTransitions)
     alert("Flux Slider requires a browser that supports CSS3 transitions");
     
    window.f = new flux.slider('#slider', {
     pagination: true
    });
   });
</script> 

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!

4.Now for adding the images into this plugin see the following markup:

<section class="container"> 
<div id="slider"> 
    <img src="avatar.jpg" alt="" /> 
    <img src="greenhornet.jpg" alt="" /> 
    <img src="ironman.jpg" alt="" /> 
    <img src="tron.jpg" alt="" /> 
   </div>
</section>

The class container gives the pagination and bordering style to the plugin.

5.Now save the Post/Page.


See Demo

Download



Facing any problems ,Please feel free to ask

Implementing Diapo in Blogger

Diapo is a jQuery plugin for creating content sliders with beautiful and custom transition effects. It can display images, videos or any other HTML and can be browsed manually (with prev-next buttons or pagination links that also displays thumbnails) or the auto-slideshow functionality. The plugin is mobile-ready and has options to enable-disable features for mobile usage . Transitions can also be customized by defining sliced rows-columns, the transition period and more.

             See Demo                                                                                            Download

Steps to Add it to Blogger:

1.Login to the Blogger account

2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it. (How to copy code easily)
<link rel='stylesheet' id='style-css'  href='diapo.css' type='text/css' media='all' /> 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
<script type='text/javascript' src='jquery.easing.1.3.js'></script> 
<script type='text/javascript' src='jquery.hoverIntent.minified.js'></script> 
<script type='text/javascript' src='diapo.js'></script> 
<script>
$(function(){
 $('.pix_diapo').diapo();
});
</script>

 

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!


2.Go to the Post/Page/Gadget you want to add this plugin and then go to Edit HTML tab .


3.Now copy the code from below and paste it there. (How to copy code easily)

<link rel='stylesheet' id='style-css'  href='diapo.css' type='text/css' media='all' /> 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
<script type='text/javascript' src='jquery.easing.1.3.js'></script> 
<script type='text/javascript' src='jquery.hoverIntent.minified.js'></script> 
<script type='text/javascript' src='diapo.js'></script> 
<script>
$(function(){
 $('.pix_diapo').diapo();
});
</script>

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!

4.Now for adding the images into this plugin see the following markup:

<div class="pix_diapo">


<div data-thumb="Small.jpg">
<img src="Large.jpg">
<div class="caption elemHover fromLeft">
This is a simple sliding image with caption. You can have more than one caption and decide the layout of the caption via css.
</div>
</div>

<div data-thumb="Small1.jpg">
<img src="Large1.jpg"> 
<div class="caption elemHover fromRight" style="bottom:65px; padding-bottom:5px; color:#ff0; text-transform:uppercase">
Here you can see two captions.
</div>
<div class="caption elemHover fromLeft" style="padding-top:5px;">
The first are loaded immediately before than the second one
</div>
</div>



<div data-thumb="Small2.jpg" data-time="7000">
<img src="Large2.jpg">
<div class="elemHover caption fromLeft">
You can also get the same effect as the caption with:
</div>
</div>



<div data-thumb="Small3.jpg">
<iframe width="940" height="470" src="http://www.youtube.com/embed/qas5lWp7_R0?wmode=transparent&autoplay=1" data-fake="FakeLarge3.jpg" frameborder="0" allowfullscreen></iframe>
<div class="elemHover caption fromLeft elemToHide">
You can also display videos, but it requires a "fake image" a.k.a. the Screenshot of video before starting
</div>
</div>



</div>

The div block with class “pix_diapo” is the container of the images to be displayed.

data-thumb is the container of the thumbnail which appears when mouse is hovered over the pagination icons.
The class “Caption elemHover fromZZZZ” is used to define the caption for the Slide. Here ZZZZ can be replaced by left ,right,top or bottom. ZZZZ defines from where the caption will enter the screen.

Videos are also embeddable but you will have put a fake image for the slide transitions. The fake image should normally be the starting screenshot of the video itself like for example if you are embedding a YouTube Video then the starting screenshot should be something like this

As you see the Image contains the Play button from YouTube to make it look like a real video

Here are some customized JavaScript for changing default Options:

<script>
$(function(){
 $('.pix_diapo').diapo({fx: 'scrollHorz', time: '5000'}); 
});
</script>

Here fx is the effect you want to apply between slide transitions (by default it is random)
time is the interval in microseconds between sliding .
For even more Options visit Here

5.Now save the Post/Page.


             See Demo                                                                                            Download