Forum'da ara:
Ara


Yazar Mesaj
Mesaj02.03.2011, 15:05 (UTC)    
Mesaj konusu: Css Kutular ( Mükemmel )

Css Kutular



Merhaba Arkadaşlar.. Bugün sizlere yukarıda da görüldüğü gibi olan bu mükemmel kodu vereceğim... Slayt şeklindeki bu kod mükemmel bir kod.
Özellikleri ;
> Sol üst köşede, üzerine gelince slayt şeklinde dışa akması,
> Basit bir görünüme sahip fakat hareketli ve siteyi takip ediyor...
> Aynı zamanda yenileneme özelliği de bulunuyor...
Gelelim Kodlara


Aşağıdaki kodu CSS BÖLÜMÜNE ekleyiniz...

Kod:
  .rp_list {    font-family:Verdana, Helvetica, sans-serif;    position:fixed;    right:-220px;    top:40px;    margin:0;    padding:0; } span.rp_shuffle{    background:#222 url(http://img.webme.com/pic/h/hayaldunyam-mert/shuffle.png) no-repeat 10px 50%;    width:28px;    height:14px;    display:block;    margin:10px 0px 0px 20px;    cursor:pointer;    padding:4px;    border:1px solid #000;    -moz-border-radius:5px 0px 0px 5px;    -webkit-border-bottom-left-radius: 5px;    -webkit-border-top-left-radius: 5px;    border-bottom-left-radius: 5px;    border-top-left-radius: 5px; } .rp_list ul{    margin:0;    padding:0;    list-style:none; } .rp_list ul li{    width: 240px;    margin-bottom:5px;    display:none; } .rp_list ul li div{    display: block;    line-height:15px;    width: 240px;    height: 80px;    background:#333;    border:1px solid #000;    -moz-border-radius:5px 0px 0px 5px;    -webkit-border-bottom-left-radius: 5px;    -webkit-border-top-left-radius: 5px;    border-bottom-left-radius: 5px;    border-top-left-radius: 5px; } .rp_list ul li div img{    width:70px;    border:none;    float:left;    margin:4px 10px 0px 4px;    border:1px solid #111;    -moz-box-shadow:1px 1px 3px #000;    -webkit-box-shadow:1px 1px 3px #000;    box-shadow:1px 1px 3px #000; } span.rp_title{    font-size:11px;    color:#ddd;    height:46px;    margin:4px 0px 0px 20px;    display:block;    text-shadow:1px 1px 1px #000;    padding-top:3px;    background:#222;    -moz-box-shadow:0px 0px 5px #000 inset;    -webkit-box-shadow:0px 0px 5px #000 inset;    box-shadow:0px 0px 5px #000 inset; } span.rp_links{    width:195px;    height:8px;    padding-top:2px;    display:block;    margin-left:42px; } span.rp_links a{    background: #222 url(http://img.webme.com/pic/h/hayaldunyam-mert/bgbutton.png) repeat-x;    padding: 2px 18px;    font-size:10px;    color: #fff;    text-decoration: none;    line-height: 1;    -moz-box-shadow: 0 1px 3px #000;    -webkit-box-shadow: 0 1px 3px #000;    box-shadow:0 1px 3px #000;    text-shadow: 0 -1px 1px #222;    cursor: pointer;    outline:none; } span.rp_links a:hover{    background-color:#000;    color:#fff; }     



Aşağıdaki kodu SİTENİZDE İSTEDİĞİNİZ SAYFAYA YA DA TASARIMIN ÜSTÜNE ekleyiniz...


Kod:
  <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-7243260-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script> <div class="shuffle"> </div> <div class="hover"> </div> <div id="rp_list" class="rp_list"> <ul>     <li>     <div><img alt="" src="http://img.webme.com/pic/h/hayaldunyam-mert/70x70.png" _fcksavedurl="http://img.webme.com/pic/h/hayaldunyam-mert/70x70.png" />                    <span class="rp_title">Tasarım 1</span>                   <span class="rp_links">                      <a target="_blank" href="http://hayaldunyam-mert.tr.gg/Css1.htm" _fcksavedurl="http://hayaldunyam-mert.tr.gg/Css1.htm">Kodlar</a>                      <a target="_blank" href="http://siir-evimiz.tr.gg/Tasarim1.htm" _fcksavedurl="http://siir-evimiz.tr.gg/Tasarim1.htm">Demo</a>                   </span></div>     </li>     <li>     <div><img alt="" src="http://img.webme.com/pic/h/hayaldunyam-mert/70x70.png" _fcksavedurl="http://img.webme.com/pic/h/hayaldunyam-mert/70x70.png" />                   <span class="rp_title">Tasarım 2</span>                   <span class="rp_links">                      <a target="_blank" href="http://hayaldunyam-mert.tr.gg/Css2.htm" _fcksavedurl="http://hayaldunyam-mert.tr.gg/Css2.htm">Kodlar</a>                      <a target="_blank" href="http://siir-evimiz.tr.gg/Tasarim2.htm" _fcksavedurl="http://siir-evimiz.tr.gg/Tasarim2.htm">Demo</a>                    </span></div>     </li>     <li>     <div><img alt="" src="http://img.webme.com/pic/h/hayaldunyam-mert/70x70.png" _fcksavedurl="http://img.webme.com/pic/h/hayaldunyam-mert/70x70.png" />                   <span class="rp_title">Tasarım 3</span>                   <span class="rp_links">                       <a target="_blank" href="http://hayaldunyam-mert.tr.gg/Css3.htm" _fcksavedurl="http://hayaldunyam-mert.tr.gg/Css3.htm">Kodlar</a>                      <a target="_blank" href="http://siir-evimiz.tr.gg/Tasarim3.htm" _fcksavedurl="http://siir-evimiz.tr.gg/Tasarim3.htm">Demo</a>                   </span></div>     </li>     <li>     <div><img alt="" src="http://img.webme.com/pic/h/hayaldunyam-mert/70x70.png" _fcksavedurl="http://img.webme.com/pic/h/hayaldunyam-mert/70x70.png" />                    <span class="rp_title">Tasarım 4</span>                   <span class="rp_links">                      <a target="_blank" href="http://hayaldunyam-mert.tr.gg/Css4.htm" _fcksavedurl="http://hayaldunyam-mert.tr.gg/Css4.htm">Kodlar</a>                      <a target="_blank" href="http://siir-evimiz.tr.gg/Tasarim4.htm" _fcksavedurl="http://siir-evimiz.tr.gg/Tasarim4.htm">Demo</a>                   </span></div>     </li>     <li>     <div><img alt="" src="http://img.webme.com/pic/h/hayaldunyam-mert/70x70.png" _fcksavedurl="http://img.webme.com/pic/h/hayaldunyam-mert/70x70.png" />                   <span class="rp_title">Tasarım 5</span>                   <span class="rp_links">                      <a target="_blank" href="http://hayaldunyam-mert.tr.gg/Css5.htm" _fcksavedurl="http://hayaldunyam-mert.tr.gg/Css5.htm">Kodlar</a>                      <a target="_blank" href="http://siir-evimiz.tr.gg/Tasarim5.htm" _fcksavedurl="http://siir-evimiz.tr.gg/Tasarim5.htm">Demo</a>                    </span></div>     </li>     <li>     <div><img alt="" src="http://img.webme.com/pic/h/hayaldunyam-mert/70x70.png" _fcksavedurl="http://img.webme.com/pic/h/hayaldunyam-mert/70x70.png" />                   <span class="rp_title">Tasarım 6</span>                   <span class="rp_links">                       <a target="_blank" href="http://hayaldunyam-mert.tr.gg/Css6.htm" _fcksavedurl="http://hayaldunyam-mert.tr.gg/Css6.htm">Kodlar</a>                      <a target="_blank" href="http://siir-evimiz.tr.gg/Tasarim6.htm" _fcksavedurl="http://siir-evimiz.tr.gg/Tasarim6.htm">Demo</a>                   </span></div>     </li>     <li>     <div><img alt="" src="http://img.webme.com/pic/h/hayaldunyam-mert/70x70.png" _fcksavedurl="http://img.webme.com/pic/h/hayaldunyam-mert/70x70.png" />                    <span class="rp_title">Tasarım 7</span>                   <span class="rp_links">                      <a target="_blank" href="http://hayaldunyam-mert.tr.gg/Css7.htm" _fcksavedurl="http://hayaldunyam-mert.tr.gg/Css7.htm">Kodlar</a>                      <a target="_blank" href="http://siir-evimiz.tr.gg/Tasarim7.htm" _fcksavedurl="http://siir-evimiz.tr.gg/Tasarim7.htm">Demo</a>                   </span></div>     </li>     <li>     <div><img alt="" src="http://img.webme.com/pic/h/hayaldunyam-mert/70x70.png" _fcksavedurl="http://img.webme.com/pic/h/hayaldunyam-mert/70x70.png" />                   <span class="rp_title">Tasarım 8</span>                   <span class="rp_links">                      <a target="_blank" href="http://hayaldunyam-mert.tr.gg/Css8.htm" _fcksavedurl="http://hayaldunyam-mert.tr.gg/Css8.htm">Kodlar</a>                      <a target="_blank" href="http://siir-evimiz.tr.gg/Tasarim8.htm" _fcksavedurl="http://siir-evimiz.tr.gg/Tasarim8.htm">Demo</a>                    </span></div>     </li>     <li>     <div><img alt="" src="http://img.webme.com/pic/h/hayaldunyam-mert/70x70.png" _fcksavedurl="http://img.webme.com/pic/h/hayaldunyam-mert/70x70.png" />                   <span class="rp_title">Tasarım 9</span>                   <span class="rp_links">                       <a target="_blank" href="http://hayaldunyam-mert.tr.gg/Css9.htm" _fcksavedurl="http://hayaldunyam-mert.tr.gg/Css9.htm">Kodlar</a>                      <a target="_blank" href="http://siir-evimiz.tr.gg/Tasarim9.htm" _fcksavedurl="http://siir-evimiz.tr.gg/Tasarim9.htm">Demo</a>                   </span></div>     </li> </ul> <span id="rp_shuffle" class="rp_shuffle">          </span></div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>        <script>
         $(function() {
            /**
            * the list of posts
            */
            var $list       = $('#rp_list ul');
            /**
            * number of related posts
            */
            var elems_cnt       = $list.children().length;
            
            /**
            * show the first set of posts.
            * 200 is the initial left margin for the list elements
            */
            load(200);
            
            function load(initial){
               $list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px');
               var loaded   = 0;
               //show 5 random posts from all the ones in the list.
               //Make sure not to repeat
               while(loaded < 5){
                  var r       = Math.floor(Math.random()*elems_cnt);
                  var $elem   = $list.find('li:nth-child('+ (r+1) +')');
                  if($elem.is(':visible'))
                     continue;
                  else
                     $elem.show();
                  ++loaded;
               }
               //animate them
               var d = 200;
               $list.find('li:visible div').each(function(){
                  $(this).stop().animate({
                     'marginLeft':'-50px'
                  },d += 100);
               });
            }
               
            /**
            * hovering over the list elements makes them slide out
            */   
            $list.find('li:visible').live('mouseenter',function () {
               $(this).find('div').stop().animate({
                  'marginLeft':'-220px'
               },200);
            }).live('mouseleave',function () {
               $(this).find('div').stop().animate({
                  'marginLeft':'-50px'
               },200);
            });
            
            /**
            * when clicking the shuffle button,
            * show 5 random posts
            */
            $('#rp_shuffle').unbind('click')
                        .bind('click',shuffle)
                        .stop()
                        .animate({'margin-left':'-18px'},700);
                        
            function shuffle(){
               $list.find('li:visible div').stop().animate({
                  'marginLeft':'60px'
               },200,function(){
                  load(-60);
               });
            }
            });
      </script>   


Önizleme Web Sitemin Css Tasarımlar sayfasında mevcut...

Not : Bu menüyü nette dolaşırken buldum...
______________
Mesaj02.03.2011, 15:11 (UTC)    
Mesaj konusu:

Valla süper bi kod
ben kendi sayfalarımı ekliyim eklicem siteye Smile
Mesaj02.03.2011, 15:12 (UTC)    
Mesaj konusu:

Teşekkürler değerli yorumunuz için... Smile
______________
Mesaj02.03.2011, 15:18 (UTC)    
Mesaj konusu:

çok güzel bir paylaşım çok teşşekürler Smile
______________
Banneriniz 468x60 boyutlarını geçmemelidir.
@simerweb
Mesaj02.03.2011, 15:19 (UTC)    
Mesaj konusu:

Rica ederim.. Yararlı olduysa ne mutlu bana Smile
______________
Mesaj02.03.2011, 15:21 (UTC)    
Mesaj konusu:

Bunu hibycocuk paylaşmıştı
______________
Banneriniz 468x60 boyutlarını geçmemelidir.
@simerweb
Mesaj02.03.2011, 15:29 (UTC)    
Mesaj konusu:

Smile Yeni farkettim Smile))
______________
Mesaj02.03.2011, 16:41 (UTC)    
Mesaj konusu:

