Auto Pindahkan Gambar Slider i.e korsel Untuk Blogger

Saya telah memberikan Anda sebelumnya dengan slider gambar dengan dua panel kiri dan kanan yang di klik membawa Anda ke images.But lain beberapa pembaca saya pada waktu itu ingin untuk memiliki gerakan otomatis dari gambar dalam slider.So dalam posting ini saya akan memberitahu cara untuk otomatis memindahkan gambar dalam slider.If Anda Anda tidak tahu apa sebenarnya slider gambar, maka jangan khawatir, hanya saya ingin Anda pertama kali membaca posting saya sebelumnya tentang slider gambar untuk itu dan jika Anda suka cukup ikuti tutorial yang memilikinya di blog Anda.

Beberapa widget lain yang Anda ingin menerapkan pasti seperti kulit menambahkan untuk blogger untuk menarik pengunjung Anda untuk berlangganan blog atau unjuk pengiklan atau menunjukkan beberapa hacks lain stuff.Some penting seperti ini saya sebelumnya menulis adalah gambar melayang-layang efek, gambar refleksi dalam posting blogger dan zoom gambar Anda dalam posting blogger, yang mungkin juga banyak membantu Anda.

Sekarang mari kita melanjutkan tutorial penting dari bagaimana menambahkan slider otomatis pindah gambar ke blog Anda.

                                                                         DEMO



Hanya melihatnya di bagian bawah header blog.

Download this file Zip dan mendapatkan dua file javascript dari itu untuk cadangan.


auto carasoul scripts 

<script src='http://btemplatescripts.googlecode.com/files/auto-slider.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>


Dalam kode di atas Anda akan melihat garis berwarna merah hanya menggantinya dengan link dari file yang Anda download dan upload ke server Anda, jika tidak ingin kemudian juga Anda dapat menggunakan link di atas saya.

Sekarang Cari kode ini]]> </ b: skin> dan tambahkan di bawah css di atasnya.


#myslides{
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW2IRUcTZ3DsCBiT-TRxChyphenhyphenjft828N1GI-Xzbr7yui54xLl7VWcr8hBOkgdULy_W6CIzbdr_fAA8IGQuZs0ZJ4GOHoH-RYvv5kh0NEUas_MRx9izgiM8_3VFdTTLk_cXJpP17AAZbfRQ/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;

}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;

}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/

}

.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}

.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}

Di atas dalam kode adalah garis merah dengan url gambar latar belakang slider, Anda juga bisa mengubahnya untuk menyesuaikan blog Anda.


Langkah khusus 
Hanya Cari untuk tag / kepala dan menempatkan script di bawah ini di atasnya.


<script type='text/javascript'>
stepcarousel.setup({
galleryid: &#39;mygallery&#39;, //id of carousel DIV
beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs
panelclass: &#39;panel&#39;, //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 3, leftnav: [&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjquTMLhb9szE3Wt5aXXkgA0B7EzglCwvyEsVQRYzSIehP9JRGm7jT6myl_auiL_mtbLXundfXwU2WvtgfFrigrxjmA1OoZxkHcs7qv4hd5TQqAHI8_wglbYaGFNhOg4T3pz2k-6z6ALOA/s400/left.jpg&#39;, -48, 0], rightnav: [&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTevbOq5Zp-fl4oI90BHVxqz1YhH64ZKEzignWqUUYCPPDXm5d2ZHh6fLihJKRCsy07AavIjZDKIFbBQAFprNLP9mTTlTQHznUeJYnBB5c84WiIMahnFzq31X9Wf_EqFwg9rqDVKsHIvE/s400/right.jpg&#39;, 0, 0]},
statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]
})
</script>  


Garis hijau adalah gambar anak panah sisi untuk membuatnya gulir ke kiri dan kanan Anda dapat membuat dan menambahkan juga Anda untuk membuatnya terlihat different.And dalam warna pink adalah nomor untuk mengontrol kecepatan slider.

Sekarang Simpan Template.All Anda bagian coding selesai, sekarang hanya bagaimana cara menambahkan gambar ke slider.

Hanya pergi ke Layout> Elemen Halaman> Tambah Gadget A> Html / Javascript

Dan menambahkan link di bawah gambar dan tulisan di dalamnya, dalam format saya menulis di bawah ini. 

<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">

<!-- 1st Template -->
<div class="panel">
<a href="http://www.anshuldudeja.com/2008/10/new-two-column-denim-template.html" target="blank" title="Two Column Denim Template"> <img width="160" alt="Two Column Denim Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCETxKSbtrypeM9oRxLZN4GaYUTuzhuSD0fTkHJlmiXbxQY0Of8xfAfz8hAFkwgsjyWFcLQMWW89uXC200Vm1yuio_bze_2uZn8bdb59p-yJJoDSHdwq8ywsIVA76FOxOvnOq3Cgxo3yg/s400/newtwocolumndenimtemplate.jpg" height="110"/> </a>
</div>
<!-- end code of 1st -->

