Webmaster Genel Forumları kategorimiz yenilendi!
SMF 2.0 sürümleri için yeni modül/eklentiler sitemizde! İlgili kategorilere gözatabilirsiniz.
Linkleri goruntulemenize izin verilmiyor. Kayit olun veya Giris yapin
Linkleri goruntulemenize izin verilmiyor. Kayit olun veya Giris yapin
Hoşgeldiniz Ziyaretçi. Lütfen giriş yapın veya kayıt olun
Tarih/Saat: 18 Mayıs 2012, 14:11:18
Sayfa: [1] Yazdır
Gönderen Konu: Kategorilerin üstüne slayt banner reklam & duyuru alanı  (Okunma sayısı 665 defa)
Çevrimdışı - Emektar
*
İleti: 249
Teşekkür Sayısı: 19
Çevrimdışı Çevrimdışı
Cinsiyet: Bay
E-Posta
« : 21 Mart 2011, 19:59:38 »

İster banner değişim alanı, ister reklam, ister duyuru alanı olarak kullanın.
Tüm sayfalarda menü altında  göstermek için
Index.template.php
Bul:
Kod: Linkleri goruntulemenize izin verilmiyor. Kayit olun veya Giris yapin
    // If linktree is empty, just return - also allow an override.
    if (empty($context['linktree']) || (!empty($context['dont_default_linktree']) && !$force_show))
        return;

    echo '
    <div class="navigate_section">
        <ul>';

Üstüne ekle:
Kod: Linkleri goruntulemenize izin verilmiyor. Kayit olun veya Giris yapin
            echo ' <div class="spina_bifida_banner_reklam">

            <div class="spina_bifida_banner_reklam2">
                <div class="spina_bifida_banner_reklam_resimleri">
                    <a href="http://www.spinabifidaturkey.com/smf/index.php?topic=7150.msg42799#msg42799"><img src="1a.gif"/></a>
                    <a href="http://www.spinabifidaturkey.com/smf/index.php?topic=7102.msg42686#msg42686"><img src="2a.gif"/></a>
                    <a href="http://www.spinabifidaturkey.com/smf/index.php?topic=7046.0"><img src="3a.gif"/></a>
                    <a href="http://www.spinabifidaturkey.com/smf/index.php?topic=6793.msg38864#msg38864"><img src="4a.gif"/></a>
                    <a href="http://www.spinabifidaturkey.com/smf/index.php?topic=6292.msg39196#msg39196"><img src="5a.gif"/></a>
                    <a href="http://www.spinabifidaturkey.com/smf/index.php?board=323.0"><img src="6a.gif"/></a>
                    <a href="http://www.spinabifidaturkey.com/smf/index.php?board=273.0"><img src="7a.gif"/></a>
                    <a href="http://www.spinabifidaturkey.com/smf/index.php?topic=5575.0"><img src="8a.gif"/></a>
                    <a href="http://www.spinabifidaturkey.com/smf/index.php?board=286.0"><img src="9a.gif"/></a>
                    <a href="http://www.spinabifidaturkey.com/smf/index.php?topic=1161.0"><img src="10a.gif"/></a>
                   
                </div>
            </div>
            <div class="spina_bifida_reklam_sayfa">

                <a href="#" rel="1">1</a>
                <a href="#" rel="2">2</a>
                <a href="#" rel="3">3</a>
                <a href="#" rel="4">4</a>
                <a href="#" rel="5">5</a>
                <a href="#" rel="6">6</a>
                <a href="#" rel="7">7</a>
                <a href="#" rel="8">8</a>
                <a href="#" rel="9">9</a>
                <a href="#" rel="10">10</a>
            </div>
        </div>
