Bir aralar şu slider işlerine fena halde kafayı takmıştım.Temayı değiştirdikten ve slidera ihtiyacım kalmadığı anda bu güzel slider ile karşılaştım.Sizlerin de benim gibi güzel bir slider aramak için uğraşmanızı istemedim. :)
Sliderımızın geçiş efektleri vesaire.
jQuery ile zenginleştirilmiş.Sliderımızın adı
Nivo Blogger Slideshow'dur.
Sözü fazla uzatmadan nasıl ekleneceği konusun da bilgileri vereyim...
DEMOÖncelikle aşağıdaki kodu aratın...
]]></b:skin>
Hemen
üstüne gelecek şekilde aşağıdaki
CSS kodlarımızı ekleyin.
/*Start Nivo Slider Css aerakman.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/AVvXsEghTziSaJM_amOgRyisRdZqpEqTtNfW-179IRdPVwBNnt_Hv7M3ji4uQNy8Fq3MOXh4aRluncY489k6DL4fAisHxVovLYNDyAced4LEh7HxoMJfYB8ISHKBX8DL9I9xDMg1Sd1hWxB_fg6t/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/AVvXsEjlzRwTKNVVq5SGXA5gJGcLaOlJiWDr-qmgE8NkO8_cfrUyhIdJjnV6gZEYQp6lk66vlC_IiXaemB87gYCh-0z0ayM1Ff0pSRPtbYhgoLKwD94I2as_A7_XCk8tDu0zg5NfVZnqLfXYrVsJ/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/AVvXsEi74v_4qxDSPZYMbTehmDyJKJHY_K45SOcq1jLcpX9lTBQ8AOsrQj_psLqDtX05EXMtp1muQ7lABt_WicI52tsUaUpftsfLSsqzzjKQ-PgyIj6tR3otjidqSSFzwKhy0tJ5ZXqFYok0SOpd/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/AVvXsEj8eVs3aWtJD1xnscijHGjupoMPIkBMu18fi61g8SJd-zNJaojSQWtJBCd8_-v3T0xX30ttsPWr1utjOJiWUTH-p4b9nG6tpXHHX6D808kgtBzqUMurED240686z6Ch-KiPVKN50NN2nheb/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/AVvXsEjuLC_3ilB4ArL-3wibmU6AIDAm-ZivbU6-y0WMEFiQM8q-S581c-yjaYf9K5Y0iYlqQ-12JhVDe07w4zf84nvpuzAOgKtHKgtZbqn49tGcL93Sq7EQKtbWewekHj8Hz7_NW6Q0mia1nOc-/s1600/helperblogger-ribbon.png) no-repeat;
width: 111px;
height: 111px;
position: absolute;
top: -8px;
left: -8px;
z-index: 300;
}
/*End Nivo Slider Css aerakman.blogspot.com*/
Şablonu kaydetmeden devam edin ve aşağıdaki kodu aratın.
</body>
Bulduğunuz kodun hemen
üstüne aşağıdaki
Scripts 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() {
$('#slider').nivoSlider();
});
</script>
Şablon kısmı ile işlemlerimiz burada sona eriyor.Şimdi
son işlemimiz olan
HTML kodlarımızı ekleyeceğiz.Bunun için,
Tasarım/Gadget Ekle/HTML/JavaScript adımlarını izliyoruz ve aşağıdaki kodu yapıştırıyoruz.
<div class="slider-wrapper theme-pascal">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<a href="YAZI URL ADRESİ"><img src="SLIDER ÖNİZLEME RESİM ADRESİ" alt="" title="YAZIYI TANIMLAYAN YAZI İSTEĞE BAĞLI" /></a>
<a href="YAZI URL ADRESİl"><img src="SLIDER ÖNİZLEME RESİM ADRESİ" alt="" title="YAZIYI TANIMLAYAN YAZI İSTEĞE BAĞLI" /></a>
<a href="YAZI URL ADRESİ"><img src="SLIDER ÖNİZLEME RESİM ADRESİ" alt="" title="YAZIYI TANIMLAYAN YAZI İSTEĞE BAĞLI" /></a>
<a href="YAZI URL ADRESİ"><img src="SLIDER ÖNİZLEME RESİM ADRESİ" alt="" title="YAZIYI TANIMLAYAN YAZI İSTEĞE BAĞLI" /></a>
</div>
</div>
YAZI URL ADRESİ bölümüne yazınızın adresini ekleyiniz.
SLIDER ÖNİZLEME ADRESİ bölümüne slidera ekleyeceğiniz ve yazıyı tanımlayan resim adresini ekleyiniz.
YAZIYI TANIMLAYAN YAZI İSTEĞE BAĞLI bu bölüme ise yazıyı tanımlayan ufak bir başlık ekleyebilirsiniz.
Son verdiğimiz kodları
Blog Kayıtları bölümünün üstüne yerleştirin.
İyi günlerde kullanın.
