Nah.. bagi kalian yang ingin cari slider untuk blog kalian jangan cari jauh jauh dari blog ini, di artikel ini aku juga akan membagi slider yang cocok untuk semua tampilan blog yang ada. Slider yang simple, keren dan enak di pandang mata. Berikut screenshot slider yang ingin aku bagi untuk kalian semua..
Gimana ? Tertarik mencoba slider yang keren dan kece ini ? Langsung aja ikuti langkah berikut ^^
- Login Blogger > Design > Edit HTML
- Salin kode berikut di atas kode </b:skin>
/*
* jQuery Nivo Slider v2.5.1
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* Editor
* http://dopind.blogspot.com/2012/07/nivo-slider-slider-blogger-keren.html
*
* March 2010
*/
#slider-wrapper {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhWWqG-AShfURxa1vYi60sP2rLV8kmvJZHEJbPfpCyCn4OMx7hZtOOwHAyG2WGjnPsHy3jalXiJpHG-vKt6CUd0aJ_pmxMqqS1j1nouGT3opelZ0cU_zNY5AS9r-OItFgJmwm2mTC3hCw/s1600/slider.png) no-repeat;
width:998px;
height:392px;
margin:0 auto;
padding-top:74px;
margin-top:50px;
}
#slider {
position:relative;
width:618px;
height:246px;
margin-left:190px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJtDwpEwVO2NM6jB0YBKoRMJ17tEKnvsOtA5OLs3Pe0NFtGkWAjLFxV6HIF3PyCmHCFzYDPkszzsIf2TKZjhT8ZNS9VnK4UzI9vkICrOcJotib8VtTB19l2YNZK2wXBqlTKaImw24OEug/s1600/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(ttp:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW5FWFl8JXYwDZLVnTCytQkmWOyPzLQ-3IooG0CwPsUMUMCT7IFn4DyZJseeM34379g938cFiPog5nfv4WbKwbKZi4-by__4KgR11sYX3lvRx11SQmKS-jSpkfKRA4zWZe-R5rJ74x7Bc/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1pgVsc7k8kBW1AnnZRlcs7Z9wCZ-xZq7pCW8p7FXlxjqsOv937fgQ7vcA0EIuc0e371z2m9J64lfKcJKSnPiDpFYaCoQ8RWlrC2ZumzI5mDOTxSHtBmOHqADlSdM2ZUF5owVpz6b6wRc/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:8;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1pgVsc7k8kBW1AnnZRlcs7Z9wCZ-xZq7pCW8p7FXlxjqsOv937fgQ7vcA0EIuc0e371z2m9J64lfKcJKSnPiDpFYaCoQ8RWlrC2ZumzI5mDOTxSHtBmOHqADlSdM2ZUF5owVpz6b6wRc/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
/* Control nav styles (e.g. 1,2,3…) */
.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW5FWFl8JXYwDZLVnTCytQkmWOyPzLQ-3IooG0CwPsUMUMCT7IFn4DyZJseeM34379g938cFiPog5nfv4WbKwbKZi4-by__4KgR11sYX3lvRx11SQmKS-jSpkfKRA4zWZe-R5rJ74x7Bc/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
- Salin kode berikut di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/1611641113/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
- Klik tombol 'Save Templates' , kemudian klik 'Page Elements' (letak gadget di atas postingan? pertama buat gadget lalu klik dan geser di atas 'posting blog') > Add a Gadget > pilih HTML/JavaScript
Salin kode berikut #ganti kode berwarna hijau dengan link gambar
<div id="slider">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVsrisxjHFo_6gNRJgvLOAeLK124Qip8HfKLQiVi3fJ1__zl6x4nkbBv5dK9Xcy_P8hh7yc93sFOzIaYUY7ut466IS6OuOxR946k27jYjyEwaDzcyb61rGz_fzHzZm2MzGldc4_jUsFqk/s1600/toystory.jpg" alt="" />
<a href="http://dev7studios.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_NGonoPfkW10dwilQdRVa9fAMtPcHLH4GC0qdjrKuR8Hsb51-jID1cGuDaT9HgPMThOAbcQN1Xw34ZQqe-r9kIUNhK3TO-7kC243cJvFLpHjEVeXn4FiTHiK58ukHnEjQu0wpQZU08uI/s1600/up.jpg" alt="" title="#htmlcaption" /></a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiChsKNmIiRgeF-vlVc9AI2rGsf5eUaEgt1Wredr1kj2-BQ7Y3SbSgRSWEhVBT2FiiWje63nwg1jJ1QD1GUcYwQIGTFU_vdaex_-aduv9lWJGfjSk1KReHDnS3yOJR_4dej_hmCiLAtNwA/s1600/walle.jpg" alt="" title="This is an example of a caption" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKDTB6LFqucwkpoNW1zXDE4dVhr7C-sEc7tr6PB63I1fJYK_r1fYVVgAbCkaAwBvF0tDeFq2BPNajppXSaroyYxwJwwIvSghumaP0g2qG-NgF0yN8i2A1ATYBLR_9ZtA0nVd4bO6sN-BE/s1600/nemo.jpg" alt="" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
- Nikmati Nivo Slider, Slider Keren Blogger di blog kalian sendiri ^^
Sumber kode : bloggerbin.com/add-nivo-slider-in-bloggerblogspot/
Artikel Terkait
Langganan:
Posting Komentar (Atom)
60 komentar:
Mantap Sob,, update terus ya.....
InsyaAllah sob.. akan slalu update :)
kl pasang itu punya saya ko' ada yg error ya sob..? makasih nice share sob.
coba cek di sumbernya.. kalo dari sumbernya kena yaa gatau sob.. hehe :-D
pasti saya coba ! :D tapi saya mau nanya sedikit , kalo ente donlot tema di blog ente ini di mana ya ? makasi tlong di jawab lewat email aja ya nagatokevin93@gmail.com terimakasi gan , salam blogwalking :D
silahkan di coba2 sob ^^
ane lupa dulu download dimana.. seinget saya nama template ini lunax.. makasih juga :)
ini sayang sliddernya gak bisa diganti yah
slidder yang mana sob ? pnya ente ? ya bisa dong ^^
makasih ni gan infonya
ehehe.. samsamaa sob^^
saya coba praktikin nigan,,makasih..
aduh bagus bgt infonya..
silahkan sob.. sedot sampe abiz^^
sliddernya bisa diganti ga kan? aduh sayang..
@endometriosis @nyeri @obat : ehehe.. spam banget :p.. postingan ku penuh spam u,u
ane juga ikutan nyedot ya gan... thank's
ehehehe.. silahkan di sedot sob, samasama ^.~
Kami dari situs www.korangratis.web.id ingin mengajak anda bergabung dalam situs kami menjadi penulis apakah anda bersedia. jika ia anda bisa hub kami di 085743814600 atau beritakita35@yahoo.com Untuk info lebih lanjut. Terima kasih
oke sob, langsung menghubungi sobat ^^
makasih gan... mau di coba dulu nih..
makasih ya info yang sangat bagus..
@Jelly : iyaa sob, semoga berhasil yaa^^
@obat : ehehe.. samasamaa qaqa :)
Izin nyimak aja sobb hheee...
ehehe.. silahkan sob.. semoga bermanfaat ^_^
keren bang :D makasi yaaa.. visit me back ^^
kok punga ane eror sob...?
@sept : ehehe , makasih juga sobat :D
@ucok : coba di coba lagi sob, mungkin ada yg nyelip :)
error nii bro...
kata'y gini "Kesalahan saat mengurai XML, baris 719, kolom 37: The entity name must immediately follow the '&' in the entity reference."
musti digimanain niih ?
gan,ko ane nyoba malah loading mulu tuh,ga keluar2 slider nya ..
gan,ko ane nyoba malah loading mulu slider nya,kenapa ya??
@cherie : kemungkinan terbesar tata letak kode yg dipasang salah, atau bisa juga karena tidak compatible dgn template sebelumnya :)
@restu : internet nya mungkin sob ^_^
artikel yg menarik nie, dan saya menyukainya nie, dan salam kenal dari mico ya, makasi atas infonya dan bagi teman2 yg suka film box office,horor,action dan suka download film. silakan kunjungi situsnya ya, makasi
ok gan trims udah bagi-bagi ilmunya
@download : semoga bermanfaat, salam kenal juga sob ^^
@obat : oke sob, semoga bermanfaat yaa :)
makasih gan infonya
iya sob, samasama yaaa :)
kunjungi blog ane yah fikrias-xtream.blogspot.com
Duh,jadi puyeng dehhhh.maklum baru belajar nih.padahal suka banget ma slider,tp gk berhasil
bener2 keren ni blog...jadi pngen punya blog sperti ini..
ijin sedot gan...
@fikri : siap sob, langsung ke lapak sobat^^
@ekstrak : di coba dulu jgan dilihat aja sob :D
@ervin19 : wew, semoga keturutan sob, lebih bagus dari blog ini kalo bisa :D
keren , kok g dipake skalian di blog situ
ndak cocok sama template ini sob, nanti jadinya malah jelek :)
template blog saya juga sudah memasang slideshow namun sepertinya beda dengan ini
terima kasih atas ilmunya
mantep nih design blonya
Mantab infonya,
akan sy praktekan
salam kenal
gmana ni mendesign blog seperti ini?
di tunggu replaynya...
thank you,.,,
bang kalo mau batesin gedenya gmn?
bang pas di masukin ke blog, dia malah keluar border. Sama gambarnya ke cut gitu karena kegedean. Fixnya gmn ya? kalo pake banner biasa kan gambarnya di pasin sama bordernya. Thanks
gan,,, kok sepanjang gw klik panahnya, ada tulisan "This is an example of a caption"..??
thanx infonya gan..
I LikE iT ....!
Sangat Mmembantu thx Gan..
yang ngurus blodnya udah ilang wkwkw
Salam kenal, makasih infonya, saya tunggu kunjungan baliknya di OBYEKTIF.COM
Salam kompak:
Obyektif Cyber Magazine
(obyektif.com)
mau coba ahhhhh ,,
visit my blog dong
Proudly Indonesian
aduh terimakasih, sumpeh ini blog ngebantu banget
udah gwe cari cara menambahkan gambar slider ini udah
3 tahun,gile gak tuh....
Terimakasih informasi nya !!
terima kasihh sob atas trik dan tipsnya . .. salam kenal dan sukses selalu!!!
Posting Komentar