Cara membuat Tulisan dan gambar Berjalan Di Blog Dan Bewarna warni

• Silahkan Masuk ke blogger anda.
• Klik Menu Tata Letak, Klik Tombol Add Gadget HTML untuk menambahkan gadget baru.
• Paste Kode Dibawah.
• Klik Tombol Simpan.

Berikut Script kodenya:

Tulisan Bergerak Bergerak kekanan (Ganti dengan Teks Anda)
Untuk Tulisan Bergerak Ke Kanan Berikut Scricpt Kodenya:
<marquee direction="right"><span style="color: rgb(255, 0, 0); font-weight: bold;">Tulisan Bergerak Bergerak kekanan (Ganti dengan Teks Anda)</span></marquee>


Tulisan Bergerak Ke Kanan dan Kekiri (Ganti dengan Teks anda)

Untuk Tulisan Bergerak Ke Kanan Dan Kekiri Berikut Scricpt Kodenya:
<marquee direction="left" behavior="alternate"><span style="color:red; font-weight: bold;">Tulisan Bergerak Ke Kanan dan Kekiri (Ganti dengan Teks anda)</span></marquee>


Tulisan Bergerak kekanan Perlahan (Ganti dengan teks anda)Untuk Tulisan Bergerak Ke Kanan Perlahan Berikut Scricpt Kodenya:
<marquee direction="right" scrolldelay="500"><span style="color:red; font-weight: bold;">Tulisan Bergerak kekanan Perlahan (Ganti Dengan Teks Anda)</span></marquee>

Tulisan Bergerak Ke Kanan dan Kekiri Dan Bisa Di stop (Ganti dengan Teks Anda) 
Untuk Tulisan Bergerak Ke Kanan dan Kekiri Bisa di stop Berikut Scricpt Kodenya:
<marquee direction="left" behavior="alternate" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" width="95%"><span style="color:red; font-weight: bold;">Tulisan Bergerak Ke Kanan dan Kekiri Dan Bisa Di stop (Ganti dengan Teks Anda)</span></marquee>

Tulisan Bergerak Ke Atas(Ganti dengan Teks anda) 
Untuk Tulisan Bergerak Ke Atas Berikut Scricpt Kodenya:
<marquee align="center" direction="up" height="100" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="95%"><span style="color: red; font-weight: bold;">Tulisan Bergerak Ke Atas(Ganti dengan Teks anda)</span></marquee>

Tulisan Bergerak Ke Atas dan Ke bawah(Ganti dengan Teks Anda) 
Untuk Tulisan Bergerak Ke Atas Berikut Scricpt Kodenya:
<marquee align="center" direction="up" behavior="alternate" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" height="100" width="95%"><span style="color:red; font-weight: bold;">Tulisan Bergerak Ke Atas dan Ke bawah(Ganti dengan Teks Anda)</span></marquee>

Keterangan:
Ganti Kode berwarna Merah dengan Teks yang anda mau, Ganti kode berwarna Biru dengan warna yang anda Mau (Pilihan warna Ada Dibawah).

• Merah= red
• Biru= blue
• Kuning= yellow
• Putih= white
• Hitam= black

Bisa Diganti dengan kode warna

• <span style="color:red; font-weight: bold;"> menjadi <span style="color:#f00; font-weight: bold;">
• Ini Kode warnanya:
• Merah= #f00;
• Biru= #00f;
• Hijau= #0f0;
• Ungu= #f0f;
• Dan masih banyak lagi.

Untuk itu silahkan di coba-coba kode warna yang lain.

Untuk Gambar yang bisa berjalan Ke Kiri berikut Scriptnya:
<marquee direction="right"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid3BHeqL3BIBMeRHYT43ij6tHn8puxnLaZvXehlATPPl7dTlYe5Qwa5r7Y4pMUhj-ztuECJfhWXzEpDRqQNahok5fwM_cej2jMqmhb7ORcpsTnPTg4TrywbM_DiQvoH1T1nKqIh_X07LA/s1600/Blog.jpg" /></marquee>


Gambar Diatas Merupakan Contoh Gambar Berjalan.

Selamat Mencoba,
Salam Sukses.

http://your-belajarblog.blogspot.com/2013/01/cara-membuat-tulisan-dan-gambar.html

