Cara Membuat Menu Slide Show di Blog

Bagaimana cara membuat tampilan slide show seperti yang ada di blog saya?mana?engga ada slide show?oh iya, tampilan slide shownya saya sembunyikan, itu hanya tampil di halaman selain posting saja, kalau tidak percaya cek ke HomePage Blog saya. maaf gadgetnya sudah saya hapus, untuk melihat demonya kunjungi blog saya yang satu ini Setelah anda melihat slide show milik saya dan anda tertarik untuk membuatnya, mari saya ajarkan. Step.By.Step : Jangan lupa awali Bismillah

1. Login ke Blog anda > Design >> Edit HTML
2. Cari dan letakan kode berikut sebelum kode ]]></b:skin>

 #slider {
  background:url(URL background untuk slide anda);
  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;
  }

3.  Berikutnya letakan kode berikut sebelum kode </head>

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/jquery-1.2.6.js' type='text/javascript'/>
    <script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/slider.js' type='text/javascript'/>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    sfHover = function() {
        var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    //--><!]]></script>

4. Cari kode  berikut

   <div id='header-wrapper'>

  ..........

  .........

 </b:section>

5. Letakan kode ini setelah kode di atas. Atau anda juga bisa menambahkannya melalui gadget

<!-- Casing -->
    <div id='casing'>
    <!-- Slider -->
    <div id='slider'>
    <div id='mover'>
    <div class='slide'> <span class='slmet'> Posted by SBS </span> <h2><a href='http://sbs-community.blogspot.com' target='_blank'>SBS (Step.By.Step) </a></h2> <p>Ini semua berawal dari sebuah sekolah bernama SMPN 236 Jakarta, Tempat kita SMP. Galoga (gw), Ayyub, Dennis, Ella, Kafi. Setiap pulang sekolah biasanya main dulu di sekolah. Dennis mainan leptop sambil ...</p> <img src="http://i33.tinypic.com/rksj8h.jpg" />
    </div> <div class='slide'> <span class='slmet'> Posted by Galoga</span> <h2><a href='http://abi-galoga.blogspot.com/2010/08/download-adobe-photoshop-cs-5-free.html'>Adobe Photoshop CS5 + Crack FREE</a></h2> <p>Saya yakin seyakin-yakinnya sebagian dari anda pasti selalu meinginkan software gratis. Apalagi kalo yang gratis itu adalah adobe photoshop CS5, WAW..... </p> <img src="http://i33.tinypic.com/2mpymab.jpg" />
    </div> <div class='slide'> <span class='slmet'> Posted by Galoga </span> <h2><a href='http://abi-galoga.blogspot.com/2010/08/daftar-kode-warna-html.html'>Daftar Kode Warna HTML</a></h2> <p>Jika anda tidak tahu kode warna HTML kan bisa lihat di sini, Sok atuh di nikmati warna-warni di bawah ini. bisa di copy paste kok kodenya hehehe....</p> <img src="http://i38.tinypic.com/1zz2rkk.jpg" /> </div> </div>
    <!-- /Mover --> </div>
    <!-- /Slider --> </div>
    <div class='clear'/></div>

6. Silahkan edit kode yang berwarna merah, biru, hijau, dan tebal dengan miilik anda sendiri

Sekian pelajaran kita hari ini, kita akhiri dengan Alhamdulillah, semoga saja bermanfaat terima kasih