Membuat Slideshow Berita Foto Seperti Detik.com

Senin, 19 Juli 2010
Cara Membuat Slide Show View Image/Foto Seperti DETIK. Sangat mudah dan bisa di praktikan langsung bahkan oleh blogger pemula. Tips ini adalah hasil utak-atik kang salman mudah-mudahan nanti bermanfaat. Sebelum memulai yuk kita bahas apa sih slide show image ini? adalah sebuah widget yang menampilkan image secara rondom. Dimana akan berganti-ganti tergantung jumlah foto dan informasi yang kita masukan ke dalamnya. sebagai contoh coba anda kunjungi home page blog ini. http://asksalman19.blogspot.com di atas artikel terbaru kang salman akan muncul sebuah slide show. Mau tau bagaimana cara buatnya? Yuk kita mulai

Versi lama, 19 Juli 2010

Widget ini  memiliki tampilan yang berbeda dengan dari widget slideshow sebelumnya sebab telah sedikit kang salman modifikasi khususnya efek JQuery accordionnya.

Sebelumnya kang salman pernah membuat tutorial yang serupa dengan ini, namun karena server mengali eror sejak 2 hari lalu dan muncul kelulahan dari penikmat widget ini. Dan akhirnya kang salman melakukan update dan pembaruan widget slideshow foto yang mirip dengan okezone dan detik, update dan renovasi widget ini cukup menyita waktu selama 4 Jam, namun kang salman yakin widget ini lebih mudah pengunaannya dari pada yang sebelumnya.

Versi Baru, 22 Agustus 2010

Fitur Baru :
- Tidak membebani loading blog, dan tampil lebih 2 kali lebih cepat dari versi sebelumnya.
- Slide show yang di tampilkan lebih ciamik dan memberi warna baru pada blog anda
- Deskripsi text berada di atas foto.
- Durasi Tayang atau slide show foto. kini dapat anda setting sendiri sesuai dengan kebutuhan, Tips terkait ada di akhir artikel ini.

NEW UPDATE  DAN REPAIR TERAHIR 16 JULI 2011

Langsung Aja kita simak Cara Membuat Slide show Berita foto Seperti Detik versi 2 ini.

