.

24 May 2012

Blogger Nivo Slider Eklentisi


Blogger Nivo Slider Widget

Öncelikle bu eklentinin demosunu BURDAN görebilirsiniz , Aynı zamanda bu slider eklentisini bizde kullanmaktayız , ana sayfamızda görebilirsiniz 

Lafı uzatmadan , Blogger Nivo Slider Eklentisini blogger blogunuza nasıl ekleyeceğinizi anlatalım..

Aşağıda yer alan kodu buluyoruz...
]]></b:skin>
Hemen üstüne , aşağıdaki kodlarımızı ekliyoruz..
/*Start Nivo Slider Css eklentileri.blogspot.com*/
/*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* For blogger by - Rahul Ippar @ helperblogger.com
* 
* March 2010
*/


/* The Nivo Slider styles */
#slider {
width: 618px;
height: 246px;
}

.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;
}
/* 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;
}
/*
Skin Name: Pascal Theme
Skin URI: http://nivo.dev7studios.com
Skin Type: fixed
Description: A nice, light skin for the Nivo Slider.
Version: 1.0
Author: Gilbert Pellegrom & Pascal Gartner
Author URI: http://dev7studios.com
*/

.theme-pascal.slider-wrapper {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi8a_Lcs1aPUVEE_UAdatG1q1G1YOuJb62b9vAC5DnwPM-_K3hOXOjebnhRIOhOrUdeUmpDNmaqctDiyS2U04lsVN5pme-UXTk4_v4qnAf7TkH4nJS8Vfo2oZl791_QA2gwTFG8GI2yWbO/s1600/helperblogger-slider-bg.png) no-repeat;
width: 668px;
height: 299px;
margin: 0 auto;
padding-top: 17px;
position: relative;
}

.theme-pascal .nivoSlider {
position: relative;
width: 630px;
height: 235px;
margin-left: 19px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNyOEpCtElqSmh3Sia4qrwDtynBWdxuSlLwixN6eU2m7NBusQb4daEQdiOcfPfdReJLP2BtPMzSvfq3awLK2vo1SE4OgT3cpSWwc4gXfnp41A0HQxAegXx2zRPBXGrA9NX-ZY_j-U8ZVU4/s1600/helperblogger-loading.gif) no-repeat 50% 50%;
}

.theme-pascal .nivoSlider img {
position: absolute;
top: 0px;
left: 0px;
display: none;
width: 630px;
/* Make sure your images are the same size */
height: 235px;
/* Make sure your images are the same size */
}

.theme-pascal .nivoSlider a {
border: 0;
display: block;
}

.theme-pascal .nivo-controlNav {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR1glBR2QjyqQKTLfUYPxCcXV_Cj-7cV70sZo4l2Tqd-jMCDiibdt-SA2VvvE6KK_wdnz4vrhxK-Bb-hxm9f8s_OuUCzv89YRFQ1Twl_03QpbwdqYtmt1y5n7f-TauSEevofZvLSN7T4hC/s1600/helperblogger-controlnav.png) no-repeat;
width: 251px;
height: 40px;
position: absolute;
left: 200px;
/* Tweak this to center bullets */
bottom: -42px;
padding: 8px 0 0 82px;
z-index: 20;
}

.theme-pascal .nivo-controlNav a {
display: block;
width: 22px;
height: 22px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoR451L-OnWbt1o4rkHNNupBPNXOg8XY_m6VHTZp9t7FE3c7IYhpfOc106xOGG0uT1WdsNBF1D9upNdrIi6oV3Omxpa6HHrpP053s7-hPg2uTd9P2erwlAmXSpug9dd-_TFOzzqychqn6V/s1600/helperblogger-bullets.png) no-repeat;
text-indent: -9999px;
border: 0;
margin-right: 3px;
float: left;
}

.theme-pascal .nivo-controlNav a.active {
background-position: 0 -22px;
}

.theme-pascal .nivo-directionNav a {
display: none;
}

.theme-pascal .nivo-caption {
bottom: 40%;
left: auto;
right: 0px;
width: auto;
max-width: 630px;
overflow: hidden;
background: #fff;
text-shadow: none;
font-family: arial, serif;
color: #4c4b4b;
}

.theme-pascal .nivo-caption p {
padding: 5px 15px;
color: #333;
font-weight: bold;
font-size: 27px;
text-transform: uppercase;
}

.theme-pascal .nivo-caption a {
color: #333;
font-weight: bold;
font-size: 27px;
text-transform: uppercase;
}

