"SİTENİZİ EFEKTLERLE DONATIN
ZİYARETÇİLERİNİZİ BÜYÜLEYİN!"

Slayt gösterili özel bir şablon kullanmak ister misiniz? Temel olarak F4111 kodlu şablonu seçin ve aşağıdaki kodu Head bölümüne ekleyin.


<style type="text/css">
/*<![CDATA[*/
#tp-wrapper {
border-radius: 5px 5px 5px 5px;
box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.6);
background: #D7D7D7;
background: -moz-linear-gradient(top, #D7D7D7 0%, #F7F2E0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D7D7D7), color-stop(100%,#F7F2E0));
background: -webkit-linear-gradient(top, #D7D7D7 0%,#F7F2E0 100%);
background: -o-linear-gradient(top, #D7D7D7 0%,#F7F2E0 100%);
background: -ms-linear-gradient(top, #D7D7D7 0%,#F7F2E0 100%);
background: linear-gradient(top, #D7D7D7 0%,#F7F2E0 100%);

}

#tp-header, #tp-btm, #tp-bg, #tp-shaddow {
background: none !important;

}  

/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
 
/*  Nivo slider
--------------------------------- */
/*
Skin Name: Nivo Slider Default Theme
Skin URI: http://nivo.dev7studios.com
Description: The default skin for the Nivo Slider.
Version: 3.2
Author: Gilbert Pellegrom
Author URI: http://dev7studios.com
*/


/* The Nivo Slider styles */
.nivoSlider {
    position:absolute;
    width:100%;
    height:auto;
    overflow: hidden;
}
.nivoSlider img {
    position:relative;
    top:0px;
    left:0px;
    max-width: none;
    display: none;
}
.nivo-main-image {
    display: block !important;
    position: relative !important;
    width: 100% !important;
}

/* 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%;
    top:0;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
    overflow:hidden;
}
.nivo-box img { display:block; }

/* Caption styles */
.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    text-align: center;
    width:100%;
    z-index:8;
    padding: 5px 10px;
    opacity: 0.8;
    overflow: hidden;
    display: none;
    -moz-opacity: 0.8;
    filter:alpha(opacity=8);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;    
    box-sizing: border-box;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;         
}
.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 {
    text-align:center;
    padding: 15px 0;
}
.nivo-controlNav a {
    cursor:pointer;
}
.nivo-controlNav a.active {
    font-weight:bold;
}

.nivoSlider {
    position:absolute;
    background:#fff url(http://u.jimdo.com/www52/o/s2ba029df7f23bf1c/userlayout/img/loading.gif) no-repeat 50% 50%;
    top: -340px;
    margin-left: -35px;
    width: 970px;
    height: 300px;
    margin-bottom:10px;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.6);
}
.nivoSlider img {
    position:relative;
    top:0px;
    left:0px;
    display:none;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.6);
}
.nivoSlider a {
    border:0;
    display:block;
}

