سلايد شو متحرك احترافي جديد للمنتديات احلى منتدى

سلايد شو جديد بتقنية عالية بنرات متحركة

السلام عليكم ورحمة الله وبركاته

اقدم لكم سلايد شو مطلوب بنرات متحركة

صورة للسلايد شو

سلايد شو متحرك احترافي جديد للمنتديات احلى منتدى Screen37

طريقة التركيب
نضع اوﻻ الكود جافا من خلال لوحة الادارة. عناصر اضافية. HTML و JAVASCRIPT. اكواد javascript تفعيل اكواد javascript اختار نعم وسجل
ثم انشاء كود الاسم اي شئ اختار جميع صفحات وضع الكود الاتي الذي بالمرفقات
رابطة تحميل كود الجافا

من هنا

ثم ضع كود css الاتي من خلال لوحة الادارة. مظهر المنتدى. صور والوان. الوان. ورقة css وضع الكود الاتي

الكود:: [size=14][/size]
.titel-slide {[size=14][/size]
   background: #222 none repeat scroll 0 0;[size=14][/size]
   display: block;[size=14][/size]
   height: 28px;[size=14][/size]
   margin: 0 auto;[size=14][/size]
   padding-top: 12px;[size=14][/size]
   text-align: center;[size=14][/size]
   width: auto;[size=14][/size]
}[size=14][/size]
.titel-slide strong {[size=14][/size]
   color: #fff;[size=14][/size]
   font-family: arial,sans-serif;[size=14][/size]
   font-size: 16px;[size=14][/size]
   line-height: 1;[size=14][/size]
   margin-right: -55px;[size=14][/size]
}[size=14][/size]
.titel-slide i {[size=14][/size]
   color: #fff;[size=14][/size]
   display: inline-block;[size=14][/size]
   float: right;[size=14][/size]
   font-family: "Batch";[size=14][/size]
   font-size: 21px;[size=14][/size]
   font-style: normal;[size=14][/size]
   font-weight: bolder;[size=14][/size]
   height: 28px;[size=14][/size]
   line-height: 0.7;[size=14][/size]
   margin-top: -12px;[size=14][/size]
   padding-top: 12px;[size=14][/size]
   text-align: center;[size=14][/size]
   width: 40px;[size=14][/size]
}[size=14][/size]
   [size=14][/size]
.image_carousel {[size=14][/size]
   padding-right: 3px;[size=14][/size]
   position: relative;[size=14][/size]
}[size=14][/size]
.image_carousel a {[size=14][/size]
   display: block;[size=14][/size]
   float: left;[size=14][/size]
}[size=14][/size]
.image_carousel img {[size=14][/size]
   background-color: #fff;[size=14][/size]
   border: 1px solid #ccc;[size=14][/size]
   display: block;[size=14][/size]
   float: left;[size=14][/size]
   margin: 5px;[size=14][/size]
   padding: 6px;[size=14][/size]
}[size=14][/size]
.image_carousel img:hover {[size=14][/size]
   border: 1px solid #ddd;[size=14][/size]
   box-shadow: 0 1px 5px #555;[size=14][/size]
}[size=14][/size]
.image_carousel:hover > a.prev {[size=14][/size]
   left: 20px;[size=14][/size]
   opacity: 1;[size=14][/size]
   overflow: visible;[size=14][/size]
}[size=14][/size]
.image_carousel:hover > a.next {[size=14][/size]
   opacity: 1;[size=14][/size]
   overflow: visible;[size=14][/size]
   right: 20px;[size=14][/size]
}[size=14][/size]
a.prev, a.next {[size=14][/size]
   cursor: pointer;[size=14][/size]
   opacity: 0;[size=14][/size]
   overflow: hidden;[size=14][/size]
   transition: all 0.5s ease 0s;[size=14][/size]
}[size=14][/size]
a.prev {[size=14][/size]
   background-image: url("https://i.servimg.com/u/f37/16/46/77/76/left10.png");[size=14][/size]
   background-repeat: no-repeat;[size=14][/size]
   display: block;[size=14][/size]
   height: 40px;[size=14][/size]
   left: -32px;[size=14][/size]
   position: absolute;[size=14][/size]
   top: 90px;[size=14][/size]
   width: 40px;[size=14][/size]
}[size=14][/size]
a.next {[size=14][/size]
   background-image: url("https://i.servimg.com/u/f37/16/46/77/76/right10.png");[size=14][/size]
   background-repeat: no-repeat;[size=14][/size]
   display: block;[size=14][/size]
   height: 40px;[size=14][/size]
   position: absolute;[size=14][/size]
   right: -32px;[size=14][/size]
   top: 90px;[size=14][/size]
   width: 40px;[size=14][/size]
}[size=14][/size]
a.prev:hover, a.next:hover {[size=14][/size]
   opacity: 0.7 !important;[size=14][/size]
}[size=14][/size]
a.prev span, a.next span {[size=14][/size]
   display: none;[size=14][/size]
}[size=14][/size]
.pagination {[size=14][/size]
   text-align: center;[size=14][/size]
}[size=14][/size]
.pagination a {[size=14][/size]
   display: inline-block;[size=14][/size]
   float: none;[size=14][/size]
   height: 15px;[size=14][/size]
   margin: 0 5px 0 0;[size=14][/size]
   width: 15px;[size=14][/size]
}[size=14][/size]
.pagination a.selected {[size=14][/size]
   background-color: #5490cc;[size=14][/size]
   background-position: -25px -300px;[size=14][/size]
   cursor: default;[size=14][/size]
}[size=14][/size]
.pagination a span {[size=14][/size]
   display: none;[size=14][/size]
}[size=14][/size]
   .titel-slide, .pagination a, a.prev, a.next, .nav-tab {[size=14][/size]
   background-color: #444;[size=14][/size]
}[size=14][/size]
.slider-sh {[size=14][/size]
   background: #222 none repeat scroll 0 0;[size=14][/size]
   border: 1px solid #222;[size=14][/size]
   margin: auto;[size=14][/size]
   }

