VIDEO TUTORIAL MIKROTIK ++225 VIDEO + MODUL TRAINING + SCRIPT

Jadwal Training Mikrotik Bulan ini 12,13,14 Oktober (Basic-Mahir) 3 Hari

Excel Fundamental, Excel Advanced, Dan Excel Programming VBA

IT TRAINING CENTER CONTACT : 0812 1451 8859 / 081 1219 8859

Cara Mudah Mempercantik Tampilan Blog dengan membuat foto slide show di Blogger


Ketika kita bekerja dengan Blogger pastinya menginginkan adanya fitur tambahan slide show foto biar blog keliahatan lebih dinamis. Dengan Memiliki blog yang bagus sudah tentu menjadi impian semua blogger, akan tetapi kita harus memperindah tampilan blog kita agar pengunjung blog lebih betah lagi membaca artikel-artikel yang kita posting. Sebenarnya tampilan blog yang simple & dinamis lebih disukai oleh reader atau pembaca. Akan tetapi jauh lebih bagus bila kita mempunyai ciri khas pada blog kita, salah satunya bisa dengan cara memasang wigdet slide show photo yang berisi foto-foto kita pada sidebar blog.

Fitur  Widget ini berisi foto-foto kita yang akan tampil secara bergantian secara otomatis. Memasang widget ini jauh lebih praktis & menghemat tempat daripada menyimpan foto di widget 'Gambar/Picture', karena semua foto-foto kita bisa tampil bergantian secara slide hingga tampak seperti menonton sebuah video. Berikut cara pembuatannya di Blog

1.       Login Ke Blogger
2.       Selanjutnya Masuk Ke Menu tata Letak Dan   Atur Akan di Letakan Dimana Widget Slide Show,
HALAMAN TATA LETAK BLOG

3.      Kemudian Tambahkan Gadget dan Pilih Widget HTML/Javascript

4.       Selanjutnya Paste Code Dibawah ini, di halaman HTML/JavaScript, lihat gambar dibawah ini


COPY SCRIPT DIBAWAH KE HALAMAN INI
Script Slide Show Foto

<script 
src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script>
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
   position: relative;
   width: 250px;
   height: 250px;
   overflow: hidden;
   margin:0 auto;
}
#content-slider img {
   display: block;
   width: 250px;
   height: 250px;
}
</style>
<div id="content-slider">

<img src=&quot;URL FOTO 1" />
<img src=&quot;URL FOTO 2" />
<img src="URL FOTO 3" />
<img src="URL FOTO 4" />
<img src="URL FOTO 5" />
</div>


5.       Ganti tulisan berwarna kuning "URL FOTO 1/2/3/4/5" dengan url foto anda yang telah di host atau di upload ke website album foto online seperti photobucket / picasa / flicker, dll.
6.       Anda bisa menambahkan sebanyak mungkin foto yang anda mau, tinggal menambahkan saja kode HTML URL FOTOnya. 
7.       Anda bisa mengedit tinggi & lebar dari foto tersebut. Kode HTML yang saya berikan cocok untuk sidebar blog berukuran 250 pixel atau lebih. Anda dengan mengganti kode HTML berwarna pink dengan ukuran yang anda mau sesuai dengan ukuran sidebar blog Anda. 
8.       Hasilnya akan Tampak Seperti Gambar dibawah ini
 
HASIL SLIDE SHOW

Selamat Mencoba


Share

Artikel Lainnya :



No comments:

Post a Comment

Training Bulan ini

Padepokan IT Course

Lokasi Training
1. Komp Graha Bukit Raya 1 G3/16 Bandung Barat
2. Jl. Ciuyah No.45 RT.05/RW.10 Bandung Barat

Telp : 081 1219 8859 (Telkomsel)
W.A : 081214518859 (WhatsApp)
Website : www.padepokanit.com
E-Mail : padepokanit.course@gmail.com
Instagram : @padepokanit

Info Site

User Online Padepokan-IT Course

IT Tutorial, Training & IT Solution