Cara Membuat Header Blog menjadi 3 Bagian

Jumpa kembali kawan, semoga kawan-kawan tetap sehat dan dalam lindungan yang Maha Kuasa. Amin. Untuk topik kali ini mari kita bahas mengenai Header Blog yaitu mengenai bagaimana Cara Membuat atau mengubah Header Blog kita menjadi 3 Bagian.

Berikut adalah langkah-langkahnya:

1. Login ke Blogger Dashboard ---> Design ---> Edit HTML

2. Jangan klik Expand Widget Templates

3. Scroll kebawah cari kode dibawah ini:

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
} 

4. Ubah kode diatas menjadi kode dibawah ini:

#header {
float:left;
width:30%;
height:200px;
margin: 0px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header2{float:left; width:30%; height:200px}

#header3{float:left; width:39%; height:200px}

Note: Kawan dapat mengubah-ubah parameter width dan height sesuai kebutuhan

5. Scroll lagi sampai menemukan kode dibawah ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='JUDUL-BLOG-ANDA (Header)' type='Header'/>
</b:section>
</div>

6. Ganti kode diatas dengan kode dibawah ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='JUDUL-BLOG-ANDA (Header)' type='Header'/>
</b:section>

<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>
<b:section class='header' id='header3' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
</div><!-- end header-wrapper -->

Hasil-nya adalah seperti yang sudah saya coba diblog saya:

Read More >>

Cara Membuat Gambar Transparan

Ada kalanya kita memerlukan tampilan gambar dalam bentuk transparan, misalkan jika kita sedang memerlukan gambar yang akan difungsikan sebagai background atau sekedar untuk variasi tampilan saja.

Untuk membuat gambar menjadi tampak transparan cukup mudah, tinggal ikuti langkah mudah berikut.

1. Kode untuk add gambar biasa adalah seperti terlihat dibawah ini:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY-x2yKkigRC_jUV5aVAviz-6dfoDhTgFOEfQ8C5zdNoIPW2fzdzXw2TikrC7wk85pppSIOaWgZMz_NRLtAJ6ZWbrR2JrV46XDm6NrQCxSGlAoIxf9z42lgwP8ORm7Wl6DN0orn4Bory4/s1600/ayza-profile.jpg" alt="Aksesoris Buatan Sendiri" height="300" width="400" />

Hasilnya:

2. Tambahkan kode style="opacity:0.4;filter:alpha(opacity=40)" pada kode add gambar tadi sehingga kode-nya menjadi:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY-x2yKkigRC_jUV5aVAviz-6dfoDhTgFOEfQ8C5zdNoIPW2fzdzXw2TikrC7wk85pppSIOaWgZMz_NRLtAJ6ZWbrR2JrV46XDm6NrQCxSGlAoIxf9z42lgwP8ORm7Wl6DN0orn4Bory4/s1600/ayza-profile.jpg" alt="Aksesoris Buatan Sendiri" height="300" width="400" style="opacity:0.4;filter:alpha(opacity=40)" />

Hasilnya:

Note: Nilai opacity adalah yang menentukan nilai transparansi-nya, semakin kecil nilainya maka gambar akan semakin transparan.

Dibawah ini adalah setelah nilai opacity-nya kita ganti menjadi 20, bandingkan!!

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY-x2yKkigRC_jUV5aVAviz-6dfoDhTgFOEfQ8C5zdNoIPW2fzdzXw2TikrC7wk85pppSIOaWgZMz_NRLtAJ6ZWbrR2JrV46XDm6NrQCxSGlAoIxf9z42lgwP8ORm7Wl6DN0orn4Bory4/s1600/ayza-profile.jpg" alt="Aksesoris Buatan Sendiri" height="300" width="400" style="opacity:0.2;filter:alpha(opacity=20)" />

Hasilnya:

Read More >>

Cara Membuat Fungsi Scroll Pada Archive Blog

