Stylish your blog using prettyphoto jquery design in blogger

• download prettyphoto jquery libraries from prettyphoto website.
• Add the css and javascripts to google drive and for refernce how to refer those file follow the link- http://www.mybloggerlab.com/2013/04/how-to-host-css-or-javascript-files-in-blogger-using-google-drive.html
• Add the css style and  jss files in the <header> tag

  <script charset="utf-8" src="https://googledrive.com/host/0B90Mdt6Z5pb_c0RfT1dRSmRyanM" type="text/javascript">
  </script>  
  <link charset="utf-8" href="https://googledrive.com/host/0B90Mdt6Z5pb_VDlkVGk5bnJNN2c" media="screen" rel="stylesheet" title="prettyPhoto main stylesheet" type="text/css"></link>  
  <script charset="utf-8" src="https://googledrive.com/host/0B90Mdt6Z5pb_VEg0SXIzMlRMbGM" type="text/javascript">
  </script>

  Now search for the </body> tag and paste the following code just Above/Before it.

  <script charset="utf-8" type="text/javascript">
    
  $(document).ready(function(){  
  $("a[rel^='prettyPhoto']").prettyPhoto();  
  });  
  </script> 

  • <a href="http://www.youtube.com/watch?v=TMrO_-bsooQ" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" rel="prettyPhoto" title=""><img border="0" src="http://2.bp.blogspot.com/-XJlojw2-15E/UzVUTd7naQI/AAAAAAAAA-Y/e0GC0gDuFw0/s1600/parallelparking.jpg" /></a> 

   See the post for demo usage of youtube video

  http://www.smashplus.info/2014/02/passing-dubai-rta-driving-test-tips.html

  click on the parallel parking video link you can see video opening in light box.