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

above code is used for standard effects

above code is used to rotate effects

above code is used to Multiple Rotations

code above for video

code above for video rotate

code above for video Multiple rotate

code above for video Auto-Generating Thumbnails

Cuma Iseng NgeBlog