.theme-pascal .ribbon {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfhaD1h48Bg7pC3yq5ifXYI4-EA7PdOewBZj3AFnOcZzWRiOueEF2kl0BvjRdaabqasV83wwOuCisxI0WSXHRqxg9I69mXoGI7dtGQ-Z7vTPaHHc9PhtsMml3VJgtTI-sithBRp1VCS8vi/s1600/helperblogger-ribbon.png) no-repeat;
width: 111px;
height: 111px;
position: absolute;
top: -8px;
left: -8px;
z-index: 300;
}
/*End Nivo Slider Css eklentileri.blogspot.com*/
Şimdi ise aşağıdaki kodumuzu buluyoruz.
</body>
Bu kodumuzunda hemen üstüne , aşağıda yer alan kodlarımızı ekliyoruz.
<!--Start Slider Scripts-->
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/8855314511/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$(&#39;#slider&#39;).nivoSlider();
});
</script>
Üstte yer alan işlemleri yaptıysanız , şablon kısmı ile işimiz bitti , kaydedebilirsiniz..

Şimdi yerleşim kısmına girip , Gadget Ekle >> HTML/JavaScript seçeneği ile açılan panele aşağıda yer alan kodlarımızı ekliyoruz..
<div class="slider-wrapper theme-pascal">
<div class="ribbon"></div>

<div id="slider" class="nivoSlider">

<a href="http://eklentileri.blogspot.com/2012/04/blogger-facebook-yorum-kutusu-ekleme.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8v5BchvgR-US4L97DFfKMC_92u18yqGF9GNrEJ3pyX9UhCWcKGy1R_GeC-gZnrLE-ETAKO08NyYVnMS_yu2YK6A_Fm-17SMDWGULXq3qeFVRgaJOXZcxxZIa7T2P7OTnDRWcbJSgK1NrU/s1600/facebook-yorum-kutusu-eklentisi-ekleme.png" alt="" title="isteğe bağlı yazı" /></a>
<a href="http://eklentileri.blogspot.com/2012/03/blogger-yorum-kutusuna-arka-plan-ekleme.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgncHUMPm8NLbTl7yUGPNf5F-6BWG14agJVd_umkmbCKDPPwXuFZ3VcBFVt342vyAhtHH3BrOm2TlrLRPadJkEHN794DHMQyoQ0dFWFWJviJgywmYkLfuPZHgW3mzAi-P5BJyvRvTYHyTUe/s1600/yorum-formu.png" alt="" title="isteğe bağlı yazı"  /></a>

<a href="http://eklentileri.blogspot.com/2012/04/yandan-aclr-facebook-ve-twitter-takipci.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8rryXzl1ftZ9b8tBBXMIKFX9zglNuWCfb0eHQKMZ107UjSdzG3ixO7f-oK4LP6Lh5yYV-JCuR6UwdqbDGR07NjeW85T-sG-OC9ATevKxioDxCvCQ-FFI4JD9M_q8Khh5Zor3T1_3Wgqjv/s1600/takipci.png" alt="" title="isteğe bağlı yazı" /></a>

<a href="http://eklentileri.blogspot.com/2012/03/blogger-admin-yazar-yorumlarn-farkl.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9RiOCB7UJ97lybSnU1p9R31RV30OVWmzNR-Eu4ssSjYHLIC2PCNXtL8F_F0rjNQL3sRgXN4k2HZKyUQ363dmWZ1RD704YasRJFOoSqxjhNmiPPj42ZIZf_B7eHVZ-Qc9ihGRSWC8HVhWm/s1600/yazar.png" alt="" title="isteğe bağlı yazı"  /></a>
</div>


</div>
Yukarıdaki kodlar içinde , kırmızı yerlere resim adresleriniz , mavi yerlere resime tıklayınca gidilmesi gereken adres , siyah kalın yazılmış yerleri ise , resim üstüne yazı eklemek için kullanabilirsiniz ( yazı istemezseniz , boş bırakabilirsiniz.. )

Eklentiyi , aşağıdaki resimde gördüğünüz yere eklemeniz önerilir..


<<< Bu Yazı için Arama Sonuçları  >>>

Blogger Nivo Slider Eklentisi , Blogger Nivo Slider Widgets , Blogger Slider Eklentisi , Blogger Sliders , Blogger Slider Eklentileri , Blogger Slider Ekleme , Bloga Slider Nasıl Eklenir

Eklentileri.blogspot.com Hakkında.


Blogumuz ilk yayınından bu güne , blogger eklentilerini , tüm blogger kullanıcılarına ulaştırmak için yayın yapmış , bu süre içinde hiç bir şekilde kar/gelir elde etmemiş , etmiyecektir..Lütfen desteklerinizi bizden esirgemeyin..

Bizi Facebook ve Twitter üzerinden de takip edebilirsiniz..

25 yorum:

ahmetcan dedi ki...

Açılmıyor kardes resimler ben anlamadım tablo falan var da açılmıyor resimler...

Eklentileri.Blogspot dedi ki...

@Ahmetcan

Blog adresinizi ve indirebileceğim temanızın demo linkini eklentileri.blogspot@gmail.com adresine mail yolu ile iletirseniz , bi kontrol edeyim..

Oğuzhan Hazan dedi ki...

ben son paylaştığınız slideri ekledim. (sayfamın en altında) ama resimler gözükmüyor. neden acaba? sitem: http://pratik-zeka.blogspot.com/


