• Ana Sayfa
  • Portal
  • Üye Listesi
  • Yönetim Kadrosu
  • Forum İstatistikleri

  • Konuyu Oyla:
    • Toplam: 7 Oy - Ortalama: 3
    • 1
    • 2
    • 3
    • 4
    • 5
    Bloegger Kayan Yatay Şerit Halinde Hareketli Slayt Alanı(Film Şeridi Tarzında)
    Çevrimdışı

    Captan


    <font color=green> Genel Sef
    user avatar


    Kayıt: Jul 2012


    Konu Sayısı : 363


    Mesaj Sayısı : 515


    Rep Puanı: 4

    Teşekkürler: 0
    0 mesaj içinde 0 teşekkür verildi.
    #1
    Bloegger Kayan Yatay Şerit Halinde Hareketli Slayt Alanı(Film Şeridi Tarzında)
    Film şeridi gibi yatay olarak hareketli bir şekilde kayan, blogger kullanıcıları için tasarlanmış etiket bazlı çalışan slayt alnını blogunuza uygulamayı anlatacağız.Bu slayt alanını uygulamadan önce bir etiket seçiyorsunuz, biz slayt etiketini seçtiğinizi varsayarak anlatıma devam edelim, slayt alanında görünmesini istediğiniz yazıların etiketlerinden bir tanesine seçtiğimiz slayt kelimesini yazıyoruz.Bu şekilde slayt alanında slayt etiketi yazdığımız yazımız görünecektir.
    Adım adım blogger için kayan yatay şerit halinde hareketli slayt alanını blogunuza eklemeyi anlatalım:

    Demo:
    Linkleri görebilmek için Üye Olun veya Giriş Yapın.

    1-Blogger Hesabımızla Giriş Yapıyoruz.
    2-Uyarı!Her ihtimale karşı şablonumuzun yedeğini almayı unutmuyoruz.
    3-Kumanda Paneli>Tasarım>Htmlyi Düzenle yolunu takip edip widget şablonlarını genişlet kutucuğunu işaretliyoruz.
    4-Kodlar içerisinde Ctrl+F yardımı ile ]]></bConfusedkin> kodunu aratıp buluyoruz.
    5-Aşşağıdaki kodu kopyalayıp bulduğumuz ]]></bConfusedkin> kodundan önceki kısma yapıştırıyoruz.

    Kod:
    #carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
    #carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(http://2.bp.blogspot.com/-i9rfuXWNIjo/T5LAemTP3XI/AAAAAAAAArY/r7FcfxzgZpk/s1600/scroller-bg.png) repeat center}
    #carousel #previous_button{position:absolute;width:49px;height:185px;background:url(http://3.bp.blogspot.com/-APGScJbAlLM/T5LDZ9LDgkI/AAAAAAAAAr4/vGy7EquPGME/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
    #carousel #previous_button:hover{background:url(http://3.bp.blogspot.com/-4wNqeM6eRvY/T5LGCrdA9iI/AAAAAAAAAsE/4rjwULz47WU/s1600/prev.png) center}
    #carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(http://1.bp.blogspot.com/-pSHFy8ff1R0/T5LDZHkHIzI/AAAAAAAAArw/PCfZ762nK3E/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
    #carousel #next_button:hover{background:url(http://2.bp.blogspot.com/-vSaPjyDhEMI/T5LGB-g1_lI/AAAAAAAAAsA/wyUPBLWY15E/s1600/next.png) center}
    #carousel ul{width:100000px;position:relative;margin-top:10px}
    #carousel ul li{background:#fff url(http://3.bp.blogspot.com/-NsKF7TyEX7I/T418sIGTo7I/AAAAAAAAAnc/OdQmhV73piY/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
    #carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
    #carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
    #carousel ul li a.slider_title:hover{color:#cd1713}
    #carousel a img{display:block;background:#fff;margin-top:0}

    kod içerisinde width(genişlik), height (yükseklik) değerlerini değiştirerek sadece şablon boyutunu ayarlayabilirsiniz.
    6-Html kodları içerisinde </head> kodunu aratıp buluyoruz.Aşağıdaki kodu kopyalayıp bulduğumuz </head> kodundan önceki kısma yapıştırıyoruz.

    Kod:
    <!-- Start Horizantl Slider Gadget Code From http://www.oyun04.com/ -->
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
    <script src='http://blogokuluslider.googlecode.com/files/yatayslaytalani.js' type='text/javascript'/>

    <script type='text/javascript'>
    //<![CDATA[
    imgr = new Array();
    imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
    showRandomImg = true;

    aBold = true;

    summaryPost = 140;
    summaryTitle = 25;

    numposts1 = 15;
    label1 = "slayt";

    function removeHtmlTag(strx,chop){
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }
    }

    s = s.join("");
    s = s.substring(0,chop-1);
    return s;
    }
    function showrecentposts(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img = new Array();
    document.write('<ul>');
    for (var i = 0; i < numposts1; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
    var pcm;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    posturl = entry.link[k].href;
    break;
    }
    }

    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
    pcm = entry.link[k].title.split(" ")[0];
    break;
    }
    }

    if ("content" in entry) {
    var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
    var postcontent = entry.summary.$t;}
    else var postcontent = "";
    postdate = entry.published.$t;
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
    s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];
    for(var u2=0;u2<month.length;u2++){
    if(parseInt(m)==month[u2]) {
    m = month2[u2] ; break;
    }
    }

    var daystr = day+ ' ' + m + ' ' + y ;
    var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

    document.write(trtd);
    j++;
    }
    document.write('</ul>');
    }
    //]]>
    </script>
    <!-- End Horizantl Slider Gadget Code From http://www.oyun04.com/ -->

    kod içerisinde:
    numpostsl=15 slayt alanında görüntülenecek resim sayısını belirtir.Bu değeri arttırıp azaltabiliriz.
    labell="slayt" Yukarıdaki anlatımda yatay slayt alanının etiket bazlı çalıştığını söylemiştik, slayt alanında görüntülenmesini istediğimiz yazılar için etiketi burdan belirliyoruz.Örnek: labell="slayt" yerine labell="resim" yazdığımızı varsayalımConfusedlayt alanında görünmesini istediğimiz yazımızın etiketlerinden bir tanesini "resim" olarak girdiğimiz zaman, yazımız slayt alanında görüntülenecektir, eğer yazıyı slayt alanından kaldırmak istersek yayınladığımız yazıdaki "resim" etiketini silmemiz yeterli olacaktır.Burdaki etiket seçimi size kalmış.
    7-Son olarak yine html kodları içerisinde Ctrl+F yardımı ile <div id='main-wrapper'> kodunu aratıp buluyoruz.Aşağıdaki kodu kopyalayıp bulduğumuz <div id='main-wrapper'> kodundan önceki kısma yapıştırıyotruz.
    Not:Eğer kodlar içerisinde <div id='main-wrapper'> kodunu bulamazsanız; <div class='column-center-outer'> kodunu bulun ve aşağıdaki kodu kopyalayıp bu kodun bir üst satırına yapıştırın.

    Kod:
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div id='carousel'>
    <div id='previous_button'/>
    <div class='container'>
    <script>
    document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script>    
    <div class='clear'/>
    </div>
    <div id='next_button'/>
    </div>
    <script type='text/javascript'>
    (function($) {     $(document).ready(function(){
    $(&quot;#carousel .container&quot;).jCarouselLite({
        auto:4000,
        scroll: 1,
        speed: 800,    
        visible: 5,
        start: 0,
        circular: true,
        btnPrev: &quot;#previous_button&quot;,
        btnNext: &quot;#next_button&quot;
        });
        })})(jQuery)    
    </script>
    </b:if>

    kod içerisinde:
    visible:5 değeri birkerede slayt alanında görüntülenen resim sayısını gösterir.Eğer 5. adımda bahsettiğimiz genişlik ayarları ile oynarsanız burdaki değeride duruma göre değiştirmeniz gerekebilir.
    8-Son olarak şablonumuzu kaydedip çıkıyoruız.Eğer yukarıdaki adımları doğru olarak uygularsanız yatay slayt alanı blogunuzda yada sitenizde görünecektir.
    Gördüğünüz gibi uygulamsı çok basit ve bir okadar kullanışlı olan bir eklenti, eğer takıldığınız yer olursa yorumlardan bize sorabilirsiniz.Umarım faydası olur.Smile
    VİDEOLU ANLATIM:




    kaynak: Linkleri görebilmek için Üye Olun veya Giriş Yapın.
           ap9vdgz2.png
                              Önemli Konular
    Linkleri görebilmek için Üye Olun veya Giriş Yapın.
    Linkleri görebilmek için Üye Olun veya Giriş Yapın.


                                                   
    11-25-2013, 09:27 PM


    Hızlı Menü:


    Şu anda bu konuyu okuyanlar: 1 Ziyaretçi
    Forum Yasal Uyarı

    Türkçe Çeviri: MyBB.Com.Tr
    Forum Yazılımı: MyBB, © 2002-2014 MyBB Group.
    Bu temanın yapımcısı #Pøwér™'dir. Hiç bir meteryal çalınamaz.
    Çalınması halinde gerekli yasak işlem ve hukuki yollara başvurulmaktan çekinilmeyecektir.

    İçerik sağlayıcı paylaşım sitesi olarak hizmet veren forumumuzda 5651 Sayılı Kanun'un 8. Maddesine ve T.C.K' nın 125. Maddesine göre tüm üyelerimiz yaptıkları paylaşımlardan kendileri sorumludur. Forumumuz hakkında yapılacak tüm hukuksal şikayetleri iletisim linkimizden bize ulaşıldıktan en geç 3 (üç) gün içerisinde ilgili kanunlar ve yönetmelikler çerçevesinde tarafımızca incelenerek, gereken işlemler yapılacak ve site yöneticilerimiz tarafından bilgi verilecektir.



    10tl.net Destek Forumu -