طريقة تركيب الإضافة
الكود
<style>
/* fade slider http://www.expertsprogram.tk/ */
.BloggerSpiceSlider {
height:266px;
margin:50px auto;
overflow:hidden;
position:relative;
width:776px;
}
.BloggerSpiceSlider ul {
list-style:none;
position:relative;
}
/* keyframes #anim_BloggerSpiceSlider*/
@-webkit-keyframes anim_BloggerSpiceSlider {
0% {opacity:0;}
6% {opacity:1;}
24% {opacity:1;}
30% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes anim_BloggerSpiceSlider {
0% {opacity:0;}
6% {opacity:1;}
24% {opacity:1;}
30% {opacity:0;}
100% {opacity:0;}
}
.BloggerSpiceSlider ul li {
opacity:0;
position:absolute;
top:0;
/* css3 animation */
-webkit-animation-name: anim_BloggerSpiceSlider;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: anim_BloggerSpiceSlider;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}
/* css3 delays */
.BloggerSpiceSlider ul li:nth-child(2), .BloggerSpiceSlider ul li:nth-child(2) div {
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
}
.BloggerSpiceSlider ul li:nth-child(3), .BloggerSpiceSlider ul li:nth-child(3) div {
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
}
.BloggerSpiceSlider ul li:nth-child(4), .BloggerSpiceSlider ul li:nth-child(4) div {
-webkit-animation-delay: 18.0s;
-moz-animation-delay: 18.0s;
}
.BloggerSpiceSlider ul li img {
display:block;
}
/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
0% {left:100%;
opacity:0;}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
@-moz-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
.BloggerSpiceSlider ul li div {
background-color:#1A1A1A;
border-radius:10px 10px 10px 10px;
box-shadow:0 0 20px #04BDFA inset;
color:#04BDFA;
font-size:26px;
left:10%;
margin:0 auto;
padding:20px;
position:absolute;
top:50%;
width:200px;
/* css3 animation www.bloggerspice.com*/
-webkit-animation-name: anim_titles;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: anim_titles;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}
</style>
<div class="BloggerSpiceSlider">
<ul> <!-- BloggerSpiceSlider -->
<li>
<a href="رابط الموضوع" title="Image 1"><img src="رابط الصورة" /></a>
<div>وصف الموضوع </div>
</li>
<li>
<a href="رابط الموضوع" title="Image 2"><img src="رابط الصورة" /></a>
<div>وصف الموضوع</div>
</li>
<li>
<a href="رابط الموضوع" title="Image 3"><img src="رابط الصورة" /></a>
<div>وصف الموضوع</div>
</li>
<li>
<a href="رابط الموضوع" title="Image 4"><img src="رابط الصورة" /></a>
<div>وصف الموضوع</div>
</li>
</ul>
</div>
كتب بواسطة Expert Blogger
بلدي هو الأردن مشرف سابقا على عدة منتديات و مواقع و صفحات تعليمية على الفيسبوك و من عشاق البحت و الاكتشاف أشياء جديدة و حصرية حول شبكت الأنترنيت من أهمها مدونات بلوجر و وود دبرس و الصفحات على الفيسبوك أحب مساعدة المبتدئين لإنجاز طموحاتهم كما أسعى لتحقيقي طموحاتي من خلال هذا الموفع المتواضع أتمنى أن تنال مقالاتي إعجابكم و أن أكون أول من يدعمكم لشق طريقكم نحو التطور و الإحتراف و الإستفادة من خلال عرض مجموعة من المعلومات و المواضيع القيمة .
0 التعليقات:
إرسال تعليق