================================================================================

Cara membuat tulisan berjalan (Marquee) di blog memang sangatlah mudah. Kenapa tulisan berjalan juga disebut Marquee? karena untuk membuat tulisan berjalan itu menggunakan kode Marquee. Marquee berguna untuk mempercantik tampilan blog sehingga pengunjung bisa lebih suka dengan blog anda.

Perlu anda ketahui bahwa kode dasar Marquee adalah..

<marquee>TEKS YANG BERGERAK</marquee>  

Kode diatas menjadi seperti ini
TEKS YANG BERGERAK 
Jadi, dengan mengerti kode dasar diatas, anda bisa membuat bermacam-macam variasi kode Marquee.. Sebelum membahas ke variasi kode Marquee. Mari kita bahas terlebih dahulu cara pemasangannya.. Ada 2 tempat untuk pemasangan kode Marquee ini, yaitu untuk Widget dan artikel..

Cara pemasangan kode Marquee pada artikel

1. Di bagian edit entri atau entri baru, silahkan ubah dari Mode Compose ke mode HTML
2. Silahkan masukkan kode Marquee di mode HTML
3. Cek posisi teks di mode Compose
4. Untuk melihat apakah kode berjalan, silahkan klik Pratinjau. 

Cara pemasangan kode Marquee pada widget 

1. Login ke akun blogger anda
2. Masuk ke menu Tata Letak, Klik tambahkan gadget
3. Silahkan pilih HTML/Java Script
4. Masukkan kode Marquee yang anda pilih
5. Silahkan klik Simpan
6. Kemudian silahkan cek apakah kode sudah bekerja.

Supaya lebih jelas dan tidak bingung, kita bahas terlebih dahulu cara mengubah warna , huruf, dan ukuran pada teks. Ikuti langkah-lenglah berikut..

Kode dasarnya adalah
style="font-family: Arial; font-size:20px; color:#800C0C;"

1. Arial adalah jenis huruf
2. 20px adalah ukuran huruf
3. #f2f2f2 adalah warna huruf

Silahkan ubah sesuai dengan keinginan anda

Contoh kode nya seperti ini..
<marquee bgcolor="pink" style="font-family: Arial; font-size:20px; color:#800C0C;">CONTOH BACKGROUND AREA TEKS</marquee>

Hasilnya akan terlihat seperti ini..
CONTOH BACKGROUND AREA TEKS

Jadi, mari kita bahas saja variasi kode Marquee ini. Berikut ini adalah varias-variasi kode Marquee nya.. 

Kode Marquee untuk mengatur pengulangan Rotasi

kode loop="angka|-1|infinite" digunakan untuk pengulangan berotasi pada Marquee.. Setelah berotasi sesuai angka yang ditentukan, maka teks tersebut akan hilang.
Contoh kodenya seperti ini:
<marquee loop="6">TEKS BEROTASI 6 KALI</marquee>

Hasilnya akan terlihat seperti ini..
TEKS BEROTASI 6 KALI

Kode Marquee untuk mengatur lebar teks

Kode width="angka lebar" berguna untuk mengatur lebar dari kode teks yang yang akan berjalan. Bisa anda atur 50% untuk setengah bidang saja, atau bisa 25% untuk seperempat bidang teks berjalan saja.

Contoh kodenya seperti ini:
<marquee width="50%">LEBAR TEKS BERJALAN HANYA SETENGAH BIDANG</marquee>

Keterangan: Angka 50% bisa anda ganti sesuai lebar bidang yang anda inginkan.

Hasilnya akan terlihat seperti ini
LEBAR TEKS BERJALAN HANYA SETENGAH BIDANG 

Kode Marquee untuk memberi link pada teks

Kode dasar seperti ini..
onmouseover="this.stop()" onmouseout="this.start()"

Contoh kodenya seperti ini:
<marquee direction="left"onmouseover="this.stop()" onmouseout="this.start()"><a href="http://seoterpadu.blogspot.com/2013/07/cara-membuat-tulisan-berjalan-marquee.html">CARA MEMBUAT TULISAN BERJALAN</a></marquee>

Hasilnya akan terlihat seperti ini..
CARA MEMBUAT TULISAN BERJALAN

Kode Marquee untuk mengatur background pada jalur teks

