Cara membuat Slider super Kilat super Cantik

Diposting oleh har On 14.27
Meskipun glider sangat penting untuk sebuah blog, namun tidak semua blog dilengkapi dengan fasilitas ini guna menampilkan gambar dan teks.Alangakah bagusnya bila blog dipercantik dengan "barang spesial" yang mampu membuat ruang blog lebih efisien dan sekaligus juga menambah kecantikan tampilan blog. Glider kita ini sangat praktis, mudah dibuat, bahkan untuk blogger pemula sekalipun (seperti saya juga). Meskipun demikian jangan sepelekan glider ini. Saat kita mau untuk sedikit lelah memodifikasinya, maka akan menjadi glider yang membuat mata melirik dan bibir tersenyum sumringah. Modifikasi yang harus dilakukan juga tidak serumit yang ada dalam bayangan. Bagaiman cara membuatnya hingga bisa selesai dalam tempo 30 menit hingga 1 jam ? Ayo...,cermati langkah-langkah di bawah ini :

-1. Downnload java script dengan cara KLIK di sini .
-2. KLIK juga di sini untuk men-download CSS-nya.
-3. Upload file Javascript dan CSS tadi ke file hosting yang biasa digunakan (kalau belum ada silahkan upload di Ripway.com atau yang lain).
-4. Simpan URL kedua file tadi.
-5. Copy code berikut dan masukkan URL ke dua file di atas ke dalamnya (menggantikan kode yang berwarna kuning).


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<link href='http://bloggerstars.gliders.css' rel='stylesheet' type='text/css'/>
<script src='http://bloggerstars.glider.js' type='text/javascript'>
//**** &#8220; bloggerstars&#8221;* --- har.bloggerstars.blogspot.com ---
*//</script>

-6. Login ke Blogger ---> KLIK Tata letak ---> Edit HTML. Sebelum melanjutkan ke tahap berikutnya, amankan template terlebih dahulu dengan KLIK Download Template Lengkap ----> save ke folder PC.
-7. Letakkan kode yang sudah dilengkapi URL hasil upload tersebut tepat di bawah ]]></b:skin> (kode di sebelah terletak di atas </head> dan
<body> . Agar lebih mudah mencarinya, gunakan Ctrl+F .
-8. KLIK Simpan Template.
-9. Copy kode berikut dan tempatkan di template pada bagian yang cocok. Misalnya di :
- Elemen Laman ---> Tambah Gadget ----> javascript/HTML
- Tata Letak ---> Edit HTML ---> <div id='main-wrapper'> atau <div id='sidebar-wrapper'>(di bawahnya).
Menurut saya, lebih baik dengan cara menambah gadget saja, sehingga memudahkan saat melakukan modifikasi dan pergantian atau penambahan gambar. Bila belum ada ruang untuk tambah gadget yang tepat, silahkan buka di "Tutorial Blogger. Disini ada cara untuk menambah widget.
10. KLIK Simpan/Save dan lihat hasilnya. Setelah terlihat hasilya, silahkan beberapa kode ganti dengan yang sesuai dengan apa yang akan ditampilkan di blog.


<script type="text/javascript">

featuredcontentglider.init({
gliderid: "canadaprovinces",
contentclass: "glidecontent",
togglerid: "p-select",
remotecontent: "",
selected: 0,
persiststate: false,
speed: 1000,
direction: "downup",
autorotate: true,
autorotateconfig: [3000, 2]
})

</script>


<div class='glidecontentwrapper' id='canadaprovinces' style='width:305px; height:320px;font-family:Times New Roman; font-weight:bold;'>
<div id='glidecontent' style='font-size:14px; width:295px; color: blue; text-align:center;'>

<div class='glidecontent' style='font-size:18px;'>
<img src='http://i33.tinypic.com/2ng7onk.jpg' style='float: left; padding: 5px'/>
Istriku hampir seperti ini penampilannya. Ya,... cuman hampir saja. Kurang lebih sekitar.... 900 km lagi. Hiiiiii....!!!
</div>

<div class='glidecontent' style='color: black;'>
<img src='http://i36.tinypic.com/2dw501c.jpg' style='float: left; padding: 5px'/>
Ya... Daripada naik kuda ya mendingan naik...OLANG ! Ini kata si upik yang baru berumur 70 th !!!
</div>

<div class='glidecontent' style='color: red;'>
<img src='http://i37.tinypic.com/2ir3gjp.jpg' style='float: left; padding: 5px'/>
Indonesia yang luar dulu luar biasa indah, kini tak seperti pemandangan itu !!! Pohon yang besar dan rimbun sudah habis dimakan si GENDON. Itu...yang sekarang pada jadi juragan besar !!!
</div>

<div class='glidecontent' style='font-size:12px; color: green;'>
<img src='http://i35.tinypic.com/34ry529.jpg' style='float: left; padding: 5px'/>
Punya mobil seperti ini tentunya lebih enak dari pada naik bis atau opletnya si Mandra. Sudah saya pesan 30 tahun yang lalu,tetapi sampai sekarang belum juga datang ! Kasihan kamu, blog..! Masudnya bukan "goblog", lho, ... tapi TOLOL !
</div></div>
</div>

<div id='glidecontenttoggler' style='width:305px'>
<div class='glidecontenttoggler' id='p-select'>
<a class='prev' href='#'>Prev</a>
<a class='toc' href='#'>Page 1</a> <a class='toc' href='#'>Page 2</a> <a class='toc' href='#'>Page 3</a> <a class='toc' href='#'>Page 4</a>
<a class='next' href='#'>Next</a>
</div></div>














* kode dengan warna kuning dapat dirubah :

- angka 305 = lebar ke duanya harus sama.
- angaka 320 = tinggi.
- 1000 dan 3000 berkaitan dengan kecepatan pergeseran gambar/photo.

* Kode dengan warna hijau di ganti dengan URL gambar/photo yang mau ditampilkan.

* Kode berwarna pink : Teks yang mau di tampilkan.

Monggo ... Selamat bekerja dan menikmati hasil karya anda !!!!

0 Response to 'Cara membuat Slider super Kilat super Cantik'

Posting Komentar

Arsip Blog

Free Blogger Template | VentaSalud.com