<!-- 2nd Template -->
<div class="panel">
<a href="http://www.anshuldudeja.com/2009/02/simple-blog-writing-template.html" target="blank" title="Simple Blog Writing Template"> <img width="160" alt="Simple Blog Writing Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm5uxiKAMq0Kl6E1vdPmskX0uZwH4Xbkryk4dkj_vCnublXI0liZmEwIqr9c8Ynl_y32SQM_2B5F-mtXUGaKCod63ivFoL456RhoUHy_OPHQ2o7zTkR_B9TArF0DmhCxS0O3ZCqUaFHEg/s400/simple+Blog+Template.png" height="110"/> </a>
</div>
<!-- end code of 2nd -->

<!-- 3rd Template -->
<div class="panel">
<a href="http://www.anshuldudeja.com/2009/05/woork-style-blogger-template-design.html" target="blank" title="Woork Style Blogger Template"> <img width="160" alt="Woork Style Blogger Template" src="http://img2.pict.com/91/27/d5/ad3dbaa7835b554ec0d06a4e0c/XG7ZL/800/woork2520257c2520web2520design25.png" height="110"/> </a>
</div>
<!-- end code of 3rd -->

<!-- 4th Template -->
<div class="panel">
<a href="http://www.anshuldudeja.com/2009/05/blogger-buster-style-blogger-template.html" target="blank" title="Blogger Buster Style"> <img src="http://img23.imageshack.us/img23/8537/bloggertemplate.jpg"/> </a>
</div>
<!-- end code of 4th -->

<!-- 5th Template -->
<div class="panel">
<a href="http://www.anshuldudeja.com/2009/05/free-lenomag-blogger-template.html" target="blank" title="Lenomag Blogger Template"> <img width="160" alt="Lenomag Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDF2VDVYhLlipT4kBJ7kjkyyN8ZLFxWigceo38D3srQH3rSim7kFHJkSuNhiLuaqpfTs4C7GhfkMixpgn0H_0iAMIbjxwp6n2XnlNCrNkAr0O8R5pFD1GBDLE-IC1oxDP2ZSq6_YJYiHo/s400/Preview.jpg" height="110"/> </a>
</div>
<!-- end code of 5th -->

<!-- 6th Template -->
<div class="panel">
<a href="http://www.anshuldudeja.com/2009/06/money-blogger-blogger-template.html" target="blank" title="Money Blogger Template"> <img width="160" alt="Money Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqQMKLIBnO1MHzdga01wHGoHzIMcHt9yEugZnZrsdGqUHeUOcAmfuDCNDZ0PGa7_QLeT6YogVZPZyhYNuyXD6jqS0W0cQUt6eJ3Bi97zu3-GCmjR2UYlRHA7iyN7cqJUDEavo5k0aoH_E/s320/money2520blogger.png" height="110"/> </a>
</div>
<!-- end code of 6th -->

<!-- 7th Template -->
<div class="panel">
<a href="http://www.anshuldudeja.com/2009/06/digital-statement-blogger-template.html" target="blank" title="Digital Statement Blogger Template"> <img width="160" alt="Digital Statement Blogger Template" src="http://img2.pict.com/fd/ad/16/9de4e09426b4090113f40930f2/bnaeY/800/digital2520statement.png" height="110"/> </a>
</div>
<!-- end code of 7th -->

<!-- 8th Template -->
<div class="panel">
<a href="http://www.anshuldudeja.com/2009/06/orkut-theme-blogger-template.html" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://img2.pict.com/f3/ec/dd/06efff55a05477591153094b2f/rDVvV/800/orkut2520theme2520blogger2520tem.png" height="110"/> </a>
</div>
<!-- end code of 8th -->

</div></div></div>

Hanya mengubah url link dan gambar dengan Anda dan juga ada titles.Just terus menambahkan link ke dalam format ini untuk setiap nomor yang ingin Anda dapat menambahkan ratusan gambar dan tulisan dalam format ini tidak ada batas untuk it.Java web hosting juga makin populer sekarang, jadi lebih baik coba cari satu yang sesuai kebutuhan Anda sekarang. 

Suka Dengan Artikel Ini ?

Anda baru saja membaca artikel yang berkategori dengan judul "Auto Pindahkan Gambar Slider i.e korsel Untuk Blogger". Anda bisa bookmark halaman ini dengan URL http://ssoftwaree.blogspot.com/2012/06/auto-pindahkan-gambar-slider-ie-korsel.html.