Kode bgcolor="warna" berguna untuk memberikan warna background pada area teks berjalan.

Contoh kodenya seperti ini:
<marquee bgcolor="pink">CONTOH BACKGROUND AREA TEKS</marquee>

Keterangan: pink bisa anda ganti sesuai warna yang anda inginkan. Misalnya blue, yellow, red, dan lain-lain. 

Hasilnya akan terlihat seperti ini
CONTOH BACKGROUND AREA TEKS

Kode Marquee untuk mengatur kecepatan jeda

Kode scrolldelay="angka jeda" berfungi untuk mengatur kecepatan jeda dalam milidetik.

Contoh kodenya seperti ini:
<marquee scrolldelay="750">TEKS BERJALAN DALAM JEDA 0,75 DETIK</marquee> 

Keterangan: Angka 750 itu untuk jeda dalam 0,75 detik. Jadi silahkan ganti 1000 untuk 1 detik, 2000 untuk 2 detik, dan seterusnya..

Hasilnya akan terlihat seperti ini..
TEKS BERJALAN DALAM JEDA 0,75 DETIK

Kode Marquee untuk memberi Alt Title pada area teks berjalan

Kode title="pesan" berfungsi untuk memberi pesan pada saat kursor diarahkan ke area teks berjalan. Atau nama lainnya yaitu Alt Title.

Contoh kodenya seperti ini:
<marquee title="TEKS YANG AKAN MUNCUL JIKA KURSOR DIARAHKAN KE AREA TEKS BERJALAN">TEKS YANG BERJALAN DENGAN PESAN</marquee>

Hasilnya seperti ini.. 
TEKS YANG BERJALAN DENGAN PESAN

Kode Marquee untuk mengatur kecepatan teks berjalan

Kode scrollamount="angka" berguna untuk mengatur kecepatan laju teks yang berjalan.

Contoh kodenya seperti ini:
<marquee scrollamount="12">KECEPATAN TEKS YANG BERJALAN 12</marquee> 

Keterangan: angka 12 bisa anda ganti sesuai kecepatan yang anda sukai. Semakin besar angka maka akan semakin cepat.

Hasilnya akan terlihat seperti ini..
KECEPATAN TEKS YANG BERJALAN 12

Kode Marquee untuk mengatur arah teks bergerak

Kode direction="left/right/up/down" berguna untuk mengatur arah pergerakan teks.

Contoh kode nya seperti ini:
<marquee direction="left">TEKS AKAN BERGERAK KE KIRI</marquee>

Keterangan: left bisa anda ganti sesuai arah teks berjalan yang anda inginkan.

Hasilnya akan terlihat seperti ini..
TEKS AKAN BERGERAK KE KIRI

Kode Marquee untuk mengatur teks berhenti jika dilintasi mouse

Kode dasar untuk mengatur teks agar berhenti jika dilintasi mouse adalah
onmouseover="this.stop()" onmouseout="this.start()"

Contoh kodenya seperti ini:
<marquee direction="left"onmouseover="this.stop()" onmouseout="this.start()">TEKS BERGERAK KE KIRI DAN AKAN BERHENTI JIKA DILINTASI MOUSE</marquee> 

Hasilnya akan terlihat seperti ini..
TEKS BERGERAK KE KIRI DAN AKAN BERHENTI JIKA DILINTASI MOUSE

Jadi itulah, beberapa macam variasi kode Marquee. Semoga bermanfaat untuk anda. Dan terima kasih sudah mau berkunjung ke blog ini.

- See more at: http://www.seoterpadu.com/2013/07/cara-membuat-tulisan-berjalan-marquee.html#sthash.ZP2VeVEZ.dpuf

http://www.seoterpadu.com/2013/07/cara-membuat-tulisan-berjalan-marquee.html

==============================================================================

Halo para blogger kali ini saya akan ngepost tentang Cara membuat tulisan warna warni berjalan di blog .

1. Login ke akun blogger sobat
2. Tata letak
3. Tambahkan gadget
4. Pilih HTML/javascript.

5. Copy kode di bawah ini :

<div><script src="http://www.widgeo.net/message.php?msg= Teks yang diganti &adult=0&cat=voyage&big=big&cl=rainbow3"></script><br />
<noscript><a href="http://goo.gl/uHPE3">widget</a></noscript>
<a href="http://goo.gl/uHPE3"><img alt="widget" border="0" src="http://www.widgeo.net/img/logopm.png" /></a></div>

