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

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

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

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

طبعاَ السلايد شو مهم في كل مدونة وكل موقع , ويعبر شيء تجميلي اساسي رائع يعطي منظر قوي للموقع ويجعل الزائر يرى مدى فخامته , اليوم معنا سلايد شو جميل وطريقة تركيبه بسيطه انشاءالله , انا قمت ببعض التعديلات عليه من ناحية 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/AVvXsEhx3vdIgQGNYWuwyS-9zo1tgSVtOVvuo6tukxGH_vzx-jRqasSbCny27auB6FY2uk9TuLOMH_4kIpavKuJv5e33aFJa0ah3JNPUvp79QnNrjf8vPyf285x6egeVR2ooSBHMXQ0s65BzrnY/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/AVvXsEgkcrNNvCal6Ozh5hPzeq2996Y7Gp0A1YGd-fv0iLwejP4dA9o-r0GSdaor50loOWlS4Zc63O_gh7zhEMCewW3OW1Qk3g10LYz-EhKIrBV6aUoQ_b6Ynee4b5TsjgaUnyIjGpd1_YTocQ4/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/AVvXsEhX1Iye3YUrUgIQQv65hyphenhyphenbmyD1OOnAyA58KI3gsT7nyh2u-3e8xoZYFjeowgBmOuclq1GoFI5hGVjUPX0w7e0yx0_ceWmiE3OeQSP8HACosPa0Bi6BXCnjU2UkbGIiCSMm3qlSIfw4ZLXc/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/AVvXsEjc2HHTiXlMG4urCrJsgs9rS5N8J6ZfzChC4TloNqzr82LmLvN6IgfldRuIZAhyphenhyphenJicGcXehwPGQvGgkUWrzyjDP8ExE1OFnIfPPMMcTqR6q8EPKq-3Qa9vUdRYhF6zSku1zg2G-e9DfRJA/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/AVvXsEjC0R61PAGM9vWfXkozCKo2qDxCklLRQ3K_h96hAl-YYtyM7-2l9el_YYEpb5Ary9F_B7n4sTNi_SdbCOgLpyJAJ6IzmIgxkV1GaUKAUuATN1-Z47AhmcE9Nb4z_zxgZnYKp6XKvm8l7sXo/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/AVvXsEhX1Iye3YUrUgIQQv65hyphenhyphenbmyD1OOnAyA58KI3gsT7nyh2u-3e8xoZYFjeowgBmOuclq1GoFI5hGVjUPX0w7e0yx0_ceWmiE3OeQSP8HACosPa0Bi6BXCnjU2UkbGIiCSMm3qlSIfw4ZLXc/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/AVvXsEjuYVQBHTDA2WxG4w5Zr19oSxp9F3E5zty3YGYyf-9HEnvIapyHZISzpeFcw0m__bvvCdn7TK0RGfxRxFHz4W8XSWD3zC49109l8hxeVaVP0w2cvTWGlQQYah_L2YSfpVsUuMNN7v2Jn-o/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/AVvXsEgAHqGXUARZldK4R7POX78w_gHHo6or2NnNy0Fp66wbH3e6EM1dTVJAnAXG9xR1uSsjIGJG_8yh1kUzHOnYPrxhW-uxZCsklHYh63UuXqKWKRzbCDR2VvrNfhclWG8nyVAGLYPn2h4SDzI/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/AVvXsEhX1Iye3YUrUgIQQv65hyphenhyphenbmyD1OOnAyA58KI3gsT7nyh2u-3e8xoZYFjeowgBmOuclq1GoFI5hGVjUPX0w7e0yx0_ceWmiE3OeQSP8HACosPa0Bi6BXCnjU2UkbGIiCSMm3qlSIfw4ZLXc/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/AVvXsEjc2HHTiXlMG4urCrJsgs9rS5N8J6ZfzChC4TloNqzr82LmLvN6IgfldRuIZAhyphenhyphenJicGcXehwPGQvGgkUWrzyjDP8ExE1OFnIfPPMMcTqR6q8EPKq-3Qa9vUdRYhF6zSku1zg2G-e9DfRJA/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/AVvXsEjuYVQBHTDA2WxG4w5Zr19oSxp9F3E5zty3YGYyf-9HEnvIapyHZISzpeFcw0m__bvvCdn7TK0RGfxRxFHz4W8XSWD3zC49109l8hxeVaVP0w2cvTWGlQQYah_L2YSfpVsUuMNN7v2Jn-o/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/AVvXsEgAHqGXUARZldK4R7POX78w_gHHo6or2NnNy0Fp66wbH3e6EM1dTVJAnAXG9xR1uSsjIGJG_8yh1kUzHOnYPrxhW-uxZCsklHYh63UuXqKWKRzbCDR2VvrNfhclWG8nyVAGLYPn2h4SDzI/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>

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




عند النقل المصدر :) 

عبدالله الحربي - من السعوديه مهتم في مجال التدوين بشكل عام وفي بلوجر بشكل خاص , اهوى تصميم القوالب وتكويدها , انشر المحتوى المفيد لي ولزوار مدونتي واعضائها , انتهى.
لا تنسى متابعتي :

عند نقلك للموضوع او نسخه , حاول ان تذكر المصدر لينتفع الزائر في حال اراد المزيد من المساعده , وايضاَ احتراما وتقديراَ للجهود المبذولة في المواضيع.

معلومات عن التدوينة

صورة التدوينة

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

ملخص التدوينة:

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

goust

الساعه : 2014-03-14T16:08:00+03:00

تاريخ : 14‏/03‏/2014

من : المملكة العربيه السعوديه

التعليقات : 8

انشرها :

تاق :