<script type="text/javascript" src="spina_bifida_reklam.js"></script>
<script type="text/javascript">
$(document).ready(function() {

   //Set Default State of each portfolio piece
   $(".spina_bifida_reklam_sayfa").show();
   $(".spina_bifida_reklam_sayfa a:first").addClass("active");
     
   //Get size of images, how many there are, then determin the size of the image reel.
   var imageWidth = $(".spina_bifida_banner_reklam2").width();
   var imageSum = $(".spina_bifida_banner_reklam_resimleri img").size();
   var imageReelWidth = imageWidth * imageSum;
   
   //Adjust the image reel to its new size
   $(".spina_bifida_banner_reklam_resimleri").css({\'width\' : imageReelWidth});
   
   //spina_bifida_reklam_sayfa + Slider Function
   rotate = function(){
      var triggerID = $active.attr("rel") - 1; //Get number of times to slide
      var spina_bifida_banner_reklam_resimleriPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

      $(".spina_bifida_reklam_sayfa a").removeClass(\'active\'); //Remove all active class
      $active.addClass(\'active\'); //Add active class (the $active is declared in the rotateSwitch function)
     
      //Slider Animation
      $(".spina_bifida_banner_reklam_resimleri").animate({
         left: -spina_bifida_banner_reklam_resimleriPosition
      }, 1000 );
     
   };
   
   //Rotation + Timing Event
   rotateSwitch = function(){     
      play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
         $active = $(\'.spina_bifida_reklam_sayfa a.active\').next();
         if ( $active.length === 0) { //If spina_bifida_reklam_sayfa reaches the end...
            $active = $(\'.spina_bifida_reklam_sayfa a:first\'); //go back to first
         }
         rotate(); //Trigger the spina_bifida_reklam_sayfa and slider function
      }, 4000); //Timer speed in milliseconds (3 seconds)
   };
   
   rotateSwitch(); //Run function on launch
   
   //On Hover
   $(".spina_bifida_banner_reklam_resimleri a").hover(function() {
      clearInterval(play); //Stop the rotation
   }, function() {
      rotateSwitch(); //Resume rotation
   });
   
   //On Click
   $(".spina_bifida_reklam_sayfa a").click(function() {
      $active = $(this); //Activate the clicked spina_bifida_reklam_sayfa
      //Reset Timer
      clearInterval(play); //Stop the rotation
      rotate(); //Trigger rotation immediately
      rotateSwitch(); // Resume rotation
      return false; //Prevent browser jump to link anchor
   });
   
});
</script>';

Index.css
En alta ekle:
Kod: Linkleri goruntulemenize izin verilmiyor. Kayit olun veya Giris yapin
.spina_bifida_banner_reklam {
   float: right;
   position: relative;
   margin-right: 4px;
}

.spina_bifida_banner_reklam2 {
   height:60px;   width: 950px;
   overflow: hidden; /*--Hides anything outside of the set width/height--*/
   position: relative;
}
.spina_bifida_banner_reklam_resimleri {
   position: absolute;
   top: 0; left: 0px;
}
.spina_bifida_banner_reklam_resimleri img {float: left;}


.spina_bifida_reklam_sayfa {
   position: absolute;
   bottom: 40px; right: 5px;
   width: 950px; height:60px;
   z-index: 100; /*--Assures the spina_bifida_reklam_sayfa stays on the top layer--*/
   text-align: right;
   line-height: 60px;
   display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.spina_bifida_reklam_sayfa a {
   padding: 0px;
   text-decoration: none;
   color: #000000;
}
.spina_bifida_reklam_sayfa a.active {
   font-weight: bold;
   background: #006600;
      color: #ffffff;
   border: 1px solid #610000;
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
}
.spina_bifida_reklam_sayfa a:hover {font-weight: bold;}

Forum anasayfada göstermek için index.template.php editlemesini yapmayınız. Bunun yerine
Board.Index.template.php
Bul:
Kod: Linkleri goruntulemenize izin verilmiyor. Kayit olun veya Giris yapin
    <div id="boardindex_table">

Üstüne ekle:
Kod: Linkleri goruntulemenize izin verilmiyor. Kayit olun veya Giris yapin
                    <div class="spina_bifida_banner_reklam">

            <div class="spina_bifida_banner_reklam2">
                <div class="spina_bifida_banner_reklam_resimleri">
                    <a href="http://www.spinabifidaturkey.com/smf/index.php?topic=7150.msg42799#msg42799"><img src="1a.gif"/></a>
                    <a href="http://www.spinabifidaturkey.com/smf/index.php?topic=7102.msg42686#msg42686"><img src="2a.gif"/></a>
                    <a href="http://www.spinabifidaturkey.com/smf/index.php?topic=7046.0"><img src="3a.gif"/></a>
                    <a href="http://www.spinabifidaturkey.com/smf/index.php?topic=6793.msg38864#msg38864"><img src="4a.gif"/></a>
                    <a href="http://www.spinabifidaturkey.com/smf/index.php?topic=6292.msg39196#msg39196"><img src="5a.gif"/></a>
                    <a href="http://www.spinabifidaturkey.com/smf/index.php?board=323.0"><img src="6a.gif"/></a>
                    <a href="http://www.spinabifidaturkey.com/smf/index.php?board=273.0"><img src="7a.gif"/></a>
                    <a href="http://www.spinabifidaturkey.com/smf/index.php?topic=5575.0"><img src="8a.gif"/></a>
                    <a href="http://www.spinabifidaturkey.com/smf/index.php?board=286.0"><img src="9a.gif"/></a>
                    <a href="http://www.spinabifidaturkey.com/smf/index.php?topic=1161.0"><img src="10a.gif"/></a>
                   
                </div>
            </div>
            <div class="spina_bifida_reklam_sayfa">

                <a href="#" rel="1">1</a>
                <a href="#" rel="2">2</a>
                <a href="#" rel="3">3</a>
                <a href="#" rel="4">4</a>
                <a href="#" rel="5">5</a>
                <a href="#" rel="6">6</a>
                <a href="#" rel="7">7</a>
                <a href="#" rel="8">8</a>
                <a href="#" rel="9">9</a>
                <a href="#" rel="10">10</a>
            </div>
        </div>
<script type="text/javascript" src="spina_bifida_reklam.js"></script>
<script type="text/javascript">
$(document).ready(function() {

   //Set Default State of each portfolio piece
   $(".spina_bifida_reklam_sayfa").show();
   $(".spina_bifida_reklam_sayfa a:first").addClass("active");
     
   //Get size of images, how many there are, then determin the size of the image reel.
   var imageWidth = $(".spina_bifida_banner_reklam2").width();
   var imageSum = $(".spina_bifida_banner_reklam_resimleri img").size();
   var imageReelWidth = imageWidth * imageSum;
   
   //Adjust the image reel to its new size
   $(".spina_bifida_banner_reklam_resimleri").css({\'width\' : imageReelWidth});
   
   //spina_bifida_reklam_sayfa + Slider Function
   rotate = function(){
      var triggerID = $active.attr("rel") - 1; //Get number of times to slide
      var spina_bifida_banner_reklam_resimleriPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

      $(".spina_bifida_reklam_sayfa a").removeClass(\'active\'); //Remove all active class
      $active.addClass(\'active\'); //Add active class (the $active is declared in the rotateSwitch function)
     
      //Slider Animation
      $(".spina_bifida_banner_reklam_resimleri").animate({
         left: -spina_bifida_banner_reklam_resimleriPosition
      }, 1000 );
     
   };
   
   //Rotation + Timing Event
   rotateSwitch = function(){     
      play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
         $active = $(\'.spina_bifida_reklam_sayfa a.active\').next();
         if ( $active.length === 0) { //If spina_bifida_reklam_sayfa reaches the end...
            $active = $(\'.spina_bifida_reklam_sayfa a:first\'); //go back to first
         }
         rotate(); //Trigger the spina_bifida_reklam_sayfa and slider function
      }, 4000); //Timer speed in milliseconds (3 seconds)
   };
   
   rotateSwitch(); //Run function on launch
   
   //On Hover
   $(".spina_bifida_banner_reklam_resimleri a").hover(function() {
      clearInterval(play); //Stop the rotation
   }, function() {
      rotateSwitch(); //Resume rotation
   });
   
   //On Click
   $(".spina_bifida_reklam_sayfa a").click(function() {
      $active = $(this); //Activate the clicked spina_bifida_reklam_sayfa
      //Reset Timer
      clearInterval(play); //Stop the rotation
      rotate(); //Trigger rotation immediately
      rotateSwitch(); // Resume rotation
      return false; //Prevent browser jump to link anchor
   });
   
});
</script>

Kodlamayı yaptıktan sonra resimlere verilmiş olan linkleri kendinize göre editleyiniz.

Ekteki sıkıştırılmış klasörün içinden çıkan spina_bifida_reklam.js dosyasını forum dizinine atınız.

Forum dizinine (Settings.php dosyasının olduğu yere) 950x60 px boyutlarında slaytta kullanacağınız  isimleri 1a.gif, 2a.gif, 3a.gif, 4a.gif, 5a.gif, 6a.gif, 7a.gif, 8a.gif, 9a.gif, 10a.gif olan resimleri atınız.

Seo ya da benzeri modifikasyon kullananlar kodlardaki js ve gif uzantılı dosyaların tam yollarını belirtmelidir.

Anlatımı kendi temam üzerinden yaptım. Diğer temalarda görünüm açısından kodlama değişiklik arzedebilir.

Farklı css kodlamasıyla daha farklı görünüm kazandırılabilir.

Demo: Linkleri goruntulemenize izin verilmiyor. Kayit olun veya Giris yapin
Kayıtlı
Sayfa: [1] Yazdır 
Etiketler: