More

قوائم لعرض النصوص

" Here you can search for everything you want and you will find it as soon as possible "


السلام عليكم ورحمة الله تعالى وبركاته ، إضافة النهار عبارة عن شرائح تعرض
فيها نصوص أو شروحات .. هي كمعرض إذا صح القول تحتوي على تأثير رائع يمكن
أن تستعمل في قالب قيد الإنشاء أو شيئ من هذا القبيل كل ما سأفعله سأقدم
لكم الأكواد والباقي عليكم

مثال مباشر

الأكواد مع الشرح

1 . نتوجه لقالب >> تحرير 

2. ابحث بإستعمال CTRL+F عن  <b:skin/><[[

3. ضع الكود التالي قبله [ فوقه ]

.menu{
width: 620px;
margin: 100px auto; padding: 15px;
list-style: none;
counter-reset: li;
background: #eee;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.menu:before,
.menu:after {
content: "";
display: table;
}

.menu:after {
clear: both;
}

.menu {
zoom:1;
}

.menu li {
position: relative;
float: left;
cursor: pointer;
height: 120px; width: 200px;
margin: 10px 0 0 10px;
color: #fff;
}

.menu li:hover, .menu li:focus{
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.2)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: -ms-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: -o-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
}

.menu .cover{
z-index: 2;
}

.menu .cover .content{
overflow: visible;
}

.menu .cover:focus{
outline: 0;
}

.menu li::after{
content: counter(li);
counter-increment: li;
font: italic bold 10px serif, georgia;
position: absolute;
color: rgba(255,255,255,.1);
opacity: 0;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}

.menu li:hover::after, .menu li:focus::after{
font-size: 100px;
opacity: 1;
}

.menu .cover::after{
z-index: -1;
}

.menu li:nth-child(1),
.menu li:nth-child(2),
.menu li:nth-child(3){
margin-top: 0;
}

.menu li:nth-child(1),
.menu li:nth-child(4),
.menu li:nth-child(7){
margin-left: 0;
}

.menu li:nth-child(1),
.menu li:nth-child(1) .content,
.menu li:nth-child(1) .close{
background-color: #2c618f;
}

.menu li:nth-child(2),
.menu li:nth-child(2) .content,
.menu li:nth-child(2) .close{
background-color: #91ab31;
}

.menu li:nth-child(3),
.menu li:nth-child(3) .content,
.menu li:nth-child(3) .close{
background-color: #714a28;
}

.menu li:nth-child(4),
.menu li:nth-child(4) .content,
.menu li:nth-child(4) .close{
background-color: #e58600;
}

.menu li:nth-child(5),
.menu li:nth-child(5) .content,
.menu li:nth-child(5) .close{
background-color: #c33a00;
}

.menu li:nth-child(6),
.menu li:nth-child(6) .content,
.menu li:nth-child(6) .close{
background-color: #7f5dac;
}

.menu li:nth-child(7),
.menu li:nth-child(7) .content,
.menu li:nth-child(7) .close{
background-color: #5672b7;
}

.menu li:nth-child(8),
.menu li:nth-child(8) .content,
.menu li:nth-child(8) .close{
background-color: #69003f;
}

.menu li:nth-child(9),
.menu li:nth-child(9) .content,
.menu li:nth-child(9) .close{
background-color: #393043;
}

.menu .content{
opacity: 0; display: none9;
overflow: hidden;
font: 12px Arial, Helvetica;
position: absolute;
height: 120px; width: 200px;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}

.menu .expanded{
opacity: .95; display: block9;
padding: 40px;
height: 300px; width: 540px;
}

.menu li:nth-child(3n) .content{ /* 3,6,9 */
right: 0;
}

.menu li:nth-child(3n-1) .expanded{ /* 2,5,8 */
left: 50%;
margin-left: -310px;
}

.menu li:nth-child(7) .content, /* 7,8,9 */
.menu li:nth-child(8) .content,
.menu li:nth-child(9) .content{
bottom: 0;
}

.menu li:nth-child(4) .expanded, /* 4,5,6 */
.menu li:nth-child(5) .expanded,
.menu li:nth-child(6) .expanded{
margin-top: -190px;
top: 50%;
}

.menu .title{
position: absolute;
height: 100%; width: 100%;
text-align: center;
font: italic bold 1em/120px 'trebuchet MS', Arial, helvetica;
opacity: .2;
}

.menu li:hover .title{
opacity: .7;
}

.menu .close {
display: none;
border: 5px solid #fff;
color: #fff;
cursor: pointer;
height: 40px; width: 40px;
font: bold 20px/40px arial, helvetica;
position: absolute;
text-align: center;
top: -20px; right: -20px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
}

.menu .cover .close{
display: block;
}

4. ابحث عن : <head/>

You may also like  اضافة اعلانات داخل المواضيع

3. ضع الكود التالي قبله [ فوقه ]

<script type='text/javascript'>
//<![CDATA[
(function(){

$('.menu .content').append('<span class="close">x</span>');
function showContent(elem){
hideContent();
elem.find('.content').addClass('expanded');
elem.addClass('cover');
}
function hideContent(){
$('.menu .content').removeClass('expanded');
$('.menu li').removeClass('cover');
}

$('.menu li').click(function() {
showContent($(this));
});
$('.menu li').keypress(function(e) {
if (e.keyCode == 13) {
showContent($(this));
}
});

$('.menu .close').click(function(e) {
e.stopPropagation();
hideContent();
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
hideContent();
}
});

})();
//]]>
</script>

* كود HTML ضعه في المكان الذي تريد .. وغير النصوص 

<ul class="menu">
<li tabindex="1">
<span class="title">Satu</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Dua</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Tiga</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Empat</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Lima</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Enam</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Tujuh</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Delapan</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Sembilan</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
</ul>

You may also like  Wrestling Legends



Tags
Show More
" Here you can search for everything you want and you will find it as soon as possible "

Scorpion

Welcome To The Biggest Site For Android Games And Apps You Can Find New Modded Games And Game Cheat & CrossFire Hacks You Can Find Daily Update Only Here Don’t Forget To Like Page in Facebook And Subscribe To Blog

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected

Please consider supporting us by disabling your ad blocker