وسجل
ثم ضع القالب الاتي من خلال لوحة الادارة .مظهر المنتدى. قوالب التومبلايت. ادارة عامة. قالب overall_header

الكود:: [size=14][/size]
<div style="width: 903px;margin: 0px auto;height: 190px;overflow: hidden;"> [size=14][/size]
   [size=14][/size]
<div class="image_carousel">[size=14][/size]
   [size=14][/size]
<div id="foo1">[size=14][/size]
     [size=14][/size]
     [size=14][/size]
     <a href="رابط الموضوع">   [size=14][/size]
   <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>   [size=14][/size]
   <a href="رابط الموضوع">   [size=14][/size]
   <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>     [size=14][/size]
   <a href="رابط الموضوع">  [size=14][/size]
   <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>   [size=14][/size]
   <a href="http://www.theb3st.com/t57994-topic">   [size=14][/size]
   <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>   [size=14][/size]
   <a href="رابط الموضوع">   [size=14][/size]
   <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>   [size=14][/size]
   <a href="رابط الموضوع">   [size=14][/size]
   <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>     [size=14][/size]
   <a href="رابط الموضوع">  [size=14][/size]
   <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>     [size=14][/size]
   <a href="رابط الموضوع">   [size=14][/size]
   <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>   [size=14][/size]
   <a href="رابط الموضوع">   [size=14][/size]
   <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>   [size=14][/size]
   <a href="رابط الموضوع">   [size=14][/size]
   <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>     [size=14][/size]
   <a href="رابط الموضوع">  [size=14][/size]
   <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>     [size=14][/size]
   <a href="رابط الموضوع">   [size=14][/size]
   <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>   [size=14][/size]
     [size=14][/size]
</div>[size=14][/size]
   [size=14][/size]
<div class="clearfix">[size=14][/size]
</div> [size=14][/size]
     <a class="prev" id="foo1_prev" href="#"><span>prev</span></a>   <a class="next" id="foo1_next" href="#"><span>next</span></a>     [size=14][/size]
<div class="pagination" id="foo1_pag">[size=14][/size]
     [size=14][/size]
</div>[size=14][/size]
   [size=14][/size]
</div>[size=14][/size]
     [size=14][/size]
</div>[size=14][/size]
   [size=14][/size]
<script type="text/javascript">[size=14][/size]
$(document).ready(function() { [size=14][/size]
$('#foo1').carouFredSel({[size=14][/size]
     auto: {pauseDuration: 5000, delay: 375},[size=14][/size]
     prev: '#foo1_prev',[size=14][/size]
     next: '#foo1_next',[size=14][/size]
     pagination: "#foo1_pag",[size=14][/size]
[size=14][/size]
   });[size=14][/size]
$('#foo2').carouFredSel({[size=14][/size]
     auto: {pauseDuration: 5000, delay: 375},[size=14][/size]
     prev: '#foo2_prev',[size=14][/size]
     next: '#foo2_next',[size=14][/size]
     pagination: "#foo2_pag",[size=14][/size]
[size=14][/size]
   });[size=14][/size]
[size=14][/size]
[size=14][/size]
});[size=14][/size]
</script>[size=14][/size]
<script type="text/javascript" language="javascript">[size=14][/size]
   $(function() {[size=14][/size]
[size=14][/size]
     [size=14][/size]
   $('#foo2').carouFredSel({[size=14][/size]
     auto: true,[size=14][/size]
     prev: '#prev2',[size=14][/size]
     next: '#next2',[size=14][/size]
     pagination: false,[size=14][/size]
     mousewheel: true,[size=14][/size]
     swipe: {[size=14][/size]
   onMouse: true,[size=14][/size]
   onTouch: true[size=14][/size]
   }[size=14][/size]
   });[size=14][/size]
[size=14][/size]
   [size=14][/size]
[size=14][/size]
   });[size=14][/size]
   </script>

وكدة خلصنا الكود عبارة عن كود جافا وكود css وقالب في قالب overall_header
دمتم بخير

توقيع : LE9END

» باترن احترافي لتزين التصاميم الأحترافية
» فرد جديد في عائلتكم
» عضو جديد معاكم
» عملاق سيارات أوروبي جديد!
» ماكلارين 720s 2018 .. جيل جديد رياضي

سلايد شو متحرك احترافي جديد للمنتديات احلى منتدى

من هنا

ثم ضع كود css الاتي من خلال لوحة الادارة. مظهر المنتدى. صور والوان. الوان. ورقة css وضع الكود الاتي

وسجل ثم ضع القالب الاتي من خلال لوحة الادارة .مظهر المنتدى. قوالب التومبلايت. ادارة عامة. قالب overall_header

وسجل
ثم ضع القالب الاتي من خلال لوحة الادارة .مظهر المنتدى. قوالب التومبلايت. ادارة عامة. قالب overall_header