WowWindow for bloggers

Yesterday I've posted about how to apply shadowbox plug in to blogger ..
Now I want to post about how to apply WowWindow  by Abel Mohler on blogger / blogspot
wowwindow same function like a shadowbox, but with a different look and style,
ok ... let's get started ....!!!!!
first you need to log in to blogger
then please choose design and then select edit HTML
Before you start any changes to your templae I suggest you download your template first. if you fail then it will be easy to restore your old template.
then copy and paste the following code in the header section of your template then save. You can download code here

<!-- start wowwindow -->
<style>
#wowwindow{ position:absolute;  left:50%;     top:50%;     -moz-box-shadow:0 0 15px #252525;     -webkit-box-shadow:0 0 15px #252525;     box-shadow:0 0 15px #252525;     background:#fff;     border:1px solid #7f7f7f;     position:absolute;     -moz-border-radius:3px;     -webkit-border-radius:3px;     border-radius:3px}

#wowwindow-image{    line-height:0}

#wowwindow-image-loading{    background:url(https://lh6.googleusercontent.com/-ZownzwXymFU/TjNtw6pXY-I/AAAAAAAABTU/RHHjov0CTss/wowwindow-loading.gif) center center no-repeat;  height:100px;  width:100px;  position:absolute;  left:50%;  top:50%;  margin-left:-50px;  margin-top:-50px}

#wowwindow-iframe, #wowwindow-video-flash{  position:relative;  z-index:10}

.wowwindow-title{ font-weight:bold;  font-size:11px;  font-family:Verdana,Arial,Helvetica,sans-serif;  color:#bfbfbf;  cursor:default;   _display:block;  _position:relative}

#wowwindow-inner{ padding:10px;  position:relative;  overflow:hidden;      _zoom:1}

.wowwindow-controlbar{    background:#252525 url(https://lh5.googleusercontent.com/-tqlp80ONTSU/TjNtwzBSXYI/AAAAAAAABTM/fOfw1HSa3ig/wowwindow-controlbar.gif) repeat-x;  overflow:hidden;  border-bottom:1px solid #252525;  padding:0 30px 0 10px;  line-height:18px;      _zoom:1}

a.wowwindow-close{    display:block;     float:right;     height:20px;     width:20px;     margin-right:-30px;     text-indent:-999em;     background:url(https://lh3.googleusercontent.com/-UIJArSl0qYI/TjNtwww8BAI/AAAAAAAABTQ/dGn6MUkWJ0U/wowwindow-close.gif) no-repeat top left;  border-left:1px solid #7f7f7f;  border-bottom:1px solid #7f7f7f;  -moz-border-radius-bottomleft:3px;  -webkit-border-bottom-left-radius:3px;  border-bottom-left-radius:3px;   *position:relative;  *right:-9px;      _display:inline}

a.wowwindow-close:hover{    background-position:bottom left}
</style>
<script src='http://little-share.googlecode.com/files/jquery.min.js' type='text/javascript'></script>

<script src='http://little-share.googlecode.com/files/jquery.wowwindow.min.js' type='text/javascript'></script>
<script type='text/javascript'>
        $(document).ready(function() {
            $('.popups a').wowwindow({
                draggable: true
            });
            $('.popups-rotate a').wowwindow({
                rotate: true,
                draggable: true
            });
            $('.popups-rotate-multiple a').wowwindow({
                rotate: true,
                rotations: 3,
                draggable: true
            });

            

            $('a[rel=video]').wowwindow({
                draggable: true,
                height: 225,
                width: 400,
                videoIframe: false
            });
            $('a[rel=video_rotate]').wowwindow({
                draggable: true,
                rotate: true,
                height: 225,
                width: 400,
                videoIframe: false
            });
            $('a[rel=video_multi_rotate]').wowwindow({
                draggable: true,
                rotate: true,
                rotations: 3,
                height: 225,
                width: 400,
                videoIframe: false
            });

            $('#youtube-auto-thumbnails a').wowwindow({
                draggable: true,
                width: 480,
                height: 390,
                videoIframe: false,
                autoYouTubeThumb: 'default'
            });
        });
    </script>
<!-- end wowwindow --> 

Your template is now ready to use
how to make use of functions wowwindow?
a great question
look at some code below ... and I hope that you understand

 <div class="popups">
<a href="sample1.jpg"><img src="sample1.jpg" alt="sample 1"></a>
<a href="sample2.jpg"><img src="sample2.jpg" alt="sample 2"></a>
<a href="sample3.jpg"><img src="sample3.jpg" alt="sample 3"></a>
<a href="sample4.jpg"><img src="sample4.jpg" alt="sample 4"></a>
<a href="sample5.jpg"><img src="sample5.jpg" alt="sample 5"></a>
</div>

above code is used for standard effects

<div class="popups-rotate">
<a href="sample1.jpg"><img src="sample1.jpg" alt="sample 1"></a>
<a href="sample2.jpg"><img src="sample2.jpg" alt="sample 2"></a>
<a href="sample3.jpg"><img src="sample3.jpg" alt="sample 3"></a>
<a href="sample4.jpg"><img src="sample4.jpg" alt="sample 4"></a>
<a href="sample5.jpg"><img src="sample5.jpg" alt="sample 5"></a>
</div>

 above code is used to rotate effects

<div class="popups-rotate-multiple">
<a href="sample1.jpg"><img src="sample1.jpg" alt="sample 1"></a>
<a href="sample2.jpg"><img src="sample2.jpg" alt="sample 2"></a>
<a href="sample3.jpg"><img src="sample3.jpg" alt="sample 3"></a>
<a href="sample4.jpg"><img src="sample4.jpg" alt="sample 4"></a>
<a href="sample5.jpg"><img src="sample5.jpg" alt="sample 5"></a>
</div>

 above code is used to Multiple Rotations 

<div class="popup-section"><a rel="video" title="Corus 2010 - Round 1" href="http://www.youtube.com/watch?v=h8EOm9fuqhE&feature=grec_index"><img src="images/thumbnails/video1.jpg" alt="" /></a></div>

code above for video

<div class="popup-section"><a rel="video_rotate" title="Corus 2010 - Round 1" href="http://www.youtube.com/watch?v=h8EOm9fuqhE&feature=grec_index"><img src="images/thumbnails/video1.jpg" alt="" /></a></div>

code above for video rotate

<div class="popup-section"><a rel="video_multi_rotate" title="Corus 2010 - Round 1" href="http://www.youtube.com/watch?v=h8EOm9fuqhE&feature=grec_index"><img src="images/thumbnails/video1.jpg" alt="" /></a></div>

code above for video Multiple rotate

<div id="youtube-auto-thumbnails">
<a title="" href="http://www.youtube.com/watch?v=s0WDTtIeSAI"><img src="images/play.gif" alt=""></a>
</div>

code above for video Auto-Generating Thumbnails