ARSIP BLOG

Cara Membuat Featured Slide Show Keren

Posted by Bhernadin Erryco on Rabu, 26 September 2012

Cara Membuat Featured Slide Show
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.
 

{ 3 comments... read them below or add one }

Master Jin - Belajar dan Berbagi mengatakan... Reply Comment

wah kyknya keren ini mas..

Maulidin Yudiarto mengatakan... Reply Comment

Thanks banget sob buat postingannya, berguna banget :)

Terapi ion mengatakan... Reply Comment

Terapi Ion
Terapi Ion Rendam Kaki Air Garam
Peluang Usaha Rumahan
Terapi Ion Elektrik Rendam Kaki Detox
Manfaat Terapi Ion Elektrik
Terapi Ion Elektrik
Terapi Kesehatan Murah
Peluang Usaha Modal Kecil
Harga Paket Alat Terapi Ion Elektrik
Pengedar Alat Terapi Ion Di Malaysia

:) :( ;) :D ;;-) :-/ :x :P :-* =(( :-O X( :7 B-) :-S #:-S 7:) :(( :)) :| /:) =)) O:-) :-B =; :-c :)] ~X( :-h :-t 8-7 I-) 8-| L-) :-a :-$ [-( :O) 8-} 2:-P (:| =P~ :-? #-o =D7 :-SS @-) :^o :-w 7:P 2):) X_X :!! \m/ :-q :-bd ^#(^ :ar!

Poskan Komentar

Ketentuan komentar:
- Baik dan Sopan.
- Komentar harus sesuai dengan isi postingan.
- No Spam, No Junk, No Rubbish, No Porn.
- Mudah Dimengerti.

Dimohon juga untuk Meng-Kritik atau kasih Saran buat Blog ini

Terima Kasih