Cara Membuat Foto Slideshow Dan Slider Di Blog

 Cara Membuat Foto Slideshow Dan Slider Di Blog - Kali ini saya akan berbagi trik dan tips bagi sobat KUCOPAS semuanya, yaitu trik tentang Cara Membuat Foto Slideshow Di Blog atau Foto Slider di Blog. Mungkin diantara sobat semua sudah ada yang mengerti tentang foto slideshow, 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 Slideshow 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 Slideshow berdasarkan label (kategori) atau Foto Slideshow berdasarkan posting terbaru (artikel terbaru).


 Fungsi dari Foto Slideshow ini adalah bisa untuk mempercantik blog atau website kita, Karena tampilanya yang dinamis. sebab, Foto Slideshow ini disamping menampilkan foto juga akan menampilkan judul posting blog kita, dan jika di klik, maka akan menuju artikel yang selengkapnya postingan kita.


 Oke, Jika sobat ingin membuatnya silahkan ikuti langkah-langkahnya ada Sebelas sebagai berikut:

1. Silahkan sobat >> "Login/Masuk" ke Blog sobat.
2. Pilih dan klik >> "Template" >> "Edit HTML". (pada tampilan baru blogger klik >> "lanjutkan")
3. Jangan lupa sobat Centang "Expand Template Widget".
4. Langkah selanjutnya silahkan sobat cari kode ]]></b:skin> Gunakan CTRL+F untuk mempermudah pencarian.
5. Jika sudah ketemu, Kemudian letakkan semua kode script dibawah ini tepat di Atas atau Sebelum kode ]]></b:skin> tadi.

Berikut Kodenya:

#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwL36bs7ooFAyA8vh082-5blkIIjF3seO684MvOVuwtQJOzJ-a1akFfvULizuUD0nmls0eYXk12HPFSChBzTKfJ515VFdsZgutYWiU0yUJ99n4lHVBEO0_vrCPWkmLE-iBMoZ4OXAmJckP/s1600/previous.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAN0u1HX_JZ0t4dndoAmBNHjBMNL5rFCp005yk2t3RhcINxogWr_TflyXYPGge9mLIuQLtRx2PtzvQZAwoHFs8vPfmP6_7B2Y2fhMqpJ_AFDlT8LW24cyVrbHqCFQWU5LLkQYCxfXXz-E7/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}

Catatan:

• 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.

6. Langkah yang berikutnya masih dalam "Edit HTML", Silahkan sobat cari kode </head> . Gunakan CTRL+F untuk mempercepat pencarian.

7. Copy semua kode script di bawah ini dan Paste atau letakkan tepat di Atas atau Sebelum kode </head>
Berikut kodenya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://masolis-javascript.googlecode.com/svn/trunk/carousellite.js' type='text/javascript'/>


<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8lyHmoKDTN2Y3-q0JmV-o3vao5Ca-OIDiKoEf1YmA4wyN9DSvBmhG5WKrOFXPTmRgv3RUPnOTBs6wV6J_PXV1NAI9EE-3yAKyYQzROLRJ7dowzVTAy2RsvQDXkHGFXnfoQwr53LyWFQ/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>

Catatan:

• 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.

8. Langkah yang selanjutnya, masih dalam "Edit HTML" Silahkan sobat cari kode <div id='main-wrapper'>
Gunakan CTRL+F lagi untuk mempercepat pencarian.

9. Kemudian Sobat Copy semua kode script dibawah ini dan Paste atau Taruh tepat di Atas atau Sebelum kode <div id='main-wrapper'>

Berikut kodenya:

<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 Slideshow ini hanya tampil di halaman utama blog saja (Home Page). Jika sobat ingin menampilkan Foto Slideshow 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 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.
• Jika sobat ingin menampilkan Slideshow 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

10. Langkah selanjutnya, Silahkan sobat klik Review atau Pratinjau, Demi untuk menghindari kesalahan saat melakukan Edit HTML pada template Blog Sobat.

11. Jika hasilnya sudah sesuai dengan keinginan Sobat, Silahkan klik SIMPAN dan Selamat kini di Blog Sobat sudah ada Foto Slidernya.

---

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

---

Read More

Cara Membuat Foto dan Gambar Bergerak Slide di Blog

 KUCOPAS - Salam hangat buat sobat-sobat blog KUCOPAS semua, Kemarin saya sudah share artikel tentang Cara Buat Teks Berjalan dan Berkedip di Blog, dan Kali ini saya akan share Tips dan trik lagi tentang Cara Buat Gallery Foto Bergerak di Blog atau Cara buat foto atau gambar berjalan di blog, bahasa gaul nya ya Script Marquee Bikin Image Lebih Dinamis.

Oke sobat, untuk membuat Foto dan Gambar Bergerak di Blog silahkan ikuti cara-cara nya sebagai berikut :

1. Silahkan "Login" dulu ke blog sobat.
2. Setelah itu sobat pilih >> menu “Tata Letak”.
3. Kemudian >> "tambah Gadget".
4. Pilih menu >> “HTML/JavaScript”.
5. Isi kotak judul dengan judul gallery sobat, contoh "My Foto Gallery".
6. Kemudian pada kotak “Konten”, silahkan sobat copy dan Paste kode Script yang berwarna BIRU di bawah ini :

---

<marquee direction="up" onmouseover="this.stop()" scrollamount="3" onmouseout="this.start()"><img src=”alamat_gambar_sobat.jpg” width=”120” height=”70”></marquee>

---

KETERANGAN :
- Ganti alamat URL gambar “src” yang berwarna HIJAU pada kode script <img src=”alamat_gambar_sobat.jpg” width=”120” height=”70”> dengan alamat URL gambar sobat.
kalau belum ada, silahkan upload dulu ke FhotoBucket, Picasa, dan lain sebagainya, terus sobat ambil URL nya dan pastekan pada tulisan yang berwarna HIJAU.

- Kode script "width" dan "height" adalah untuk mengatur ukuran lebar dan tinggi gambar sesuai dengan selera sobat.

- Kode "up" adalah Arah foto/gambar bergerak/berjalan.
silahkan sobat ganti dengan "down" atau lain sebagai nya.

- Contoh diatas, hanya untuk satu gambar/image/foto.
Kalau sobat ingin lebih dari satu foto/gambar, silahkan sobat tambah kode script image tersebut sebanyak gambar/image/foto yang sobat inginkan.
Lihat contoh dibawah ini :

---

<marquee direction="up" onmouseover="this.stop()" scrollamount="3" onmouseout="this.start()">
<img src=”alamat_gambar_1_sobat.jpg” width=”120” height=”70”>
<img src=”alamat_gambar_2_sobat.jpg” width=”120” height=”70”>
<img src=”alamat_gambar_3_sobat.jpg” width=”120” height=”70”> 
<!-- dan seterusnya..., SupPort By KUCOPAS -->  
</marquee>

---

- Setelah itu silahkan sobat klik tombol “Simpan/save” untuk menyimpan gadget yang baru sobat buat.

- Selesai dan lihat hasil nya.

Semoga artikel Cara Buat Gallery Foto Bergerak di Blog atau Cara buat foto berjalan di blog, sangat bermanfaat untuk sobat KUCOPAS semua.
HapPy Blog9inG...

---

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

---

Read More