سلايدشو احترافي يقوم بعرض مواضيع المدونه تلقائيا (سلايدشو ليوماجازين)

سلايدشو احترافي يقوم بعرض مواضيع المدونه تلقائيا (سلايدشو ليوماجازين)

بسم الله والصلاة والسلام على رسول الله , مرحبا بكم اخواني في كل جديد من مدونة جلال البعداني , اليوم باذن الله سوف سنتظرق الى كيفية اضافة سكريبت سلايد شو احترافي (سلايد شو قالب ليوماجازين) لمدونات بلوجر بطريقه سهله ومضمونه , طبعا هذا السلايد شو غني عن التعريف فمعظم المدونين يعرفونه , مايميز هذا السلايد شو انه يضفي لمسة جميلة على المدونات حيث يساهم بشكل كبير في إثارة انتباه الزائر إلى أكثر المواضيع أهمية في المدونه , ومن مميزاته ايضا انه يقوم بعرض اخر مواضيع المدونه بطريقه تلقائيه بشكل دون الحاجه الى ادراج روابط وصور المواضيع فيه,  الأمر بسيط جدا و سأحاول تبسيطه أكثر قدر الإمكان ان شاء الله

 

۞مشاهدة مثال حي للسلايدر شو ◄

 

كيفية اضافة هذه الاداه الى مدوناتكم

   1- من  لوحة التحكم -> قالب -> تحرير HTML

     2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات 

     3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+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/AVvXsEhkxaymPBtezMz5zhBrYQAEDJDqVmZSaj_KRo1Hj1dbVuOK1dPdadPC0HifD23SfmVGGRwlmKg9jdeA97EYs9xZedTnl8_jOKSonwvyUhDTGftdG-alkH-JnbFms3oBkiV1qnrR4Im283nY/s1600/sliderThumbs.png) repeat-x top;}
#featuredThumbs ul.direction-nav li .prev {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL_jStHuLe4_ENrFqzaj1bG19sBT-dr9DaHxTnpD6ZvaiYylI7_iElXowNkUFtQSbmoB_QLlOCkfknH1oBDw4PLfRVAdAY0tBPrRD7psrUvlb0oKTCbZnd5h4fHVOcttgZDJK1TSitEMBe/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/AVvXsEhxLDXedUg4rly8Dzkd_7Ecv98cSvS795K6iJb-z26gffkjCkaonDAhYEyN2PKMu13Pju28OhWvCyNvNcVnNo0DXMBicZpdI4DyrMUzGXnT1b0yFBsdJJTFQL2J0089TF66UX58pfgSC9mZ/s1600/slider-arrows-next.png) no-repeat center center;}
.mainSlideshows .preloader {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYJlYJH690maZl4VhKIXTaX6DXqLW0266wFnCSUjFwm6K4C24ukyz9A0H6H7yra9THkdtNDMvYMQ3paO-l0HyIa_S5-sABpR0IwydMBL2fR5zDOCPZI1grPuAYLjy5ccJN5dwqgUmrYEWx/s1600/ajax-loader.gif) center center no-repeat;
}

ثم قم بالبحث عن الكود التالي

</head>

 ** والصق الكود التالي قبله مباشره (فوقه) 

<script src='http://dl.dropboxusercontent.com/s/qd713000d962kms/jquery.flexslider-rtl.js' type='text/javascript'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1' type='text/javascript'></script>

وبالاخير قم بالبحث عن

<div id='main-wrapper'>

واذا لم تجده قم بالبحث عن احد الاكواد التاليه

<div id='main-wrapper'>

          او

<div id='content'>

          او

<div id="content"></div>

          او

<div class='column-center-inner'>

** و الصق الكود التالي بعده/أسفله :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='mainSlideshows clearfix mainBorder' id='mainSlideshows'>
<div class='clearfix' id='featuredPosts'>
<div class='preloader'/><!--End Loading-->
<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://alb33dani.com/feeds/posts/default/?published&amp;alt=json-in-script&amp;callback=labelthumbs' type='text/javascript'/>
</div><!--End Slides-->
</div><!--End featured Posts-->
<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://alb33dani.com/feeds/posts/default/?published&amp;alt=json-in-script&amp;callback=labelthumbs' type='text/javascript'/>
</ul>
</div>
</div><!--End SlideShow-->           
<script type='text/javascript'>
jQuery(document).ready(function($) {
    jQuery(&#39;#featuredThumbs&#39;).flexslider({
        namespace: &quot;&quot;,
        animation: &quot;slide&quot;,
        asNavFor: &#39;#featuredPosts&#39;,
        slideshow: false,
        controlNav: false,
        itemWidth: 105,
        itemMargin: 11,
        minItems: 2,
        maxItems: 6
    });
    jQuery(&#39;#featuredPosts&#39;).flexslider({
       namespace: &quot;&quot;,
        selector: &quot;.slides &gt; .slide&quot;,
        animation: &quot;slide&quot;,
        sync: &#39;#featuredThumbs&#39;,
        slideshowSpeed: 5000,
        animationSpeed: 900,
        animationLoop: true,
        slideshow: true,
        controlNav: false,
        directionNav: false,
        start: function(slider) {
            jQuery(&#39;.preloader&#39;).hide();
            jQuery(&#39;#featuredThumbs&#39;).show();
      }
    });
});
</script></b:if>

الان يجب عليك استبدال رابط مدونتي  http://alb33dani.com  برابط مدونتك  (ستجده مكرر مرتين)



وبالاخير قم بحفظ القالب وتمتع بمشاهدة السلايدرشو وهو يعرض اخر مواضيع مدونتك بطريقه تلقائيه وبدون بذل اي جهد او تعب من قبلك