Tuesday 23 November 2010

PF Tutorial 005 - Cara Membuat Slide Judul Post (Versi adam)

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

Mungkin itu saja bro PF Tutorial-nya untuk kali ini.
Sekian... Semoga bermanfaat yah...

Belum paham? Langsung saja tanya pada saya?


Karya penulisan asli serta script modifikasi: Muhammad Adam Firdaus

18 comments:

wisnu arisandy said...

pertamax diamankan,,ini dy yang ane cari hehehe

monggo balik ke kunjung ketempat ane gan,,ada tempat untuk request dan curhat haha

http://daridiri.blogspot.com/

sibutiz said...

wuich,keren banget ya ni blog....
salut ama mpunya ni blog...
BTW lamz kenal ya....

BRI Jakarta Veteran said...

wow keren sob ...

belajar bisnis said...

mantap sob.

van said...

wah harus dicoba nih sob... ok deh makasih ya.. salam kenal, diharap kunjungan baliknya..

reyy said...

kunjungan perdanaku..mantap blognya brow

Urang Lembur said...

Pernah coba pake widget begitu, tapi loadingnya jadi berat, terpaksa diganti lagi

Muhammad Adam Firdaus said...

@Urang Lembur:
Mungkin itu karena scriptnya menggunakan gambar.
Dan gambar pada slide awalnya memang backgroundnya pun ditambah link photobucket.

Dan untuk slide yang satu ini, Insya Allah tidak berat lah.
Karena memang didesain tidak dilengkapi gambar.

Kecuali, code.google.com-nya (tempat menaruh javascrpt-nya) bermasalah. Itu saja.

Jana Virananda said...

Wah yg ini bagus juga ...

Jana Virananda said...

Sudah saya pasang lho di blog saya ^_^

Vulkanis said...

Keren Banget,,thanks

Faril said...

sepertinya nggak cuma postingan terbaru..postingan terlama juga bisa ditampilkan asal diedit sedikit untuk bagian "summaryPost = 40"..diganti seberapa banyak postingan yang akan tampil...

Teras Info said...

Wah...trik yang sangat menarik sekali kawan...
bisa di coba ni.....

terimakasih banyak...

Muhammad Chandra said...

wah keren nih :)

kode nya sudah saya save :D

Faril said...

sering ngotak-atik template ya??saya sering bingung dengan kode templat..

sibutiz said...

saya bungkus yang ini ya...
makasih...

Bunda JAI said...

Te3rima kasih banyak..

praha said...

thank's banget ilmunya....berguna banget,,,
main kesina ya....,baru di buat....
http://seminyakvillascollection.com
http://luxuryseminyakvilla.com

Post a Comment

 
Copyright © 2010 Muhammad Adam Firdaus. Designer by adam