1. الرئيسية
  2. شروحات بلوجر
  3. السلايد شو مهم في كل مدونة وكل موقع , ويعبر شيء تجميلي اساسي رائع يعطي منظر قوي للموقع ويجعل الزائر يرى مدى فخامته

السلايد شو مهم في كل مدونة وكل موقع , ويعبر شيء تجميلي اساسي رائع يعطي منظر قوي للموقع ويجعل الزائر يرى مدى فخامته

2:00 م



بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته .

سلايد شو احترافي لمدونة بلوجر

طبعاَه السلايد شو مهم في كل مدونة وكل موقع , ويعبر شيء تجميلي اساسي رائع يعطي منظر قوي للموقع ويجعل الزائر يرى مدى فخامته , اليوم معنا سلايد شو جميل وطريقة تركيبه بسيطه انشاءالله , انا قمت ببعض التعديلات عليه من ناحية css وقمت بنقله .



صورة : 

سلايد شو احترافي لمدونة بلوجر
سلايد شو احترافي لمدونة بلوجر


طريقة التركيب : 



  • ادخل مدونتك .
  • القالب.
  • حرر القالب وابحث عن </head>
  • الصق هذا الكود قبلها : 



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<style>
.container {
max-width: 1000px;
}
.container:before, .container:after {
content: " ";
display: table;
}
a {
text-decoration: none;
}
.container {
margin-left: auto;
margin-right: auto;
padding-right: 15px;
padding-left: 15px;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.row:before, .row:after {
content: " ";
display: table;
}
#slider {
height: 200px;
overflow: hidden;
}
#slider {
margin-left: -6px;
margin-right: -5px;
}
#sliderContent {
width: 1000px;
margin-right: auto;
margin-left: auto;
}
.list_carousel ul {
list-style: none;
width: 950px;
margin-left: 12px;
padding-bottom:5px;
}
.prev {
display: block;
width: 64px;
height: 68px;
position: relative;
float: right;
top: -140px;
right: -5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXZ7uyNDUVEbGoOI2DthXeyjf45_Ohcyh0Y4UTPFj6qnvbfdN7GUEeu99U-zdvs9RnUkdsIAxXvcZVqOcEyOUIii4mI57qVUQkvDWdVlr21jnl18mYqvVdjYlobSAobGEw7agYg2ullw0/s68/right.png) no-repeat;
}
.next {
display: block;
width: 65px;
height: 68px;
position: relative;
float: left;
right: -50px;
top: -140px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiojVYkMzLiJuRM6CG2srpRS8o-kKvzjPq70prM9mTDx-6Rk16FEhN9kJ53cJ0OSW5JXEicXRSp_M4JNbjWITWPdaXwP7K636UKwY8QosVJIGyEtvpjVt5BfkY9_MvXSPHLpkKqKls26uc/s68/left.png) no-repeat;
}
#sliderContent .list_carousel li {
width:231px;
height:180px;
color: #999;
text-align: center;
padding: 0;
display: block;
float: left;
margin-right:10px;
margin-left:5px;
background: #FFF;
-webkit-box-shadow: 1px 0px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 0px 3px rgba(0,0,0,0.2);
box-shadow: 1px 0px 3px rgba(0,0,0,0.2);
margin-bottom:3px;
}
#sliderContent .slidPost a {
overflow:hidden;
display:block;
text-align: right;
}
#sliderContent .list_carousel li a img {
width:201px;
height:127px;
margin-top:5px;
margin-bottom:5px;
-webkit-box-shadow: 1px 0px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 0px 3px rgba(0,0,0,0.2);
box-shadow: 1px 0px 3px rgba(0,0,0,0.2);
-webkit-transition: all 250ms linear;
-moz-transition: all 250ms linear;
-o-transition: all 250ms linear;
-ms-transition: all 250ms linear;
transition: all 250ms linear;
}
#sliderContent .list_carousel li a img:hover {
-webkit-transform: scale(1.050);
-moz-transform: scale(1.050)
-o-transform: scale(1.050)
-ms-transform: scale(1.050)
transform: scale(1.050)
}
#sliderContent .list_carousel #foo2 li a h2 {
font: 12px Droid Arabic Kufi;
color: #555;
margin-top: -8px;
direction: rtl;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
font-size: 0;
}
</style>



  • الان ادخل التخطيط .
  • ثم اضف اداة جديدة عبارة عن html/javascript
  • والصق هذا الكود فيها مع تعديل ما سأذكره : 