Langkah 1
1.  Login ke Blogger
2.  Pilih Tata Letak / Rancangan
3.  Pilih Tab Edit HTML
4.  Centang "
5.  Silakan Cari Kode ]]></b:skin> dan Taruh Kode Berikut Di atas kode ]]></b:skin>
/* Image Slideshow */
#s3slider{margin-bottom:5px; width:100%; /* important to be same as image width */height:250px; /* important to be same as image height */position:relative; /* important */word-wrap:break-word; /* fix for long text breaking sidebar float in IE */overflow:hidden; /* fix for long non-text content breaking IE sidebar float */}
#s3sliderContent{width:100%; /* important to be same as image width or wider */position:absolute; /* important */top:0; /* important */margin:0px; padding-left:0px; /* important */}
.s3sliderImage{float:left; /* important */position:relative; /* important */display:none; /* important */}
.s3sliderImage span{position:absolute; /* important */left:0; font:normal 11px 'Arial',Helvetica,sans-serif; padding:10px; width:100%; text-align:center; padding-left:0px; background-color:#000; filter:alpha(opacity=70); /* here you can set the opacity of box with text */-moz-opacity:0.7; /* here you can set the opacity of box with text */-khtml-opacity:0.7; /* here you can set the opacity of box with text */opacity:0.7; /* here you can set the opacity of box with text */color:#fff; display:none; /* important */top:0; /*if you puttop:0; ->the box with text will be shown at the top of the imageif you putbottom:0; ->the box with text will be shown at the bottom of the image*/}

6.  Kemudian Setelah itu coba cari kode </head> dan Taruh Kode berikut, di atas kode </head>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var cssdropdown={disappeardelay:250,dropdownindicator:'<img src="http://img40.imageshack.us/img40/6613/arrowto.gif" border="0" />',enablereveal:[true,8],enableiframeshim:1,dropmenuobj:null,asscmenuitem:null,domsupport:document.all||document.getElementById,standardbody:null,iframeshimadded:false,revealtimers:{},getposOffset:function(d,c){var b=(c=="left")?d.offsetLeft:d.offsetTop;var a=d.offsetParent;while(a!=null){b=(c=="left")?b+a.offsetLeft:b+a.offsetTop;a=a.offsetParent}return b},css:function(b,a,c){var d=new RegExp("(^|\\s+)"+a+"($|\\s+)","ig");if(c=="check"){return d.test(b.className)}else{if(c=="remove"){b.className=b.className.replace(d,"")}else{if(c=="add"&&!d.test(b.className)){b.className+=" "+a}}}},showmenu:function(b,a){if(this.enablereveal[0]){if(!b._trueheight||b._trueheight<10){b._trueheight=b.offsetHeight}clearTimeout(this.revealtimers[b.id]);b.style.height=b._curheight=0;b.style.overflow="hidden";b.style.visibility="visible";this.revealtimers[b.id]=setInterval(function(){cssdropdown.revealmenu(b)},10)}else{b.style.visibility="visible"}this.css(this.asscmenuitem,"selected","add")},revealmenu:function(f,d){var e=f._curheight,b=f._trueheight,a=this.enablereveal[1];if(e<b){var c=Math.min(e,b);f.style.height=c+"px";f._curheight=c+Math.round((b-c)/a)+1}else{f.style.height="auto";f.style.overflow="hidden";clearInterval(this.revealtimers[f.id])}},clearbrowseredge:function(f,d){var c=0;if(d=="rightedge"){var e=document.all&&!window.opera?this.standardbody.scrollLeft+this.standardbody.clientWidth-15:window.pageXOffset+window.innerWidth-15;var b=this.dropmenuobj.offsetWidth;if(e-this.dropmenuobj.x<b){c=b-f.offsetWidth}}else{var a=document.all&&!window.opera?this.standardbody.scrollTop:window.pageYOffset;var e=document.all&&!window.opera?this.standardbody.scrollTop+this.standardbody.clientHeight-15:window.pageYOffset+window.innerHeight-18;var g=this.dropmenuobj._trueheight;if(e-this.dropmenuobj.y<g){c=g+f.offsetHeight;if((this.dropmenuobj.y-a)<g){c=this.dropmenuobj.y+f.offsetHeight-a}}}return c},dropit:function(c,b,a){if(this.dropmenuobj!=null){this.hidemenu()}this.clearhidemenu();this.dropmenuobj=document.getElementById(a);this.asscmenuitem=c;this.showmenu(this.dropmenuobj,b);this.dropmenuobj.x=this.getposOffset(c,"left");this.dropmenuobj.y=this.getposOffset(c,"top");this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(c,"rightedge")+"px";this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(c,"bottomedge")+c.offsetHeight+1+"px";this.positionshim()},positionshim:function(){if(this.iframeshimadded){if(this.dropmenuobj.style.visibility=="visible"){this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px";this.shimobject.style.height=this.dropmenuobj._trueheight+"px";this.shimobject.style.left=parseInt(this.dropmenuobj.style.left)+"px";this.shimobject.style.top=parseInt(this.dropmenuobj.style.top)+"px";this.shimobject.style.display="block"}}},hideshim:function(){if(this.iframeshimadded){this.shimobject.style.display="none"}},isContained:function(a,b){var b=window.event||b;var d=b.relatedTarget||((b.type=="mouseover")?b.fromElement:b.toElement);while(d&&d!=a){try{d=d.parentNode}catch(b){d=a}}if(d==a){return true}else{return false}},dynamichide:function(a,b){if(!this.isContained(a,b)){this.delayhidemenu()}},delayhidemenu:function(){this.delayhide=setTimeout("cssdropdown.hidemenu()",this.disappeardelay)},hidemenu:function(){this.css(this.asscmenuitem,"selected","remove");this.dropmenuobj.style.visibility="hidden";this.dropmenuobj.style.left=this.dropmenuobj.style.top="-1000px";this.hideshim()},clearhidemenu:function(){if(this.delayhide!="undefined"){clearTimeout(this.delayhide)}},addEvent:function(b,c,a){if(b.addEventListener){b.addEventListener(a,c,false)}else{if(b.attachEvent){b.attachEvent("on"+a,function(){return c.call(b,window.event)})}}},startchrome:function(){if(!this.domsupport){return}this.standardbody=(document.compatMode=="CSS1Compat")?document.documentElement:document.body;for(var d=0;d<arguments.length;d++){var g=document.getElementById(arguments[d]).getElementsByTagName("a");for(var b=0;b<g.length;b++){if(g[b].getAttribute("rel")){var a=g[b].getAttribute("rel");var c=document.getElementById(a);this.addEvent(c,function(){cssdropdown.clearhidemenu()},"mouseover");this.addEvent(c,function(h){cssdropdown.dynamichide(this,h)},"mouseout");this.addEvent(c,function(){cssdropdown.delayhidemenu()},"click");try{g[b].innerHTML=g[b].innerHTML+" "+this.dropdownindicator}catch(f){}this.addEvent(g[b],function(i){if(!cssdropdown.isContained(this,i)){var h=window.event||i;cssdropdown.dropit(this,h,this.getAttribute("rel"))}},"mouseover");this.addEvent(g[b],function(h){cssdropdown.dynamichide(this,h)},"mouseout");this.addEvent(g[b],function(){cssdropdown.delayhidemenu()},"click")}}}if(this.enableiframeshim&&document.all&&!window.XDomainRequest&&!this.iframeshimadded){document.write('<IFRAME id="iframeshim" src="about:blank" frameBorder="0" scrolling="no" style="left:0; top:0; position:absolute; display:none;z-index:90; background: transparent;"></IFRAME>');this.shimobject=document.getElementById("iframeshim");this.shimobject.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";this.iframeshimadded=true}}};
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.s3Slider=function(h){var e=this;var l=(h.timeOut!=undefined)?h.timeOut:4000;var g=null;var d=null;var k=true;var f=false;var i=a("#"+e[0].id+"Content ."+e[0].id+"Image");var b=a("#"+e[0].id+"Content ."+e[0].id+"Image span");i.each(function(m){a(i[m]).mouseover(function(){f=true});a(i[m]).mouseout(function(){f=false;c(true)})});var c=function(m){var n=(m)?(l/2):l;n=(k)?10:n;if(i.length>0){d=setTimeout(j,n)}else{console.log("Poof..")}};var j=function(){g=(g!=null)?g:i[(i.length-1)];var m=jQuery.inArray(g,i)+1;m=(m==i.length)?0:(m-1);var n=a(e).width()*m;if(k==true){if(!f){a(i[m]).fadeIn((l/6),function(){if(a(b[m]).css("bottom")==0){a(b[m]).slideUp((l/6),function(){k=false;g=i[m];if(!f){c(false)}})}else{a(b[m]).slideDown((l/6),function(){k=false;g=i[m];if(!f){c(false)}})}})}}else{if(!f){if(a(b[m]).css("bottom")==0){a(b[m]).slideDown((l/6),function(){a(i[m]).fadeOut((l/6),function(){k=true;g=i[(m+1)];if(!f){c(false)}})})}else{a(b[m]).slideUp((l/6),function(){a(i[m]).fadeOut((l/6),function(){k=true;g=i[(m+1)];if(!f){c(false)}})})}}}};j()}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
   $(&#39;#s3slider&#39;).s3Slider({
      timeOut: 3000
   });
});
</script> 
7.  Save Template


Langkah 2
Untuk Bisa Menikmati widget ini silakan perhatikan instruksi di bawah ini  :

1.  Login ke Blogger
2.  Pilih Tata Letak Atau Rancangan
3.  Pilih Tab Edit HTML
4.  Jangan Lupa Untuk buat Backupa data anda
5.  Centang expand template widget
6.  Cari Kode ini <div id='main-wrapper'>
      Tekan Ctrl+F untuk mempermudahnya
 7.  Copy kode di bawah ini dan Paste tepat di bawah kode <div id='main-wrapper'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div id='s3slider'>

<ul id='s3sliderContent'>

<li class='s3sliderImage'>

<a href='http://www.kucoba.com/2010/07/10-tanda-cewek-suka-ma-kita.html'>

<img height='245'
src='http://3.bp.blogspot.com/_Z8F7gBEfQSU/S_3BHzSwjQI/AAAAAAAAA4Y/ckLzjBVMJmw/s1600/1.jpg'
width='450'/>

<span>
Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image akhiri dengan titik.</span></a></li>

<li class='s3sliderImage'>

<a href='#'>

<img height='245'
src='#'
width='450'/>

<span>
Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

<li class='s3sliderImage'>

<a href='
#'>

<img height='245'
src='
#'
width='450'/>

<span>
Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

<li class='s3sliderImage'>

<a href='
#'>

<img height='245'
src='
#'
width='450'/>

<span>
Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

<li class='s3sliderImage'>

<a href='
#'>

<img height='245'
src='
#'
width='450'/>

<span>
Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

<div class='clear s3sliderImage'/>

</ul>

</div>

</b:if>
 

Keterangan :
  1. Ganti warna merah dengan alamat link artikel kamu
  2. Ganti warna hijau dengan link gambar / foto
  3. Arti kode width="468" height="245" adalah ukuran dari widget slideshow view, lebar="468" tinggi="245" (atur sesuai ukuran widget yang kamu inginkan)
  4. <span>Isi dengan kalimat yang ingin di tampilkan di atas foto.</span>
  5. Jumlah Slide Show bisa anda perbanyak dengan menambahkan kode <li><a href="#"><img height='245' src="#" width='468'/> <span>isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image jangan lupa akhiri dengan titil atau tanda kalimat lainnya .</span></a></li> di atas kode </ul>


Lihat Contoh yang kang salman buat di bawah ini :
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage'>
<a href='http://www.kucoba.com/2010/07/10-tanda-cewek-suka-ma-kita.html'>
<img height='245' src='http://3.bp.blogspot.com/_Z8F7gBEfQSU/S_3BHzSwjQI/AAAAAAAAA4Y/ckLzjBVMJmw/s1600/1.jpg' width='450'/>
<span>Bagaimanakah tanda perempuan menyukai kita? hal ini selalu jadi pertanyaan setiap cowok yang ntah itu dia ke GR-an atau dia yang benar-benar mengharapkan cinta dan jawaban dari si Doi, inilah 10 tanda khusus tanda cewek ada suka ma kita</span></a></li>
<li class='s3sliderImage'>
<a href='http://www.kucoba.com/2010/07/8-pedomoan-merayu-istri.html'>
<img height='245' src='http://2.bp.blogspot.com/_Z8F7gBEfQSU/S_3BIO7aq-I/AAAAAAAAA4g/JzuVEZNKsFk/s1600/2.jpg' width='450'/>
<span>8 pedoman merayu istri. Mendidik istri adalah tugas seorang suami namun terkadang kita sendiri tidak tau bagaimana cara mendidik istri dengan merayu atau menggodanya, berikut ini anjuran menurut islam cara mendidik istri.</span></a></li>
<li class='s3sliderImage'>
<a href='http://www.kucoba.com/2009/12/5-tips-dan-rahasia-mempercepat-internet.html'>
<img height='245' src='http://1.bp.blogspot.com/_Z8F7gBEfQSU/S_3BITM49PI/AAAAAAAAA4o/kbvZMUdK1zk/s1600/3.jpg' width='450'/>
<span>5 Tips Rahasia Mempercepat Internet. Anda merasa kecepatan internet lambat? temukan penyebabnya disini dan cari tau bagaimana solusinya.</span></a></li>
<li class='s3sliderImage'>
<a href='http://www.kucoba.com/2010/07/membuat-slideshow-berita-foto-seperti.html'>
<img height='245' src='http://3.bp.blogspot.com/_Z8F7gBEfQSU/S_3BIQlG3sI/AAAAAAAAA4w/ovJjGjaCUCE/s1600/4.jpg' width='450'/>
<span>http://www.kucoba.com adalah sebuah blog yang didirikan untuk mendukung program pengembangan sumber daya perblogkan melalui Blogger/Blogspot.</span></a></li>
<li class='s3sliderImage'>
<a href='http://www.kucoba.com/2010/06/inilah-cara-meningkatkan-jumlah.html'>
<img height='245' src='http://2.bp.blogspot.com/_j4kWN5RD0kU/TEJLpcR4RPI/AAAAAAAAA3M/UAmrYeGzRao/s320/graph_summary_barchart.php+juni.png' width='450'/>
<span>Panduan mudah meningkatkan jumlah pengunjung dan dangan cara Cepat, mudah, dan gratis.</span></a></li>
<div class='clear s3sliderImage'/>
</ul>
</div>
</b:if>
Hasil contoh di atas akan terlihat seperti di halaman Blog disto yang baru kang salman buat, Silakan Klik Disini  



PENTING !! :
Untuk Mengubah Ukuran dan Lebar Slide Show Agar Fix Sesuai ukuran yang anda inginkan :
Sesuaikan width dan heigth dengan ukuran widget yang di ingin kan sesuai dengan ruang di sidebar blog atau posisi lainnya yang tersedia. untuk informasi lebih lanjut silakan lihat Keterangan di nomor tiga di atas. Dan untuk cara mengatur atau setting waktu slide show silakan anda cara kode timeOut: 3000
Ubah angka 3000 itu sesuai kebutuhan anda.Selamat mencoba...^_^)

Dilarang keras meng-copy artikel ini tanpa Izin dan link sumber yang diserakan!

Post By Kang Salman
http://www.kucoba.com

Lihat Juga :
Post By Kang Salman
www.kucoba.com

Dapatkan update artikel  terbaru kami langsung ke email anda.  
Artikel Terbaru

99 Responses to "Membuat Slideshow Berita Foto Seperti Detik.com"

Zianka Art mengatakan...

akhirnya ketemu juga...makasih sob

http://zianka-art.blogspot.com/

giffarspot mengatakan...

kok ganti gambarnya terlalu cepat ya mas? bisa diperlambat tidak ya?

rasiqzone mengatakan...

cocok banget buat blog yang berisi topik bebas..
akan sangat membantu membuat headline news blog dalam bentuk slideshow..
happy blogging mas..

PAK JENGO mengatakan...

Salam kenal.
Akhirnya saya ketemu juga Slideshow yang sudah lama ingin saya buat. Trims atas ilmu gratis yang saya dapat dari pemilik blog ini. Sukses selalu buat anda.
Terima kasih.

Sijambul mengatakan...

Sudah tidak berfungsi lagi kang..

Kang Salman mengatakan...

Baiklah nanti akan saya perbaiki dan update lagi. Mohon tunggu sebentar. Insya Allah besok sudah bisa berfungsi lagi

http://distro-baju.blogspot.com/ mengatakan...

Artikel di atas sudah di update sialkan lihat demonya di http://distro-baju.blogspot.com

irsyad mengatakan...

@kang salman :mas,qo code yang langkah kedua ini ga ketemu?
terus itu sampe langkah 2 ya?

Kang Salman mengatakan...

Masa? sih ada kok, cari kode yang mirip dengan did id=main-wrapper
atau sulusi lainya anda bisa dengan ikuti langkah di bawah ini :
1. Login ke Blogger
2. Klik Rancangan
3. Klik add widget /tambah widget
4. Paste kode yang di langkah nomer 2. di jamin berhasil.

Catatan :
1. Langkah satu harus di kerjakan terlebih dahulu
2. Kalau di pasang di widget, berarti kamu bisa memindah-mindahakan posisi slideshow foto sesuai dengan kebutuhan, sehingga lebih praktis,
3. kekurangan dari memasang di widget adalah, adanya loading tunggu 5 detik lebih lama.

Semoga membantu, terima kasih ya pertanyaannya keren banget. ^_^

Aziz mengatakan...

Alhamdulillah bisa.
Hatur nuhun kang.
sukses: http://ashari-aziz.blogspot.com

gsuyu mengatakan...

Nuhun pisaaaan Kang Salman...Sudah jadi dan berfungsi. Sekali deui nuhuuuuuuun.

Download novel islami mengatakan...

salam kenal

nano_aveiro mengatakan...

manstabbb mas...

Dika Pratama mengatakan...

pusing sya kang..
http://blogbangdp.blogspot.com

Amalia mengatakan...

haloooo kang. saya sudah berhasil, makasih ya infonya. TAPI minta bantuannya, kok kalau pindah page tetep nongol ya itu slideshownya??? aduh, inginnya sih nongol di beranda ajaaaa. plis bantu !!!!

Kang Salman mengatakan...

Wah selamat ya.. untuk membuat nya tampil di halaman home saja silakan Amalia baca artikel saya Disini

Amalia mengatakan...

waduhh. om. mau tanya lagi nihhh.. stelah dlideshow nya berhasil kok jumlah postingan tulisan di halaman depan blog saya cuma tiga postingan ya? dan tidak bisa diatur, padahal sudah sy ganti 10 postingan per halaman depan, tetap muncul tiga. gimana atuuhhh

Kang Salman mengatakan...

jumlah artikel yang bisa muncul cuma sampai 4 atau 5 ini untuk meminimalisasi agar loading blog tidak berat, jika artikel yang di munculkan banyak otomatis loading blog akan menjadi berat, dan kalau sudah begitu pengunjungpun tidak mau datang lagi ke blog yang berat.
semoga dapat membantu..
soal mengubah postingan biar jadi 10 saya tidak tau mbak, maaf ya.

Syukhairey mengatakan...

makasih ya kang salman kongsi tutorial ini. sudah lama cari widget ini. ada jumpa di sini http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm tapi ngak bisa buat sendiri. huhuhu...

Syukhairey mengatakan...

kang...gimana kalau kode pada LANGKAH 2 ngak ada dalam template saya. sudah coba banyak kali tapi masih ngak jumpa. aduh..pening ni..huhu

Kang Salman mengatakan...

Solusinya tambahkan saja kode tersebut di add widget > Javascript/HTML

lalu simpan di atas posting.

brutality mengatakan...

bagus bagus...:)
gk ketemu kodenya..
tolong liat blog kecil saya rocksoundhardcore.blogspot.com

Kang Salman mengatakan...

Coba klik Expend Widget saat hendak memodifikasi template
lalu tekan CTRL+F nanti ada kolom, isi dengan keyword yang di cari.
Saya sudah lihat situs Iwankitty, Itu sudah ada slideshownya.. :)
kalau masih kesulitan silakan kirimkan xml nya di contact us menu bawah akan saya instalkan sendiri untuk mas Iwan.
Terima kasih

ilalang mengatakan...

Mau nanya ni..kalo misal mau di pasang di sidebar gimana caranya mas..??
Soalnya aku butuh banget mas..

Mkasih sebelumnya..

Kang Salman mengatakan...

Pada langkah No. 7. Ambil kode yang di bawahnya yang sudah saya blok warna biru. kemudian bukan Rancangan > Tambah Widget > HTML/Javascript > Pastekan kode > Simpan
Jangan lupa untuk mengatur kelebaran gambarnya.

Poncol Gate mengatakan...

http://img40.imageshack.us/img40/6613/arrowto.gif tolong dong di cek lagi...ternyata ini yang bikin error...T-T

Kang Salman mengatakan...

Kode sudah di Perbaiki.. Terima kasih