Jika kita telah memiliki banyak sekali posting-an didalam blog kita maka tentunya jumlah archive akan panjang dan kurang enak untuk dilihat. Salah satu cara-nya men-siasati hal ini adalah dengan membuat tampilan archive blog kita menjadi tampilan scroll.

Untuk membuat-nya cukup mudah, ikuti langkah-langkah berikut:

1. Login ke blog anda ---> Dashboard ---> Design ---> Page Element

2. Kalau yang telah mempunyai arsip blog tinggal memastikan pengaturannya dengan Gaya Hierarki. Namun bagi yang belum punya, Klik Tambah Gadget lalu pilih menu Arsip Blog dengan jenis pengaturan yang sama yaitu menggunakan Gaya Hierarki (seperti terlihat pada gambar dibawah ini)

 

3. Klik Edit HTML --> centang Expand Widget Template, kemudian cari kode berikut ini :

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
atau
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'> 
atau  
<b:widget id='BlogArchive1' locked='false' title='Blog Archives' type='BlogArchive'> 
atau kode yang mirip. 

Kode lengkapnya adalah seperti terlihat dibawah ini:

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='toggle' var='interval'>
  <b:if cond='data:interval.toggleId'>
  <b:if cond='data:interval.expclass == &quot;expanded&quot;'>
    <a class='toggle' href='javascript:void(0)'>
      <span class='zippy toggle-open'>&#9660;&#160;</span>
    </a>
  <b:else/>
    <a class='toggle' href='javascript:void(0)'>
      <span class='zippy'>
        <b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
          &#9668;&#160;
        <b:else/>
          &#9658;&#160;
        </b:if>
      </span>
    </a>
  </b:if>
 </b:if>
</b:includable>
<b:includable id='interval' var='intervalData'>
  <b:loop values='data:intervalData' var='i'>
      <ul class='hierarchy'>
        <li expr:class='&quot;archivedate &quot; + data:i.expclass'>
          <b:include data='i' name='toggle'/>
          <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
            <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
          <b:if cond='data:i.data'>
            <b:include data='i.data' name='interval'/>
          </b:if>
          <b:if cond='data:i.posts'>
            <b:include data='i.posts' name='posts'/>
          </b:if>
        </li>
      </ul>
  </b:loop>
</b:includable>
<b:includable id='menu' var='data'>
  <select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
    <option value=''><data:title/></option>
    <b:loop values='data:data' var='i'>
      <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
    </b:loop>
  </select>
</b:includable>
<b:includable id='flat' var='data'>
  <ul class='flat'>
    <b:loop values='data:data' var='i'>
      <li class='archivedate'>
        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
      </li>
    </b:loop>
  </ul>
</b:includable>
<b:includable id='posts' var='posts'>
  <ul class='posts'>
    <b:loop values='data:posts' var='i'>
      <li><a expr:href='data:i.url'><data:i.title/></a></li>
    </b:loop>
  </ul>
</b:includable>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div style='overflow:auto; width:230px; height:300px;'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div></div>
  <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Perhatikan kode yang berwarna merah diatas, kode tersebut adalah kode yang ditambahkan agar fungsi scroll dapat berfungsi pada Blog Archive, parameter width dan height adalah lebar dan tinggi blog archive scroll tersebut yang bisa diatur sesuai keinginan anda.

Read More >>

Cara Membuat Judul Posting Blog Center atau Rata Tengah

Jika anda ingin agar judul-judul posting blog anda menjadi center atau rata tengah, berikut adalah caranya:

1. Login ke dalam Blogger, klik menu Design ---> Edit HTML

2. Scroll kebawah sampai anda menemukan salah satu dari kode dibawah ini (ter-gantung dari template anda) .post h3 {.....} atau .post h3 a {....} atau .post-title{.....} :

.post h3{
margin: 0px 0px 8px 0px;
padding: 0px 0px 1px 0px;
color: $postTitleColor;
font: $postTitleFont;
text-decoration: none;
line-height: 1.4em;
border-bottom: 1px solid $posttitleBorderColor;
 
}