bide eposte aboneliği ekledim siteme ama epostayla üye olunca Yem e-posta ile abonelik etkin değil yazıyor nasıl düzeltebilirim?

Eklentileri.Blogspot dedi ki...

@Oğuzhan Hazan

Sanırım javascript dosyasında bir sorun oluşmuş , güncelledim..

yukarıda head üzerine eklemeniz gereken kodları , öncekileri silip tekrar eklermisiniz ?

Oğuzhan Hazan dedi ki...

yaptım ama gene olmadı.

Eklentileri.Blogspot dedi ki...

@Oğuzhan Hazan

Kontrol edeyim tekrardan..

Eklentileri.Blogspot dedi ki...

Arkadaşlar ufak bir hata olmuş kusura bakmayın , body öncesine eklemeniz gereken kodu head şeklinde yazmışım..

güncellerseniz çalışacaktır sorunsuz olarak...

Oğuzhan Hazan dedi ki...

denedim ama gene olmadı 2 tane daha sileder var onlarlamı çakışıyor acaba?

umutkrgl dedi ki...
Bu yorum yazar tarafından silindi.
umutkrgl dedi ki...

Paylaşım için teşekkürler 2 sorum olacak birincisi resimler çok geç açılıyor ortada yuvarlak baya bi dönüyor bazen açılmıyor neden bu ? Diğer sorum ise kenarında ki Featured yazısını nasıl değişebilirm

Eklentileri.Blogspot dedi ki...

@Oğuzhan Hazan

Olabilir , zaten şunu tavsiye edicem, birden fazla slider kullanmayın , sitenizin açılış hızını çok etkiler , ziyaretçiler için en kötü şey yawaş açılan web sayfasıdır..

@Umutkrgl

Blogunuzu kontrol ettim bir sorun göremedim , Blogunuzda javascript içeren çpok dosya varsa , hepsi sırayla yüklenir, bu yüzden yawaşlama olması olağandır.. Diğer sorunuz için ise ;

http://3.bp.blogspot.com/-eGRNNyhj9s8/T6jVArfnB5I/AAAAAAAABn0/SsM7-ew9JGU/s1600/helperblogger-ribbon.png

linkini istediğiniz bir resim ile değiştirmeniz gerekiyor..

umutkrgl dedi ki...

Cevabınız için sağ olun kodun içinden resmin olduğu yeri bulup değiştim linki de vermişsiniz zaten şuan bir sorun olmadan çalışıyor paylaşımınız için tekrar teşekkürler

Nilüfer'in Koleksiyonu dedi ki...
Bu yorum yazar tarafından silindi.
Nilüfer'in Koleksiyonu dedi ki...

Öncelikle paylaşım için teşekkürler ^^
Benim bir cosplay kostümleri blogum var, .net zımbırtısıyla siteye dönüştürdüm. Bir sürü ses getiren kostümlerim, ödüllü kostümlerim olduğundan benim derdim 20-25 resimli bir slider hazırlamak... Bu tarz bir blogger widget bulabilir miyiz? Mümkün müdür? Şimdiden teşekkürler ^^
Buyrun bu arada benim sonuç budur:
http://www.senseecosplay.net/

Eklentileri.Blogspot dedi ki...

@Senseecosplay

Merhabalar , 20-25 resimlik bir slider kullanırsanız , blogunuzun hızı oldukça yaVaşlayacaltır , özellikle açılışta..bu yüzden 5 adeti geçmemesini öneriyorum..


Yinede istiyorsanız , eklentileri.blogspot@gmail.com adresinden iletişim kurarsanız yardımcı olayım..

backlinkworld dedi ki...

Emeklerine Sağlık Kardeşim, Blogwalking Beklerim;)

Serkan Uludag dedi ki...

Boyutunu Ayarlasaydık İyiydi Temaya Uymadı 1-2 Santimi Gözükmüyo

Adsız dedi ki...

Bu blog'da emeği geçen ve bizlere hizmet veren değerli arkadaşlar.. Emeğinize, ellerinize sağlık.
www.mahmutgurses.com

Unknown dedi ki...

bu blog gerçekten bana çok bilgiler verdi sayenizde ileriye dönük bloglar KİSİSEL BLOGUM tşk

BİLGENİN GEMİSİ dedi ki...

Aşağıda yer alan kodu buluyoruz demişsiniz ama nerden bulucaz yapamadım ben :(

ZaferBulut dedi ki...

enini boyunu nasıl ayarlıcaz kardeş?

Eklentileri.Blogspot dedi ki...

@ZaferBulut

width: height: değerlerini değiştirerek ayarlayabilirsiniz..


mitsubishi klima servisi dedi ki...

eklenti için teşekkürler

Ufuk Doğan dedi ki...

Güzel bir eklenti teşekkürler ^^

Unknown dedi ki...

Allahına kurban kardeşim saolasın :)

Yorum Gönder

Blogger tarafından desteklenmektedir.