Cara membuat slide Infinite Carousel di Blogger
Dalam tutorial kali ini, kita akan membahas tentang bagaimana cara membuat Slide Show Infinite Carousel. Slide ini dapat dipakai dalam platform Blogger. Baik gambar maupun kode-kode disini hanya digunakan untuk pembelajaran, kalian dapat mengedit sendiri kode dan gambar nya sesuai dengan selera kalian.
Langkah 1
Masuk ke akun Blogger kamu, kemudian buka Edit HTML. Masukkan kode dibawah ini sesudah
<b:include data='blog' name='all-head-content'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script charset='utf-8' src='http://blognusa-infinitecarousel.googlecode.com/files/jquery.js' type='text/javascript'/>
Langkah 2
Cari kode /head, kemudian masukkan kode dibawah ini sebelum kode /head,
<style type='text/css'>
#carousel_inner {
float:left; /* important for inline positioning */
width:630px; /* important (this width = width of list item(including margin) * items shown */
overflow: hidden; /* important (hide the items outside the div) */
/* non-important styling bellow */
background: #F0F0F0;
}
#carousel_ul {
position:relative;
left:-210px; /* important (this should be negative number of list items width(including margin) */
list-style-type: none; /* removing the default styling for unordered list items */
margin: 0px;
padding: 0px;
width:9999px; /* important */
/* non-important styling bellow */
padding-bottom:10px;
}
#carousel_ul li{
float: left; /* important for inline positioning of the list items */
width:200px; /* fixed width, important */
/* just styling bellow*/
padding:0px;
height:110px;
background: #000000;
margin-top:10px;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
}
#carousel_ul li img {
.margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor so this is to fix that*/
/* styling */
cursor:pointer;
cursor: hand;
border:0px;
}
#left_scroll, #right_scroll{
float:left;
height:130px;
width:15px;
background: #C0C0C0;
}
#left_scroll img, #right_scroll img{
/*styling*/
cursor: pointer;
cursor: hand;
}</style>
Kemudian simpan dulu templatenya.
Langkah 3
Masuk ke Elemen Laman, kemudian pilih posisi widget dimana kalian akan menempatkan slide tersebut. Klik Tambahkan Widget, kemudian pilih HTML/JavaScript. Masukkan kode dibawah ini kedalam widget tersebut,
<div id='carousel_container'>
<div id='left_scroll'><img src='http://web.enavu.com/demos/left.png' /></div>
<div id='carousel_inner'>
<ul id='carousel_ul'>
<li><a href='#'><img src='http://web.enavu.com/demos/item1.png' /></a></li>
<li><a href='#'><img src='http://web.enavu.com/demos/item2.png' /></a></li>
<li><a href='#'><img src='http://web.enavu.com/demos/item3.png' /></a></li>
<li><a href='#'><img src='http://web.enavu.com/demos/item4.png' /></a></li>
<li><a href='#'><img src='http://web.enavu.com/demos/item5.png' /></a></li>
</ul>
</div>
<div id='right_scroll'><img src='http://web.enavu.com/demos/right.png' /></div>
</div>
Keterangan :
Langkah pertama merupakan setingan jquery dari slide ini. Kode tersebut harus terpasang diblog kamu.
Langkah kedua merupakan setingan kode CSS. Kalian bisa mengubah sendiri sesuai dengan selera, namun hal ini hanya disarankan bagi kalian yang menguasai kode-kode CSS dan HTML.
Langkah ketiga merupakan tampat kita menempatkan slide ini di blog kita. Kalian dapat mengubah gambar dan link sesuai dengan keinginan kalian.
Kalau masih ada yang membingungkan, silahkan disharing dengan kita melalui kotak komentar dibawah.
Sumber: BlogNusa
Dalam tutorial kali ini, kita akan membahas tentang bagaimana cara membuat Slide Show Infinite Carousel. Slide ini dapat dipakai dalam platform Blogger. Baik gambar maupun kode-kode disini hanya digunakan untuk pembelajaran, kalian dapat mengedit sendiri kode dan gambar nya sesuai dengan selera kalian.
Langkah 1
Masuk ke akun Blogger kamu, kemudian buka Edit HTML. Masukkan kode dibawah ini sesudah
<b:include data='blog' name='all-head-content'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script charset='utf-8' src='http://blognusa-infinitecarousel.googlecode.com/files/jquery.js' type='text/javascript'/>
Langkah 2
Cari kode /head, kemudian masukkan kode dibawah ini sebelum kode /head,
<style type='text/css'>
#carousel_inner {
float:left; /* important for inline positioning */
width:630px; /* important (this width = width of list item(including margin) * items shown */
overflow: hidden; /* important (hide the items outside the div) */
/* non-important styling bellow */
background: #F0F0F0;
}
#carousel_ul {
position:relative;
left:-210px; /* important (this should be negative number of list items width(including margin) */
list-style-type: none; /* removing the default styling for unordered list items */
margin: 0px;
padding: 0px;
width:9999px; /* important */
/* non-important styling bellow */
padding-bottom:10px;
}
#carousel_ul li{
float: left; /* important for inline positioning of the list items */
width:200px; /* fixed width, important */
/* just styling bellow*/
padding:0px;
height:110px;
background: #000000;
margin-top:10px;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
}
#carousel_ul li img {
.margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor so this is to fix that*/
/* styling */
cursor:pointer;
cursor: hand;
border:0px;
}
#left_scroll, #right_scroll{
float:left;
height:130px;
width:15px;
background: #C0C0C0;
}
#left_scroll img, #right_scroll img{
/*styling*/
cursor: pointer;
cursor: hand;
}</style>
Kemudian simpan dulu templatenya.
Langkah 3
Masuk ke Elemen Laman, kemudian pilih posisi widget dimana kalian akan menempatkan slide tersebut. Klik Tambahkan Widget, kemudian pilih HTML/JavaScript. Masukkan kode dibawah ini kedalam widget tersebut,
<div id='carousel_container'>
<div id='left_scroll'><img src='http://web.enavu.com/demos/left.png' /></div>
<div id='carousel_inner'>
<ul id='carousel_ul'>
<li><a href='#'><img src='http://web.enavu.com/demos/item1.png' /></a></li>
<li><a href='#'><img src='http://web.enavu.com/demos/item2.png' /></a></li>
<li><a href='#'><img src='http://web.enavu.com/demos/item3.png' /></a></li>
<li><a href='#'><img src='http://web.enavu.com/demos/item4.png' /></a></li>
<li><a href='#'><img src='http://web.enavu.com/demos/item5.png' /></a></li>
</ul>
</div>
<div id='right_scroll'><img src='http://web.enavu.com/demos/right.png' /></div>
</div>
Keterangan :
Langkah pertama merupakan setingan jquery dari slide ini. Kode tersebut harus terpasang diblog kamu.
Langkah kedua merupakan setingan kode CSS. Kalian bisa mengubah sendiri sesuai dengan selera, namun hal ini hanya disarankan bagi kalian yang menguasai kode-kode CSS dan HTML.
Langkah ketiga merupakan tampat kita menempatkan slide ini di blog kita. Kalian dapat mengubah gambar dan link sesuai dengan keinginan kalian.
Kalau masih ada yang membingungkan, silahkan disharing dengan kita melalui kotak komentar dibawah.
Sumber: BlogNusa
