Total Pageviews

Diberdayakan oleh Blogger.

Marquee Beri Donasi

<div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title='rsspump'>news</a></div>
Daftar Alamat dan Nomor Telepon Puskesmas (Pusat Kesehatan Masyarakat PKM) di Kabupaten Pasaman Propinsi Sumbar: 1. Puskesmas Bonjol. Alamat: Jl. Lintas Sumatera Nagari Kp Sianok Nagari Ganggo Hilia,Kec.Bonjol. Jenis (type): Perawatan 2. Puskesmas Ladang Panjang. Alamat: Jl. Lintas Padang Sawah Kumpulan, Kec. Bonjol. Jenis (type): Perawatan 3. Puskesmas Kumpulan. Alamat: Jl. Lintas Sumatera Nagari Lima Kuto, Kec. Bonjol. Jenis (type): Non Perawatan 4. Puskesmas Simpati. Alamat: Jl. Padang Sawah Kumpulan, Kec. Bonjol. Jenis (type): Non Perawatan 5. Puskesmas Lubuk Sikaping. Alamat: Jl. Prof. Dr. Hamka, Kec. Lubuk Sikaping. Jenis (type): Non Perawatan 6. Puskesmas Sundatar. Alamat: Jl. Lintas Padang Medan Jrg Salibawan, Kec. Lubuk Sikaping. Jenis (type): Non Perawatan 7. Puskesmas Cubadak.Alamat: Jl. Raya Simpang Empat Panti, Kec. II Koto. Jenis (type): Perawatan 8. Puskesmas Simpang Tonang. Alamat: Jl. Simpang Lambau Jrg. Tanjung Mas, Kec. II Koto. Jenis (type): Non Perawatan 9. Puskesmas Tapus Alamat: Jl. Lintas Padang Medan No. 26 Ds. Selamat, Kec. Panti. Jenis (type): Perawatan 10. Puskesmas Pegang Baru.Alamat: Jl. Lintas Padang Medan Jrg Bahagia, Kec. Panti. Jenis (type): Non Perawatan 11. Puskesmas Kuamang.Alamat: Jl. Tapus Lundar Jrg Kuamang, Kec. Panti. Jenis (type): Non Perawatan 12. Puskesmas Rao.Alamat: Jl. Lintas Padang Medan Pasar Rao Nagari Tarung-tarung, Kec. Rao. Jenis (type): Perawatan 13. Puskesmas Pintu Padang.Alamat: Jl. Curanting Muaro Tais Km. 18 Ds. Pintu Padang, Kec. Mapat Tunggul. Jenis (type): Perawatan 14. Puskesmas Silayang.Alamat: Nagari Silayang, Kec. Mapat Tunggul Selatan. Jenis (type): Non Perawatan 15. Puskesmas Lansat Kadap. Alamat: Jl. Tunas Harapan Rambah, Kec. Rao Selatan. Jenis (type): Non Perawatan

Cara Membuat Slider Images atau Slide Bergambar Otomatis di Blog


Minggu, 15 September 2013

Slide Keren dan Cantik
Duakotopas – Cara Membuat Slider Images atau Slide Bergambar Otomatis di Blog adalah dimana gambar dapat bergerak atau berganti secara otomatis.
Dari contoh anda dapat melihatnya di website duakotopas di bagian beranda, apabila anda mau untuk menaruhnya di blog anda. kami akan memberikan caranya sebagai berikut :

1. Pertama anda login dulu ke blogger.com

2. Klik Tata Letak yang terletak di bagian kiri

3. Klik Tambahkan Gadget

4. Kemudian Masukkan Script berikut dan taru ke dalam Gadget yang telah di klik tadi