.post h3 a {
color: $postTitleColor;
text-decoration: none;
 
}

.post-title{
color:#FFFFFF;
margin:0 0 10px 0;
padding:0;
font-family:Arial,Helvetica,Sans-serif;
font-size:22px;
line-height:22px;
font-weight:bold;
text-transform:uppercase; 

}

3. Tambahkan kode "text-align: center; " diantara kode-kode diatas (diantara tanda {......} ), sehingga kode-kode diatas menjadi seperti dibawah ini

.post h3{
margin: 0px 0px 8px 0px;
padding: 0px 0px 1px 0px;
color: $postTitleColor;
font: $postTitleFont;
text-decoration: none;
line-height: 1.4em;
border-bottom: 1px solid $posttitleBorderColor;
text-align: center;  
}

.post h3 a {
color: $postTitleColor;
text-decoration: none;
text-align: center;  
}

.post-title{
color:#FFFFFF;
margin:0 0 10px 0;
padding:0;
font-family:Arial,Helvetica,Sans-serif;
font-size:22px;
line-height:22px;
font-weight:bold;
text-transform:uppercase; 
text-align: center; 
}

4. Simpan template anda. Selesai.

Read More >>

Cara Mengubah Tag Heading untuk SEO (Search Engine Optimization) yang Lebih Baik pada Blog

Heading Tag (h1, h2, h3, h4, h5) sangat penting untuk SEO. Semua dari judul Blogger widget (gadgets) menggunakan tags h3 atau h2. Sehingga template blogger menggunakan tag h2 atau h3 untuk judul posting. Jika anda ingin meningkatkan SEO blog atau situs website anda, maka anda perlu menggunakan tag h1 untuk judul posting anda.

Untuk melakukannya ikuti langkah-langkah dibawah ini:

1. Login ke dalam Blogger, klik menu Design ---> Edit HTML

2. Klik "Expand Widget Templates"

3. Scroll kebawah sampai anda menemukan kode dibawah ini:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Note: Jika anda tidak menemukan kode diatas, search dengan mengganti h3 dengan h2.

4. Ganti kode diatas dengan kode dibawah ini:

<b:if cond='data:post.title'>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>

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

6. Copy kode dibawah ini dan paste sebelum kode ]]></b:skin>

h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 {
border-bottom:0px Dotted #000000;
border-top:0px Dotted #000000;
margin:.25em 0 0;
padding:0 0 4px;
font-size:150%;
font-weight:normal;
line-height:1.4em;
color:#1c3c6f;
}

Note: Anda dapat merubah nilai dari kode-kode diatas sesuai dengan template atau kebutuhan anda.

7. Klik "Save Templates" dan selesai.

Read More >>

Cara Meng-embed atau Mencantumkan Audio Music Player kedalam Blog

Jika anda ingin mencantumkan atau meng-embed Audio Music Player kedalam blog anda, berikut adalah kode yang harus dituliskan pada blog:

<embed width="250" height="50" autostart="false" loop="false" playcount="2" src="url-musik-anda"/></embed>

Note: jangan lupa untuk mengubah "url-musik-anda" pada kode diatas dengan url music yang ingin anda play (file extention bisa .mp3, .wav, .mid atau yg lain-nya)

width adalah lebar player music-nya

height adalah tinggi player music-nya

autostart="false" artinya player tidak otomatis dijalankan saat halaman dibaca oleh browser (harus play manual), jika ingin agar player mem-play otomatis saat halaman di-load browser maka kode-nya menjadi autostart="true"

loop="false" artinya saat di-play player tidak akan melooping musik (memutar terus-menerus), jika ingin agar music di-play terus menerus selama halaman blog atau web tersebut dibuka maka ubah kode menjadi loop="true"

playcount="2" artinya musik akan di-play 2 kali.

Read More >>

Cara Membuat Menu atau Submenu Vertical CSS pada Blog

