Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj06.04.2013, 00:21 (UTC)    
Mesaj konusu: Kendi siteme nasıl uyarlayacağım?

http://find-templates.de.tl/content-slider.htm
adresindeki kodları kendi siteme nasıl ne şekilde uyarlicam? Bilen varsa hemen yazsın lütfeen!
______________


En son korkmaz-onur tarafından 13.04.2013 17:42:34 tarihinde değiştirildi, toplam 1 kere değiştirildi
Mesaj06.04.2013, 07:17 (UTC)    
Mesaj konusu: !!!

Linkleri kendi sitene uyarlıyacaksın.Çok basit yaparsın sen...
Mesaj13.04.2013, 14:28 (UTC)    
Mesaj konusu:

cop+past bu kadar Very Happy bs uyarlı zatn sanırım
______________
Sitene Tema ve Kod Ekle -> http://www.merttuncers.tr.gg
Mesaj15.04.2013, 14:59 (UTC)    
Mesaj konusu: vs

Kod düzenlemesi yap kendine göre ve ya
Sitenin sayfasına kopyala ordan düzelt.
Mesaj15.04.2013, 21:23 (UTC)    
Mesaj konusu:

Sıralaması şöyle kodların hepsini alt alta ekle. (Kaynak'a basarak)

CSS KODU :
Kod:
<style type="text/css">
<!--
/* Sliderbox */
#featured {
   width: 397px;
   padding-right: 250px;
   position: relative;
   border: 5px solid #ccc;
   height: 250px;
        overflow:hidden; }

/* Feld der Navi rechts */
ul.ui-tabs-nav {
   position: absolute;
   top: 0; left: 400px;
   list-style: none;
   padding: 0; margin: 0;
   width: 250px; height: 250px;
   overflow: hidden;}

/* Überschriften im Menu rechts */
li.ui-tabs-nav-item h3 {
        font-size: 14px;
        margin: 3px 0px 3px 0px; }


/* verlinkter Text im Menu rechts */
li.ui-tabs-nav-item a {
        padding: 3px 5px 3px 10px;
        display: block;
   height: 56px;
        text-decoration: none;
   color: #333; 
        font-size: 11px;
        outline: none;
        border-bottom: 1px solid #c9c9c9; }

/* Hover Menu rechts */
li.ui-tabs-nav-item a:hover {
        display: block;
   background: #202020;
        color: #FFFFFF; }

/* Auto-Hover rechts */
li.ui-tabs-selected a {
   background: #202020;
        color: #FFFFFF; }


/* Feld für Bilder */
.ui-tabs-panel {
   width: 400px;
        height: 250px;
        border-right: 1px solid #FFFFFF;
   background: #999;
        position: relative; }

/* das Feld für Text auf Bild */
.ui-tabs-panel .text {
   position: absolute;
   bottom:0; left:0;
   height: 70px;
   background-color: #202020;
        opacity: 0.7;  }

/* Ueberschrift auf Bild */
.text h2 {
   font-size: 15px;
        font-family: Georgia, serif;
   color: #FFFFFF;
        padding: 5px;
        margin: 0px;
        font-weight: normal;
   overflow: hidden; }


/* Text im Bild */
.text p {
   margin:0 5px;
   font-size: 11px;
   line-height: 14px;
        color: #f0f0f0; }

/* Link im Bild */
.text a {
   text-decoration: none;
   color: orange;
        font-size: 12px; }

/* Hoverlink im Bild */
.text a:hover {
        color: blue;
        text-decoration: underline; }

.ui-tabs-hide{display:none; }
--></style>


JAVASCRİPT KOD :
Kod:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>


HTML KOD :
Kod:
<div id="featured">

<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1">
<a href="#fragment-1"><h3>Thema 1</h3>hier Infotext Menü rechts 1</a></li>
          
<li class="ui-tabs-nav-item" id="nav-fragment-2">
<a href="#fragment-2"><h3>Thema 2</h3>hier Infotext Menü rechts 2</a></li>

<li class="ui-tabs-nav-item" id="nav-fragment-3">
<a href="#fragment-3"><h3>Thema 3</h3>hier Infotext Menü rechts 3</a></li>

<li class="ui-tabs-nav-item" id="nav-fragment-4">
<a href="#fragment-4"><h3>Thema 4</h3>hier Infotext Menü rechts 4</a></li>

</ul>

<!-- Grafik 1 -->
<div id="fragment-1" class="ui-tabs-panel">
<img src="Grafikadresse 1" alt="" />
<div class="text">
<h2>Titel 1</h2>
<p>Hier Infotext 1 im Bild <a href="/Seite.htm">weiter lesen</a></p>
</div>
</div>

<!-- Grafik 2 -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
<img src="Grafikadresse 2" alt="" />
<div class="text">
<h2>Titel 2</h2>
<p>Hier Infotext 2 im Bild <a href="/Seite.htm">weiter lesen</a></p>
</div>
</div>

<!-- Grafik 3 -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide">
<img src="Grafikadresse 3" alt="" />
<div class="text">
<h2>Titel 3</h2>
<p>Hier Infotext 3 im Bild <a href="/Seite.htm">weiter lesen</a></p>
</div>
</div>

<!-- Grafik 4 -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide">
<img src="Grafikadresse 4" alt="" />
<div class="text">
<h2>Titel 4</h2>
<p>Hier Infotext 3 im Bild <a href="/Seite.htm">weiter lesen</a></p>
</div>
</div>
   
</div>


Resimler 400x250 boyutundadır.
Web sitenizin bu şablonu kaydırmaması için içerik bölümünün en az 650 piksel olması gerekmektedir.
Alıntı:
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);


Bu bölümdeki 5000 = 5 saniye'dir.İsterseniz süreyi uzatabilirsiniz.
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu