Login ke blogger
'jQuery Slider', 'slide show' dengan 'caption' deskripsi ini di kembangkan oleh 'dream css'. 'Slide show' ini menarik tampilannya dan saya tertarik mencoba menerapkan di blogger template, yup cukup mudah penerapannya.
Penerapan 'jQuery Slider' di 'Blogger Template':
1. Javascript
a. Masukan script jQuery berikut sebelum
</head> (jika telah memiliki script jQuery ini tidak perlu dimasukan kembali) :<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>b. Masukan javascript jQuery Slider berikut dibawah script jQuery tadi.
<!-- Javascript div#slide-holder -->
<script type='text/javascript'>var _siteRoot='index.html',_root='index.html';</script>
<script src='http://blogspot-choen.googlecode.com/files/scriptsSlider.js' type='text/javascript'/>
<script type='text/javascript'>
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"Code-code-an","desc":"Media Dokumentasi Tutorial dan Desain "},
{"id":"slide-img-2","client":"sIFR 02","desc":"Free Blogger Template"},
{"id":"slide-img-3","client":"Bukan Coklat ","desc":"Free Blogger Template"},
{"id":"slide-img-4","client":"Ini Minimaliskah ?","desc":"Free Blogger Template"},
{"id":"slide-img-5","client":"Cufon","desc":"Free Blogger Template"},
{"id":"slide-img-6","client":"jQuery 2","desc":"Free Blogger Template"},
{"id":"slide-img-7","client":"jQuery 1","desc":"Free Blogger Template"}];
</script>
<!-- End Javascript div#slide-holder -->>>Catatan: warna merah diatas adalah caption deskripsi tiap image, perlu dirubah sesuai deskripsi tiap image anda.
2. HTML
Masukan kode
HTML diatas <div id='content-wrapper'> :<!--HTML div#slide-holder-->
<div id='headerSlider'><div class='wrapSlider'>
<div id='slide-holder'>
<div id='slide-runner'>
<a href='http://deconstructioncode.blogspot.com/'><img alt='code-code-an' class='slide' id='slide-img-1' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SpPsZSrB6OI/AAAAAAAACKY/i80SCyD44BI/deconstructioncode2.jpg'/></a>
<a href='http://deconstructioncode.blogspot.com/2009/08/nge-grunge-dengan-sifr-20-free-blogger.html'><img alt='sIFR in Blogger Template' class='slide' id='slide-img-2' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SpPuiTccecI/AAAAAAAACKc/KwKDFX51CnM/sifr2bloggertemplate.jpg'/></a>
<a href='http://deconstructioncode.blogspot.com/2009/07/bukan-template-coklat.html'><img alt='Free Blogger Template' class='slide' id='slide-img-3' src='http://lh3.ggpht.com/_dfnTVAxeWMI/SpPwKSdCtVI/AAAAAAAACKg/7gFw2HZFlaE/CoklatBloggertemplate.jpg'/></a>
<a href='http://deconstructioncode.blogspot.com/2009/07/ini-minimal-kah-free-blogger-template.html'><img alt='Free Blogger Template' class='slide' id='slide-img-4' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SpUi5ovp8xI/AAAAAAAACLA/4XpsH63UaMk/iniminimal.jpg'/></a>
<a href='http://deconstructioncode.blogspot.com/2009/07/free-blogger-template-cufon-sifr.html'><img alt='Free Blogger Template' class='slide' id='slide-img-5' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SpUkbuipkAI/AAAAAAAACLE/2327FKbifQE/cufontypo.jpg'/></a>
<a href='http://deconstructioncode.blogspot.com/2009/06/free-blogger-templates-dengan-sentuhan.html'><img alt='Free Blogger Template' class='slide' id='slide-img-6' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SpUlomDRo6I/AAAAAAAACLI/PYsLvvqqenE/jQ2.jpg'/></a>
<a href='http://deconstructioncode.blogspot.com/2009/05/free-blogger-templates-dengan-sentuhan.html'><img alt='Free Blogger Template' class='slide' id='slide-img-7' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SpUmknxumWI/AAAAAAAACLM/slg5rmBUmBo/jQ1.jpg'/></a>
<div id='slide-controls'>
<p class='text' id='slide-client'><strong>post: </strong><span/></p>
<p class='text' id='slide-desc'/>
<p id='slide-nav'/>
</div>
</div>
<!--content featured gallery here -->
</div>
</div></div>
<!-- End HTML div#slide-holder -->>> Catatan:
- Warna biru diatas menandakan image berdasarkan jumlah (jangan diapus atau dirubah).
- Setiap 'alamat URL', '
alt', dan 'alamat gambar' perlu anda rubah, dan sesuaikan dengan deskripsi di javascript diatas.3. CSS
Masukan kode
CSS diatas ]]></b:skin> :/* CSS div#slide-holder */
div#headerSlider div.wrapSlider{
width:810px; /* mesti disesuaikan */
height:288px;
background:#000;
border: 4px solid #333;
margin: 0 auto;
}
div#headerSlider div#slide-holder{
z-index:40;
height:288px;
position:absolute;
}
div#headerSlider div#slide-holder div#slide-runner{
top:5px;
left:5px;
width:800px; /* mesti disesuaikan */
height:278px; /* mesti disesuaikan */
overflow:hidden;
position:absolute;
}
div#headerSlider div#slide-holder img{
margin:0;
display:none;
position:absolute;
}
div#headerSlider div#slide-holder div#slide-controls{
left:0;
bottom:228px;
width:800px; /* mesti disesuaikan */
height:46px;
display:none;
position:absolute;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SpUhSXvvaFI/AAAAAAAACK8/eYHketamvoc/slide-bg.png) repeat scroll 0 0;
}
div#headerSlider div#slide-holder div#slide-controls p.text{
float:left;
color:#fff;
display:inline;
font-size:10px;
line-height:16px;
margin:15px 0 0 20px;
text-transform:uppercase;
}
div#headerSlider div#slide-holder div#slide-controls p#slide-nav{
float:right;
height:24px;
display:inline;
margin:11px 15px 0 0;
}
div#headerSlider div#slide-holder div#slide-controls p#slide-nav a{
float:left;
width:24px;
height:24px;
display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:bold;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
color:#ccc;
}
div#headerSlider div#slide-holder div#slide-controls p#slide-nav a.on{
background-position:0 -24px;
}
div#headerSlider div#slide-holder div#slide-controls p#slide-nav a{
background-image:url(http://lh6.ggpht.com/_dfnTVAxeWMI/SpPogDg6qzI/AAAAAAAACKU/DhQZk2y7GtE/s800/silde-navSlider.png);
}4. Sip Selesai, silahkan memodifikasi sesuai selera anda.
Tips N Triks
- Tips & Trik Jumper | Teknik Jumper Keypad Handphone
- Blackberry Software Solution By Kenny ic3
- Tips mempertahankan baterai laptop agar bertahan lama I Battery Care | Hausgame software center
- cara menggabungkan dan memotong video
- membuat poster animasi gokil abis dengan photobie
- Pengalaman membasmi virus shortcut, W32 Ramnit
- Perbaiki Safe Mode bermasalah dengan Safe Mode Fixer
- BlackBerry 8520 Curve usb solution
- Nokia E63 E71 E72 SMPS Jumper
- Hardware pack For Nokia X6 16GB Latest Software
- Nokia x6 16gb hardware solution
- Nokia X5 Hardwere Solution One Exe
- Nokia x5
- Nokia X6 32GB solution
- Nokia C1-00 All Hardware Latest Solution Pack
- Nokia X2 Soution
- x6 Nokia ALL UseFull Hardware Repair Solution Pack
- Nokia X3 all Hardware Tested Solution
- NOKIA x6 All Solution Here (Setup File v-4)
- Nokia X5 All Hardware Latest Solution
- Nokia X7-00 charging way
- Nokia E 71 Hardware Solution
- Nokia 1616 Display
- nokiaE7-00 power key way
- Nokia C,E,N,X series All hardware solution exe
JQery
- Switch Stylesheets jQuery: Trik Gonta-ganti CSS
- Scroll Background jQuery di Blogger Template
- Thumbnail Gallery, Heading dan Caption dengan Effect jQuery
- Social Bookmarks dengan jQuery di Blogger Template
- Drag Me Donk jQuery di Blogger Template
- Penerapan Dropdown Menu jQuery di Blogger Template
- Tabs - jQuery: Dalam Beragam Jenis
- Penerapan "Simple Tabs" di Blogger Template
- Penerapan Link Nudging di Blogger Template
- Menu Navigasi Vertikal dengan Efek jQuery
- Membuat Sliding Login/Register Form Panel di Blogspot [JQery]
Blogger
- Kamus Nama bagus
- Efek Box Gelap Terang Menggunakan Opacity Effect dan CSS3 Transition
- Merubah Lebar Template Blog
- Cara Membuat New Recent Comment dengan Scroll Down di Blogspot
- Cara Memasang Yahoo Messenger Di Blogger
- Cara membuat browser bergetar saat klik kanan
- Cara Membuat Sitemap di Blogspot
- Membuat Widget Agar Selalu Tetep Berada Di Kiri,Kanan,Dll
- Cara Pasang Buku Tamu Facebook di Blog
- Tips Cara Pasang Status / ikon YM (yahoo messenger) di blog/web/friendster !
- Mengganti Tulisan Newer Post Older Post Dengan Gambar
- Cara Membuat Vertical Sliding Info Panel With jQuery
- Memasang Radio Online atau MP3 di Blog
- SEXY BOOKMARKS V2 FOR BLOGGER
- Show Comment Bubble at Top Right of each Blogger Posts
- Automatic Read More with Thumbnail for Blogger
- Social Bookmarking Widget for Blogger with auto scrolling function
- CARA MEMBUAT EXPLORER D-TREE...
- Cara Pasang Tag Meta Robot Blogspot
- Cara Membuat Drop Caps Otomatis di Posting Blog
- Koleksi banner blog dofollow
- Cara mengecek kecepatan Blog
- Membuat Link Terbuka Pada Halaman Baru
- Memasang Feedjit Pada Blogger
- Membuat Gradient Effect dengan CSS
0 komentar:
Posting Komentar