معهد خبراء بلوجر - سلايدشوا ذاتي يتميز بالأناقة والسرعة والخفة

السلام عليكم ورحمة الله وبركاته ... أرجوا أن تكونوا في تمام الصحة والعافية
اما بعد -> فبعد طلب أحد الأعضاء لسلايدشوا ذاتي مثل الذي وضعه في صورته ... أتيت لكم اليوم بهذا السلايدشوا الرائع الذي يتميز بالأناقة والسرعة والخفة والأكثر من هذا أنه معرب :) :) :)

أول شئ أريد أن أنوه إلى أن السلايدشوا من تصميم سامبلكس ديزاين ومن تعريب مدونة تقارب :)

لن أطيل كثيرا فقط نمر إلى الخطوات :
أولا : قم بأخذ نسخة احتياطية من قالب مدونتك :)
ثانيا : إذهب الى لوحة التحكم في مدونتك وادخل الى "القالب" ومن ثم "تحرير html" ومن ثم نقوم بتوسيع القالب ونبحث من خلال ctrl+f عن

كود بلغة HTML:

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='رسائل المدونة الإلكترونية' type='Blog'/>

</b:section>

وضع فوقه /قبله الكود التالي :

كود بلغة HTML:

 <!-- featured entries -->

            <b:if cond='data:blog.url == data:blog.homepageUrl'>

                 <div class='sliderwrapper' id='featured-slider'>

                     <script>

                         document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label9+&quot;?max-results=&quot;+numposts4+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts4\&quot;&gt;&lt;\/script&gt;&quot;);

                     </script>

                     <div id='paginate-featured-slider'>

                         <ul>

                             <script>

                                  document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label9+&quot;?max-results=&quot;+numposts4+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts4a\&quot;&gt;&lt;\/script&gt;&quot;);

                             </script>

                         </ul>

                     </div>                

                 </div></b:if><!-- end of #featured-slider -->

                 <script type='text/javascript'>

                    featuredcontentslider.init({

                        id: &quot;featured-slider&quot;, //id of main slider DIV

                        contentsource: [&quot;inline&quot;, &quot;&quot;], //Valid values: [&quot;inline&quot;, &quot;&quot;] or [&quot;ajax&quot;, &quot;path_to_file&quot;]

                        toc: &quot;markup&quot;, //Valid values: &quot;#increment&quot;, &quot;markup&quot;, [&quot;label1&quot;, &quot;label2&quot;, etc]

                        nextprev: [&quot;&quot;, &quot;&quot;], //labels for &quot;prev&quot; and &quot;next&quot; links. Set to &quot;&quot; to hide.

                        revealtype: &quot;click&quot;, //Behavior of pagination links to reveal the slides: &quot;click&quot; or &quot;mouseover&quot;

                        enablefade: [true, 0.4], //[true/false, fadedegree]

                        autorotate: [true, 5000], //[true/false, pausetime]

                        onChange: function(previndex, curindex){ //event handler fired whenever script changes slide

                            //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)

                            //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)

                        }

                    })

                </script>

ثم ابحث مجددا عن ]]></b:skin> وضع قبلها/فوقها مباشرة الكود الموجود في الاسفل :

كود بلغة HTML:

/* /Features Slider */

#featured-slider {

position: relative; /*leave as is*/

overflow: hidden; /*leave as is*/

width:610px; /*width of featured content slider*/

height: 250px;

margin-bottom:10px;

}

#featured-slider .contentdiv{ /* do not change the name of class - The size of contentdiv is 495x270 (after excluding padding value) */

visibility: hidden; /*leave as is*/

position: absolute; /*leave as is*/

left: 0;  /*leave as is*/

top: 0;  /*leave as is*/

z-index:1;

width:380px;

background:#222;

}

#featured-slider .contentdiv img {

width:380px;

height:250px;

overflow:hidden;

}



#featured-slider .sliderPostPhoto { /* Wrapper for featured are photo and post title */

position:relative;

height: 250px;

width:380px;

overflow:hidden;

}

#featured-slider .sliderPostInfo { /* Post title and if enabled excerpt wrapper for featured slider */

position:absolute;

top:0;

left:0;

color:#ccc;

padding:20px 5px 10px;

background: url(http://img64.imageshack.us/img64/8492/bgtransparent.png);

font-size: 11px;

height:220px;

width:165px;

}

#featured-slider .sliderPostInfo p { /* Post excerpt style on featured slider */

color:#ccc;

font-size:12px;

padding-top:15px;

}

#featured-slider .featuredPostMeta { /* Post excerpt style on featured slider */

padding-top:15px;

}

#featured-slider .featuredPostMeta a { /* Post excerpt style on featured slider */

color:#ccc;

text-decoration:underline;

}

#featured-slider .featuredPostMeta a :hover{ /* Post excerpt style on featured slider */

text-decoration:none;

}

/* post titles by small thumbs on featured slider */

span.fea_thumb_title{

font-size:11px;

font-family:tahoma, verdana, sans-serif;

color:#ccc;

line-height:0.9em;

}

span.fea_thumb_title a{

color:#ccc;

}

span.fea_thumb_title a:hover{

color:#ccc;

}

#paginate-featured-slider { /* do not change the name of class - used to wrap thumbnails for featured area */

position: absolute; /*leave as is*/

right: 0;  /*leave as is*/