juna mengatakan...

makasih banget kang salman..tararengkyu pisan

Messi mengatakan...

terimakasih infonya boss, saya juga lagi nyari2 eh ketemu juga neh bahan :) nice info

Kang Salman mengatakan...

Muhun sami-sami @juna

Jaisun mengatakan...

tanhk sob, dah aq praktekkan ni...!

bumblebee mengatakan...

kang, kok div id=main-wrapper gak ditemukan di blog saya?? ini solusinya gimana ya???
mohon penjelesannnya kang..

Kang Salman mengatakan...

Url Blognya apa kang?

bumblebee mengatakan...

gilaposting.co.cc kang...
kalau pasangnya di add gadget, yang muncul cuman tulisannya doang, gak ada gambarnya....

Kang Salman mengatakan...

Jgn di pasang di Add Widget

bumblebee mengatakan...

terus di pasang di mana dong??
sementara id=main-wrapper di blog saya gak ada kang???
mohon bimbingannya kang!!! masih newbie soalnya!!!!

Kang Salman mengatakan...

http://www.abu-farhan.com/2011/07/awesome-automatic-content-slider-for-blogger-using-jquery-part-2/

Asiana D' Sun mengatakan...

cara menghubungi kang salman gimana ya.....???? coz kayaknya kode css yang ddi taruh di atas Skin, kepotong tuh......!!!!

Kang Salman mengatakan...

Terima Kasih atas informasinya. setelah kami cek ulang tenyata ada kode yang hilang, ini mungkin kesalahan dari saya saat melalukan update kode 3 Juni. Saya meminta maaf atas keteledoran saya. Kode sudah kami perbaiki. Jangan sungkan untuk memberi tahu kami. Terima Kasih Asiana. Untk menghubungi saya silakan klik contact us di bawah.

Kun Pahlevi 9 mengatakan...

kang, ane udah bikin udah 2 bulan terus muncul tapi sekarang malah jadi ga bisa, gambarnya ga muncul. padahal itu link gambarnya masih bisa. solusinya gimana ya?

Kang Salman mengatakan...

Hapus semua kode lama dan ganti dengan yang baru. bulan ini saya baru melakukan update kode. jika masih ada kendala hubungi saya kemabali kang.
Terima Kasih

Kun Pahlevi 9 mengatakan...

semuanya ganti sama yang baru ini? tetep gabisa kang

Kang Salman mengatakan...

Wah berarti ada kendala di dalam template @kun pahlevi, Nanti pagi akan saya coba cek ulang codingnya.
Terima Kasih

Ikrimah Abdurrahman mengatakan...

Assalamualaikum , Kok Belum Bisa Nyari div id=main-wrapper Susah Banget Kasih Solusinya ???

Fik Mag mengatakan...

Kang, saya bikin slideshow pake photobucket tapi slideshownya tidak continues, cuma a-z, ga ada pengulangan. apa kodenya biar slideshow berulang-ulang. makasih

Kang Salman mengatakan...

@Ikrimah: Ganti template Anda, etelah mengganti template di zoomtemplate.com kode yang anda cari pasti ketemu.

@Fik Mag: silakan gunkan kode di atas. kode ini berulang-ulang. atau silakan kunjungi situs www.abu-farhan.com

MI MUHAMMADIYAH 1 KARANGAGUNG mengatakan...

Makasie bang atas infonya, semangat trus untuk mencerdaskan anak bangsa.

Muhammad Tohir mengatakan...

Terimakasih ilmunya mas...

Sudi kiranya berkunjung ke blog saya, dan diharapkan bisa memberikan komentar, karena komentar dari para master blogger tentu sangat bermanfaat. Sekali lagi terimakasih

http://at-tohir.blogspot.com

Kang Salman mengatakan...

@MI MUHAMMADIYAH 1 KARANGAGUNG: Insya Allah :)

@Muhammad Tohir: Terima kasih Tohir :)

United Indonesia mengatakan...

bro entar kalau ada postingan baru,,langsung otomatis terganti juga slidenya??

mohon pencerahannya

Kang Salman mengatakan...

Baik nanti akan kami ulas tutorialnya di tunggu ya

United Indonesia mengatakan...

Makasih..di tunggu ea..selamat berpuasa dan ulang tahun indonesia ke 66

Man UTD 4evER mengatakan...

kok tertulis gini :

Kami tidak dapat menyimpan template Anda.

Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The reference to entity "h" must end with the ';' delimiter.

United Indonesia mengatakan...

Untuk membuat seperti itu..
templatenya,,memang yang sudah tersedia slideshownya atau tidak??

kok saya mencoba untuk template yg memang tdk ada slideshwnya tdk bisa??


:)

Kang Salman mengatakan...

