INSIDE THIS BLOG>>>>>>
#marquee style code and demos #how to make WOW Slider design #HOW TO REMOVE WATERMARK FROM WOW SLIDER DESIGN #Wow slider great, beautiful, resposible and awesome skin and animation image slideshow demo without WOWSlider demo #how to upload WOWSlider Design in blogger or blogspot.com #how to create google sites account #How to upload WOW Slider design in blogger or blogspot.com with next, previous, bullets, pause and play button #

How to upload WOW Slider design in blogger or blogspot.com with next, previous, bullets, pause and play button

when the slideshow without next, previous, pause, play and bullets, feel something missing. so these steps follow for Wowslider design upload  in blogger or blogspot.com.
  1. fist step: make design with bullets, buttons, and play and pause button.
  2. second step: edit html code (woslider.html) with how to upload wow Slider design in blogger or blogspot.com
  3. upload bullets, buttons, pause button and play button in online store (like google sites)
  4. open style.css file from WOW Slider and uploaded bullets, button, paly and pause buttons  copy link address and past in ./bullet.png, ./arrows.png,./pause.png,./play.png
  5. style.css like this:
  6. Untitled Document
    /*
    * generated by WOW Slider 7.8
    * template Push
    */
    @import url(https://fonts.googleapis.com/css?family=Inder&subset=latin,latin-ext);
    #wowslider-container3 {
    display: table;
    zoom: 1;
    position: relative;
    width: 100%;
    max-width: 700px;
    max-height:360px;
    margin:8px auto 8px;
    z-index:90;
    text-align:left; /* reset align=center */
    font-size: 10px;
    text-shadow: none; /* fix some user styles */
    /* reset box-sizing (to boostrap friendly) */
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    }
    * html #wowslider-container3{ width:700px }
    #wowslider-container3 .ws_images ul{
    position:relative;
    width: 10000%;
    height:100%;
    left:0;
    list-style:none;
    margin:0;
    padding:0;
    border-spacing:0;
    overflow: visible;
    /*table-layout:fixed;*/
    }
    #wowslider-container3 .ws_images ul li{
    position: relative;
    width:1%;
    height:100%;
    line-height:0; /*opera*/
    overflow: hidden;
    float:left;
    /*font-size:0;*/
    padding:0 0 0 0 !important;
    margin:0 0 0 0 !important;
    }
    #wowslider-container3 .ws_images{
    position: relative;
    left:0;
    top:0;
    height:100%;
    max-height:360px;
    max-width: 700px;
    vertical-align: top;
    border:8px solid #FFFFFF;
    overflow: hidden;
    }
    #wowslider-container3 .ws_images ul a{
    width:100%;
    height:100%;
    max-height:360px;
    display:block;
    color:transparent;
    }
    #wowslider-container3 img{
    max-width: none !important;
    }
    #wowslider-container3 .ws_images .ws_list img,
    #wowslider-container3 .ws_images > div > img{
    width:100%;
    border:none 0;
    max-width: none;
    padding:0;
    margin:0;
    }
    #wowslider-container3 .ws_images > div > img {
    max-height:360px;
    }
    #wowslider-container3 .ws_images iframe {
    position: absolute;
    z-index: -1;
    }
    #wowslider-container3 .ws-title > div {
    display: inline-block !important;
    }
    #wowslider-container3 a{
    text-decoration: none;
    outline: none;
    border: none;
    }
    #wowslider-container3 .ws_bullets {
    float: left;
    position:absolute;
    z-index:70;
    }
    #wowslider-container3 .ws_bullets div{
    position:relative;
    float:left;
    font-size: 0px;
    }
    /* compatibility with Joomla styles */
    #wowslider-container3 .ws_bullets a {
    line-height: 0;
    }
    #wowslider-container3 .ws_script{
    display:none;
    }
    #wowslider-container3 sound,
    #wowslider-container3 object{
    position:absolute;
    }
    /* prevent some of users reset styles */
    #wowslider-container3 .ws_effect {
    position: static;
    width: 100%;
    height: 100%;
    }
    #wowslider-container3 .ws_photoItem {
    border: 2em solid #fff;
    margin-left: -2em;
    margin-top: -2em;
    }
    #wowslider-container3 .ws_cube_side {
    background: #A6A5A9;
    }

    #wowslider-container3.ws_gestures {
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: move;
    }
    #wowslider-container3.ws_gestures.ws_grabbing {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;

    }
    /* hide controls when video start play */
    #wowslider-container3.ws_video_playing .ws_bullets {
    display: none;
    }
    #wowslider-container3.ws_video_playing:hover .ws_bullets {
    display: block;
    }
    /* IE fix because it don't show controls on hover if frame visible */
    #wowslider-container3.ws_video_playing_ie .ws_bullets,
    #wowslider-container3.ws_video_playing_ie a.ws_next,
    #wowslider-container3.ws_video_playing_ie a.ws_prev {
    display: block;
    }

    /* youtube/vimeo buttons */
    #wowslider-container3 .ws_video_btn {
    position: absolute;
    display: none;
    cursor: pointer;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 55;
    }
    #wowslider-container3 .ws_video_btn.ws_youtube,
    #wowslider-container3 .ws_video_btn.ws_vimeo {
    display: block;
    }
    #wowslider-container3 .ws_video_btn div {
    position: absolute;
    background-image: url(./playvideo.png);
    background-size: 200%;
    top: 50%;
    left: 50%;
    width: 7em;
    height: 5em;
    margin-left: -3.5em;
    margin-top: -2.5em;
    }
    #wowslider-container3 .ws_video_btn.ws_youtube div {
    background-position: 0 0;
    }
    #wowslider-container3 .ws_video_btn.ws_youtube:hover div {
    background-position: 100% 0;
    }
    #wowslider-container3 .ws_video_btn.ws_vimeo div {
    background-position: 0 100%;
    }
    #wowslider-container3 .ws_video_btn.ws_vimeo:hover div {
    background-position: 100% 100%;
    }
    #wowslider-container3 .ws_playpause.ws_hide {
    display: none !important;
    }
    #wowslider-container3 .ws_bullets {
    padding: 5px;
    }
    #wowslider-container3 .ws_bullets a {
    width:40px;
    height:20px;
    background: url(./bullet.png) left top;
    float: left;
    text-indent: -4000px;
    position:relative;
    margin-left:7px;
    color:transparent;
    }
    #wowslider-container3 .ws_bullets a:hover{
    background-position: 0 50%;
    }
    #wowslider-container3 .ws_bullets a.ws_selbull{
    background-position: 0 100%;
    }
    #wowslider-container3 a.ws_next, #wowslider-container3 a.ws_prev {
    background-size: 200%;
    position:absolute;
    top:50%;
    margin-top:-2.2em;
    z-index:60;
    height: 5em;
    width: 5em;
    background-image: url(./arrows.png);
    }
    #wowslider-container3 a.ws_next{
    background-position: 100% 0;
    right:1em;
    }
    #wowslider-container3 a.ws_prev {
    left:1em;
    background-position: 0 0;
    }
    #wowslider-container3 a.ws_next:hover{
    background-position: 100% 100%;
    }
    #wowslider-container3 a.ws_prev:hover {
    background-position: 0 100%;
    }
    /*playpause*/
    #wowslider-container3 .ws_playpause {
    width: 5em;
    height: 5em;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -2.5em;
    margin-top: -2.5em;
    z-index: 59;
    }
    #wowslider-container3 .ws_pause {
    background-size: 100%;
    background-image: url(./pause.png);
    }
    #wowslider-container3 .ws_play {
    background-size: 100%;
    background-image: url(./play.png);
    }
    #wowslider-container3 .ws_pause:hover, #wowslider-container1 .ws_play:hover {
    background-position: 100% 100% !important;
    }/* bottom center */
    #wowslider-container3 .ws_bullets {
    bottom: 0px;
    left:50%;
    }
    #wowslider-container3 .ws_bullets div{
    left:-50%;
    }
    #wowslider-container3 .ws-title{
    position:absolute;
    display:block;
    font: 2em 'Inder', Tahoma, Geneva, sans-serif;
    bottom: 0;
    left: 0;
    margin:1.75em 0.8em;
    color:#777777;
    z-index: 50;
    line-height: 1.2em;
    text-transform: uppercase;
    }
    #wowslider-container3 .ws-title div,#wowslider-container3 .ws-title span{
    display:inline-block;
    padding:0.4em;
    background:#FFFFFF;
    border-radius:0.2em;
    -moz-border-radius:0.2em;
    -webkit-border-radius:0.2em;
    opacity:0.8;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
    box-shadow: 0 0.15em 0.1em rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0.15em 0.1em rgba(0, 0, 0, 0.5);
    }
    #wowslider-container3 .ws-title div{
    line-height: 1.15em;
    display:block;
    margin-top:0.5em;
    font-size: 0.7em;
    padding:0.5em;
    }#wowslider-container3 a.ws_next,
    #wowslider-container3 a.ws_prev,
    #wowslider-container3 .ws_playpause {
    display:none;
    }
    * html #wowslider-container3 a.ws_next,* html #wowslider-container3 a.ws_prev{display:block}
    #wowslider-container3:hover a.ws_next,
    #wowslider-container3:hover a.ws_prev,
    #wowslider-container3:hover .ws_playpause {
    display:block
    }#wowslider-container3 .ws_images > ul{
    animation: wsBasic 28s infinite;
    -moz-animation: wsBasic 28s infinite;
    -webkit-animation: wsBasic 28s infinite;
    }

    #wowslider-container3 .ws_images {
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 3px 2px rgba(0, 0, 0, 0.5);
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    }
    #wowslider-container3 .ws_bullets a img{
    text-indent:0;
    display:block;
    bottom:20px;
    left:-47px;
    visibility:hidden;
    position:absolute;
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 3px 2px rgba(0, 0, 0, 0.5);
    border: 4px solid #FFFFFF;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    max-width:none;
    }
    #wowslider-container3 .ws_bullets a:hover img{
    visibility:visible;
    }
    #wowslider-container3 .ws_bulframe div div{
    height:48px;
    overflow:visible;
    position:relative;
    }
    #wowslider-container3 .ws_bulframe div {
    left:0;
    overflow:hidden;
    position:relative;
    width:93px;
    background-color:#FFFFFF;
    }
    #wowslider-container3 .ws_bullets .ws_bulframe{
    display:none;
    bottom:20px;
    margin-left:15px;
    overflow:visible;
    position:absolute;
    cursor:pointer;
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 3px 2px rgba(0, 0, 0, 0.5);
    border: 4px solid #FFFFFF;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    }
    #wowslider-container3 .ws_bulframe span{
    display:block;
    position:absolute;
    bottom:-10px;
    margin-left:-6px;
    left:47px;
    background:url(./triangle.png);
    width:15px;
    height:6px;
    }#wowslider-container3 .ws_bulframe div div{
    height: auto;
    }
    @media all and (max-width:760px) {
    #wowslider-container3 .ws_fullscreen {
    display: block;
    }
    }
    @media all and (max-width:400px){
    #wowslider-container3 .ws_controls,
    #wowslider-container3 .ws_bullets,
    #wowslider-container3 .ws_thumbs{
    display: none
    }
    }
    UPLOAD BULLETS.PNG CREATED BY WOWSLIDER IN ONLINE STORE (GOOGLE SITES) AND COPY LINK ADDRESS AND PASTE HERE
    UPLOAD PLAY.PNG CREATED BY WOWSLIDER IN ONLINE STORE (LIKE GOOGLE SITES) AND COPY LINK ADDRESS AND PASTE HERE
    UPLOAD PAUSE.PNG CREATED BY WOWSLIDER IN ONLINE STORE (LIKE GOOGLE SITES) AND COPY LINK ADDRESS AND PASTE HERE
    UPLOAD ARROWS.PNG (NEXT AND PREVIOUS BUTTORN) CREATED BY WOWSLIDER IN ONLINESTORE (LIKE GOOGLE SITES) AND COPY LINK ADDRESS AND PASTE HERE


Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)