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. 

Comments