.nivo-controlNav {
    text-align: center;
    padding: 20px 0;
}
.nivo-controlNav a {
    display:inline-block;
    width:22px;
    height:22px;
    background:url(bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin: 0 2px;
}
.nivo-controlNav a.active {
    background-position:0 -22px;
}

.nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(http://u.jimdo.com/www52/o/s2ba029df7f23bf1c/userlayout/img/arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
    opacity: 0;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
.nivoSlider:hover .nivo-directionNav a { opacity: 1; }
a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
 a.nivo-prevNav {
    left:15px;
}

.nivo-caption {
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
    color:#fff;
    border-bottom:1px dotted #fff;
}
.nivo-caption a:hover {
    color:#fff;
}

.nivo-controlNav.nivo-thumbs-enabled {
    width: 100%;
}
.nivo-controlNav.nivo-thumbs-enabled a {
    width: auto;
    height: auto;
    background: none;
    margin-bottom: 5px;
}
.nivo-controlNav.nivo-thumbs-enabled img {
    display: block;
    width: 120px;
    height: auto;
}
/*]]>*/
</style>


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

<script type="text/javascript" src="http://u.jimdo.com/www52/o/s2ba029df7f23bf1c/userlayout/js/jquery-nivo-slider-pack-neu.js">
</script>

<script type="text/javascript">
//<![CDATA[
  var $j = jQuery.noConflict();
        $j(window).load(function() {
        $j('#slider').nivoSlider({
        effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
        slices:15,
        animSpeed:500, //Slide transition speed
        pauseTime:3000,
        startSlide:0, //Set starting Slide (0 index)
        directionNav:true, //Next & Prev
        directionNavHide:true, //Only show on hover
        controlNav:true, //1,2,3...
        controlNavThumbs:false, //Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, //Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', //Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
        keyboardNav:true, //Use left & right arrows
        pauseOnHover:false, //Stop animation while hovering
        manualAdvance:false, //Force manual transitions
        captionOpacity:0.8, //Universal caption opacity
        beforeChange: function(){},
        afterChange: function(){},
        slideshowEnd: function(){}, //Triggers after all slides have been shown
        lastSlide: function(){}, //Triggers when last slide is shown
        afterLoad: function(){} //Triggers when slider has loaded
   });
});
//]]>  
</script>

Aşağıdaki kodu da sitenizin kenar çubuğuna bir bileşen / HTML öğesi ile yerleştirin.

<div id="slider" class="nivoSlider">
    <a href="LINK"><img src="RESİM BAĞLANTISI" alt="" title="METİN" /></a> <a href=
    "LINK"><img src="RESİM BAĞLANTISI" alt="" title="METİN" /></a> <a href=
    "LINK"><img src="RESİM BAĞLANTISI" alt="" title="METİN" /></a> <a href=
    "LINK"><img src="RESİM BAĞLANTISI" alt="" title="METİN" /></a>
</div>

 

Burada artık tek yapmanız gereken kendi resim bağlantılarınızı eklemek ve dilerseniz bir metin eklemek..

Comments: 12
  • #12

    Şerafettin (Wednesday, 29 April 2015 10:51)

    abi kod çalışmıyor yaıyorum gelmiyor .S

  • #11

    Site Efektleri (Monday, 15 September 2014 13:59)

    Merhaba mert atak,

    Resim bağlantılarını ikinci kodda "RESİM BAĞLANTISI" diye yazan kısımlara yerleştir.

    Resimlerinin bağlantılarını çıkarmayı bilmiyorsan:

    http://siteefektleri.jimdo.com/resim-y%C3%BCkleme/

    Selamlar

  • #10

    mert atak (Saturday, 13 September 2014 02:10)

    abi senin bu sitedeki kapak fotosu gibi slayt istiom bu kodu o şablonda yapıom normal foto istio link fln nereye yazcam anlamıom ben siz bilionuz tartışıonuz bana anlatırsan nereye yapçağımı oyun fotolarımı slayta ekleme istiyorum lütfen yardım et !

  • #9

    Site Efektleri (Friday, 25 July 2014 12:37)

    Yukarıdaki efektin şu anda bağlantıları çalışıyor. Önceden yazdığım gibi bağlantıları çalışır hale getirmek içinde çok ciddi emek harcadım. Emin olmak isterseniz kendinize bir tane yeni JimdoFree sitesi kurup deneyebilirsiniz.

    Sizin mevcut sitenizde çalışmamasının ön görebildiğim iki temel sebebi olabilir:

    a- Bağlantıları tam olarak vermiyor olabilirsiniz. Yani adres olarak "google.com.tr" diye verirseniz çalışmayacaktır. Burada o siteye giderek tarayıcınızdan kopyalayarak tam halini kullanmanız gerekiyor. Bu örnekte mesela şu biçimde oluyor: "https://www.google.com.tr/"

    b- Sitenizin head bölümüne yerleştirdiğiniz farklı bir kod ile çakışıyor olabilir. Sitenizde kullandığınız efektler temel olarak sitenizin belirli kısımlarında yaptığınız html düzenlemeleridir. İlgili kısmı etkileyen birden fazla kod olması durumunda biri, diğerini etkisiz kılacaktır. Şu anda slider görevi gören kodunuzun da çok büyük ihtimalle böyle bir etkisi vardır.
    Bu dediğimin doğruluğundan emin olmak için bahsettiğim gibi kendinize yeni bir JimdoFree sitesi açarak sadece yukarıdaki kodu kullanmayı deneyebilirsiniz. Eğer sorunsuz çalışıyorsa bahsettiğim gibi yerleştirdiğiniz başka bir kod, buradaki kodu etkisiniz kılıyordur ve bunu sitenizden çıkarmanız gerekir.

  • #8

    celal sevgilioglu (Thursday, 24 July 2014 15:31)

    tamam fakat o slayta link vermem gerekiyor. kodlar çalışmayınca çıktım f4111 den ben sitemin kapak bölümünde linkli slayt (manşet türü) vermek istiyorum. Bu yüzden o modeldeki şablonu hayata geçirmek istiyorum. Çünkü güncel aktivitelerimizi nivo slider de vermek istemiyorum nivo küçük kalıyor. Bu yüzden kapak bölümündeki slider e link verebilsem sorunum tamamen ortadan kalkacaktır.

  • #7

    Site Efektleri (Thursday, 24 July 2014 15:05)

    Merhaba,

    Benim anlamadığım, sitenizin üstünde tamda kapak fotoğrafının olduğu yerde zaten bir slider şu anda bulunuyor. Ayrıca sanırım şablonunuz da F4111 değil. Yukarıdaki kodu şu anda ne amaçla kullanmak istiyorsunuz?

  • #6

    celal sevgilioglu (Thursday, 24 July 2014 14:04)

    kenar çubuğuna ikinci bağlantı adreslerini yapıştırdığımda slayt falan görünmüyor. Ayrıca benim kızgınlığım size değil kendime. Bu şablon yüzünden bir haftam gitti. Bir haftadır bu şablon üzerinde çalışıyorum. Ama olmuyor. Sizin verdiğinizde olmuyor.

  • #5

    Site Efektleri (Thursday, 24 July 2014 13:29)

    Öncelikle, yardım istiyorsan düzgün bir biçimde yazman gerekir. Olmuyor diye şikayet etmektense tam olarak nerede sorun yaşadığını belirtmeyi deneyebilirsin.

  • #4

    celal sevgilioglu (Thursday, 24 July 2014 12:54)

    Dediklerinizi harfiyen uyguladım. Yok kardeşim olmuyor olmuyor olmuyor. Sinir küpü oldum offfffffffff. f4111 nolu şablonu seçtik neyimiz var neyimiz yok header den sildik temizledik. Daha sonra verdiğiniz kodu header kısmına alttakini de yan çubuk a yapıştırdım (html dosyası) sonuç: Kocaman bir hayal kırıklığı... slayt falan görünmüyor.

  • #3

    Site Efektleri (Monday, 21 July 2014 11:11)

    Merhaba,

    Koddaki bir hatadan dolayı bağlantılar çalışmıyordu. Uzun arayışlardan sonra bunu düzelttim. Eski kodu sitenizden çıkarın ve daha sonra bu sayfadaki kodları tekrar yerleştirin. Daha sonra mavi ile gördüğünüz LINK bölümüne bağlantınızı girince, bağlantılar çalışacaktır.

    Kolay gelsin.

  • #2

    celal sevgilioglu (Saturday, 19 July 2014 01:10)

    VERDİĞİNİZ KODDA LİNK YAZAN BÖLÜMÜNE ADRES VERİYORUM FAKAT ÖRNEK SİTENİZDEKİ GİBİ ÇALIŞMIYOR. SLAYT A LİNK VERMEK İSTİYORUM LÜTFEN YARDIMCI OLURMUSUNUZ.

  • #1

    celal sevgilioglu (Tuesday, 15 July 2014 09:26)

    Güzel bir çalışma fakat ben slayttaki resimlere özellikle link vermek istiyorum. Örnek sitede olduğu gibi. Verdiğiniz kodda link bölümüne link adresi koydum çalışmıyor. Yani slaytta ve şablonda sorun yok. Ama slayta link vermem lazım. Yardım ederseniz sevinirim.Tşk.ler