Cara Membuat Slide Show II

Hai Gan....!!!

Hari ini  share Cara Membuat Slide Show II, slide show ini sangat menarik dengan tampilan Thumbnail di samping kanan, Cara Membuat Slide Show II  bisa kita gunakan untuk menampilkan gambar dan link produk, jasa dari web/blog kita.
Ya kira-kira contohnya seperti gambar di bawah ini...:

Untuk membuatnya mari kita ikuti tutorial berikut ini :

1.    Login ke Blogger

2.    Pilih tab Design > Edit HTML > Centang tanda Expand Widget Templates

3.    Cari kode ]]></b:skin>

4.     Copy code di bawah ini lalu pastekan tepat di bawah code ]]></b:skin>

<style type='text/css'>
/* Featured */
#featured{
  float:left;
  width:620px;
  height:292px;
  padding:0;
  margin-bottom:20px;
  position:relative;
  overflow:hidden;
}

#featured ul.ui-tabs-nav{
  position:absolute;
  top:0;
  left:415px;
  list-style:none;
  padding:0;
  margin:0;
  width:205px;
  height:292px;
  overflow:auto;
  overflow-x:hidden;
  z-index:100;
}

#featured ul.ui-tabs-nav li{
  padding:0 0 0 15px;
}

#featured ul.ui-tabs-nav li img{
  float:left;
  margin:0 5px 0 0;
  background:#fff;
  padding:3px;
  width:70px !important;
  height: 57px !important;
}

#featured ul.ui-tabs-nav li span{
  position:relative;
  left:0;
  top:13%;
  line-height:1.3em;
}

#featured li.ui-tabs-nav-item a{
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhekti4-XRng38LBAY5TllYu5OzqFZXXP-GglI4pQxMKYRjwogbBjfOy7-ytt72-aqkLn8MDMmUFe_dA3G_CTSIaPwoSduOOY-0tDVq66M8qagcf7W8ulAwFzRkt-h03brZUQpY7DYaxKY/s1600/panel-bg.jpg) no-repeat;
  color:#fff;
  display:block;
  padding:5px;
  height:63px;
  text-decoration:none;
  line-height:1.2em;
  outline:none;
}

#featured li.ui-tabs-selected{
  background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9WrS-UFo3nGVMdG2ivzVBVu-UESgpzJ7jQLEx_UA45JH5u7x7UwNwC7-RN692kO47C-K5_oOW6eGAHAx6AaaDQ1IoZ_sTMVk4nVZ4FG4k4oC_Fhp7n-KxOHD6n7SGGnW0Gp4nD3H1a6Y/s1600/arrow.png&#39;) center left no-repeat;
  z-index:100;
}

#featured ul.ui-tabs-nav li.ui-tabs-selected a{
  background:#f8ac00;
  color:#333
}

#featured .ui-tabs-panel{
  width:430px;
  height:292px;
  position:relative;
  padding:0;
  margin:0;
  z-index:50;
}

#featured .ui-tabs-panel img{
  width:430px !important;
  height:290px !important;
  z-index:50;
}

#featured .ui-tabs-panel .info{
  position:absolute;
  padding:5px 10px;
  bottom:0;
  left:0;
  overflow:hidden;
  height:63px;
  width:410px;
  background:#111;
  opacity:0.85;
  filter:alpha(opacity=85);
  .width: 100%; /* IE */
  z-index:50;
}

#featured .info h3{
  font-size:20px;
  padding:0;
  margin:0;
  overflow:hidden
}

#featured .info p{
  margin:0;
  line-height:1.4em;
  color:#fff
}

#featured .info a, #featured .info a:visited{
  text-decoration:none;
  color:#f8ac00
}

#featured .info a:hover{
  text-decoration:underline;
}

#featured .ui-tabs-hide{
  display:none
}

</style>

5.    Kemudian cari lagi code <div id='main-wrapper'>

6.    Copy code dibawah ini dan pastekan tepat di bawah code <div id='main-wrapper'>

<!-- Featured Content Started -->
            <b:if cond='data:blog.url == data:blog.homepageUrl'>
            <b:if cond='data:blog.pageType != &quot;item&quot;'>
            <div id='featured'>
               <ul class='ui-tabs-nav'>
                   <li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-4'><img alt='testing' height='60' src=' URL Gambar artikel 1 ' width='80'/><span>Judul Artikel 1</span></a></li>
                   <li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-3'><img alt='testing' height='60' src=' URL Gambar artikel 2' width='80'/><span>Judul Artikel 2</span></a></li>
                   <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-2'><img alt='testing' height='60' src=' URL Gambar artikel 3' width='80'/><span>Judul Artikel 3</span></a></li>
                   <li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-1'><img alt='testing' height='60' src='URL Gambar artikel 4' width='80'/><span>Judul Artikel 4</span></a></li>
               </ul>

               <!-- First Content -->
                <div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
<img alt='testing' height='290' src=' URL Gambar artikel 1' width='430'/>
                   <div class='info'>
                       <h3><a href='URL Artikel 1'>Judul Artikel 1</a></h3>
                           <p>Isi keterangan artikel 1</p>
                   </div>
                </div>

               <!-- Second Content -->
                <div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
                    <img alt='testing' height='290' src='URL Gambar artikel 2' width='430'/>
                    <div class='info'>
                       <h3><a href='URL Artikel 2'>Judul Artikel 2</a></h3>
                           <p>Isi keterangan artikel 2</p>
                    </div>
                </div>

                <!-- Third Content -->
               <div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
                   <img alt='testing' height='290' src='URL Gambar artikel 3' width='430'/>
                   <div class='info'>
                      <h3><a href='URL Artikel 3'>Judul Artikel 3</a></h3>
                          <p>Isi keterangan artikel 3</p>
                   </div>
                </div>

                <!-- Fourth Content -->
               <div class='ui-tabs-panel' id='fragment-1' style=''>
                   <img alt='testing' height='290' src='URL Gambar artikel 4' width='430'/>
                   <div class='info'>
                       <h3><a href='URL Artikel 4'>Judul Artikel 4</a></h3>
                          <p>Isi keterangan artikel 4</p>
                   </div>
               </div>
            </div>
            </b:if>
            </b:if>
      <!-- Ends of Featured content-->
      <div class='clear'>&#160;</div>

7.    Cari code </body>

8.    Copy code di bawah ini dan pastekan sebelum code </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>

<script type='text/javascript'>
    $(document).ready(function(){
        $(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
    });
</script>
<script src='http://dl.dropbox.com/u/14915514/JavaScript/codejquery-1.2.6.min.js' type='text/javascript'/>

9.    Ganti tulisan URL Gambar dengan gambar artikel

       Ganti tulisan Judul artikel dengan judul artikel yang ingin kamu tampilkan

       Ganti URL artikerl dengan url artikel yang ingin kamu tampilkan

10.    Setelah selesai simpan template dan lihat hasilnya.

Selamat Mencoba..!!!

http://www.tutorial-4u.com

Anda sedang membaca artikel tentang Cara Membuat Slide Show II Dengan url http://damai-ibc.blogspot.com/2012/05/cara-membuat-slide-show-ii.html. Anda boleh menyebarluaskan atau mengcopy artikel Cara Membuat Slide Show II ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.

▂ ▃ ▅ Artikel Terkait ▅ ▃ ▂

Anak Rantau