Alhamdulillah... Berkat kekuatan dari-Nya, saya berhasil lagi menelurkan postingan PF Tutorial, yang kali ini akan membahas tentang cara membuat slide untuk judul postingan kita. Seperti apa maksudnya? Maksud saya, itu lhoo... Judul postingan yang telah kita publish itu, yang masih terbaru, belum lama, akan dislide nantinya. Ngerti? Siiippp... Lah...

Gambar 1Contoh Slide Judul Post Bergambar

Ada banyak jenis slide yang umum dipakai oleh kalangan blogger, bro. Untuk slide bergambar seperti gambar disamping misalnya, sebenarnya sudah umum dipakai oleh kalangan blogger. Namun, apa jadinya bila slide seperti gambar disamping, saya obrak-abrik sehingga menjadi seperti slide punya saya diatas? Hmmmm... Cokodot fren...

Berawal dari keisengan saya, muncullah keinginan dalam benak saya untuk membuat slide dengan konsep saya sendiri. Saya itu menginginkan slide, yang minimalist, tanpa gambar, slim, sexy, universal, tanpa makan tempat, tanpa ribet, fleksibel, dan lain-lain. Hahahahaha... Tapi tentu saya tak bisa membuat slide itu. Apalagi harus menggunakan javascript, jQuery, dan script yang lain.

Browsing di blog tetangga, akhirnya, tak kunjung ketemu. Namun saya menemukan script slide juga, yang slidenya itu seperti pada gambar diatas (thumbnail). Makanya saya coba otak-atik lah.

Banyak script tentang slide headline post yang disampaikan oleh blog lain yang membahas tentang tutorial blog. Dan, rata-rata yang saya perhatikan, hampir sebagian besar membutuhkan jQuery, dan kita harus mengedit dua kali pada template, dan gadget.

Nah, kelebihan script ini, tanpa dipasang di Edit HTML segala loh? Tentu kalau kita masih mengedit, mengutak-atik script yang dipasang pada template blog, sangat merepotkan kita kan? Membuang waktu banyak bro... Lalu, ditaruh dimana dam? Di hidung... Wuahahahahhaha...

Dengan hanya memasang pada fasilitas widget/Add a Gadget anda saja, anda sudah bisa mendapatkan slide recent post seperti punya saya yang diatas itu lho... Hayoooo... Gimana ni... Anda tertarik bro untuk memasangnya? Siipp dah... Mari ikuti langkah saya.

• Silahkan copy script pada box hitam dibawah ini, kemudian buka Page Elements/Elemen Laman anda, lalu klik Add a Gadget/Tambah Gadget pada header widget anda.
  
  Dokumen Resmi muhammadadamfirdaus.com
  
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <style type="text/css" media="screen">
  <!--
  
  #spylist {
  overflow:hidden;
  margin:4px 0px 4px 190px;
  padding:0px;
  height:27px;
  }
  #spylist ul{
  width:700px;
  overflow:hidden;
  list-style-type: none;
  padding: 0px;
  margin:0px 0px;
  }
  #spylist li {
  width:600px;
  padding: 5px;
  margin:0px;
  list-style-type:none;
  float:none;
  height:15px;
  overflow: hidden;
  background:#fff url() repeat-x;
  border:1px solid #ddd;
  -moz-border-radius:12px;
  -webkit-border-radius:12px;
  }
  
  #spylist li a {
  text-decoration:none;
  color:#4B545B;
  font-size:11px;
  height:18px;
  overflow:hidden;
  margin:0px 0px 0px 5px;
  padding:0px 0px 2px 0px;
  }
  #spylist li img {
  float:left;
  margin:0px;
  background:#FFFFFF;
  border:0;
  }
  .spydate{
  float:right;
  overflow:hidden;
  font-size:10px;
  color:#0284C2;
  padding:0px 0px;
  margin:2px 5px 0px 0px;
  height:18px;
  font-family:Tahoma,Arial,verdana, sans-serif;
  }
  
  .spycomment{
  float:right;
  overflow:hidden;
  font-family:Tahoma,Arial,verdana, sans-serif;
  font-size:10px;
  color:#262B2F;
  padding:0px 0px;
  margin:2px 5px 0px 0px;
  }
  
  -->
  </style>
  
  <script language='javascript'>
  
  imgr = new Array();
  
  showRandomImg = true;
  
  boxwidth = 255;
  
  cellspacing = 6;
  
  borderColor = "#232c35";
  
  bgTD = "#FFFFFF";
  
  thumbwidth = 0;
  
  thumbheight = 0;
  
  fntsize = 12;
  
  acolor = "#666";
  
  aBold = true;
  
  icon = " ";
  
  text = "comments";
  
  showPostDate = true;
  
  summaryPost = 40;
  
  summaryFontsize = 10;
  
  summaryColor = "#666";
  
  icon2 = " ";
  
  numposts = 5;
  
  home_page = "http://platinumfreak.blogspot.com/";
  
  limitspy=1
  intervalspy=4500
  
  </script>
  
  <div id="spylist">
  <script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
  </div>
  


