Menu


Menu Tab

Pages

Showing posts with label Memasang Slider Auto. Show all posts
Showing posts with label Memasang Slider Auto. Show all posts

Slider Auto dengan teks



Memasang Slider Auto
dengan teks sebagai tombol link
yang menuju ke postingan maupun home page.
caranya sebagai berikut Klik tataletak dan klik tambah gadged kemudian copy kode berikut pastekan kedalam gadged tersebut dan klik simpan selesai
<center>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>     <script src="http://yourjavascript.com/21231915763/slidertextauto.js" type="text/javascript"></script>     <script type="text/javascript">
        $(document).ready(function() {
       $('#my-slider').s3Slider({
          timeOut: 3000
       });
    });
    </script>     <style>
    #my-slider {
       width: 600px; /* Keep it 20px-40PX greater than ACTUAL Image size */
       height: 385px;
       position: relative;
       overflow: hidden;
       margin-left: 0;
    }
    #my-sliderContent {
       width: 550px;
       position: absolute;
       top: 0;
       margin-left: 0;
    }
    .my-sliderImage {
       float: left;
       position: relative;
       display: none;  top: 0;
       border:0px solid #000;
    }
    .my-sliderImage span {
    position: absolute;
        font: 10px/15px sans-serif,Arial, Helvetica;
        padding: 10px 10px;
        background-color: #000;
        color: #fff;
        filter:'alpha(opacity=70)';
        -moz-opacity: .5;
        -khtml-opacity: .5;
        opacity: .5;
        text-align:justify;
    }
    .my-sliderImage span a {
    text-decoration:underline;
    color:#fff;
    }
    .clear {
       clear: both;
    }
    .top {
        top: 0;
        left: 0;
        width: 600px !important;
        height: 70px;
    }
    .bottom {
        bottom: 0;
        left: 0;
        width: 550px !important;
        height:90px;
    }
    .left {
        left: 0;
        top: 0;
        width: 110px !important;
        height: 335px;
    }
    .right {
        right: 0;
        bottom: 0;
        width: 110px !important;
        height: 315px;
    }
    </style>   
<div id="my-slider">
<ul id="my-sliderContent">
<li class="my-sliderImage">     <img height="385" src="https://Link Gambar.jpg" width="600" /><a href="https://Your Link"><span class="top"><h3>
Your Text 1</h3>
Your Text 1</span></a><span class="short_text" id="result_box" lang="en"><span class="hps"></span></span>     </li>
<li class="my-sliderImage">     <img height="385" src="https://Link Gambar.jpg" width="600" /><a href="https://Your Link"><span class="top"><h3>
Your Text 2</h3>
Your Text 2</span></a><span class="short_text" id="result_box" lang="en"><span class="hps"></span></span>     </li>
<li class="my-sliderImage">  <img height="385" src="https://Link Gambar.jpg" width="600" /><a href="https://Your Link"><span class="top"><h3>
Your Text 3</h3>
Your Text 3</span>     </a></li>
<li class="my-sliderImage">     <img height="385" src="https://Link Gambar.jpg" width="600" /><a href="https://Your Link"><span class="top"><h3>
Your Text 4</h3>
Your Text 4</span>     </a></li>
<li class="my-sliderImage">   <img height="385" src="https://Link Gambar.jpg" width="600" /><a href="https://Your Link"><span class="top"><h3>
Your Text 5</h3>
Your Text 5</span>     </a></li>
<div class="clear my-sliderImage">
</div>
</ul>
</div>
</center>
All Sumber
Edited by. Myscript2010

Myscript2010

Home Page
 
 

M2010

Copyright © Cibeber Cimahi