Meskipun
sudah lama sekali saya tidak menulis karena banyak sekali kesibukan,
kali ini saya akan menyempatkan waktu untuk berbagi dengan teman-teman
semua mengenai cara membuat slide gambar seperti yang biasa kita lihat
di id.yahoo.com. Sebelumnya saya sudah pernah membahas tentang memasang gambar slid ala drakon template dan zinmag primus, bagi yang belum menyimak bisa dilihat kembali.
Banyak saya temui blog yang sudah
memakai animasi image slider dengan berbagai macam variasi. Blog akan
semakin menarik dan lebih hidup dengan tampilan silih berganti dari text
dan image yang disetting pada slider. Penempatan animasi slider Yahoo
ini biasanya diletakkan tepat di bawah header tengah. Namun, Anda pun
bisa menyesuaikannya pada desain template blog masing-masing.
Gambarnya kira-kira seperti diatas, jika anda ingin melihat demonya bisa dilihat disini. Bagaimana? Jika temen-temen tertarik untuk memasang slideshow ala Yahoo
di blog masing-masing, maka bersiaplah dipusingkan dengan begitu
banyaknya kode CSS dan setting gambar, link serta setting teks yang
lumayan membingungkan. Kalau sudah terbiasa sih, pasti gampang. Paling
tidak patut dan layak untuk dicoba.
Langkah Pertama
- Login ke blogger dengan akun anda
- Kemudian klik Tata Letak > pilih Edit HTML
- Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
- Letakkan kode berikut di atas kode ]]></b:skin
- Masih dalam dalam posisi Edit HTML. Sekarang letakkan kode berikut ini di atas kode </head>
- Sampai disini masih mudah kan? Oya jika anda ingin meletakkan hari, tanggal dan bulan serta tahun seperti yang ada di demo, letakkan kode berikut di bawah kode diatas :
- Jangan lupa, jika anda sudah memasang kode javascript untuk waktu diatas, kode <body> pada template harus diganti dengan :
<body onLoad='goforit()'>
- Save/simpan template terlebih dahulu sambil sejenak istirahat, sabar ya siapkan secangkir kopi atau teh biar agak adem sambil mendengarkan musik kesukaan anda. Masih ada satu langkah lagi
- Sekarang anda harus membuat satu kolom di atas postingan untuk
meletakkan kode slide nantinya. Langsung saja letakkan kode berikut di
atas kode ]]></b:skin>
- /* Slide Content
- ----------------------------------------------- */
- .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
- word-wrap: break-word; overflow: hidden;}
- .slide {color: #666666;line-height: 1.3em;}
- .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
- .slide li {margin:0;padding-top:0;
- padding-right:0;padding-bottom:.25em;
- padding-left:0px;text-indent:0px;line-height:1.3em;}
- .slide .widget {margin:0px 0px 6px 0px;}
- Kemudian untuk memunculkannya pada template (diatas postingan), anda harus memanggilnya. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya :
- <b:if cond='data:blog.url == data:blog.homepageUrl'>
- <div id='slide-wrapper'>
- <b:section class='slide' id='slide' preferred='yes'/>
- </div>
- </b:if>
- Setelah anda membuat satu kolom diatas postingan, klik menu Tata Letak >> Elemen Laman
- Klik Tambah Gadget >> pilih HTML/Javascript
- Copy kode di bawah dan letakkan di kotak HTML/Javascript
- Warna biru : URL image
- Warna merah : URL post
- Warna kuning : Ringkasan post
- Warna hijau : judul post - Jika layout pada template Anda sudah terdapat satu kolom kosong di atas post, langkah ini tidak perlu. Langsung saja add gadget kemudian letakkan kode script diatas.
- Kemudian save/simpan template selesai sudah
Ribet banget ya, kalau ribet
nggak usah dipasang masih banyak slider lain yang lebih gampang cara
memasangnya dan tidak kalah menarik dengan slider Yahoo ini. Saya hanya
memberikan alternatif lain untuk menghias blog agar tampak lebih
menarik. Jika teman-teman sering meringkas kode javascript yang terlalu
panjang di googlecode,
sebaiknya diringkas saja selain terlalu panjang juga akan meringankan
loading blog anda. Selamat mencoba dan berpusing ria jika ada yang mau
ditanyakan isi kotak komentar yang ada di bawah. Jika ada waktu senggang
Insya Allah saya jawab.
Sumber : http://www.maskolis.com/2011/12/membuat-slideshow-gambar-ala-yahoo.html
Sumber : http://www.maskolis.com/2011/12/membuat-slideshow-gambar-ala-yahoo.html
0 komentar :
Posting Komentar