Jika anda menginginkan menu tertampil secara vertical berikut adalah langkah-langkahnya:

1. Login ke dalam Blogger, klik menu Design ---> Edit HTML

2. Scroll kebawah sampai anda menemukan kode <head>.

3. Copy kode dibawah ini dan paste sebelum kode <head>

<style type='text/css'>
ul {list-style: none;
margin: 0;
padding: 0;
}

img {
border: none;
}
#menuvertical {
   width: 200px;
   margin: 10px;
   border-style: solid solid none solid;
   border-color: #000;
   border-size: 1px;
   border-width: 1px;
   }

#menuvertical li a {
   height: 32px;
     voice-family: &quot;\&quot;}\&quot;&quot;;
     voice-family: inherit;
     height: 24px;
   text-decoration: none;
   }

#menuvertical li a:link, #menu4 li a:visited {
   color: #CCC;
   display: block;
   background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6jIqaiAkeCWCKXPl9bzZqKX27vH5N8odsBx23cmDyQ9VPBNMORvmv_ONvJ5o4TLlQYQimStMGXp75JBtWth_gFnSEObCT6Trhw-d3RV2YsttIeQRFwpDZx7q3gHsRH0bWYRhZArE8qKju/);
   padding: 8px 0 0 10px;
   }

#menuvertical li a:hover, #menuvertical li #current {
   color: #FFF;
   background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6jIqaiAkeCWCKXPl9bzZqKX27vH5N8odsBx23cmDyQ9VPBNMORvmv_ONvJ5o4TLlQYQimStMGXp75JBtWth_gFnSEObCT6Trhw-d3RV2YsttIeQRFwpDZx7q3gHsRH0bWYRhZArE8qKju/) 0 -32px;
   padding: 8px 0 0 10px;
   }
</style>

4. Simpan template anda

5. Klik menu Design ---> Page Element ---> klik "Add a gadget".

6. Pilih "HTML/Java Script" dan paste kode dibawah ini kedalamnya.

<div id="menuvertical">
<ul>

<li><a href="#">Home</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Java Script</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>

</ul>
</div>

Note: Ubah # sesuai dengan url blog anda

7. Selesai. Tampilannya akan seperti gambar dibawah ini.

CSS Black Vertical Menu

Sumber: http://www.bloggertipandtrick.net

Read More >>

Cara Membuat Search Box atau Find Box atau Kotak Pencari pada Blog atau Website

Cara membuat search box atau find box atau kotak pencari pada blog atau website adalah sebagai berikut:

1. Login ke dalam Blogger, klik menu Design ---> Edit HTML

2. Scroll kebawah sampai anda menemukan kode <head>.

3. Copy kode dibawah ini dan paste sebelum kode <head>

<style type='text/css'>

div#search { background: transparent url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh02tLwO3rM-Q8h-f8eGadkxWuyfvemalk4L9WokbQowIMfDOu33tv-5kx_QN6l5kGxjoxE5T9RSDyfld4DXTbintlfVd6UutM06B-eYepingVW40YCudeakb4q7RXyQe8VwYBlDsc7q33N/&#39;) no-repeat scroll left top;margin: 0; float: right; width: 320px; height: 44px; }

div#search form { height: 44px; }
div#search form p { display: block; margin: 0; padding: 14px 0 0 30px; }
div#search form p input { width: 285px; border: 0; background: transparent none; color: #ffffff; }

</style>

4. Simpan template anda

5. Klik menu Design ---> Page Element ---> klik "Add a gadget".

6. Pilih "HTML/Java Script" dan paste kode dibawah ini kedalamnya.

<div id='search'>
<form action="http://ayza2004.blogspot.com/search" id='search form' method='get'>

<p><input id='searchform' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Type your search here...&quot;;}' onfocus='if (this.value == &quot;Type your search here...&quot;) {this.value = &quot;&quot;}' type='text' value='Type your search here...'/></p>

</form>
</div>

Note : Ubah "ayza2004.blogspot.com" dengan blog anda.

Selesai.

Tampilannya adalah seperti terlihat dibawah ini.

Read More >>

Cara Membuat Menu atau Submenu Horizontal Tipe Pure CSS

Jika ada ingin membuat menu atau submenu, berikut ini adalah salah satunya yaitu Menu Horizontal Pure CSS, langkah-langkahnya adalah:

1. Login ke dalam Blogger, klik menu Design ---> Edit HTML

2. Scroll kebawah sampai anda menemukan kode <head>.

3. Copy kode dibawah ini dan paste sebelum kode <head>

<style type='text/css'>

div#navmenu { margin: 0 0 0 0px; padding: 0; height: 44px; float: left;overflow:hidden;background-color:#323232;width:100%; }
div#navmenu ul { display: block; margin: 0; padding: 0 0 0 2px; height: 44px; float: left; }
div#navmenu ul li { display: block; margin: 0; padding: 0 2px 0 0; float: left; height: 44px; }
div#navmenu ul li a, div#navmenu ul li a:visited {
display: block; margin: 0; padding: 5px 0 0 0; height: 39px; line-height: 39px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px; text-transform: uppercase;
color: #ffffff;float: left;
}
div#navmenu ul li a span, div#navmenu ul li a:visited span {
display: block; float: left; margin: 0; padding: 0 0 0 26px;
height: 39px; line-height: 39px;
color: #ffffff;
}
div#navmenu ul li a span span, div#navmenu ul li a:visited span span {
display: block; float: left; margin: 0; padding: 0 26px 0 0;
height: 39px; line-height: 39px;
color: #ffffff;
}
div#navmenu ul li a:hover, div#navmenu ul li.current_page_item a, div#navmenu ul li.current_page a:visited {
color: #ff9600;
background: transparent url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIUQo5pPXES2HO6bx6KW9yGnlEF_NEnGkzl-Osra6GsA6zlBkkT2-hMOTdL39J_uMoAtIFE0OkAWvXflX082iC9eGYd1h0XnSaZRENdhfRk1DsROh6SP6OeDT8y4X3WjFITsO2_DoSUdrm/&#39;) repeat-x scroll left bottom; text-decoration: none;
}
div#navmenu ul li a:hover span, div#navmenu ul li.current_page_item a span, div#navmenu ul li.current_page_item a:visited span {
background: transparent url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCNqX_mZeMl4SNl7A765zwGTCkaKDvje9NunL2eqQLZpvtW0hdEZ5stU_LjQ4tDtl0Hc9J5VmDE0rD4gZJpk5-mdMgpmuZX03dxyRZXhId_PMricOsBIFgFI1vYi9EGGOgJGQ6MUwnDgS8/&#39;) no-repeat scroll left bottom; text-decoration: none;
color: #ff9600;
}
div#navmenu ul li a:hover span span, div#navmenu ul li.current_page_item a span span, div#navmenu ul li.current_page_item a:visited span span {
background: transparent url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1kTI64MSFWCSgflrWa-nz0DwSApm7zcx-9naqU6iz83t6ucje6VCjyAEOKl_U5vyiNf8JPR_TKzG9G2DOTHfIRu_56H9medrhA-mILxpsgGj5ou4fqHiWHjQsoHxVRD484ll_MwQbHluU/&#39;) no-repeat scroll right bottom; text-decoration: none;
color: #ff9600;
}

</style>

4. Simpan template anda

5. Klik menu Design ---> Page Element ---> klik "Add a gadget".

6. Pilih "HTML/Java Script" dan paste kode dibawah ini kedalamnya.

<div id='navmenu'>
<ul>

<li class='current_page_item'><a href='#'><span><span>Home</span></span></a></li>

<li class='page_item page-item-2'><a href='#' title='HTML Tutorials'><span><span>HTML</span></span></a></li>

