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

Labels: اضافات بلوجربلوجر

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

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

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

طبعاَ السلايد شو مهم في كل مدونة وكل موقع , ويعبر شيء تجميلي اساسي رائع يعطي منظر قوي للموقع ويجعل الزائر يرى مدى فخامته , اليوم معنا سلايد شو جميل وطريقة تركيبه بسيطه انشاءالله , انا قمت ببعض التعديلات عليه من ناحية 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 التعليقات