Monday, July 11, 2011
Cara Memasang Image Slider dengan jQuery
Slide Show Postingan itu apaan sih?
SlideShow, dari namanya sudah cukup jelas bukan? Itu lo yang gambar/foto nya berpindah-pindah sendiri. Saya banyak menjumpai blog sesama blogger itu menggunakan website slide show. Misalnya Slide.com, Kizoa.com atau Slideshow.com sendiri.
Situs-situs slideshow seperti diatas hanya cocok untuk memajang foto-foto/ gambar saja. Tapi bukan itu yang saya maksud pada postingan kali ini. Tapi slideshow postingan pilihan. Yang artinya slide show yang berisi image-image untuk menuju artikel-artikel pilihan yang kita tentukan sendiri.
Sebelum kita mencobanya disini saya akan memberikan cara pemasangan Slider ini, tepat diatas Sidebar.
Baiklah, kita lansung kelangkah pembuatannya..
Ikuti langkah-langkah berikut :
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : ]]></b:skin>
5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini sebelum atau diatas kode ]]></b:skin> .
4. Selanjutnya Cari kode : </head> . Lalu letakkan Kode berikut sebelum atau diatas kode </head>
4. dan selanjutnya cari kode : <b:section class='sidebaratas' id='sidebaratas' preferred='yes'> , lalu letakkan Kode berikut diatasnya.
KET:::
- teks yang berwarna orange, URL Gambar anda.. sedangkan
- teks yang berwarna merah, URL gambar anda.
6. Terkhir Preview dulu,. jika berhasil. baru Save template..
Selamat Mencoba.
SlideShow, dari namanya sudah cukup jelas bukan? Itu lo yang gambar/foto nya berpindah-pindah sendiri. Saya banyak menjumpai blog sesama blogger itu menggunakan website slide show. Misalnya Slide.com, Kizoa.com atau Slideshow.com sendiri.
Situs-situs slideshow seperti diatas hanya cocok untuk memajang foto-foto/ gambar saja. Tapi bukan itu yang saya maksud pada postingan kali ini. Tapi slideshow postingan pilihan. Yang artinya slide show yang berisi image-image untuk menuju artikel-artikel pilihan yang kita tentukan sendiri.
Sebelum kita mencobanya disini saya akan memberikan cara pemasangan Slider ini, tepat diatas Sidebar.
Baiklah, kita lansung kelangkah pembuatannya..
Ikuti langkah-langkah berikut :
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : ]]></b:skin>
5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini sebelum atau diatas kode ]]></b:skin> .
#slideM{margin:0 0 15px; overflow:hidden}
.stepcarousel{border-radius:15px; -moz-border-radius:5px; -webkit-border-radius:15px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; position:relative; border:1px solid white; overflow:scroll; width:270px; height:200px}
.stepcarousel .belt{position:absolute; left:0; top:0}
.stepcarousel .panel{float:left; overflow:hidden; margin:10px; width:175px; height:160px}
.panel img{width:175px;height:160px}
4. Selanjutnya Cari kode : </head> . Lalu letakkan Kode berikut sebelum atau diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://pagenano.googlecode.com/files/last.js' type='text/javascript'/>
<script src='http://pagenano.googlecode.com/files/Nav%20Mdev.js' type='text/javascript'/>
<script src='http://pagenano.googlecode.com/files/Gambar%20Bergantian.js' type='text/javascript'/>
<script type='text/javascript'>
summary_noimg = 500;
summary_img = 300;
img_thumb_height = 130;
img_thumb_width = 110;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0 10px 0 00;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<script type='text/javascript'>
stepcarousel.setup({
galleryid: 'mygallery',
beltclass: 'belt',
panelclass: 'panel',
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, wrapbehavior:'slide', persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL8Jm02Twu_acKvBMbPnGoCTWqtUbt9tgiqIfy-ZteDUkf-ZQDWKdOgV0XXKQv-LT_cyF_TQRL7b14S93m0ut97ulWC08JMHIa8iY5NRmX5UpdDKoE7jisAuGxMB_QdcHbGozb39xrEtZB/s400/NLeft.png', -27, 80], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9pTZntTMnybS5tBUduTPo6SGFYIJD5O2Gk9lsFOtyXAnou5RvEwzdcBQ7r4rRFEnKJBuJ5nY73sjgxsLmvx_M6iioqbFw7EuJ-DYPZbjpVl1uJkp8P44PK-2iCX1Po8U4tmsJBfzTtYA9/s400/NRight.png', -12, 80]},
statusvars: ['statusA', 'statusB', 'statusC'],
contenttype: ['inline']
})
</script>
4. dan selanjutnya cari kode : <b:section class='sidebaratas' id='sidebaratas' preferred='yes'> , lalu letakkan Kode berikut diatasnya.
<div id='slideM'>
<div class='stepcarousel' id='mygallery' style='width:80%;height:180px;margin:0 auto;'>
<div class='belt'>
<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/04/uniqx-transparent-version-10-design-by.html'><img src='http://i52.tinypic.com/1z5p4xf.jpg'/></a>
</div>
<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/04/junoon-template-blogger.html'><img src='http://lh6.ggpht.com/_1RC6aqxCk8A/TMBmUhhLsJI/AAAAAAAAAXg/DZyQwTGWIR0/image%5B6%5D.png'/></a>
</div>
<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/04/mdev-template-tampilan-klasik-sentuhan.html'><img src='http://1.bp.blogspot.com/-uDccDJ5KkPE/TabSvWyY86I/AAAAAAAABnk/xV28znia9CQ/s1600/Mdev.jpg'/></a>
</div>
<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/04/smart-shadow-template-blogger.html'><img src='http://lh5.ggpht.com/_dfnTVAxeWMI/Sy2ZHIP3tfI/AAAAAAAAC7A/uQgnydj_zNE/smart-shadow.gif'/></a>
</div>
<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/04/black-eleganisme-template-blogger.html'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM2qxol47608_w53DPr82gQ3SdWGMaATCEvxUnaaLmFhh-KBTS9OVIPliR_jw0u6aZdo8LyekKkezIy2sOrmD3PZA_HFXSFeC_3i8LQuvv1tsq1TUaAURRAmNrp1liesWwcpQyIpwdfSc/s400/Black+Eleganisme+Blogger+Template.png'/></a>
</div>
<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/03/koleksi-template-terbaru-2011.html'><img src='http://www.bloggertheme.net/wp-content/uploads/2011/02/yalene.jpg'/></a>
</div>
<div class='panel'>
<a href='http://www.uttafreak-987.co.cc/2011/04/css-template-blogger.html'><img src='http://lh4.ggpht.com/_f7ChQS4URE4/TJkDxRlNqQI/AAAAAAAABF4/JW1hdZwyk-c/preview%5B7%5D.png?imgmax=800'/></a>
</div>
</div>
</div>
<p id='mygallery-paginate' style='text-align:center'>
<img data-moveby='1' data-over='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHoRxvX63H3QynqXtPDs49I3BrYzMLn7tuENi8FRvDHv2HAfIEeC4N6ZAwBP6u3HAh_ckY7xgQRhag_y0_aGhu5WU7ZkPDlMgkWM9lPTjYWBc-v26mid6sUUfiyUbUfvPR8Xh-dMc7BBGK/s400/hovclose.png' data-select='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii17BrqYETKsZf9gJTpLWKCoogRdnnXBiBtQZBE1l3kpoSZFsDkTAXH_nCcbUlQCZCrHD5b1wJuf7JFUm6bnNyv-wFgLLxzml-_l_gRD8vX9HzOyNEsO6wFRHo0PdRxI6AtZbnaJJcItvj/s400/close.png' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRDjxJpl1ICW3MVRuLVv4Orv6TrLgJMdIQQs8vVtWtRrRsB2EFGqKvTbWvAwaKnYbcfzTLpTTVFrtX9S2872IADgnx7-FzN9o8rTMI-agAAQBikPqe4EO8yJs53Vefgs3uqcN_esH8x_xi/s400/open.png'/>
</p>
</div>
KET:::
- teks yang berwarna orange, URL Gambar anda.. sedangkan
- teks yang berwarna merah, URL gambar anda.
6. Terkhir Preview dulu,. jika berhasil. baru Save template..
Selamat Mencoba.
Labels:
jQuery
Subscribe to:
Post Comments (Atom)
Blog Archive
- 2012 (7)
-
2011
(362)
- December(5)
- November(6)
- October(5)
- September(9)
- August(20)
-
July(227)
- Tips Cara Ganti Warna Tampilan Microsoft Office 2007
- Confirmasi PayPal Agar bisa Menerima Pembayaran
- Manfaat Menjalankan Shalat
- Daftar Paypal Gratis dan Tanpa Credit Card
- TuneUp Utilities 2011 Full Version + Serial Number
- Auto Hide IP 5.1.7.2 Full Crack
- Template Transparent 2.0 design by Rizky Wardiansyah
- Black Devil Red Horns Emoticon
- Template Transparent 1.0 design by Rizky Wardiansyah
- Boaz dan Busthomi Langsung Diminati Klub Malaysia
- Any Video Converter 3.25
- Bor Gigi Bisa Bernyanyi
- Cara Pasang Widget (Buku Tamu) Facebook
- Menyembunyikan Obyek Dengan Kode Overflow:hidden
- "Yang Anggap Rossi Tidak Berusaha, Orang Gila"
- Coleen Buat Wanita Penghibur Rooney Ketakutan
- Windows Media Player 12's surprising new features
- Internet Download Manager 6.07 Build 5 Full Patch
- Cara Memasang Widget Followers di Pojok Blog
- Mempercepat Copy/Paste Dengan Teracopy
- IDM Optimizer Software Untuk Memaksimalkan IDM
- Yuk Nikmati Sahur Bersama OVJ
- City Tunggu Aguero dalam Lima Hari
- Xavi, Messi, dan Ronaldo Berebut Jadi yang Terbaik
- Membuka You Tube Tanpa Blokir
- Cara Jebol Quota Modem Aha (Quota Habis)
- Membuka Blokir Situs Dewasa Pada Modem AHA Dialer ...
- DLL-Files.com Fixer Full Patch
- Lapangan Buruk, Indonesia Hanya Imbang di Babak I
- Pasang About Author Box dengan CSS
- Cara Pasang Iklan di Bawah Posting
- Desktop Windows 7 Layar Hitam??
- Posteriza - Software Buat Print Gambar Besar Dalam...
- Ablewise | Tool Buat Memprediksi PageRank
- Download Game MotoGP 3 URT – Ultimate Racing Techn...
- Update Terbaru Winning Eleven 2011
- Download Winning Eleven 9 PC Portable Gratis
- Google Index Pages Checker
- Setting Macro Mouse A4Tech XL-747H
- Melawan virus pemakan exe
- 3 Penyebab Utama Pc/Komputer Sering Restart Sendiri
- Mengatasi masalah windows yang tidak mau Log On
- Membuat Cd instalan windows(Bootable) Instan Denga...
- Blogger Support Upload Favicon Sendiri
- Firefox 6.0 Beta 2
- Cara Memasang Meta Tag Alexa
- Mendaftarkan Blog dan Memasang Widget Alexa
- Cara Menambah Background di Posting Blog
- Keputusan PSSI Memecat Alfred Riedl Adalah Blunder
- Cara Memasukan Foto ke dalam Template
- Membuat Efek Auto Blend Layer (CS3)
- Link-link di Ilmu Photoshop Yang Mungkin Berguna
- Collection Link Brush Photoshop Gratis dan Unik
- Cara Membuat Langit Berbintang
- Tips Photoshop : Pengaturan Penting Sebelum Mendesain
- Kumpulan Gambar Animasi Bergerak GIF One Piece
- 10 Foto Lucu Bayi yang Baru Lahir (Ng-gemesin Bang...
- Kumpulan Gambar Lucu dan Konyol
- Foto Nakal Syahrini Beredar di Internet
- Foto Ciuman Briptu Norman Beredar Di Internet
- Cara Pasang Kotak Komentar Facebook di Blogger
- Download Koleksi Soundtrack Film 'MOHABBATEIN'
- Download Koleksi LAGU-LAGU SHAHRUK KHAN
- Download Koleksi Soundtrack Film 'KUCH KUCH HOTA HAI'
- Download Koleksi Soundtrack Film 'DILTO PAGAL HAI'
- Download Koleksi Soundtrack Film 'HUM TUMHARE HAIN...
- Download Koleksi Soundtrack Film 'DIL SE'
- Download Koleksi Soundtrack Film 'KOYLA'
- Download Gratis Lagu Peterpan – Dara | Video
- Lagu Briptu Norman Cinta Cinta | Chaiya chaiya Ver...
- Lagu Briptu Norman Cinta Farhat Free Download
- Cara Ganti Template Blogspot Anda
- Cara Merubah Lebar Dan Luas Template
- Worm 3D
- Stronghold Crusader Extreme
- Crazy Frog Racer 2
- Feeding Frenzy 2
- Medal of Honor Limited Edition
- Need For Speed Most Wanted + Crack
- Devil May Cry 4
- Resident Evil 5
- Counter Strike : Source v.60 OrangeBox Engine FULL...
- Counter Strike S.T.A.L.K.E.R. (2010/ENG) PC
- Counter Strike 1.6 Update 2011 (Bots + Skins + 100...
- Counter Strike 1.6 (Update March.2011) Bots - Skin...
- Counter Strike Source 1.6
- Counter Stirke: V5 Xtreme (2011/ENG) 794 MB
- Street Fighter III 3rd Strike Full Version
- X-Men VS Street Fighter
- Cara Install Dota Battle
- Prison Tycoon 4 SuperMax
- FBI Hostage Rescue (ENG/Full/PC)
- SAS Anti Terror Force [Full ISO]
- SAS Anti Terror Force Edition
- Ice Age 3 : Dawn Of The Dinosaurs
- Ice Age 2 : The Meltdown
- Koleksi Template Terbaru 2011
- Collection Template Blogger
- RegistryBooster 2011 6.0.3.6 Full Serial Crack
- Install Windows 7 Melalui USB Flash Disk Tanpa CD-...
- June(90)
About Me
- Sibuk Banget
0 comments:
Post a Comment