<li class='page_item page-item-3'><a href='#' title='CSS Tutorials'><span><span>CSS</span></span></a></li>

<li class='page_item page-item-4'><a href='#' title='JS Tutorials'><span><span>Java Script</span></span></a></li>

<li class='page_item page-item-5'><a href='#' title='About us'><span><span>About</span></span></a></li>

<li class='page_item page-item-6'><a href='#' title='Contact us'><span><span>Contact</span></span></a></li>

</ul>
</div>

Selesai.

Tampilannya adalah seperti terlihat dibawah ini.

Sumber: http://www.bloggertipandtrick.net

Read More >>

Cara Membuat Refresh Otomatis pada Blog atau Website

Jika ada ingin agar blog atau website anda melakukan refresh otomatis dengan periode waktu tertentu, berikut adalah cara-caranya:

1. Login ke dalam Blogger, klik menu Design ---> Edit HTML

2. Scroll kebawah sampai anda menemukan kode <head>.

3. Copy kode dibawah ini dan paste setelahkode <head>

<meta HTTP-EQUIV='refresh' content='15;URL=http://ayza2004.blogspot.com'/>

Note: ubah  http://ayza2004.blogspot.com dengan alamat blog atau website anda.

15 adalah periode waktu refresh 15 detik. 

4. Simpan template anda. Selesai

Read More >>

Cara Membuat Slide Show untuk Gambar pada Blog

Jika anda ingin membuat tampilan gambar dalam slide show ikuti langkah-langkah mudah dibawah ini:

1. Login ke dalam Blogger, klik menu Design ---> Edit HTML

2. Scroll kebawah sampai anda menemukan kode <head>.

3. Copy kode dibawah ini dan paste sebelum kode <head>

<script type='text/javascript'>
//<![CDATA[

//** Featured Content Slider script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** May 2nd, 08'- Script rewritten and updated to 2.0.
//** June 12th, 08'- Script updated to v 2.3, which adds the following features:
 //1) Changed behavior of script to actually collapse the previous content when the active one is shown, instead of just tucking it underneath the later.
 //2) Added setting to reveal a content either via "click" or "mouseover" of pagination links (default is former).
 //3) Added public function for jumping to a particular slide within a Featured Content instance using an arbitrary link, for example.

//** July 11th, 08'- Script updated to v 2.4:
 //1) Added ability to select a particular slide when the page first loads using a URL parameter (ie: mypage.htm?myslider=4 to select 4th slide in "myslider")
 //2) Fixed bug where the first slide disappears when the mouse clicks or mouses over it when page first loads.

var featuredcontentslider={

//3 variables below you can customize if desired:
ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="loading.gif" /> Fetching slider Contents. Please wait...</div>',
bustajaxcache: true, //bust caching of external ajax page after 1st request?
enablepersist: true, //persist to last content viewed when returning to page?

settingcaches: {}, //object to cache "setting" object of each script instance

jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually.
this.turnpage(this.settingcaches[fcsid], pagenumber)
},

ajaxconnect:function(setting){
var page_request = false
if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
 try{
 page_request = new ActiveXObject("Microsoft.XMLHTTP")
 }
 catch (e){}
}
}
else if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else
return false
var pageurl=setting.contentsource[1]
page_request.onreadystatechange=function(){
featuredcontentslider.ajaxpopulate(page_request, setting)
}
document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg
var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', pageurl+bustcache, true)
page_request.send(null)
},

ajaxpopulate:function(page_request, setting){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(setting.id).innerHTML=page_request.responseText
this.buildpaginate(setting)
}
},

buildcontentdivs:function(setting){
var alldivs=document.getElementById(setting.id).getElementsByTagName("div")
for (var i=0; i<alldivs.length; i++){
if (this.css(alldivs[i], "contentdiv", "check")){ //check for DIVs with class "contentdiv"
 setting.contentdivs.push(alldivs[i])
  alldivs[i].style.display="none" //collapse all content DIVs to begin with
}
}
},

