Sunday, February 27, 2011

Cara Membuat Featured Slide Show Keren

Cara Membuat Featured Slide Show, slide show ini sangat menarik dengan tampilan Thumbnail di samping kanan,

Feature Slide show
bisa kita gunakan untuk menampilkan gambar dan link produk, jasa dari web/blog kita.


Untuk melihat hasilnya, klik tombol di bawah ini :


LIHAT DEMONYA




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(http://4.bp.blogspot.com/-ivEJbCgKMNM/TcePJb4ZD0I/AAAAAAAAI2U/MtVGUzzs9O0/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;http://4.bp.blogspot.com/-XPVmFZxpCm0/TcevFkQU0tI/AAAAAAAAI20/8IlXBolIeMk/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 artikel dengan url artikel yang ingin kamu tampilkan

10.    Setelah selesai simpan template dan lihat hasilnya.

Update 23 Juli 2012

Kalau Jquery tidak berfungsi sebaiknya kamu copy code Jquery dan pastekan di bawah code <div id='main-wrapper'> sebelum code  <!-- Featured Content Started -->

 Selesai sudah tutorial Cara Membuat Featured Slide Show, selamat mencoba, semoga berhasil dan bermanfaat.