top: 0;  /*leave as is*/

z-index:1;

width:230px;

height:250px;

overflow:hidden;

background:#222;

}

#paginate-featured-slider ul {

width:505px;

padding-bottom:0;

list-style: none;

}

#paginate-featured-slider ul li {

display: block;

width:230px;

}

#paginate-featured-slider ul li a {

padding:7px 10px 5px 7px;

background:#52575C;

height:37px;

display:block;

border-bottom:1px solid #666;

overflow:hidden;

}

#paginate-featured-slider ul li a.last {

border-bottom:none !important;

}

#paginate-featured-slider ul li a:hover {

background:#444;

}

#paginate-featured-slider ul li a.selected {

background:#444;

}

#paginate-featured-slider .featured_thumb {

float:left;

margin-right:5px;

width:60px;

height:34px;

}

واخيرا ابحث عن </head> وضع قبله مباشرة الكود الموجود بالاسفل :

كود بلغة HTML:

<script src='http://tqarob.googlecode.com/files/contentslider.js' type='text/javascript'/>

<script type='text/javascript'>

 //<![CDATA[

imgr = new Array();

imgr[0] = "https://lh5.googleusercontent.com/-pQy6rquGCYU/TY7S7pYsnbI/AAAAAAAAAR4/e7trx7iIEAQ/s1600/tqarobnews.png";

showRandomImg = true;



aBold = true;



summaryPost = 140; 

summaryTitle = 25; 



numposts4 = 5; 





label9 = "اضافات بلوجر";

Title9 = "FEATURE";



function showrecentposts4(json) {

    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;

    img  = new Array();

    

      for (var i = 0; i < numposts4 ; i++) {

        var entry = json.feed.entry[i];

        var posttitle = entry.title.$t;

        var pcm;

        var posturl;

        if (i == json.feed.entry.length) break;

        for (var k = 0; k < entry.link.length; k++) {

              if (entry.link[k].rel == 'alternate') {

                posturl = entry.link[k].href;

                break;

              }

        }

        

        for (var k = 0; k < entry.link.length; k++) {

              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {

                pcm = entry.link[k].title.split(" ")[0];

                break;

              }

        }

        

        if ("content" in entry) {

              var postcontent = entry.content.$t;}

        else

        if ("summary" in entry) {

              var postcontent = entry.summary.$t;}

        else var postcontent = "";

        

        postdate = entry.published.$t;

    

    if(j>imgr.length-1) j=0;

    img[i] = imgr[j];

    

    s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);



    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;



    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';





    var month = [1,2,3,4,5,6,7,8,9,10,11,12];

    var month2 = ["يناير","فبراير","مارس","أبريل","مايو","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"];



    var day = postdate.split("-")[2].substring(0,2);

    var m = postdate.split("-")[1];

    var y = postdate.split("-")[0];



    for(var u2=0;u2<month.length;u2++){

        if(parseInt(m)==month[u2]) {

            m = month2[u2] ; break;

        }

    }



    var daystr = day+ ' ' + m + ' ' + y ;

    

    var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="430" height="242" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p><span class="featuredPostMeta">'+daystr+' | <a href="'+posturl+'">تابع القراءه »</a></span></div></div></div>';

        document.write(trtd);       

                

              j++;

    }

    

}



function showrecentposts4a(json) {

    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;

    img  = new Array();

    

      for (var i = 0; i < numposts4 ; i++) {

        var entry = json.feed.entry[i];

        var posttitle = entry.title.$t;

        var pcm;

        var posturl;

        if (i == json.feed.entry.length) break;

        for (var k = 0; k < entry.link.length; k++) {

              if (entry.link[k].rel == 'alternate') {

                posturl = entry.link[k].href;

                break;

              }

        }

        

        for (var k = 0; k < entry.link.length; k++) {

              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {

                pcm = entry.link[k].title.split(" ")[0];

                break;

              }

        }

        

        if ("content" in entry) {

              var postcontent = entry.content.$t;}

        else

        if ("summary" in entry) {

              var postcontent = entry.summary.$t;}

        else var postcontent = "";

        

        postdate = entry.published.$t;

    

    if(j>imgr.length-1) j=0;

    img[i] = imgr[j];

    

    s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);



    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;



    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';





    var month = [1,2,3,4,5,6,7,8,9,10,11,12];

    var month2 = ["يناير","فبراير","مارس","أبريل","مايو","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"];



    var day = postdate.split("-")[2].substring(0,2);

    var m = postdate.split("-")[1];

    var y = postdate.split("-")[0];



    for(var u2=0;u2<month.length;u2++){

        if(parseInt(m)==month[u2]) {

            m = month2[u2] ; break;

        }

    }



    var daystr = day+ ' ' + m + ' ' + y ;

    

    var trtd = '<li><a rel="'+i+'" class="toc" href="#"><img width="60" height="34" title="spain" alt="spain" class="featured_thumb" src="'+img[i]+'"/><span class="fea_thumb_title">'+posttitle+'</span></a></li>';                    

        document.write(trtd);       

                

              j++;

    }

    

}

//]]>

</script>

حسنا الان انتهينا وتبقى شئ واحد : واولا ان كان قالبك يحتوي على هذا الكود فلا ضرورة من اضافته
اذا نبحث عن وسم </head> واضف قبلها /فوقها الكود التالي :

كود بلغة HTML:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>