Yazar |
Mesaj |
-
hayaldunyam-mert
Uzman Üye
|
02.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...______________ |
|
↑
|
|
|
-
neararsanistersenvar
Bedava-Sitem Bağımlısı
|
02.03.2011, 15:11 (UTC) Mesaj konusu: |
|
|
Valla süper bi kod
ben kendi sayfalarımı ekliyim eklicem siteye |
|
↑
|
|
|
-
hayaldunyam-mert
Uzman Üye
|
02.03.2011, 15:12 (UTC) Mesaj konusu: |
|
|
Teşekkürler değerli yorumunuz için... ______________ |
|
↑
|
|
|
-
cisonec
Uzman Üye
|
02.03.2011, 15:18 (UTC) Mesaj konusu: |
|
|
çok güzel bir paylaşım çok teşşekürler ______________ Banneriniz 468x60 boyutlarını geçmemelidir.
@simerweb |
|
↑
|
|
|
-
hayaldunyam-mert
Uzman Üye
|
02.03.2011, 15:19 (UTC) Mesaj konusu: |
|
|
Rica ederim.. Yararlı olduysa ne mutlu bana ______________ |
|
↑
|
|
|
-
e-bilginet
Bedava-Sitem Bağımlısı
Konum: bs forum
|
02.03.2011, 15:21 (UTC) Mesaj konusu: |
|
|
Bunu hibycocuk paylaşmıştı ______________ Banneriniz 468x60 boyutlarını geçmemelidir.
@simerweb |
|
↑
|
|
|
-
hayaldunyam-mert
Uzman Üye
|
02.03.2011, 15:29 (UTC) Mesaj konusu: |
|
|
|
|
↑
|
|
|
-
tasdeneme123
Acemi Üye
|
02.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. |
|
↑
|
|
|
-
neararsanistersenvar
Bedava-Sitem Bağımlısı
|
02.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 |
|
↑
|
|
|
-
karikaturdelileri
Bedava-Sitem Bağımlısı
|
02.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 |
|
↑
|
|
|
-
hayaldunyam-mert
Uzman Üye
|
02.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...______________ |
|
↑
|
|
|
-
estemplate
Aktif Üye
|
02.03.2011, 18:03 (UTC) Mesaj konusu: |
|
|
@karikaturdelileri sen yanlış yere eklediysen mert'in bir suçu yokki ______________ |
|
↑
|
|
|
-
hayaldunyam-mert
Uzman Üye
|
02.03.2011, 18:04 (UTC) Mesaj konusu: |
|
|
Tamam arkadaşlar.. Düzeltti o da sanırım.. Yanlış anlamış.. Olsun olur böyle..
Siz kodu beğendiniz mi?______________ |
|
↑
|
|
|
-
karikaturdelileri
Bedava-Sitem Bağımlısı
|
02.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
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
hayaldunyam-mert yazmış: Tamam arkadaşlar.. Düzeltti o da sanırım.. Yanlış anlamış.. Olsun olur böyle..
Siz kodu beğendiniz mi?
Yanlış anladım k.bakma şimdi oldu kodu siteme uyarlayıp kullanacağım sağol.______________ |
|
↑
|
|
|
-
estemplate
Aktif Üye
|
|
↑
|
|
|
|