عرض مشاركة واحدة
قديم 06-26-2012, 07:22 PM   #1
عماد عادل
مدون مميز
 
الصورة الرمزية عماد عادل
 
تاريخ التسجيل: May 2012
الدولة: تونس
المشاركات: 874
Smile سلايدشوا ذاتي يتميز بالأناقة والسرعة والخفة

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

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

لن أطيل كثيرا فقط نمر إلى الخطوات :
أولا : قم بأخذ نسخة احتياطية من قالب مدونتك :)
ثانيا : إذهب الى لوحة التحكم في مدونتك وادخل الى "القالب" ومن ثم "تحرير 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'/>

الدعم العربي

عماد عادل غير متواجد حالياً   رد مع اقتباس