Bende iki kodda da hata çıktı tasarımdanmı kaynaklandı bilmem.
İlk kodu tasarımın css bölümünün en üst kısmına yapıştırdım sitemde değişen bir şey olmadı.
2.Kodu sayfada denedim kodlamada hata var sanırım ilk içeriye gömük olması lazım ama bende dışarıya çıkık üstüne gelince gömülüyor.
Ama yinede emek vermişsin teşekkürler.
Mesaj02.03.2011, 17:03 (UTC)    
Mesaj konusu:

Birde birşey söylemek istiyorum
ANalytics kodu kalmış sanırım. isteyenler o kodu eklerken çıkarsın
Kod:
 <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-7243260-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>


Ve bende gayet ii çalıştı
Kod:
http://denemeneararsanistersenvar.tr.gg/

bakabilir siniz. Sola eklemeyi becerince normal sitemede eklicem
Mesaj02.03.2011, 17:14 (UTC)    
Mesaj konusu:

neararsanistersenvar yazmış:
Birde birşey söylemek istiyorum
ANalytics kodu kalmış sanırım. isteyenler o kodu eklerken çıkarsın
Kod:
 <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-7243260-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>


Ve bende gayet ii çalıştı
Kod:
http://denemeneararsanistersenvar.tr.gg/

