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

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

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/AVvXsEhggsxz-r5rshQMCWTyI8ychUHJWI-ymu_xZsi5w6SCUlKx_8H5otyjxHHBxdghge6cYdcSZbxLnGHxCBlsfsxU0XhbJIAwgDA424LM2Xz0TAbEBkBtJNdNlm5-8uSkuMYF2OhWP-cjGhbA/s1600/sliderThumbs.png) repeat-x top;}
#featuredThumbs ul.direction-nav li .prev {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg5Emx4LAVaIyqSBlFP24-S6eLePxXleXRsQvH1X07I_PfQlc6JICf4hugWQgKdrJgX6oZORUME9KDFOvarUiDu42iF9h9c2PWeqvkqvB2bqom0G3j_qCW21iqYHuRto3CkBnDqYxIOIlI/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/AVvXsEimzXboM8ou-nCfa8y1P9wnRKWAba9irYoGi5R77XrtUOwd76K6umLUylxRcctpbFCEOfYv8KA4HOQM41DdOX3sxxZYawf6AK1A1WAgwLI40SpPuR8HhriiWoUeONfSC0YNOg2hsNsZMdUU/s1600/slider-arrows-next.png) no-repeat center center;}
.mainSlideshows .preloader {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQtlWr50M9bft9x_Z3_vOR5f7PowRb9tvDe-2IVElk2GnFJkBr0B9u-0tcoAtFsM1r0y4XBd58jYKBGt2BSvJP_S74rUCYpFAL8fCjFES7UJhT4CaMcU6o1DuhAiVdvfv2pYu8MVzlMqd6/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://browser-inf.blogspot.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://browser-inf.blogspot.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://browser-inf.blogspot.com/ برابط مدونتك (ستجده مكرر مرتين)

Unknown

Add Comment