Membuat Slider otomatis tinycarousel

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Membuat Slider otomatis tinycarousel dan semoga artikel ini bermanfaat.

---

Membuat Slider otomatis tinycarousel ini memang cukup menarik dan mungkin ada sobat yang mau mencoba slider ini. namun sebelumnya alangkah lebih baik kalau sobat lihat dulu demonya biar tidak keliru dalam menentukan mau pasang atau tidak. Ok ini dia demonya

Bagaimana sobat? mungkin barangkali sobat ada yang mau memasangnya silahkan ikuti langkahnya.

Lankah Pertama Membuat Slider otomatis tinycarousel;

• Seperti biasa saja login dahulu ya..
• klik rancangan/template jangan lupa setiap mau ngedit HTML download lengkap dulu ya sobat, buat jaga-jaga aja. kalau ada salah tinggal ngembaliin, alasannya.
• Klik edit HTML klik lanjutkan kemudian cari kode ]]></b:skin> setelah ketemu letakan kode dibawah ini tepat diatas kode tersebut.

#tinycarousel {
width:880px; /* Lebar Slideshow */
height:1%;
overflow:hidden;
font:normal 10px/12px Arial,Sans-Serif;
color:#666;
margin:30px auto;
}
#tinycarousel .viewport {
height:337px;
overflow:hidden;
position:relative;
background-color:#eee;
border:1px solid #ccc;
}
#tinycarousel ul.overview {
list-style:none !important;
position:absolute;
padding:0px 0px !important;
margin:0px 0px !important;
width:240px;
left:0px;
top:0px;
}
#tinycarousel ul.overview li {
list-style:none !important;
float:left;
margin:5px 0px 5px 5px !important;
padding:0px 0px !important;
height:auto !important;
width:168px; /* Lebar satu unit slide */
background-color:white;
color:#666;
border:1px solid #ccc;
}
#tinycarousel .inner {
margin:10px;
height:260px;
overflow:hidden;
}
#tinycarousel img {
width:auto !important;
height:170px !important;
border:none;
outline:none;
padding:0px 0px;
margin:0px 0px;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
#tinycarousel h6 {
border-top:1px solid #ddd;
font:bold 11px/12px Verdana,Arial,Sans-Serif;
color:#39f;
margin:9px 0px 5px;
padding:10px 0px 0px;
backgorund:transparent;
overflow:hidden;
}
#tinycarousel h6 a {
color:#39f;
text-decoration:none;
border:none;
}
#tinycarousel p {
margin:0px 0px;
padding:0px 0px;
overflow:hidden;
}
#tinycarousel em {
font-style:normal;
color:#aaa;
background-color:#333;
background-image:-webkit-linear-gradient(top,#555,#333);
background-image:-moz-linear-gradient(top,#555,#333);
background-image:-ms-linear-gradient(top,#555,#333);
background-image:-o-linear-gradient(top,#555,#333);
background-image:linear-gradient(top,#555,#333);
display:block;
padding:5px 10px;
margin:0px 0px;
}
#tinycarousel #tinyarrow {
display:block;
background-color:white;
border:1px solid #ccc;
padding:5px;
margin:2px 0px 0px;
overflow:hidden;
}
#tinycarousel #tinyarrow .buttons {
background-color:#666;
border:none;
outline:none;
display:block;
padding:2px 5px;
overflow:hidden;
position:relative;
float:left;
margin:0px 1px;
color:white;
text-decoration:none;
font-weight:bold;
}
#tinycarousel #tinyarrow .disable {
display:none;
}
#tinycarousel #tinyarrow .buttons:active {
background-color:#900;
position:relative;
top:1px;
}
#tinycarousel #tinyarrow span {
float:right;
font:bold 11px Tahoma,Verdana,Arial,Sans-Serif;
display:block;
margin:2px 5px 0px 0px;
}
#tinycarousel.vertical {
width:242px;
}
#tinycarousel.vertical ul.overview li {
float:none;
display:block;
width:230px;
margin:5px auto 10px !important;
}

• Selanjutnya sobat cari kode </head> setelah ketemu letakan kode dibawah ini sebelumnya atau diatasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#tinycarousel').tinycarousel({
start : 1,
display : 1,
axis : 'x',
interval : true,
intervaltime: 3000,
animation : true,
duration : 1000,
callback : null
});
});
//]]>
</script>
<script src='http://my-project-favicon.googlecode.com/files/tinycrsl.js' type='text/javascript'/> 

• Setelah selesai simpan dulu templatenya, 

Lankah kedua Membuat Slider otomatis tinycarousel;

• Pada langkah kedua ini sobat harus sudah keluar dari halaman edit HTML dan klik Tata letak selanjutnya klik tambah gadget yang berada dibawah judul header. atau dimana saja terserah sobat.
• Setelah klik tambah gadget selanjutnya klik HTML/javascript dan masukan kode dibawah ini

<script type="text/javascript">
var showPostDate_g  = true,
    showComm_g      = true,
    slideOpenNewTab = true,
    idMode          = true,
    slidebyLabels   = false,
    slideLabelName  = "Mengenai",
    pBlank          = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
    text            = "Komentar",
    numposts_g      = 10,
    numchars_g      = 100,
    showText        = "Menampilkan",
    postText        = "Posting",
    tinyprevNav     = "&lt;",
    tinynextNav     = "&gt;",
    home_page       = "http://azzam10.blogspot.com/";
</script>
<script src="http://my-project-favicon.googlecode.com/files/Contentinycarsl.js" type="text/javascript"></script>

• Simpan dan selesai.

Sobat ganti tulisan warna merah dengan URL sobat ya dan sobat bisa mengkonfigurasikan false atau true pada konfigurasi diatas. 

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Membuat Slider otomatis tinycarousel kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered

BACA JUGA ARTIKEL TERKAIT LAINNYA

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 17:22