buildpaginate:function(setting){
this.buildcontentdivs(setting)
var sliderdiv=document.getElementById(setting.id)
var pdiv=document.getElementById("paginate-"+setting.id)
var phtml=""
var toc=setting.toc
var nextprev=setting.nextprev
if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){
for (var i=1; i<=setting.contentdivs.length; i++){
 phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> '
}
phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '')
pdiv.innerHTML=phtml
}
var pdivlinks=pdiv.getElementsByTagName("a")
var toclinkscount=0 //var to keep track of actual # of toc links
for (var i=0; i<pdivlinks.length; i++){
if (this.css(pdivlinks[i], "toc", "check")){
 if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents)
  pdivlinks[i].style.display="none" //hide this toc link
  continue
 }
 pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc link
 pdivlinks[i][setting.revealtype]=function(){
  featuredcontentslider.turnpage(setting, this.getAttribute("rel"))
  return false
 }
 setting.toclinks.push(pdivlinks[i])
}
else if (this.css(pdivlinks[i], "prev", "check") || this.css(pdivlinks[i], "next", "check")){ //check for links with class "prev" or "next"
 pdivlinks[i].onclick=function(){
  featuredcontentslider.turnpage(setting, this.className)
  return false
 }
}
}
this.turnpage(setting, setting.currentpage, true)
if (setting.autorotate[0]){ //if auto rotate enabled
pdiv[setting.revealtype]=function(){
 featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
}
sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on
 featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
}
setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation
this.autorotate(setting)
}
},

urlparamselect:function(fcsid){
var result=window.location.search.match(new RegExp(fcsid+"=(\\d+)", "i")) //check for "?featuredcontentsliderid=2" in URL
return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
},

turnpage:function(setting, thepage, autocall){
var currentpage=setting.currentpage //current page # before change
var totalpages=setting.contentdivs.length
var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage)
turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust
if (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedly
return
setting.currentpage=turntopage
setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex
this.cleartimer(setting, window["fcsfade"+setting.id])
setting.cacheprevpage=setting.prevpage
if (setting.enablefade[0]==true){
setting.curopacity=0
this.fadeup(setting)
}
if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete)
setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.prevpage, setting.currentpage)
}
setting.contentdivs[turntopage-1].style.visibility="visible"
setting.contentdivs[turntopage-1].style.display="block"
if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[setting.prevpage-1], "selected", "remove")
if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[turntopage-1], "selected", "add")
setting.prevpage=turntopage
if (this.enablepersist)
this.setCookie("fcspersist"+setting.id, turntopage)
},

setopacity:function(setting, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)
var targetobject=setting.contentdivs[setting.currentpage-1]
if (targetobject.filters && targetobject.filters[0]){ //IE syntax
if (typeof targetobject.filters[0].opacity=="number") //IE6
 targetobject.filters[0].opacity=value*100
else //IE 5.5
 targetobject.style.filter="alpha(opacity="+value*100+")"
}
else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
targetobject.style.MozOpacity=value
else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
targetobject.style.opacity=value
setting.curopacity=value
},

fadeup:function(setting){
if (setting.curopacity<1){
this.setopacity(setting, setting.curopacity+setting.enablefade[1])
window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50)
}
else{ //when fade is complete
if (setting.cacheprevpage!=setting.currentpage) //if previous content isn't the same as the current shown div (happens the first time the page loads/ script is run)
 setting.contentdivs[setting.cacheprevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.cacheprevpage, setting.currentpage)
}
},

cleartimer:function(setting, timervar){
if (typeof timervar!="undefined"){
clearTimeout(timervar)
clearInterval(timervar)
if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn't the same as the current shown div
 setting.contentdivs[setting.cacheprevpage-1].style.display="none"
}
}
},

css:function(el, targetclass, action){
var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
if (action=="check")
return needle.test(el.className)
else if (action=="remove")
el.className=el.className.replace(needle, "")
else if (action=="add")
el.className+=" "+targetclass
},