• Ganti url platinumfreak.blogspot.com, dengan url blog anda.


• Atur lebar dan margin slide


• Atur juga jeda/interval, dan kecepatan slide pada limitspy=1 intervalspy=4500


• Masalah! Untuk penggunaan slide yang ini, hanya terkendala pada template saja bro. Maksudnya dam?
  

  • Maksudnya, slide ini lebih cocok untuk template yang menyediakan header widget pada setiap template saja. Ada sebagian template yang tidak dilengkapi header widget oleh pendesain template. Berarti, apakah yang tidak disediakan header widget tidak bisa berkarya? Eiiiittsss... Jangan nangis dulu lah... Bukan begitu... Dengan keterbatasan itulah kreatif itu muncul.

  
  

  • Anda tak perlu repot-repot menambahkan header widget. Saya akan berikan trik bagi anda yang tidak disediakan header widget-nya (terutama template jenis 2 kolom, tak menutup kemungkinan, template 3 kolom pun terkadang tidak ada header widget-nya.) Mari ikuti langkah beikut!! Are you ready broow!!?? Siiipp...

  
  
  
  ! Trik PF Tutorial

  • Yang pertama, kita ke Edit HTML dulu, kemudian tekan ctrl+F, dan tuliskan script berikut <b:section class='main', memang terkadang setiap template berbeda. Namun, hapus sebagian menjadi <b:section class= ma atau hanya anda ketikan widget, kemudian cari yang main.
    Jika sudah ketemu, pada bagian showaddelement='no', ganti 'no' menjadi 'yes'. Biasanya ada maxwidget-nya? Ganti diatas 1. Berarti bisa 2, 3, 4, 5, terserah anda. Lalu save! Dan kita sekarang beralih pada Page Elements/Elemen Laman.
    

  • Setelah anda copy script pada box hitam diatas, paste pada main widget, tepatnya ada diatas elemen posting anda (yang telah anda ubah tadi showaddelement-nya menjadi 'yes'). Kemudian kita edit sedikit pada bagian:
    
    #spylist {
    overflow:hidden;
    margin:4px 0px 4px 190px;
    padding:0px;
    height:27px;
    }
    
    Ganti 190px, menjadi 0px.
    
    Kemudian pada
    #spylist ul{
    width:700px;
    overflow:hidden;
    list-style-type: none;
    padding: 0px;
    margin:0px 0px;
    }
    
    Ganti 700px, menjadi 500px saja.
    
    Dan yang selanjutnya, ganti 600px dibawah ini, menjadi 400px.
    
    #spylist li {
    width:600px;
    padding: 5px;
    margin:0px;
    list-style-type:none;
    float:none;
    height:15px;
    overflow: hidden;
    background:#fff url() repeat-x;
    border:1px solid #ddd;
    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    }
    
    Setelah itu save!

  
  
Proses editing selesai... Anda sudah memiliki slide header post baru...

Belum paham? Langsung saja tanya pada saya?