Nivo Slider, Slider Blogger Keren

SLIDER BLOGGER
      Banyak sebagian blog dari Indonesia menggunakan fitur ini, fitur slider untuk blogger. Fitur ini berguna untuk menampilkan artikel populer atau artikel terbaru dengan gambar yang menarik agar pengunjung melihat artikel yang di tampilkan dalam slider.  Selain memudahkan pengunjung untuk mencari tahu artikel apa yang harus dia lihat juga berfungsi sebagai keindahan blog.  Jadi jangan asal-asal pilih dan ambil slider dari blog tutorial, jangan asal ada slider di blog, udah deh!  Lihat dulu tampilan itu cocok atau enggak untuk blog kalian, kalo cocok langsung ikuti langkah-langkah yang di terapkan ^^

       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..

Nivo Slider, Slider Keren Blogger

    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() {
    $(&#39;#slider&#39;).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

60 komentar:

Hendric Simarmata mengatakan...

Mantap Sob,, update terus ya.....

Deo Pradipta mengatakan...

InsyaAllah sob.. akan slalu update :)

nakusan computer mengatakan...

kl pasang itu punya saya ko' ada yg error ya sob..? makasih nice share sob.

Deo Pradipta mengatakan...

coba cek di sumbernya.. kalo dari sumbernya kena yaa gatau sob.. hehe :-D

Nagato's Blog mengatakan...

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

Deo Pradipta mengatakan...

silahkan di coba2 sob ^^

ane lupa dulu download dimana.. seinget saya nama template ini lunax.. makasih juga :)

hanggarps mengatakan...

ini sayang sliddernya gak bisa diganti yah

Deo Pradipta mengatakan...

slidder yang mana sob ? pnya ente ? ya bisa dong ^^

obat kanker usus tradisional mengatakan...

makasih ni gan infonya

Deo Pradipta mengatakan...

ehehe.. samsamaa sob^^

obat herbal hepatitis mengatakan...

saya coba praktikin nigan,,makasih..

Endometriosis mengatakan...

aduh bagus bgt infonya..

Deo Pradipta mengatakan...

silahkan sob.. sedot sampe abiz^^

nyeri punggung mengatakan...

sliddernya bisa diganti ga kan? aduh sayang..

Deo Pradipta mengatakan...

@endometriosis @nyeri @obat : ehehe.. spam banget :p.. postingan ku penuh spam u,u

Jelly Gamat Luxor mengatakan...

ane juga ikutan nyedot ya gan... thank's

Deo Pradipta mengatakan...

ehehehe.. silahkan di sedot sob, samasama ^.~

Unknown mengatakan...

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

Deo Pradipta mengatakan...

oke sob, langsung menghubungi sobat ^^

Jelly Gamat Luxor mengatakan...

makasih gan... mau di coba dulu nih..

Obat Mioma mengatakan...

makasih ya info yang sangat bagus..

Deo Pradipta mengatakan...

@Jelly : iyaa sob, semoga berhasil yaa^^

@obat : ehehe.. samasamaa qaqa :)

Obatmanggis mengatakan...

Izin nyimak aja sobb hheee...

Deo Pradipta mengatakan...

ehehe.. silahkan sob.. semoga bermanfaat ^_^

Dwi Septia mengatakan...

keren bang :D makasi yaaa.. visit me back ^^

Unknown mengatakan...

kok punga ane eror sob...?

Deo Pradipta mengatakan...

@sept : ehehe , makasih juga sobat :D

@ucok : coba di coba lagi sob, mungkin ada yg nyelip :)

Unknown mengatakan...

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 ?

Restu Indra Pratama mengatakan...

gan,ko ane nyoba malah loading mulu tuh,ga keluar2 slider nya ..

Restu Indra Pratama mengatakan...

gan,ko ane nyoba malah loading mulu slider nya,kenapa ya??

Anonim mengatakan...
Komentar ini telah dihapus oleh administrator blog.
Anonim mengatakan...
Komentar ini telah dihapus oleh administrator blog.
Deo Pradipta mengatakan...

@cherie : kemungkinan terbesar tata letak kode yg dipasang salah, atau bisa juga karena tidak compatible dgn template sebelumnya :)

@restu : internet nya mungkin sob ^_^

download film mengatakan...

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

obat asam urat mengatakan...

ok gan trims udah bagi-bagi ilmunya

Deo Pradipta mengatakan...

@download : semoga bermanfaat, salam kenal juga sob ^^

@obat : oke sob, semoga bermanfaat yaa :)

obat wasir herbal mengatakan...

makasih gan infonya

Deo Pradipta mengatakan...

iya sob, samasama yaaa :)

Unknown mengatakan...
Komentar ini telah dihapus oleh pengarang.
Anonim mengatakan...

kunjungi blog ane yah fikrias-xtream.blogspot.com

ekstrak kulit manggis mengatakan...

Duh,jadi puyeng dehhhh.maklum baru belajar nih.padahal suka banget ma slider,tp gk berhasil

Unknown mengatakan...

bener2 keren ni blog...jadi pngen punya blog sperti ini..
ijin sedot gan...

Deo Pradipta mengatakan...

@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

The12thPlayers mengatakan...

keren , kok g dipake skalian di blog situ

Deo Pradipta mengatakan...

ndak cocok sama template ini sob, nanti jadinya malah jelek :)

Jefry mengatakan...

template blog saya juga sudah memasang slideshow namun sepertinya beda dengan ini
terima kasih atas ilmunya

jelly gamat luxor mengatakan...

mantep nih design blonya

Obat Herbal Bandung mengatakan...

Mantab infonya,
akan sy praktekan
salam kenal

Anonim mengatakan...

gmana ni mendesign blog seperti ini?
di tunggu replaynya...
thank you,.,,

Unknown mengatakan...

bang kalo mau batesin gedenya gmn?

Unknown mengatakan...

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

Unknown mengatakan...

gan,,, kok sepanjang gw klik panahnya, ada tulisan "This is an example of a caption"..??

aswin mengatakan...

thanx infonya gan..

Yoshua mengatakan...

I LikE iT ....!
Sangat Mmembantu thx Gan..

Unknown mengatakan...

yang ngurus blodnya udah ilang wkwkw

obyektif-magazine mengatakan...

Salam kenal, makasih infonya, saya tunggu kunjungan baliknya di OBYEKTIF.COM

Salam kompak:
Obyektif Cyber Magazine
(obyektif.com)

Unknown mengatakan...

mau coba ahhhhh ,,





visit my blog dong
Proudly Indonesian

Unknown mengatakan...

aduh terimakasih, sumpeh ini blog ngebantu banget
udah gwe cari cara menambahkan gambar slider ini udah
3 tahun,gile gak tuh....

Obat Tradisional Lemah Syahwat mengatakan...

Terimakasih informasi nya !!

obat5 tradisional diabetes melitus mengatakan...

terima kasihh sob atas trik dan tipsnya . .. salam kenal dan sukses selalu!!!

Posting Komentar

Askorus Distro Askorus Distro
Copyright 2010 - 2012 ^ Akatsuki Blog™ - Compatible with Chrome 1024 x 768 -