Ini scriptnya :

  <style type="text/css"> /* http://dimpost.com */ #sliderFrame {position:relative;width:700px;margin: 0 auto 40px;} #slider { width:700px;height:306px;/* Make it the same size as your images */ background:#fff url(http://4.bp.blogspot.com/-aVGCcclfKQo/UR-T3vxFAMI/AAAAAAAABm8/ncwIfUdoLIw/s1600/loading.gif) no-repeat 50% 50%; position:relative; margin:0 auto;/*make the image slider center-aligned */ box-shadow: 0px 1px 5px #999999; } #slider img { position:absolute; border:none; display:none; } /* the link style (if an image is wrapped in a link) */ #slider a.imgLink { z-index:2; display:none;position:absolute; top:0px;left:0px;border:0;padding:0;margin:0; width:100%;height:100%; } /* Caption styles */ div.mc-caption-bg, div.mc-caption-bg2 { position:absolute; width:100%; height:auto; padding:0; left:0px; bottom:15px; z-index:3; overflow:hidden; font-size: 0; } div.mc-caption-bg { background-color:black; } div.mc-caption { font: bold 14px/20px Arial; color:#EEE; z-index:4; padding:10px 0; text-align:center; } div.mc-caption a { color:#FB0; } div.mc-caption a:hover { color:#DA0; } /* ------ built-in navigation bullets wrapper ------*/ div.navBulletsWrapper { top:320px; left:280px; /* Its position is relative to the #slider */ width:150px; background:none; padding-left:20px; position:relative; z-index:5; cursor:pointer; } /* each bullet */ div.navBulletsWrapper div { width:11px; height:11px; background:transparent url(http://3.bp.blogspot.com/-ZUaX5-lcCi4/UR-TzMXcpuI/AAAAAAAABm0/kokxtfFdNcU/s1600/bullet.png) no-repeat 0 0; float:left;overflow:hidden;vertical-align:middle;cursor:pointer; margin-right:11px;/* distance between each bullet*/ _position:relative;/*IE6 hack*/ } div.navBulletsWrapper div.active {background-position:0 -11px;} /* --------- Others ------- */ #slider { transform: translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); } </style> <script src="http://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script> <div id="sliderFrame"> <div id="slider"> 

<a href="http://duakotopas.blogspot.com/2012/03/melirik-usaha-pandai-besi-di-jorong.html"><img src="http://1.bp.blogspot.com/-2sdbsRaOhkw/TmjJWS96GzI/AAAAAAAAB44/x66SIH3CLyQ/s640/Foto0115.jpg" alt="Perjalanan Yang Nyaman dan Menyenangkan"/></a> 
<a href="http://duakotopas.blogspot.com/2013/08/pesona-tersembunyi-air-terjun-sarasah.html"><img src="http://4.bp.blogspot.com/-2bX46cvUhaA/UflIhDRsL0I/AAAAAAABvt0/NrD5pjvDHSA/s640/Air-terjun-sarosah-nagari-cubadak-duakoto-pasaman---duakotopas%5Bdot%5Dtk.jpg" alt="Pesona Tersembunyi Air Terjun Sarasah Jorong Air Mancur" /></a> 
 <a href="http://duakotopas.blogspot.com/2013/08/panen-ikan-bersama-di-lubuk-larangan.html"><img src="http://1.bp.blogspot.com/-olUUBFHXfPs/UgnThY5EQuI/AAAAAAABv7o/79iZ-eExFT8/s640/1146489_623051164395178_1285308209_n.jpg" alt="Panen Ikan Bersama Di Lubuk Larangan Kecamatan Dua Koto" /></a> 
 <a href="http://duakotopas.blogspot.com/2013/08/panen-ikan-bersama-di-lubuk-larangan.html"><img src="http://4.bp.blogspot.com/-_SzWGdPCztw/UgnURWF34hI/AAAAAAABv7w/RiOFyDzGOic/s640/Barilas.jpg" alt="Panen Ikan Bersama Di Lubuk Larangan Kecamatan Dua Koto" /></a>
 <a href="#"><img src="http://4.bp.blogspot.com/-Tv9HqW2SYI8/UhIDkyGzHwI/AAAAAAABwAI/oW8iC8iyhc0/s640/1.jpg" alt="Perjuangan Penerus Bangsa"/></a> </div> 

<div id="htmlcaption1" style="display: none;"> Code by <a href="http://www.haakblog.com" target="_blank">Haakblog</a> </div> <div id="htmlcaption2" style="display: none;"> <a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks. </div> </div> 

5. Ubah kode yang berwarna merah dengan link yang akan di tuju.

6. Ubah kode berwarna biru dengan Link gambar, caranya anda klik kanan gambar yang telah di publikasikan dan sudah di tampilkan kemudian klik Copy Image Location taruh di tempat yang berwarna biru tadi.

7. Kode berwarna Hijau ganti dengan title atau keterangan gambar yang akan di tampilkan

8. kemudian simpan Gadget tadi tunggu beberapa saat kemudian lihat hasilnya.

9. Gadget untuk slide bergambar tadi anda dapat menaruhnya di tempat dimana anda suka.

Demikianlah Cara Membuat Slider Images atau Slide Bergambar Otomatis di Blog, Apabila ada pertanyaan tentang arikel ini untuk meletakkan seperti website Duakotopas anda dapat menanyakan di kotak komentar seperti yang telah disediakan dibawah ini.
Postkan Komentar:

Latest Update