<div class=" container">
<div class="row">
<div class="col-lg-12">
<!--Recent Video Section-->
<div class=" container">
<div class="row">
<script src="https://dl.dropboxusercontent.com/s/pn2ar7inc38199o/jquery.carouFredSel-6.2.0-packed.js" type="text/javascript"></script>
<div id="slider">
<script language="javascript" type="text/javascript">
$(function() {
// Basic carousel, no options
$('#foo0').carouFredSel();
// Basic carousel + timer, using CSS-transitions
$('#foo1').carouFredSel({
auto: {
pauseOnHover: 'resume',
progress: '#timer1'
}
}, {
transition: true
});
// Scrolled by user interaction
$('#foo2').carouFredSel({
auto: false,
prev: '#prev2',
next: '#next2',
pagination: "#pager2",
mousewheel: true,
swipe: {
onMouse: true,
onTouch: true
}
});
});
</script>
<div id="sliderContent">
<div class="list_carousel">
<div class="caroufredsel_wrapper" style="display: block; text-align: start; float: none; position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: auto; width: 984px; height: 183px; margin: 0px 0px 0px 12px; overflow: hidden;"><ul id="foo2" style="text-align: left; float: none; position: absolute; top: 0px; right: auto; bottom: auto; left: 0px; margin: 0px; width: 5904px; height: 183px;"><li><a href="#">
<img alt="basketball" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGUJ_iXZ_2R1HCeegfXsvTZJCtvSpUamMJpzErgOvQeuP_czryuRN9cpQRDlNr_1R5IxdSGIrvWNgb1SkQFbDPNjS-fUesRV7qMPOKEt7aJJ9I3b9xC8FVQtQ9q2-Dti9gCy9xxsfJTWM/s1600/IMG_1167_zps9845fe69.png" width="140"></a><a href="#"><h2>مثال تجريبي </h2></a></li><li><a href="#">
<img alt="basketball" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbjDBownsi00Ah-wfRHyp8duuIdi7zZFMD1HiSB-51-M5_-lLHkjh7FOFebhQPJUpwevWCX7ROjUHmRWjM_ycV9-H55mie0w9TxnfE0jVJAOsdc_anemD7JTvY1q3rY8jpcheI43jzBDA/s1600/1.jpg" width="140"></a><a href="#"><h2>مثال تجريبي </h2></a></li><li>
<a href="#">
<img alt="basketball" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcb9VOjHmejW0HHtITClFIZLIyOvTCHHrUtzo6lHrxCByUSMGAmSQaGqU6Y2RjuKxOmsJIZTdTFHQcLitflxrgGo6s889Uv2IBto1b4FjYbb4QGPLo2yh2rt7N6YjMp6SO0AiLlA0XfmGn/s1600/%D8%A8%D8%B5%D9%88%D8%A9.jpg" width="140"></a><a href="#"><h2>مثال تجريبي</h2></a></li><li><a href="#">
<img alt="basketball" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGUJ_iXZ_2R1HCeegfXsvTZJCtvSpUamMJpzErgOvQeuP_czryuRN9cpQRDlNr_1R5IxdSGIrvWNgb1SkQFbDPNjS-fUesRV7qMPOKEt7aJJ9I3b9xC8FVQtQ9q2-Dti9gCy9xxsfJTWM/s1600/IMG_1167_zps9845fe69.png" width="140"></a><a href="#"><h2>مثال تجريبي </h2></a></li>
<li><a href="#">
<img alt="basketball" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIoIxb7hDNiMALWjJ5npuNLNlaaQAcJ2O_ZdT4PqNsRl2I9rhyphenhyphenbLKu19oLZ_A27XrURevPWJHqESyqV9VeQzbTF1Am5t7Np87rjxyWEb18z8IvAUaqkoxCWvwFcyWC2xGNw2ZZOrkURoU/s1600/0_a494f_ed9326a1_orig.jpg" width="140"></a><a href="#"><h2>مثال تجريبي </h2></a></li>
<li><a href="#">
<img alt="basketball" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzTCunw_7IsDnTSDH4FFLXkLViPX1Ytauy8Z75Uzfb1Zy-z6lQ11beziryYwj_DINV6RhhlTvf7YsvA8CSNV3cysspYL2Vl_6t4as76PJrpeI2W2jPgIWuboIPMg_bDxtV5eyHvvkfqak/s1600/big-red-treefrog.jpg" width="140"></a><a href="#"><h2>مثال تجريبي </h2></a></li>
<li><a href="#">
<img alt="basketball" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGUJ_iXZ_2R1HCeegfXsvTZJCtvSpUamMJpzErgOvQeuP_czryuRN9cpQRDlNr_1R5IxdSGIrvWNgb1SkQFbDPNjS-fUesRV7qMPOKEt7aJJ9I3b9xC8FVQtQ9q2-Dti9gCy9xxsfJTWM/s1600/IMG_1167_zps9845fe69.png" width="140"></a><a href="#"><h2>مثال تجريبي </h2></a></li>
<li><a href="#">
<img alt="basketball" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbjDBownsi00Ah-wfRHyp8duuIdi7zZFMD1HiSB-51-M5_-lLHkjh7FOFebhQPJUpwevWCX7ROjUHmRWjM_ycV9-H55mie0w9TxnfE0jVJAOsdc_anemD7JTvY1q3rY8jpcheI43jzBDA/s1600/1.jpg" width="140"></a><a href="#"><h2>مثال تجريبي </h2></a></li>
<li><a href="#">
<img alt="basketball" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIoIxb7hDNiMALWjJ5npuNLNlaaQAcJ2O_ZdT4PqNsRl2I9rhyphenhyphenbLKu19oLZ_A27XrURevPWJHqESyqV9VeQzbTF1Am5t7Np87rjxyWEb18z8IvAUaqkoxCWvwFcyWC2xGNw2ZZOrkURoU/s1600/0_a494f_ed9326a1_orig.jpg" width="140"></a><a href="#"><h2>مثال تجريبي </h2></a></li>
<li><a href="#">
<img alt="basketball" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzTCunw_7IsDnTSDH4FFLXkLViPX1Ytauy8Z75Uzfb1Zy-z6lQ11beziryYwj_DINV6RhhlTvf7YsvA8CSNV3cysspYL2Vl_6t4as76PJrpeI2W2jPgIWuboIPMg_bDxtV5eyHvvkfqak/s1600/big-red-treefrog.jpg" width="140"></a><a href="#"><h2>مثال تجريبي </h2></a></li>



</ul></div>
<div class="clearfix"></div>
<a class="prev" href="#" id="prev2" style="display: block;"></a>
<a class="next" href="#" id="next2" style="display: block;"></a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div><!-- /.container -->
</div>
</div>
</div>

الاحمر : نص الموضوع .
الازرق : رابط الموضوع .
 الاصفر : رابط الصورة

شارك هذا الموضوع

اشترك فى المدونة

مواضيع ذات صلة

0 التعليقات

الاشتراك في: تعليقات الرسالة (Atom)