مبدع الشروحات |كل ماهو جديد من برامج وتطبيقات ودروس بلوجر|Mobd3

السلام عليكم ورحمة الله وبركاته في درس جديد انشاء الله ساقدم لكم فيه سلايد شو لمدونة المحترف للمعلوميات وساريكم ايضا كيفية تركيبه على مدونتكم

اولا نتوجه الى تحرير قالب ونضغط على CNTRL+F ونكتب الكود التالي

]]></b:skin>

بعدما نجد الكود نلصق الكود التالي قبله مباشرة اي فوقه

.mainSlideshows {
width: 628px !important;height: 460px;margin-bottom: 20px;
position: relative;border: none;padding:10px;background:#fff;overflow:hidden;
}.mainSlideshows .sliderloader {position: absolute;top: 0;bottom: 0;left: 0;right: 0;}
#featuredPosts {overflow: hidden;height: 350px;width:628px;}
#featuredPosts .slide {display: none;position: relative;
width:628px;height:350px;}
#featuredPosts .slide img {float: left;width:628px;height:350px;}
#featuredPosts .slide .text {position: absolute;bottom: 0px;
left: 20px;z-index: 2;}
#featuredPosts .slide .text p {margin: 0px 60px 0px 0px;padding: 10px;}
#featuredPosts .slide .text h3 {font-size:16px;font-weight:bold;
text-shadow: 1px 1px 1px #017bb4;
margin: 0;padding: 10px;display: inline-block;
position: relative;top: 0px;}
#featuredPosts .slide .overlay {
position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 1;}
#featuredThumbs {position: relative;padding: 0px 20px;height:110px;}
#featuredThumbs ul {margin: 0;padding: 0;list-style: none;}
#featuredThumbs li {margin: 15px 14px 15px 0;padding: 0;
list-style: none;float: left;width:105px;max-width:105px;height:80px;
overflow:hidden;}
#featuredThumbs li img {float: left;cursor: pointer;
filter: grayscale(100%);-moz-filter: grayscale(100%);
-webkit-filter: grayscale(100%);width:105px;max-width:105px;
height:80px;border-radius: 0px;box-shadow: none;}
#featuredThumbs li img:hover, #featuredThumbs li.active-slide img {
filter: none;-moz-filter: none;-webkit-filter: none;width:105px;
max-width:105px;}
#featuredThumbs ul.direction-nav {}
#featuredThumbs ul.direction-nav li {margin: 0;}
#featuredThumbs ul.direction-nav li a {
display: block;width: 15px;height: 15px;text-indent: -9999px;
position: absolute;top: 50px;right: -10px;padding:5px 2px;}
#featuredThumbs ul.direction-nav li a.prev {left: -10px;right: 620px;}
#featuredThumbs ul.direction-nav li a:hover {
opacity: .7;filter: alpha(opacity=70);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";}
#featuredPosts .slide .text, #featuredPosts .slide .text a {color: #fff;}
#featuredPosts .slide .text p {color:#FFF;text-shadow: 1px 1px #000;
background: rgba(0, 0, 0, 0.8);padding: 10px;}
#featuredPosts .slide .text h3 {background:  #21b8ff;}
#featuredThumbs {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_66_IH3hiMVW3bVMBYTZCg5FCgtRbVYJYq4a5ung3stCD0RQ_mujSK6buQfXDpuOvZbkxPOz9nIwPSZ66DAPxTdXLFOqsyMklXSPDp1wRry6n22-yd3YDXxTM6MmRwIDG5gQ-TF79cDgt/s1600/sliderThumbs.png) repeat-x top;}
#featuredThumbs ul.direction-nav li .prev {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibde0cG1AGVQTVUd2eskOvX9B0d8nQVkoqnZV59SKW5ldLf4TTBqqeGpARSWwM-bGhyXFnwATqQEVB3VyBYiSYl-WPbnp0hEz_VVJ3EccGMzab5bFpgAmubilQl2tpgsyxR4EwxAtujzc9/s1600/slider-arrows-prev.png) no-repeat center center;}
#featuredThumbs ul.direction-nav li .next {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsEC3EuncJR7dndeMg8HwZ4H7C3zv1CVW5hBxxzrgVcyosaDp7ZJFw5Q0l2YoSQjT_RYeA-aAb5dAx-8rX-mnsTkTRJulPmfGiWpq7br4CVM8MmF2OYSwlnRsc1gqNsRyIdBCB8XhbtKGg/s1600/slider-arrows-next.png) no-repeat center center;}
.mainSlideshows .preloader {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisZjV_mG1mrwwfuFcLa2a7YqcuQ0xBdtqB02me39TegeTASaw1ogUluu4dvZCZbDYaP6-yfCv6P1DOpO0rQiEFJlJZUZA4LpL171uJRheLxD6QwKW0xL__Kun4q9q08DYCTXvqwaefVK09/s1600/ajax-loader.gif) center center no-repeat;
}

ثم نقوم بالخطوة التالية ونبحث على </head> و نلصق الكود التالي ايضا فوق

واخيرا نبحث على احد من هذه الاكواد

او

او

او

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

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='mainSlideshows clearfix mainBorder' id='mainSlideshows'>
<div class='clearfix' id='featuredPosts'>
<div class='preloader'/>

<div class='slides'>
 <script src='http://yourjavascript.com/9138228314/slide1.js'/>  <script type='text/javascript'>
var numposts = 20;
var showpostthumbnails = false;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;
</script>   
<script src='http://mobdi3explain.com/feeds/posts/default/?published&alt=json-in-script&callback=labelthumbs' type='text/javascript'/>
</div>

</div>

<div class='clearfix' id='featuredThumbs'>
<ul class='slides'>
<script src='http://yourjavascript.com/1391494332/slide2.js'/>
<script type='text/javascript'>
var numposts = 10;
</script>
<script src='http://mobdi3explain.com/feeds/posts/default/?published&alt=json-in-script&callback=labelthumbs' type='text/javascript'/>
</ul>
</div>
</div>
           
<script type='text/javascript'>
jQuery(document).ready(function($) {
    jQuery('#featuredThumbs').flexslider({
        namespace: "",
        animation: "slide",
        asNavFor: '#featuredPosts',
        slideshow: false,
        controlNav: false,
        itemWidth: 105,
        itemMargin: 11,
        minItems: 2,
        maxItems: 6
    });
    jQuery('#featuredPosts').flexslider({
       namespace: "",
        selector: ".slides > .slide",
        animation: "slide",
        sync: '#featuredThumbs',
        slideshowSpeed: 5000,
        animationSpeed: 900,
        animationLoop: true,
        slideshow: true,
        controlNav: false,
        directionNav: false,
        start: function(slider) {
            jQuery('.preloader').hide();
            jQuery('#featuredThumbs').show();
      }
    });
});
</script></b:if>

الان ما عليك الا بالبحث على رابط مدونتي http://mobdi3explain.blogspot.com ثم قم بالستبداله برابط مدونتك وتكون قد انتهيت بتركيب السلايد شو على مدونتك

كاتب الموضوع: محمد الوهابي

محمد الوهابي، من مواليد 1994 من المغرب،الهواية، التدوين الالكتروني، مهتم كثيرا بالتكنولوجيا، وابحث دائما عن كل ماهو جديد لتقديم شروحات ومقالات مفيدة وذالك للارضاء الجميع وتحقيق الافضل.

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

كاتب الموضوع: محمد الوهابي

هناك ايضا