OddThemes © 2017
Buy the Theme for Premium Features
سلايد شو احترافي لمدونة بلوجر
سلايد شو احترافي لمدونة بلوجر

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

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

طبعاَ السلايد شو مهم في كل مدونة وكل موقع , ويعبر شيء تجميلي اساسي رائع يعطي منظر قوي للموقع ويجعل الزائر يرى مدى فخامته , اليوم معنا سلايد شو جميل وطريقة تركيبه بسيطه انشاءالله , انا قمت ببعض التعديلات عليه من ناحية 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/AVvXsEhVuKKJ4NtzDCvAtuNuY5jQY3antAb4ifdpqiIPKcXJPoleXVPVz8PdpuoBetmtHiSQ2Qz_sgIG2CnJocoem_YQNiKlLb4FpYglpYVyF-z1t3HMv_5_WV5Va7DxFifJEh9nSq62-PNg2Cg/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/AVvXsEjjqujsOOvdazPccruuFFwn06CNegc65gSdIOirPplx9gN6B5peCcR5h49-c8ziR_TOOOTfH9QV1IUD1MUZgug1DFAGZprpCj4xThEx6Dh2vpvG3eKp6XeKwMiUFBF5dv4Coc0EfKys908/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/AVvXsEhN2RyxFOT_AAtCtRtskBq9FZ-J_GmvD8ACQaKROYuK409VLRlunv8jrWHonjbj5M0rEcgOpOPN7Y0zTRtsT_aNDj1ab-FqCJD_FrPsMbIzEufuFyPxpfk3AyASFRYSzVEq23Y5cFVVWWw/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/AVvXsEg713jLiuXvN2KFgspOwAzOQ6Iiao1U6Holxn9AwhwZXqSy539aqxZTmmBDqvMlSkZjp2Vb0yU1uFoVKYJqKeuSji1wc0hhKw4bu9TKKGuCI12B4WYMsGIDwzHdrQRYLDd-6Y7vSP0_g0w/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/AVvXsEgDuRcb4zklYY6cpwTFip1ek4j4j-QnoWSYnQQSEUzfstchrow7a7nH8A5Bkv_QEPOq7x3NGCd2UXlR-JJtCeIKI71XvO2cCVdvfDRxaVWMHc9ARaXpLfrhrxNMnasiqeDzDfV8ebgBhVNq/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/AVvXsEhN2RyxFOT_AAtCtRtskBq9FZ-J_GmvD8ACQaKROYuK409VLRlunv8jrWHonjbj5M0rEcgOpOPN7Y0zTRtsT_aNDj1ab-FqCJD_FrPsMbIzEufuFyPxpfk3AyASFRYSzVEq23Y5cFVVWWw/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/AVvXsEhPA6rlENF-tW3hygIYt53wnl4IrEgVh1JA3fQLf-Ahc2IRKQTXEPYpjvfQCAUQFl-4pY2W2Iwcfhh18wvpxWIQYHFTw8ddkwEki-hCO18v-NJgUG6PxoN-sbgGaOGM3MbG44mFZU-ec9o/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/AVvXsEirOnVJ7Gn9DNnIGn31GoDzOWLGEhZPJ8tCzpw1BrkRx2UoFGMI-Tp43Yf5vBb1yue-KM1Ys2FbNqkyza6rOQiMbFI3PQlJvTRqcU4FQWnjFYrsxLQ0sCF-tFkQFMXMr8h7bppERNGFz1U/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/AVvXsEhN2RyxFOT_AAtCtRtskBq9FZ-J_GmvD8ACQaKROYuK409VLRlunv8jrWHonjbj5M0rEcgOpOPN7Y0zTRtsT_aNDj1ab-FqCJD_FrPsMbIzEufuFyPxpfk3AyASFRYSzVEq23Y5cFVVWWw/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/AVvXsEg713jLiuXvN2KFgspOwAzOQ6Iiao1U6Holxn9AwhwZXqSy539aqxZTmmBDqvMlSkZjp2Vb0yU1uFoVKYJqKeuSji1wc0hhKw4bu9TKKGuCI12B4WYMsGIDwzHdrQRYLDd-6Y7vSP0_g0w/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/AVvXsEhPA6rlENF-tW3hygIYt53wnl4IrEgVh1JA3fQLf-Ahc2IRKQTXEPYpjvfQCAUQFl-4pY2W2Iwcfhh18wvpxWIQYHFTw8ddkwEki-hCO18v-NJgUG6PxoN-sbgGaOGM3MbG44mFZU-ec9o/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/AVvXsEirOnVJ7Gn9DNnIGn31GoDzOWLGEhZPJ8tCzpw1BrkRx2UoFGMI-Tp43Yf5vBb1yue-KM1Ys2FbNqkyza6rOQiMbFI3PQlJvTRqcU4FQWnjFYrsxLQ0sCF-tFkQFMXMr8h7bppERNGFz1U/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>

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























1 التعليقات

هناك تعليق واحد:

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