http://syeftiandro.blogspot.com/2013/06/cara-membuat-tulisan-warna-warni.html

================================================================

Membuat 3 Kolom di Bawah Header Blogspot

Apa teman-teman blogger semua ingin tampilan blognya tambah ramai? Kali ini saya akan menjelaskan sedikit tentang bagaimana cara membuat ramai blog teman-teman semua, salah satunya dengan membuat tiga kolom di bawah header. Widget 3 kolom dibawah header ini sebenarnya bisa Anda tambahkan jika pada bagian sidebar template sudah penuh dan terlalu panjang. Sebagai alternatif untuk meletakkan kode html ataupun javascript yang mungkin andaperlukan. Kurang lebih sama dengan postingan saya yang dulu tentang membuat multi kolom yang diletakkan di bagian bawah blog, namun kali ini saya meletakkannya bagian atas atau tepatnya dibawah header.

Baiklah langsung menuju lokasi pengeditan template-nya.

• Silahkan login ke blogger.
• Tuju Tata Letak.
• Pilih tab Edit HML.
• Jangan di klik Expand Template Widget, karena akan memusingkan anda.
• Letakkan kode css berikut ini diatas kode ]]></b:skin>
  

  /* –- Top --*/

  #top {

  background:#fff;

  margin-top:10px auto;

  width:960px;

  overflow:hidden;

  font-size:12px;

  padding:10px;

  }

  #top h2 {

  background:#000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x;

  font-size:14pt;

  font-weight:400;

  text-align:center;

  font-style:normal;

  line-height:1.3em;

  color:#fff;

  padding:5px;

  margin-top:-10px;

  margin-left:-10px;

  margin-right:-10px;

  }

  #top ul {

  color:#333;

  margin:0;

  padding:0;

  }

  #top ul li {

  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZrpOonRK4YzjCqZUbc1BHtn6wjHqBvsMCLXYE3rB7tkz0S9apwY-4lARWV9uglQtF-eOtCO-tFitXjAG8d8rIWi0z8YnsJQ6YeYn42UUegkX7Sr1V2UHqbMmSh5nsCR-BhArbKS-pYxSi/s320/b3.gif) no-repeat;

  list-style-type:none;

  border-bottom:1px dashed #CCC;

  margin:0 0 10px;

  padding:0 0 5px 20px;

  }

  #top ul li a:hover {

  margin:0px 0px 5px;

  padding:0px;

  }

  #topcenter {

  width:300px;

  float:left;

  margin-left:10px;

  background:#fff;

  padding:10px

  }

  #topleft {

  width:280px;

  float:left;

  margin-left:10px;

  background:#fff;

  padding:10px;

  }

  #topright {

  width:280px;

  float:right;

  margin-left:10px;

  background:#fff;

  padding:10px;

  }

• Cari kode yang mirip seperti ini, biasanya letaknya dibawah </head>

  <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>

• Kemudian letakkan kode berikut ini tepat setelah kode diatas :

  <div id='top'>

  <b:section class='top' id='topleft' preferred='yes' showaddelement='yes'>

  </b:section>

  <b:section class='topcenter' id='topcenter' preferred='yes' showaddelement='yes'>

  </b:section>

  <b:section class='topright' id='topright' preferred='yes' showaddelement='yes'>

  </b:section>

  </div>

• Simpan Template.

Semoga bermanfaat dan bisa membuat blog anda jadi ramai.

Pasang Banner di Header Blog

Selamat siang teman-teman blogger semua, gimana nih kabarnya? Baik bukan? Nah, kalau teman-teman semua dalam keadaan baik, kali ini saya akan memberikan sebuah turorial bagaimana cara pasang banner di blog kita. Mungkin diantara temen-temen sekalian udah ada yang tahu, tapi ada baiknya kalau saya langsung tulis aja postingannya. Memasang banner merupakan sebuah keinginan yang saya anggap wajar bagi seorang pemilik blog, karena sudah barang tentu merupakan suatu kebahagiaan tersendiri apabila banner yang sangat kita sukai dapat di tempatkan pada blog kebanggan kita. Jika ada pertanyaan lain “apakah kita bisa mengganti atau menambahkan banner sendiri kedalam blog?” jawabannya adalah bisa, akan tetapi tentunya kita harus sedikit bercape ria mengotak-atik kode template.

