Home » , » Cara Membuat Foto Slide Show Di Blog

Cara Membuat Foto Slide Show Di Blog

Written By Ku Copas on Tuesday, 17 July 2012 | 7/17/2012 11:27:00 pm

KUCOPAS - Cara Membuat Foto Slide Show Di Blog. Kali ini saya akan berbagi trik dan tips untuk sobat semuanya, yaitu trik tentang Cara Membuat Foto Slide Show Di Blog atau Foto Slider Di Blog. Mungkin diantara sobat semua sudah ada yang mengerti tentang foto slide show, namun kali ini saya akan menerangkan tentang cara membuat Foto Slider Carausel Otomatis Di Blog. Contoh atau demonya sobat bisa melihat seperti di halaman utama situs DetikSport, lihat bagian bawah menu, ada foto slideshow begitulah kira-kira tampilanya nanti.

Sedikit penjelasan untuk sobat, Foto Slide show yang akan kita buat ini nanti bisa di edit sedikit scriptnya. Karena Foto Slideshow ini bisa di buat berdasarkan Label atau Kategori, dan juga bisa untuk posting terbaru atau artikel terbaru. Jadi sobat bisa memilihnya seperti yang sobat suka, pilih Foto Slide show berdasarkan label (kategori) atau Foto Slideshow berdasarkan posting terbaru, artikel terbaru (New Post).

Cara Membuat Foto Slide Show Di Blog

Fungsi dari Foto Slide show ini adalah bisa untuk mempercantik blog atau situs website sobat, karena tampilanya yang dinamis. Sebab Foto Slide show ini disamping menampilkan foto juga akan menampilkan judul posting blog sobat, dan jika di klik maka akan menuju artikel yang selengkapnya pada postingan kita.

Oke, jika sobat ingin membuatnya silahkan ikuti langkah-langkahnya sebagai berikut.
Cara Membuat Foto Slide Show Di Blog
  1. Silahkan sobat >> Login/Masuk ke Blog sobat.
  2. Pilih dan klik >> Template >> Edit HTML.
  3. Langkah selanjutnya silahkan sobat cari kode ]]></b:skin> (Gunakan CTRL+F untuk mempermudah pencarian).
  4. Jika sudah ketemu, kemudian letakkan semua kode script dibawah ini tepat di atas atau sebelum kode ]]></b:skin> tadi.
#carousel{width:980px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px}
#carousel h5{color:#555;margin:2px}
#carousel .container{position:absolute;left:24px;width:960px;height:125px;overflow:hidden}
#carousel .thumb{float:left;margin-right:5px;}
#carousel #previous_button{position:absolute;width:24px;height:125px;background:url(http://3.bp.blogspot.com/-vxUtQ_S674s/T-8KtEsewAI/AAAAAAAAHGs/cfd8RK0R-vM/s1600/previous.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(http://3.bp.blogspot.com/-FaZC4Gr6pS0/T-8KsaJKtHI/AAAAAAAAHGk/GDXOy42rx3Q/s1600/next.png) center;z-index:100;cursor:pointer;}
#carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#ebebeb;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 20px 6px;padding:6px}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:0;padding-top:0}
#carousel ul li a.slider_title:hover{color:#1b5d97}
#carousel a img{display:block;background:#fff;margin-top:0}
Keterangan:
  • width:980px; adalah Lebar Slider, silahkan sobat ganti nilai angkanya, sesuaikan dengan template sobat.
  • height:125px; adalah Tinggi Slider, silahkan sobat ganti nilai angkanya sesuai dengan keinginan sobat.
5. Langkah yang berikutnya masih dalam Edit HTML, silahkan sobat cari kode </head> (Gunakan CTRL+F lagi untuk mempercepat pencarian).

6. Copy semua kode script di bawah ini dan Paste atau letakkan tepat di atas atau sebelum kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://kucopas-js.googlecode.com/files/carousellite.js' type='text/javascript'/>


<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;
numposts1 = 10;

function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}

s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < numposts1; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';

document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>
Keterangan:
  • numposts1 = 10; adalah jumlah Slider yang akan di tampilkan, silahkan sobat ganti nilainya seperti yang sobat inginkan.
  • <img width="100" height="90" adalah Panjang dan Lebar Foto atau Image yang di tampilkan dalam Slider.
7. Langkah yang selanjutnya, masih dalam Edit HTML silahkan sobat cari kode <div id='main-wrapper'> (Gunakan CTRL+F lagi untuk mempercepat pencarian).

8. Kemudian sobat Copy semua kode script dibawah ini dan Paste atau Taruh tepat di atas atau sebelum kode <div id='main-wrapper'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/TUTORIAL%20BLOG?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>  
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800,  
    visible: 5,
    start: 0,
    circular: true,
    btnPrev: &quot;#previous_button&quot;,
    btnNext: &quot;#next_button&quot;
    });
    })})(jQuery)  
</script>
</b:if>
Catatan:
  • Foto Slides how ini hanya tampil di halaman utama blog saja (Homepage). Jika sobat ingin menampilkan Foto Slide show ini di semua halaman termasuk saat posting dibuka, silahkan sobat hapus kode yang berwarna BIRU di atas.
  • TUTORIAL%20BLOG adalah Label atau Kategori yang akan di tampilkan dalam Foto Slide show, silahkan sobat ganti dengan Label atau Kategori Blog sobat. Namun jangan lupa sobat kasih %20 jika ada space (Spasi) pada Label atau Kategori blog sobat.
  • Jika sobat ingin menampilkan Slide show Postingan Terbaru atau Artikel Terbaru Blog sobat, silahkan hapus atau hilangkan kode /-/TUTORIAL%20BLOG hinga jadinya seperti ini >> document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results
9. Langkah selanjutnya, silahkan sobat klik Review atau Pratinjau, demi untuk menghindari kesalahan saat melakukan Edit HTML pada template blog sobat.

10. Jika hasilnya sudah sesuai dengan keinginan sobat, silahkan klik SIMPAN dan selamat kini di blog sobat sudah ada Foto Slidernya.

Update: 21/02/2014

| Source by Maskolis | Supported by http://kuc0pas.blogspot.com |

Artikel Terkait:

thumbnail Title: Cara Membuat Foto Slide Show Di Blog
Posted by:Ku Copas
Published :2012-07-17T23:27:00+07:00
Rating: 5
Reviewer: 737 Reviews
Cara Membuat Foto Slide Show Di Blog
Comments
29 Comments

29 comments:

  1. thumbail nya berhasil kepasang gan! tapi button slide show nya ga berfungsi dan slide show nya pun tidak berjalan, gmn solusinya? mohon bantuannya!

    ReplyDelete
  2. @GaLaxy Abdul Malik >> Sebelumnya saya ucapkan Terimakasih atas kunjunganya, Setelah saya periksa KODE -nya, sebagian kode ada yang harus di ganti. karena empunya yang punya kode tersebut menyimpan di google code dan kemungkinan akun nya di Banned.
    Namun sekarang Kode nya sudah saya update dan perbarui...
    Jadi sobat sudah bisa memasangnya di blog sobat.
    Semoga membantu sobat

    ReplyDelete
    Replies
    1. gan kalau ganti background birunya gmn?

      Delete
    2. Ganti kode yang pertama pada background:#5599e6;
      Sobat bisa Lihat pilihan Kode warna HTML di url berikut;
      http://kuc0pas.blogspot.com/2012/05/kode-warna-html.html

      Delete
  3. id='main-wrapper'>

    kode ini nggak ada dicari di blog saya...

    jadi beum sukses bro...

    ReplyDelete
    Replies
    1. @Apri T >> Jika tidak ada kode id='main-wrapper'> dalam template sobat, Kode-nya bisa di taruh dalam gadget. caranya masuk tata letak >> tambah gadget >> pilih "HTML/JavaScript". Taruh semua kode di dalamnya. Semoga berhasil.

      Delete
  4. koq kode id='main-wrapper'> ga ad gan

    ReplyDelete
    Replies
    1. @Sigit >> Jika tidak ada kode id='main-wrapper'> dalam template sobat, Kode-nya bisa di taruh dalam gadget. caranya masuk tata letak >> tambah gadget >> pilih "HTML/JavaScript". Taruh semua kode di dalamnya.

      Delete
  5. joss gan tutorialnya..edit dikit dipas-pasin blog ane hasilnya mantep..
    makasih gan..
    buat yang ga da kode id='main-wrapper', bisa ditaruh diatas kode div class='main-outer'

    ReplyDelete
    Replies
    1. thx's dh ikut jwb kasih solusi sob... kasih jempol buat kamu...

      Delete
  6. Malam gan informasinya bagus banget nih ,namun saya kurang ngerti di pemasangang tutorialnya
    "TUTORIAL%20BLOG adalah Label atau Kategori yang akan di tampilkan dalam Foto Slideshow, silahkan sobat ganti dengan Label atau Kategori Blog Sobat. Namun jangan lupa sobat kasih %20 jika ada Space (Spasi) pada Label atau Kategori sobat." kita masukin tutornya 1 apa yang tampil juga satu?

    ReplyDelete
    Replies
    1. TUTORIAL%20BLOG adalah Label atau Kategori yang akan di tampilkan dalam Foto Slideshow, Maksudnya adalah yang akan tampil hanya postingan yang termasuk ada dalam kategori atau label di blog sobat. Jadi silahkan di ganti dan sesuaikan dengan label/kategori blog sobat yang ingin di tampilkan.

      Delete
  7. Kalo tutor blognya apa sejenis url gambar atau nama folder gambar?

    ReplyDelete
    Replies
    1. Bila di klik maka akan masuk kedalam postingan selengkapnya gan...

      Delete
  8. perlu di pelajari lebih lanjut gan

    ReplyDelete
  9. oke mantap, tapi gmana cara bikin lebar gambar sesuai default lebar gambarnya bang ?

    ReplyDelete
    Replies
    1. Untuk ukuran image nya bisa di lihat dan di edit pada kode No.7 di atas sob...
      Lihat kode warna merah <img width="100" height="90" adalah ukuran image.

      Delete
  10. Replies
    1. Siiip... Selamat berkarya buat kamu sob...

      Delete
  11. ijin coba dan sedot gan, salam kenal dan terimakasih

    ReplyDelete
  12. mas nanti akan saya coba...


    ditunggu folbacknya y terimakasih

    ReplyDelete
  13. wah mantap nich pas untuk niubi,,kunbal gan mohon saran.trm ksh

    ReplyDelete
  14. itu posisi Slideshow nya diatas apa di bawah posting gan?

    ReplyDelete
  15. Info,nya mantap tap tap banget mas broo.

    ReplyDelete

 
Support : Google | Yahoo | Bing
Copyright © 2011-2013. KUCOPAS - All Rights Reserved
Sitemap | About Me | Contact Us | Privacy Policy
Proudly powered by Blogger