Slide Show Smooth Gallery II

Mana yang anda pilih? Slide Show Smooth Gallery yang aku bahas sebelumnya atau tutorial kali ini yang akan aku berikan. Nah kalo aku ditanya gitu, maunya dua-duanya bisa tampil dalam satu blog. Tapi aku belum bisa menemukan cara yang biar kedua slide show ini bisa berdampingan tanpa konflik hehehe.

Tutorial yang aku berikan ini yaitu Slide Show Smooth Gallery II , atau anda bisa lihat menu slide show yang aku pake dibawah header itu. Nah itulah yang aku bahas. Ini adalah permintaan dari pengunjung blogku yang sempat menanyakan bagaimana cara membuat tutorial ini. Salah satu layanan javascript ini menurutku dapat anda coba. Tutorial ini mungkin bisa memberikan sesuatu yang berbeda diblog anda. Yang dulunya terlihat biasa saja, dengan adanya tutorial ini bisa terlihat elegan karena sentuhan-sentuhan flash. :D

Kurang lebih tutorialnya berikut ini. Sebelumnya login Blogger anda, kemudian menuju Edit HTML. Jangan lupa Expand Widget Template anda.

1. Copy CSS kode dibawah ini dan letakkan di diatas kode ]]></b:skin>

#slider    {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh71TS3LJUSalmNsgl_8NNyIP9ycgUV4vEHNp8E9fKWQevu2_ymgJg3f_8i2FGRfex8nD16aaQolpLI-myY1A_b34XxZrlTEGZ6PBF8R-7mAN3_GSesFR4WD1l7F04v7OIqyd98KDAgupE/s1600/slide.png);
    height: 254px;
    overflow: hidden;
    position: relative;
    margin: 5px 0;
}
   
#mover {
    width: auto;
    position:absolute;
    overflow:hidden;
}

.slide {
    padding: 20px 0px;
    width: 1000px;
    float: left;
    position: relative;
    height:200px;
    }
   
.slide h2 {
    font-family:georgia, Helvetica, Sans-Serif;
    font-size: 24px;
    color: #ac0000;
    padding:0px 0px 0px 30px;
    margin:0px 0px;
    width:500px;
    overflow:hidden;
    }

.slide h2 a:link, .slide h2 a:visited  {
    color:#fff;
    background-color: transparent;
    }
   
.slide h2 a:hover  {
    color: #ddd;
    background-color: transparent;
    }
   
span.slmet {
    color: #ee0909;
    font-size: 10px;
    font-family:Tahoma, georgia, Helvetica, Sans-Serif;
    line-height: 20px;
    width: 500px; 
    padding:0px 0px 0px 30px;
    margin:0px 0px;
    text-transform:uppercase;
}   
.slide p {
    color: #999;
    font-size: 12px;
    font-family:georgia, Helvetica, Sans-Serif;
    line-height: 20px;
    width: 500px; 
    padding:0px 0px 0px 30px;
    margin:0px 0px;
    }
   
.slide img {
    position: absolute;
    top: 20px;
    left: 577px;
    background:#fff;
    padding:10px 10px;
    }
   
#slider-stopper {
    position: absolute;
    font-family: Georgia, Helvetica, Sans-Serif;
    top: 113px;
    right: 65px;
    color: #AC0000;
    padding: 3px 8px;
    font-size: 14px;
    text-transform: uppercase;
    z-index: 1000;
    }

 2. Copy Javascript dibawah ini, kemudian paste di bawah kode ]]></b:skin>

<script src='http://web2feel.com/monezine/wp-content/themes/primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://web2feel.com/monezine/wp-content/themes/primus/js/slider.js' type='text/javascript'/>

3. Copy kode dibawah ini dan letakkan di bawah header blog atau letakkan dibawah kode navigasi menu blog anda.

<!-- Slider -->
<div id='slider'>
<div id='mover'>

<div class='slide'>
<h2><a href='POST-LINK-HERE' title='POST-TITLE-HERE'>POST-TITLE-HERE</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>POST-SUMMARY-HERE</p>
<img alt='' src='IMAGE-LINK-HERE'/>
</div>

<div class='slide'>
<h2><a href='POST-LINK-HERE' title='POST-TITLE-HERE'>POST-TITLE-HERE</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>POST-SUMMARY-HERE</p>
<img alt='' src='IMAGE-LINK-HERE'/>
</div>

<div class='slide'>
<h2><a href='POST-LINK-HERE' title='POST-TITLE-HERE'>POST-TITLE-HERE</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>POST-SUMMARY-HERE</p>
<img alt='' src='IMAGE-LINK-HERE'/>
</div>

<div class='slide'>
<h2><a href='POST-LINK-HERE' title='POST-TITLE-HERE'>POST-TITLE-HERE</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>POST-SUMMARY-HERE</p>
<img alt='' src='IMAGE-LINK-HERE'/>
</div>

<div class='slide'>
<h2><a href='POST-LINK-HERE' title='POST-TITLE-HERE'>POST-TITLE-HERE</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>POST-SUMMARY-HERE</p>
<img alt='' src='IMAGE-LINK-HERE'/>
</div>

</div>
<!-- /Mover -->
</div>
<!-- /Slider -->

Biasanya header kodenya seperti ini :
<div id='header-wrapper'>
</b:section>
</div>

4. Jangan lupa disimpan ya.

Note :
1. Ganti tulisan POST-LINK HERE dengan judul slide yang ingin anda tampilkan
2. Ganti tulisan Posted by Author On Month - Day - Year sesuai selera anda.
3. Ganti tulisan POST-SUMMARY-HERE dengan deskripsi slide yang anda tampilkan.
4. Ganti tulisan IMAGE-LINK-HERE dengan lokasi penyimpanan gambar kamu.

Selesai, Happy blogging semua...Jangan Lupa coretan-coretan komentarnya ya :D

Posted by: Andi Setyoko

Berita Harian, Updated at: 6:21 PM