Lagi-lagi karena template terbagi dua yaitu template klasik dan template baru, maka saya akan membagi dua bahasan tentang bagaimana caranya menambahkan atau mengganti banner yang ada di header. Sebelum menginjak kepada proses editting template, langkah awal tentunya sobat harus mempunyai banner yang akan di pakai. Untuk membuat sebuah banner, sobat bisa menggunakan berbagai program desain grafis yang sobat kuasai, apakah itu photoshop, coreldraw, ataupun program-program yang lainnya yang sejenis yang penting judulnya adalah program yang bisa membuat banner. Karena template bentuknya ratusan atau bahkan mungkin ribuan, tentunya tulisan ini tidak akan bisa mewakili untuk pemakaian template, akan tetapi mungkin akan sedikit memberi gambaran bagaimana cara menambahkan atau merubah banner yang ada di header. Sebagai proyek percontohan (kaya kerjaan saja ya pake proyek segala), saya akan mengambil contoh template Minima yang di desain oleh Douglas Bowman, dan template ini merupakan template asli blogger.  

Untuk Template Klasik

Seperti yang saya sebutkan di awal bahwa langkah pertama yang dilakukan adalah membuat banner, gambar banner terserah kepada sobat, mau gambar pemandangan, laut, atau photo sobat sendiri juga boleh. Langkah kedua adalah meng upload banner tersebut, bisa di upload ke blogger sendiri atau ke hosting lain. Untuk upload gambar atau banner anda bisa diilakukan dengan google sites atau photobucket. Sebagai contoh, saya sudah upload banner di www.photbucket.com dan mempunyai alamat banner seperti ini : http://i162.photobucket.com/albums/t253/kolis212/banner_8.gif dan gambar bannernya seperti ini ((ukuran aslinya 468 x 60)

Untuk cara penempatannya silahkan ikuti langkah-langkah berikut :

1. Sign in di blogger
2. Klik menu Template
3. Klim menu Edit HTML
4. Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian save, ini sebagai backup data apabila kita melakukan kesalahan dalam proses edtitting template
5. Sisipkan kode berikut pada style sheet css sobat. Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan

/* Header ———————————————– */
@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background:url(http://i162.photobucket.com/albums/t253/kolis212/banner_8.gif) no-repeat top center;
}
}

Jika sobat ingin menghapus garis yang berada di tepi banner, sobat harus menghapus kode berikut :

#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #eee; <– hapus (delete)
border-width:1px 1px 0; <– hapus (delete)
font-size:200%;
line-height:1.2em;
font-weight:normal;
color:#666;
text-transform:uppercase;
letter-spacing:.2em;
}
#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee; <– hapus (delete)
border-width:0 1px 1px; <– hapus (delete)
max-width:700px;
font:78%/1.4em “Trebuchet MS”,Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

1. Klik tombol Pratinjau untuk melihat perubahan
2. Jika sudah OK, klik tombol Simpan Perubahan Template
3. Selesai.

Untuk template baru

Bagi anda pengguna template baru, bisa menggunakan dua cara.
Cara pertama :

1. Sign in di blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
5. Klik kotak kecil di samping tulisan Expand Template Widget
6. Tunggu beberapa saat sampai proses selesai
7. Tambahkan kode berikut pada style sheet css sobat.Yang warna abu-abu adalah kode asli dan yang merah adalah kode yang harus di tambahkan