Mau sudah tersedia slide atau tidak sama saja tergantung ketelitian kita saja, namun kadang tidak dipungkiri ada template yang cocok ada juga yang tidak.
Nanti bulan sembilan saya akan share slide yang lebih oke.

Kang Salman mengatakan...

@Man UTD: kesalahan dalam menyimpan kode, atau kode nya todak rapih.

Tube bejho mengatakan...

makasih banyak lho kang salman..........aku dah ke bantu dengan artikel ini

Kang Salman mengatakan...

Alhamdulillah :)

Admin mengatakan...

Assalamualaikum... Saia tertarik Slidenya kang Salman, Tp, agak Ribet Ribet juga nih,, hehe, Tolong Di bantu Kang Salman ... hehe :)

Kang Salman mengatakan...

Walaikumsalam, saya bantu dengan tutor aja ya, memang susahnya di tahap mana?

Dara Qodisa Baituridwan mengatakan...

Assamualaikum.. mohon batuannya ko kode yg ke 2 gak ada di template ya kang, pdhl sdh saya cari pke ctrl+f ?

Kang Salman mengatakan...

@Dara Qodisa Baituridwan: Walaikumsalam Wr.Wb
Ia memang kode tersebut tidak bisa di temukan pada template lama, tapi dara bisa menggantinya dnegan menaruh kode di atas <div class='main-cap-bottom cap-bottom'>

SAM mengatakan...

Kang, turbo mode itu apa maksudnya?

Boedhye Thejoe mengatakan...

postingan fantastic....mohon koreksian buat blogku..silahkan d intip

atho' mengatakan...

kang kalo fotonya dari flicker gimana?

zahroel mengatakan...

maaf, kok gak tampil juga, padahal sudah sy lakukan seperti tutorialnya, dan sudah sy coba di 2 blog, tetap gak berhasil

Kang Salman mengatakan...

Terkadang ada template yang tidak mau di pasangi widget slideshhow apapun, ternmasuk widget ini. Kesalahan berasal dari template Anda bila gagal menginstal widget ini. Hal itu terjadi akibat history modifikasi yang penrah Anda lakukan pada blog yang tidak rapih. Saran saya sebaiknya Anda mengganti template

firmanpratama mengatakan...

Bagus Kang Salam Kenal Ya

new-row mengatakan...

thanks,,,bisa neh slideshownya ini cukup bagus tapi gimana cara supaya teksnya tetap berada dibawah, gambar kepala agak kelindung, coba pakai kode dilain templatenya gak bisa,,,

cahbountenrzorg mengatakan...

kang tolong dong di koreksi slah dimana soalnya udah ngikutin instruksi tapi di div main wrapper ga ada terus pake javascript html tapi jadi ga mau slide, thanks atas perhatiaanya

Maria Ulfah mengatakan...

Kang, saya dah coba berkali2 kok tetep gak bisa ya? mohon bantuannya

www.terasmaul.blogspot.com

evanzip mengatakan...

kerennnnn infonya jadi tertari pengen pasang di blog ku..makasih sob share yang menarik ini

cristina mengatakan...

makasih ya pak

Kang Salman mengatakan...

Tidak ada yang peru saya koreksi dari tutorial di atas, karena memang semuanya sudah benar dan kode tersebut masih berfungsi bila di gunakan di blog.

Beberapa Permasalahan Yang Mungkin Anda Hadapi
1. Template anda menolak
2. Kesahan pemasangan. perlu di ketahui, pada langkah 2 kode tersebut harus di simpan tepat di bawah <div id="main-wrapper">
3. Saat menggati image gambar dan link kemungkinan anda tidak sengaja menghapus kode, walau hanya tanda kutip, sehingga template tidak bisa di simpan.
4. Untuk kasus slideshow yang tidak berjalan di template setelah behasil terpasang, hal itu disebabkan oleh template yang menolak kehadiran slideshow. bukan hanya slideshow ini tapi untuk semua slideshow. karena kode templatenya sendiri menolak.

Solusinya silakan mengganti template

Azis Grafis mengatakan...

thanks gan... yang ini work di blog ane... udah berkeling2 gax dapet... izin save scriptnya

senyum dunia mengatakan...

cukup susah juga ya pak...
makasih dee...

Stupid monkey mengatakan...

Terima kasih infonya kang, tapi saya punya masalah sama widgetnya jadi gak dinamis nih, mohon penerangannya.

Terima kasih

ABI HABUDIN mengatakan...

kang maaf numpnag ngopi
tapi setalah di coba di blog saya ko ga tampil ya

mohon wangsitnya??

rasbun mengatakan...

Wah senengnya ketemu tips tentang poto buat blog.

Kang, ada tutorial buat nampilin photo kita kaya di facebook/google plus gitu? kalo potonya diklik maka akan muncul halaman yang nampilin semua potonya aja?

