منتديات هبوب الجنوب - عرض مشاركة واحدة - سلايد شو متحرك احترافي جديد للمنتديات والمواقع
الموضوع: سلايد شو متحرك احترافي جديد للمنتديات والمواقع
عرض مشاركة واحدة
#1  
قديم 10-04-2017

الوافي متواجد حالياً
SMS ~ [ + ]
يقولون من يرفع راسه فوق تنكسر رقبته
وأنا أبي أرفع رآسي فوق وأشوف منهو كفو يكسرهـ
تراني أنتظركـ ..
اوسمتي
وسام وسام 
لوني المفضل Cadetblue
 رقم العضوية : 1
 تاريخ التسجيل : Mar 2009
 فترة الأقامة : 5552 يوم
 أخر زيارة : منذ دقيقة واحدة (11:35 PM)
 الإقامة : بين الماضي والحاضر
 المشاركات : 55,756 [ + ]
 التقييم : 87581
 معدل التقييم : الوافي has a reputation beyond reputeالوافي has a reputation beyond reputeالوافي has a reputation beyond reputeالوافي has a reputation beyond reputeالوافي has a reputation beyond reputeالوافي has a reputation beyond reputeالوافي has a reputation beyond reputeالوافي has a reputation beyond reputeالوافي has a reputation beyond reputeالوافي has a reputation beyond reputeالوافي has a reputation beyond repute
بيانات اضافيه [ + ]
افتراضي سلايد شو متحرك احترافي جديد للمنتديات والمواقع


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

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

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

كود:
<li class="L0"><li class="L1"><li class="L2">.titel-slide {<li class="L3">    background: #222 none repeat scroll 0 0;<li class="L4">    display: block;<li class="L5">    height: 28px;<li class="L6">    margin: 0 auto;<li class="L7">    padding-top: 12px;<li class="L8">    text-align: center;<li class="L9">    width: auto;<li class="L0">}<li class="L1">.titel-slide strong {<li class="L2">    color: #fff;<li class="L3">    font-family: arial,sans-serif;<li class="L4">    font-size: 16px;<li class="L5">    line-height: 1;<li class="L6">    margin-right: -55px;<li class="L7">}<li class="L8">.titel-slide i {<li class="L9">    color: #fff;<li class="L0">    display: inline-block;<li class="L1">    float: right;<li class="L2">    font-family: "Batch";<li class="L3">    font-size: 21px;<li class="L4">    font-style: normal;<li class="L5">    font-weight: bolder;<li class="L6">    height: 28px;<li class="L7">    line-height: 0.7;<li class="L8">    margin-top: -12px;<li class="L9">    padding-top: 12px;<li class="L0">    text-align: center;<li class="L1">    width: 40px;<li class="L2">}<li class="L3"><li class="L4">.image_carousel {<li class="L5">    padding-right: 3px;<li class="L6">    position: relative;<li class="L7">}<li class="L8">.image_carousel a {<li class="L9">    display: block;<li class="L0">    float: left;<li class="L1">}<li class="L2">.image_carousel img {<li class="L3">    background-color: #fff;<li class="L4">    border: 1px solid #ccc;<li class="L5">    display: block;<li class="L6">    float: left;<li class="L7">    margin: 5px;<li class="L8">    padding: 6px;<li class="L9">}<li class="L0">.image_carousel img:hover {<li class="L1">    border: 1px solid #ddd;<li class="L2">    box-shadow: 0 1px 5px #555;<li class="L3">}<li class="L4">.image_carousel:hover > a.prev {<li class="L5">    left: 20px;<li class="L6">    opacity: 1;<li class="L7">    overflow: visible;<li class="L8">}<li class="L9">.image_carousel:hover > a.next {<li class="L0">    opacity: 1;<li class="L1">    overflow: visible;<li class="L2">    right: 20px;<li class="L3">}<li class="L4">a.prev, a.next {<li class="L5">    cursor: pointer;<li class="L6">    opacity: 0;<li class="L7">    overflow: hidden;<li class="L8">    transition: all 0.5s ease 0s;<li class="L9">}<li class="L0">a.prev {<li class="L1">    background-image: url("https://i.servimg.com/u/f37/16/46/77/76/left10.png");<li class="L2">    background-repeat: no-repeat;<li class="L3">    display: block;<li class="L4">    height: 40px;<li class="L5">    left: -32px;<li class="L6">    position: absolute;<li class="L7">    top: 90px;<li class="L8">    width: 40px;<li class="L9">}<li class="L0">a.next {<li class="L1">    background-image: url("https://i.servimg.com/u/f37/16/46/77/76/right10.png");<li class="L2">    background-repeat: no-repeat;<li class="L3">    display: block;<li class="L4">    height: 40px;<li class="L5">    position: absolute;<li class="L6">    right: -32px;<li class="L7">    top: 90px;<li class="L8">    width: 40px;<li class="L9">}<li class="L0">a.prev:hover, a.next:hover {<li class="L1">    opacity: 0.7 !important;<li class="L2">}<li class="L3">a.prev span, a.next span {<li class="L4">    display: none;<li class="L5">}<li class="L6">.pagination {<li class="L7">    text-align: center;<li class="L8">}<li class="L9">.pagination a {<li class="L0">    display: inline-block;<li class="L1">    float: none;<li class="L2">    height: 15px;<li class="L3">    margin: 0 5px 0 0;<li class="L4">    width: 15px;<li class="L5">}<li class="L6">.pagination a.selected {<li class="L7">    background-color: #5490cc;<li class="L8">    background-position: -25px -300px;<li class="L9">    cursor: default;<li class="L0">}<li class="L1">.pagination a span {<li class="L2">    display: none;<li class="L3">}<li class="L4">    .titel-slide, .pagination a, a.prev, a.next, .nav-tab {<li class="L5">    background-color: #444;<li class="L6">}<li class="L7">.slider-sh {<li class="L8">    background: #222 none repeat scroll 0 0;<li class="L9">    border: 1px solid #222;<li class="L0">    margin: auto;<li class="L1">   }
ثم ضع القالب الاتي من خلال لوحة الادارة .مظهر المنتدى. قوالب التومبلايت. ادارة عامة. قالب overall_header

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

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


















































كلمات البحث

برامج | سيارات | هاكات | استايلات | أكواد | الوان مجموعات | برمجه | منتديات عامه | العاب



توقيع : الوافي




رد مع اقتباس