/* Header ———————————————–
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;

background:url(http://i162.photobucket.com/albums/t253/kolis212/banner_8.gif)no-repeat top center;

}
}

1. Klik tombol Pratinjau untuk melihat perubahan yang ada
2. Bila sudah OK, klik tombol SIMPAN TEMPLATE
3. Selesai.

Langkahnya diatas sama dengan yang di template klasik.

Cara kedua :

1. Sign in di blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
5. Klik kotak kecil di samping tulisan Expand Template Widget
6. Tunggu beberapa saat sampai proses selesai 
7. cari kode berikut pada template sobat :

<b:section class=’header’ id=’header’ maxwidgets=’1′>

pada kode maxwidgets=’1′. Rubah angka satu menjadi angka 2, sehingga kodenya menjadi seperti ini :

<b:section class=’header’ id=’header’ maxwidgets=’2′>

1. Klik tombol SIMPAN TEMPLATE

Nah itu langkah pertama, langkah selanjutnya adalah :

1. Klik menu Elemen Halaman
2. KLik tulisan Edit yang ada pada elemen Header
3. Tunggu beberapa saat
4. Pilih radio button yang ada di samping tulisan dari komputer Anda
5. Klik tombol Browse…
6. Pilih banner yang telah di buat yang ada pada komputer sobat
7. Tunggu beberapa saat sampai proses selesai.
8. Gambar banner sobat akan di tampilkan
9. Klik tombol SIMPAN PERUBAHAN
10. Selesai.  

Itu tadi sedikit gambaran dari saya tentang cara-cara memasang banner di bawah header blog kita. Semoga bermanfaat.

Memasang Gambar Slideshow Dibawah Header

Jumpa lagi dengan saya, hari ini langit agak mendung, mungkin sebentar lagi hujan. Kali ini saya akan berikan tutorial cara pasang slideshow di bawah header. Saya mengambil kode yang paling sederhana dengan menu slideshow yang juga sangat sederhana. Slideshow sendiri fungsinya sebagai navigasi link yang biasanya diletakkan dibawah header, dan selalu menampilkan gambar sebagai pemanis agar pengunjung tertarik untuk mengklik isi yang dimaksud. Untuk demo saya gunakan template 3pictsel bikinan mas Riki dan meletakkannya di dalam main post, silahkan cek disini.

Kode css yang akan saya berikan tidak mutlak harus sama, karena setiap template pasti berbeda terutama dalam tutorial ini adalah lebar kolom postingan. Untuk demo saya gunakan template yang lebar postingannya kurang lebih 660px. Buat anda yang memiliki lebar kolom post lebih atau kurang dari 660px silahkan disesuaikan saja.

1. Login dulu di blogger.
2. Masuk ke Rancangan >> Edit HTML.
3. Jangan lupa klik Expand Template Widget karena akan membuat anda jadi pusing dengan kode yang panjang.
4. Copy paste kode berikut diatas kode ]]></b:skin>

/* SLIDESHOW */ 
#slider-holder{width:660px;height:200px;overflow:hidden;margin-left:-20px; margin-right:10px; padding:0} #s3slider{width:660px;height:660px;position:relative;overflow:hidden} 
#s3sliderContent{width:660px;position:absolute;top:0;margin-left:0}
.s3sliderImage{float:left;position:relative;display:none} 
.s3sliderImage span{position:absolute;left:0;font-weight:700;font-size:12px;color:#fff;height:45px;width:660px;background-color:#4e4d3c;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;display:none;bottom:0;padding:10px} 
.s3sliderImage span a.featured-title:link,.s3sliderImage span a.featured-title:visited{color:#FFF;font-size:14px;padding:0 0 2px} 
.s3sliderImage span a.featured-title:hover{color:#999} 
.s3sliderImage span a:link,.s3sliderImage span a:visited{color:#888} 
.s3sliderImage span a:hover{color:#555}

5. Kemudian copas kode berikut diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
<!--//--><![CDATA[//><!--
(function($){
    $.fn.s3Slider = function(vars) {     
        var element     = this;
        var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
        var current     = null;
        var timeOutFn   = null;
        var faderStat   = true;
        var mOver       = false;
        var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
        var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
        items.each(function(i) {
            $(items[i]).mouseover(function() {
               mOver = true;
            });
            $(items[i]).mouseout(function() {
                mOver   = false;
                fadeElement(true);
            });
        });
        var fadeElement = function(isMouseOut) {
            var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
            thisTimeOut = (faderStat) ? 10 : thisTimeOut;
            if(items.length > 0) {
                timeOutFn = setTimeout(makeSlider, thisTimeOut);
            } else {
                console.log("Poof..");
            }
        }
        var makeSlider = function() {
            current = (current != null) ? current : items[(items.length-1)];
            var currNo      = jQuery.inArray(current, items) + 1
            currNo = (currNo == items.length) ? 0 : (currNo - 1);
            var newMargin   = $(element).width() * currNo;
            if(faderStat == true) {
                if(!mOver) {
                    $(items[currNo]).fadeIn((timeOut/6), function() {
                        if($(itemsSpan[currNo]).css('bottom') == 0) {
                            $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        } else {
                            $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        }
                    });
                }
            } else {
                if(!mOver) {
                    if($(itemsSpan[currNo]).css('bottom') == 0) {
                        $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                            $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    } else {
                        $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                        $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    }
                }
            }
        }
        makeSlider();
    };
})(jQuery);
//--><!]]></script>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>
6. Setelah itu siapkan gambar dan url yang akan ditampilkan dalam menu slideshow, jika sudah ada gambar dan url-nya, silahkan anda copas kode berikut setelah kode <div id='main-wrapper'>
<div id='slider-holder'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage' style='display: list-item;'>
<a href='LETAK LINK DISINI 1'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxhZXYqhiSE6PjSh4bBryillyDiSudLA7ejCL-YV-G5YkJUrL_SqFXOqBCHTm4kOqgPJeVk6HnF4hzSN6wt-J8HTf8EAFz0Xa4pPcIrwCkBwpHCSrHMY3DN7U0rQALMBjsIruCupbIIYc/s1600/NorahJones.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: block;'>
<a class='featured-title block' href='LETAK LINK DISINI 1'>INI GAMBAR NORAH JONES</a><br/>
Norah Jones adalah seorang musisi jazz yang sudah banyak mendapatkan Grammy Award
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 2'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihx-CaKMD-V6fNfFbo4B0NbBgy_7jSoYsXCL38d5uoqW-SpW50R_q7im6-NIYj0sgKAggQU6zAQosMjTFZPtdS0eowwZ-7bFBSsUUl0Cff8Kx0-_7mWh1wEvsWqS2kuv3lV74bzvqIXqo/s1600/174456_1_f.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 2'>FOURPLAY</a><br/>
Nggak usah dijelaskan udah ada tulisanya diatas
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 3'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu7KI5v55KRFpS2m4TjifKm1_58SczCXEg5j_d_UqRnPHB2lgt6N3AvRClZDTIh6_pn7ToRIhp9B_8onqAhh9ljXYQ8FT4jIw_PmlnHhyphenhyphensby5QxCf1zvnL1Lq4HR3BBb0KGXCAIH2My6c/s1600/andien.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 3'>MBAK ANDIEN</a><br/>
Ini orangnya yang..............
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 4'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR9NrMt8epkNbOf3XKtOnnPN3PRX9oT_ltOzu2j-_yJSVaIVBFsYs48crAxQY1SVd6dnENl6I_LGnU9kLp0Zd_2s_JwjN3DMkNHNb1XzjDpG07oR_j-4_X7jR9suJHkPqsO8-xxYTChU8/s1600/Alanis-Morissette-2.JPG' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 4'>ALANIS MORISSETTE</a><br/>
Tampangnya sih biasa, tapi lagunya teman-teman semua harus mendengarkan
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 5'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw-7mvI9uVZYClOnraYgj9Z1Hg0cjhdbKT46rMSAZzhdqocaYAd6VV1oP1j9o5fPIQEXMJmf7-cvD92FLweRj3GMCAzlMUYSrXyl88IlQn5EhUc3BHk3qigPMZE7ckADve3Em3P5dX6Ng/s1600/Anne-Hathaway-02.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 5'>WANITA CANTIK</a><br/>
Siapa coba gambar cewek diatas? Kasih jawabannya di kotak komentar ya....
</span>
</li>
<li class='clear s3sliderImage'/>
</ul>
</div>
</div>
7. Simpan Template

Keterangan :

• Perhatikan lebar 660px, silahkan sesuaikan saja dengan lebar post template anda.
• Perhatikan juga angka -20px pada kode css-nya, saya gunakan margin-left:-20px karena menyesuaikan dengan demo template yang saya gunakan. 
• Tulisan yang berwarna merah ganti dengan deskripsi tentang gambar anda.
• Kode yang berwarna biru adalah kode url untuk gambar yang sudah anda upload sebelumnya.

Gimana teman-teman, cukup panjang kan? Jangan khawatir, saya yakin teman-teman semua bisa melakukannya, semoga berhasil ya !