Terimakasih

Restsindo-hty mengatakan...

Saya coba akang ......
Mudah mudahan berhasil ya ....

SugarRadio mengatakan...

thanks sob
sugarradio.co.cc

you9a mengatakan...

nggk berhasil di blog ane gan..
1. di blog ane kaga ada < div id="main-wrapper">

2. bisa sih gw taro di tempat lain, tapi hasil'ny nggk bisa di taro di pinggir -_-'

3. klo di taro di add widgets malah yang kluar cuma link tulisan doang..

padahal gw pengen bngt ini slideshow keren bngt..

Restsindo-hty mengatakan...

Oce banget bro .... akan saya coba ke website saya

maspray mengatakan...

Demonya mana mas? Banyak banget artikel tutorial membuat slid show ato menu slider, tapi sayangnya yang ngasi demo hampir gak ada....Cuman di abu-farhan.com.
Misal membuat slider seperti di Ganool.com scriptnya gmana yah?

Kang Salman mengatakan...

Sudah saya kasih link demo tp ga di keliatan. Coba perhatikan tulisan di atas klik disini
Di atas tulisan PENTING!!
Itulah yang membuat orang sering gagal dalam memodifikasi blog tidak pernah tuntas membaca sampai habis maunya instan saja.

mtsdarulhikamtracal mengatakan...

Suwun Mas Gih,

n langsung ane kopas, buat pengingat

Muzanuf's mengatakan...

wahh pusing juga yah gan.hehehe

Achmad Reza Fadillah mengatakan...

Makasih gan infonya, sudah ane terapkan diblog ane atas petunjuk juragan, infonya sangat bermanfaat bagi blogger pemula seperti saya.

Universal Gadget mengatakan...

Oke mas makasiii,,
iklanya juga udah klik,, :D

Suara Info mengatakan...

thank's iia gan infonya berguna banget pokoknya...hhe

Yuki mengatakan...

Assalamualaikum...Kang Salman.
Halo, Kang.
Udah lama bagnet nggak nongkrong di sini.
Eia, saya udah nyoba tipsnya. Nggak ada kode < d i v id="main-wrapper">, jadinya saya taruh di atas seperti yang Kang Salman sarankan ke mbak Dara. Tapi...nongolnya jadinya di kiri bawah tuh. Ngg...kira-kira gimana ya biar bisa ditaruh di bawah menubar langsung/ di atas? (Garuk-garuk kepala...). Makasih ya, Kang.

Kang Salman mengatakan...

Walaikumsalam Wr.Wb Yuki.
Apa kabar?

Ia kode tersebut tidak di temukan di blog milik Vika, Terima kasih Vika atas tambahannya.

Nah setelah saya lihat, di template blog baru seperti yang di gunakan oleh Vika dan Mbak Dara. nama kodneya bukan <div id='main-wrapper'> tapi disana namanya <div class='main-outer'>

Semoga dapat membantu ya :)

Yuki mengatakan...

Alhamdulillah sehat, Kang, moga-moga di Bandung juga tetep oke :D.

Iya, makasih banyak udah saya coba di blog pake resepnya Kang Salman.
Hanya saja, kalo dibandingin sama demo yang di http://distro-baju.blogspot.com/, kok yang di demo bisa ada jarak antara menubar sama slideshow-nya yak? Selain itu slideshow-nya juga bisa sejajar sama sidebar yang di kanan. Jadinya lebih rapi.

Kalo hasilnya di blog punya saya jadi kerasa bolong gitu, Kang. (Soal dimensi gambarnya ntar bisa diposting ulang)
Hhehe...
Gimana yak solusinya, Kang?
Hatur nuwun :D.

Kang Salman mengatakan...

@Yuki maaf saya baru reply, untuk distro-baju.blogspot.com tersebut tidak ada yang saya rubah, mungkin itu bawaan dari template. tapi kalau yuki ingin mengubahnya agar ada jarak bisa dengan mengguakan kode

<div style="padding:10px 10px 10px 10px;">
Taruh kode langkah nomer 2 disini
</div>

silakan bereksperimen dengan mengubah angka-angka di atas untuk mendapatkan jarak yang sesuai..

Semoga dapat membantu.

Kang Salman mengatakan...

kode yang berlatar warna biru di atas

chipshoes mengatakan...

terima kasih info sobat.. salam kenal

ayahe fia mengatakan...

makasih ilmunya pak.. tak cobane dulu
salam kenal

Content Informations mengatakan...

Alhamdulillah...aku banyak belajar dri situs ini...salam kenal yah, aku baru belajar bikin blog....mga sukses selalu tuk kucoba.com. trimaksi kucoba.com aku setia pada mu :)

blogi-one mengatakan...

waaahh ,, manteep om artikelnya

Poskan Komentar