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

Membuat Slide News Bergambar Dengan Lof JSliderNews 1.0 - Jquery 1.3


Kamis, 07 November 2013

Membuat Slide News Bergambar Dengan Lof JSliderNews 1.0 - Jquery 1.3 -
duakotopas.com – Slide News istilah kerennya mungkin seperti itu  , Untuk slide dari Loft JsliderNews khusunya ada beberapa macam. dan yang akan kita kupas untuk kesempatan kali ini adalah slidenews seperti gambar diatas atau Slide dari kanan ke kiri dengan Gambar kecil sebagai Navigatornya
Jika anda mempunyai website atau Blog yang berisi Berita, Pc Games, Movie, dll. Munkin akan terlihat lebih Profesional jika anda menerapkan Slidenews seperti diatas di Website/Blog anda.

Untuk memasangnya sedikit membutuhkan kesabaran dan kejelian, tapi bukan berarti sulit..
Ok langsung saja Ikuti Langkah demi langkah dibawah ini.



  • Masuk ke Blogger Dulu dengan ID anda
  • Kemudian DesignEdit HTML
  • Backup dulu template anda jikalau nanti ada kesalahan Download Full Template \\
  • Cari kode berikut ]]></b:skin> kemudian pastekan script berikut di atasnya :

/* CSS Document */ .lof-slidecontent, .lof-slidecontent a {color:#FFF;} .lof-slidecontent a.readmore{color:#58B1EA;font-size:95%;} .lof-slidecontent{position:relative;overflow:hidden;border:#F4F4F4 solid 1px;} .lof-slidecontent .preload{height:100%;width:100%;position:absolute;top:0;left:0;z-index:100000;text-align:center;background:#FFF} .lof-slidecontent .preload div{height:100%;width:100%;background:transparent url(https://lh5.googleusercontent.com/-EUJ6DSCRvjE/TY3wVuINx9I/AAAAAAAAAHE/N98hlw-slDU/s1600/load-indicator.gif) no-repeat scroll 50% 50%;} .lof-main-outer{position:relative;height:100%;width:900px;z-index:3px;overflow:hidden;} /*******************************************************/ .lof-main-item-desc{z-index:100px;position:absolute;bottom:50px;left:0px;width:350px;background:url(https://lh6.googleusercontent.com/-cZwhrjisIMU/TY3wUl2isQI/AAAAAAAAAGo/qKPj1gIvZEA/s1600/bg_trans.png);height:100px;/* filter:0.7(opacity:60) */padding:10px;} .lof-main-item-desc p{margin:0 8px;padding:8px 0} .lof-main-item-desc h3{padding:0;margin:0} .lof-main-item-desc h2{padding:0;margin:15px 0 0 0px;} .lof-main-item-desc h3 a{ margin:0;background:#C01F25;font-size:75%;padding:2px 3px;font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;text-transform:uppercase;text-decoration:none} .lof-main-item-desc h3 a:hover{text-decoration:underline;} .lof-main-item-desc h3 i {font-size:70%;} /* main flash */ ul.lof-main-wapper{/* margin-right:auto; */overflow:hidden;background:transparent url(https://lh5.googleusercontent.com/-EUJ6DSCRvjE/TY3wVuINx9I/AAAAAAAAAHE/N98hlw-slDU/s1600/load-indicator.gif) no-repeat scroll 50% 50%;padding:0px;margin:0;position:absolute;overflow:hidden;} ul.lof-main-wapper li{ overflow:hidden;padding:0px;margin:0px;float:left;position:relative;} .lof-opacity li{position:absolute;top:0;left:0;float:inherit;} ul.lof-main-wapper li img{padding:0px;} /* item navigator */ .lof-navigator-wapper{position:absolute;bottom:10px;right:10px;background:url(https://lh4.googleusercontent.com/-1YYY35NIqcY/TY3wmfqZufI/AAAAAAAAAHk/DhaTraHyNY4/s1600/transparent_bg.png) repeat;padding:5px 0px;} .lof-navigator-outer{position:relative;z-index:100;height:180px;width:310px;overflow:hidden;color:#FFF;float:left} ul.lof-navigator{top:0;padding:0;margin:0;position:absolute;width:100%;} ul.lof-navigator li{cursor:hand; cursor:pointer;list-style:none;padding:0;margin-left:0px;overflow:hidden;float:left;display:block;text-align:center;} ul.lof-navigator li img{border:#666 solid 3px; } ul.lof-navigator li.active img, ul.lof-navigator li:hover img {border:#A8A8A8 solid 3px;} .lof-navigator-wapper .lof-next, .lof-navigator-wapper .lof-previous{display:block;width:22px;height:30px;color:#FFF;cursor:pointer;} .lof-navigator-wapper .lof-next {float:left; text-indent:-999px;margin-right:5px;background:url(https://lh4.googleusercontent.com/-Vcj8PnF-8Pw/TY3wTtT0DvI/AAAAAAAAAGU/gadwQ-_4cjI/s1600/arrow-l.png) no-repeat right center;} .lof-navigator-wapper .lof-previous {float:left; text-indent:-999px;margin-left:5px;background:url(https://lh5.googleusercontent.com/-bt9lQYzY8Yg/TY3wT3asqgI/AAAAAAAAAGY/b5yLjQ7BrCE/s1600/arrow-r.png) no-repeat left center;}

  • Selanjutnya cari kode </head> kemudian pastekan script berikut di atasnya :


<script language='javascript' src='http://bendolbm.googlecode.com/files/jquery1.js' type='text/javascript'/>
 <script language='javascript' src='http://bendolbm.googlecode.com/files/jquery.easing.js' type='text/javascript'/>
 <script language='javascript' src='http://bendolbm.googlecode.com/files/script.js' type='text/javascript'/>
<script type='text/javascript'> $(document).ready( function(){ var buttons = { previous:$(&#39;#lofslidecontent45 .lof-previous&#39;) , next:$(&#39;#lofslidecontent45 .lof-next&#39;) }; $obj = $(&#39;#lofslidecontent45&#39;).lofJSidernews( { interval : 4000, direction : &#39;opacitys&#39;, easing : &#39;easeInOutExpo&#39;, duration : 1200, auto : false, maxItemDisplay : 4, navPosition : &#39;horizontal&#39;, // horizontal navigatorHeight : 32, navigatorWidth : 80, mainWidth:980, buttons : buttons} ); }); </script>


Keterangan :  Jika anda sudah mempunyai file jquery1.js kode berwarna merah diatas 
( <script language='javascript' src='http://bendolbm.googlecode.com/files/jquery1.js' type='text/javascript'/> )

ditempat lain atau sudah membuat slideshow sebelumnya anda tidak perlu memasangnya script warna merah diatas di hapus saja.

  • Kemudian Save Template anda
  • Sekarang menuju DesignPage Elements
  • Add GadgetHTML/JavaScript
  • Kemudian Masukkan kode Script dibawah ini didalam Gadget tsb ( untuk judul biarkan kosong saja )
<!------------------------------------- THE CONTENT ------------------------------------------------->
<div id="lofslidecontent45" class="lof-slidecontent" style="width:950px; height:340px;"> <div class="preload"><div></div></div> <!-- MAIN CONTENT -->
<div class="lof-main-outer" style="width:950px; height:340px;">
 <ul class="lof-main-wapper">

 <li> <img src="http://s11.postimg.org/lb1xglf/gerakan_mengaji_duakotopascom.jpg" title="Newsflash 2" /> <div class="lof-main-item-desc"> <h3><a target="_parent" title="Newsflash 1" href="http://www.duakotopas.com/2013/11/pemkab-pasaman-dukung-gerakan-maghrib.html">/ Newsflash 1 /</a> <i> — Minggu, 03 November 2013 10:41</i></h3>
<h2>Gerakan Maghrib Mengaji Pasaman</h2>
  <p>Pemerintah Kabupaten Pasaman, Sumatera Barat komitmen mendukung gerakan maghrib mengaji,... <a class="readmore" href="http://www.duakotopas.com">Read more </a> </p> </div> </li>

<li> <img src="http://s6.postimg.org/ham8c2p/gelar_tuanku_raja_sontang_duakotopascom.jpg" title="Newsflash 1" /> <div class="lof-main-item-desc"> <h3><a target="_parent" title="Newsflash 2" href="http://www.duakotopas.com/2012/02/gelar-tuanku-rajo-sontang-dilewakan.html">/ Newsflash 2 /</a> <i> — Minggu 16 Juni 2013, 09:42</i></h3> 
<h2>Gelar Raja Sontang XVII</h2>
 <p>Penobatan gelar Tuanku Rajo Sontang XVII kepada Reflis Nasution sebagai pucuk adat atas dua Nagari di Kecamatan Duo Koto... <a class="readmore" href="http://www.duakotopas.com">Read more </a> </p> </div> </li>

<li> <img src="http://s6.postimg.org/6dpvmp/KECAMATAN_DUA_KOTO_PASAMAN_duakotopascom.jpg" title="Newsflash 3" /> <div class="lof-main-item-desc"> <h3><a target="_parent" title="Newsflash 3" href="http://www.duakotopas.com">/ Newsflash 3 /</a> <i> — Senin 16 Juli 2012, 10:00</i></h3>
 <h2>Dua Koto Pasaman</h2>
 <p>Kecamatan Dua Koto Kabupaten Pasaman... <a class="readmore" href="http://www.duakotopas.com">Read more </a> </p> </div> </li>

 <li> <img src="http://s6.postimg.org/tzjx41/wisata_kecamatan_dua_koto_duakotopascom.jpg" title="Newsflash 5" /> <div class="lof-main-item-desc"> <h3><a target="_parent" title="Newsflash 4" href="http://www.duakotopas.com">/ Newsflash 4 /</a> <i> — Senin 16 Juli 2012, 10:00</i></h3>
 <h2>Wisata dan Budaya</h2> <p>Wisata dan Budaya Kecamatan Dua Koto Pasaman... <a class="readmore" href="http://www.duakotopas.com">Read more </a> </p> </div> </li>

<li> <img src="http://s6.postimg.org/y7c9rvl/seminar_sb3_dua_koto_pasaman_duakotopascom.jpg" title="Newsflash 5" /> <div class="lof-main-item-desc"> <h3><a target="_parent" title="Newsflash 5" href="http://www.duakotopas.com">/ Newsflash 5 /</a> <i> — Sabtu 5 Oktober 2013, 10:00</i></h3>
 <h2>Seminar SB3</h2> <p>Seminar SB3 di Kecamatan Dua Koto Pasaman... <a class="readmore" href="http://www.duakotopas.com">Read more </a> </p> </div> </li>

 <li> <img src="http://s6.postimg.org/yfrtqap/pandai_besi_kecamatan_dua_koto_pasaman_duakoto.jpg" title="Newsflash 5" /> <div class="lof-main-item-desc"> <h3><a target="_parent" title="Newsflash 6" href="http://www.duakotopas.com">/ Newsflash 6 /</a> <i> — Kamis 10 Oktober 2013, 06:03</i></h3>
 <h2>Pandai Besi</h2> <p>Pandai Besi (Apar Besi) Nagari Cubadak Kecamatan Dua Koto Pasaman... <a class="readmore" href="http://www.duakotopas.com">Read more </a> </p> </div> </li>

 <li> <img src="http://s6.postimg.org/hxplr5/IKAN_LARANGAN_DUAKOTOPASCOM.jpg" title="Newsflash 5" /> <div class="lof-main-item-desc"> <h3><a target="_parent" title="Newsflash 7" href="http://www.duakotopas.com">/ Newsflash 7 /</a> <i> — Selasa 13 Agustus 2013, 01:39</i></h3> <h2>Panen Ikan Bersama</h2> <p>Panen Ikan Bersama di Lubuk Larangan Kecamatan Dua Koto Pasaman... <a class="readmore" href="http://www.duakotopas.com">Read more </a> </p> </div> </li>

 <li> <img src="http://s6.postimg.org/3w2g1/admin_duakotopascom.jpg" title="Newsflash 8" /> <div class="lof-main-item-desc"> <h3><a target="_parent" title="Newsflash 8" href="#">/ Newsflash 8 /</a> <i> — Senin 12 Agustus 2013, 10:00</i></h3>
 <h2>Admin</h2> <p>www.duakotopas.com | Portal Dua Koto dan tutorial Informasi... <a class="readmore" href="http://www.duakotopas.com">Read more </a> </p> </div> </li> </ul> </div>

 <!-- END MAIN CONTENT --> <!-- NAVIGATOR --> <div class="lof-navigator-wapper"> <div onclick="return false" href="" class="lof-next">Next</div> <div class="lof-navigator-outer"> <ul class="lof-navigator">
 <li><img src="http://s6.postimg.org/r97li9/1_Gelar_raja_sontang_dua_koto_pasaman_duakotopa.jpg" /></li> <li><img src="http://s6.postimg.org/r97li9/1_Gelar_raja_sontang_dua_koto_pasaman_duakotopa.jpg" /></li>
<li><img src="http://s6.postimg.org/r97li9/1_Gelar_raja_sontang_dua_koto_pasaman_duakotopa.jpg" /></li>
 <li><img src="http://s6.postimg.org/r97li9/1_Gelar_raja_sontang_dua_koto_pasaman_duakotopa.jpg" /></li>
<li><img src="http://s6.postimg.org/r97li9/1_Gelar_raja_sontang_dua_koto_pasaman_duakotopa.jpg" /></li>
 <li><img src="http://s6.postimg.org/r97li9/1_Gelar_raja_sontang_dua_koto_pasaman_duakotopa.jpg" /></li>
 <li><img src="http://s6.postimg.org/r97li9/1_Gelar_raja_sontang_dua_koto_pasaman_duakotopa.jpg" /></li>
 <li><img src="http://s6.postimg.org/r97li9/1_Gelar_raja_sontang_dua_koto_pasaman_duakotopa.jpg" /></li> </ul> </div> <div onclick="return false" href="" class="lof-previous">Previous</div> </div> <!----------------- ---------------------> </div> <script type="text/javascript"> </script>


 Keterangan Selanjutnya :
  •  Kode  http://s11.postimg.org/lb1xglf/gerakan_mengaji_duakotopascom.jpg                            => adalah  Gambar besar yang di tampilkan
  • Kode http://www.duakotopas.com/2013/11/pemkab-pasaman-dukung-gerakan-maghrib.html => Link atau Alamat yang di tuju
  • Kode Gerakan Maghrib Mengaji Pasaman  => Judul label
  • Kode Pemerintah Kabupaten Pasaman, Sumatera Barat komitmen mendukung gerakan maghrib mengaji,... => Isi Label
  • Kode  http://www.duakotopas.com = > Link Isi Label
  • Kode http://s6.postimg.org/r97li9/1_Gelar_raja_sontang_dua_koto_pasaman_duakotopa.jpg  => Link Gambar kecil yang terletak dibawah gambar besar.
  • Kemudian klik save widget tersebut, lihat hasilnya..
 Demikianlah cara Membuat Slide News Bergambar Dengan Lof JSliderNews 1.0 - Jquery 1.3  Apabila anda kurang mengerti silahkan berikan pertanyaan kepada kami di kotak komentar dibawah.

Tutorial web - bendol-collection

Postkan Komentar:

Latest Update