bakabilir siniz. Sola eklemeyi becerince normal sitemede eklicem
Mesaj02.03.2011, 17:52 (UTC)    
Mesaj konusu:

Kötülemek falan değil fakat yanlış yapıyorsunuz arkadaşlar...

İlk kodu css bölümüne ekleyin.. Daha sonra 2. kodu o menünün nerede gözükmesini istiyorsanız oraya ekleyin.. Bu kadar...
______________
Mesaj02.03.2011, 18:03 (UTC)    
Mesaj konusu:

@karikaturdelileri sen yanlış yere eklediysen mert'in bir suçu yokki Smile
______________
Mesaj02.03.2011, 18:04 (UTC)    
Mesaj konusu:

Tamam arkadaşlar.. Düzeltti o da sanırım.. Yanlış anlamış.. Olsun olur böyle.. Smile

Siz kodu beğendiniz mi?

______________
Mesaj02.03.2011, 18:08 (UTC)    
Mesaj konusu:

hayaldunyam-mert yazmış:
Kötülemek falan değil fakat yanlış yapıyorsunuz arkadaşlar...

İlk kodu css bölümüne ekleyin.. Daha sonra 2. kodu o menünün nerede gözükmesini istiyorsanız oraya ekleyin.. Bu kadar...

Yanlış anlamışım k.bakmayın.Şimdi oldu güzel siteme uyarlamaya çalışıyorum.
estemplate yazmış:
@karikaturdelileri sen yanlış yere eklediysen mert'in bir suçu yokki Smile

Bende dedim zaten merti kötülemek istemem ama benden bir kaynaklanan bir sorun demiştim yoksa böyle bir ustadan böle bir hata gelmeyeceğini bende biliyorum Smile
hayaldunyam-mert yazmış:
Tamam arkadaşlar.. Düzeltti o da sanırım.. Yanlış anlamış.. Olsun olur böyle.. Smile

Siz kodu beğendiniz mi?

Yanlış anladım k.bakma şimdi oldu kodu siteme uyarlayıp kullanacağım sağol.
______________
Mesaj02.03.2011, 18:09 (UTC)    
Mesaj konusu:

web site üzerinden bir görünüm Arrow

http://img.webme.com/pic/e/estemplate/dsa.png

not:resim büyük olduğu için foruma eklemedim.
______________
Önceki mesajları göster:   


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