Memasang Auto Move Image Slider di Blog

advertisment

Selamat datang di blog Panduan Belajar Website Lengkap . Berikut ini adalah update artikel terbaru mengenai informasi tentang Memasang Auto Move Image Slider di Blog silahkan untuk membaca dengan seksama dan mohon untuk disikapi dengan bijaksana mengenai informasi di artikel Memasang Auto Move Image Slider di Blog , semoga artikel tentang Memasang Auto Move Image Slider di Blog dapat menambah wawasan serta info yang anda cari atau butuhkan.

Memasang Auto Move Image Slider di Blog kali ini saya dapat dari blogwalking kemarin, yah semoga bisa bermanfaat juga buat agan-agan. Memasang Auto Move Image Slider di Blog bisa untuk pelajaran buat kita yang ingin Memasang Auto Move Image Slider di Blog kita sendiri. kalau-kalau ingin buat blog galery.


Now lets carry on with an important tutorial of how to add the auto move image slider to your blog.

Just see it at top below the blog header.

Download this Zip file and get two javascript files from it for backup.

Now after getting these two scripts you can upload them to your own server,if you want else dont know where to upload check my this post on where to upload .js files.

Now Just login to your blogger account Then Go To > Layout > Edit/Html > Press Ctrl+ F

Now search for </head> and place the below javascript codes before this tag.

<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'/>

In the above codes you will see red coloured lines just replace them with the link of your file which you downloaded and uploaded to your server, if dont want then also you can use my above links.

Now Search for this code ]]></b:skin> and add the below css above it.

#myslides{
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiThcYAXe_2obKdNPh4y0LPGzZsvDBOXvrQ5yNTf8X5AIsyCWOle6zmUjlhiva8c_WJWh9fXOdUCr2Ch0Nl9L2Sr0lqyLBu-D-wOvUFcpwUxPSwDf4ALdNmPN8GQHOqzcscPM8B38T1XA/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;
}

Above in code is red line with url of background image of slider,you can also change it to adjust your blog.

Special Step

Just Find for /head tag and place the below script above it.

<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/AVvXsEiwHhFakLvRwVnB0LtAkhJrx-cnSFEBPUr1OZVirFlrZurcYKann_JI1mudwXJrqlWvOX0xnDmABDv2kHZJEZ7-IiN9oCZ2SvVonA2qyWOUVma6OvSMbooM5W9a66wFSeuuPA5E-zA5yf8/s400/left.jpg&#39;, -48, 0], rightnav: [&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXa56QXY6W2TdJjdJ0va3wxNE3OXlS_lj62tT34H2Y-VZ2AFHAGNRGyQNY_zP8srR940JS_NCWGzYQdLriZypiDx_W35msYTe30CD28wELHDtOHKixc9KBoQ1mvi5my5CgZj-z_yErciA/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>

The green lines are the images of side arrows to make it scroll left and right you can make and add your also to make it look different.And in pink are number to control speed of slider.

Now Save Your Template.All the coding part is finished,now just how to add images to slider.

Just go to Layout > Page Elements > Add A Gadget > Html/Javascript

And add the below links of images and posts in it,in the format i am writing below.

<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/AVvXsEhA7tgqcAedD9g0AcTjiX6c928Q6fF3ziFVp3Uj2qtgBx5615wPNSn2Kp8YO8dUI4MPEPOze6nCa80vyzzzAq2-Fnd7U1ZS1KhFAx_ZFkjil2d-JHHyxiGmhImJx0htF985XCAkKBMYuQQ/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/AVvXsEg_usc-BvWapbbGhA1_Yt7DRycosxLzsyr1g2NO9-mU-vZqSnuvmAv4oIJ-l2Ja6pSvUWd3MSOXuIFd9Pe1DHSn1q2GmpSzMRvxVPcWcBnxDY18JTAhrl28WR7CRff5xc2c01u7E_J_jBg/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/AVvXsEhdoe8ot0hZflMai5vkIterAoOvlJmiF2x4-5FAnEbu9UyKpTnkbN4oNm3jhU_MpiKYtuMxH-Fa_woF4pZPSGicDGrPfpVTwqj_6a6iOcDecNZHQq-Dz0cgzsjgsLVL4pT6S3XEW2CXH5I/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/AVvXsEjw4lvoJ8-Vs18ZLN-5YzEJdeRYV_auIdyW0mdiFHJyzynPSiHz44WbJV-PF-eZ7iKW-Th-qVD3JRjg0BuyzAOs4npJLfbVPFeLU9fjC2aNHnp-f0q27iRhnwjFgF0FnwDUG9XAnbfsUTU/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>

Just change the links and images url with yours and also there titles.Just keep on adding links to in this format to any number you want as you can add hundreds of images and posts in this format no limit to it

advertisment

Terima Kasih Atas Kunjungan Anda | Semoga informasi dari Blog ini dapat bermanfaat bagi Anda
Judul: Memasang Auto Move Image Slider di Blog
Ditulis Oleh ndesain.web.id
Tulisan ini memberikan informasi yang bermanfaat untuk anda? Jika mengutip harap berikan link yang menuju ke artikel ini ataupun langsung ke artikel sumber Memasang Auto Move Image Slider di Blog. Sebarkanlah jika artikel ini bermanfaat menggunakan link share sosial media di bawah. Terima kasih atas kunjungannya, jangan lupa untuk membaca related post menarik lainnya