autorotate:function(setting){
window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting, "next")}, setting.autorotate[1])
},

getCookie:function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},

setCookie:function(name, value){
document.cookie = name+"="+value

},


init:function(setting){
var persistedpage=this.getCookie("fcspersist"+setting.id) || 1
var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index
this.settingcaches[setting.id]=setting //cache "setting" object
setting.contentdivs=[]
setting.toclinks=[]
setting.topzindex=0
setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1)
setting.prevpage=setting.currentpage
setting.revealtype="on"+(setting.revealtype || "click")
setting.curopacity=0
setting.onChange=setting.onChange || function(){}
if (setting.contentsource[0]=="inline")
this.buildpaginate(setting)
if (setting.contentsource[0]=="ajax")
this.ajaxconnect(setting)
}

}

//]]>
</script>

<style>
#slider4{
border: 2px solid #181818;
background: #ffffff;
margin-left: 9px;
}
#paginate-slider4{
border-color: #181818;
margin-left: 9px;
margin-top: 4px;
}
#paginate-slider4 a img{
width: 80px;
height: 60px;
border: 2px solid #181818;
margin-top: 5px;
}
#paginate-slider4 a img:hover, #paginate-slider4 a.selected img{
border: 2px solid #ffc04e;
}
.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 10px solid navy;
width: 500px; /*width of featured content slider*/
height: 325px;
}
.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0;  /*leave as is*/
top: 0;  /*leave as is*/
padding: 5px;
background: white;
width: 500px; /*width of content DIVs within slider. Total width should equal slider&#39;s inner width */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
.pagination{
width: 500px; /*Width of pagination DIV. Total width should equal slider&#39;s outer width */
text-align: right;
background-color: #ffffff;
padding: 0px 5px;
}
.pagination a{
padding: 0 5px;
text-decoration: none;
color: #181818;
background: #ffffff;
}
.pagination a:hover, .pagination a.selected{
color: #181818;
background-color: #ffffff;
}
</style>

Note: anda dapat mengubah lebar, tinggi sesuai keinginan anda

4. Simpan template anda

5. Klik menu Design ---> Page Element ---> klik "Add a gadget".

6. Pilih "HTML/Java Script" dan paste kode dibawah ini kedalamnya.

<div style="float:left;">

<div id="slider4" class="sliderwrapper">

<div style="background: url('IMAGE-1-LINK') center left no-repeat" class="contentdiv">
</div>

<div style="background: url('IMAGE-2-LINK') center left no-repeat" class="contentdiv">
</div>

<div style="background: url('IMAGE-3-LINK') center left no-repeat" class="contentdiv">
</div>

<div style="background: url('IMAGE-4-LINK') center left no-repeat" class="contentdiv">
</div>

<div style="background: url('IMAGE-5-LINK') center left no-repeat" class="contentdiv">
</div>

</div>

<div id="paginate-slider4">

<a href="#" class="toc"><img alt="IMAGE-1" src="IMAGE-1-THUMBNAIL-LINK"/></a>

<a href="#" class="toc"><img alt="IMAGE-2" src="IMAGE-2-THUMBNAIL-LINK"/></a>

<a href="#" class="toc"><img alt="IMAGE-3" src="IMAGE-3-THUMBNAIL-LINK"/></a>

<a href="#" class="toc"><img alt="IMAGE-4" src="IMAGE-4-THUMBNAIL-LINK"/></a>

<a href="#" class="toc"><img alt="IMAGE-5" src="IMAGE-5-THUMBNAIL-LINK"/></a>

</div>

<script type="text/javascript">
featuredcontentslider.init({
id: "slider4", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.1], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>

</div>

Note : Ubah IMAGE-X-LINKs and IMAGE-X-THUMBNAIL-LINKs dengan link gambar anda.

7. Selesai

Anda bisa melihat demo-nya disini


Sumber: http://www.bloggertipandtrick.net

Read More >>