5 اضافة سلايد شو ذاتي التشغيل لمدونة بلوجر

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

واجريت عليه بعض التعديلات كى يتلائم مع تنسيق المدونات العربيه كذلك تم تعريبه بالكامل ولمشاهدة مثال حى عليه في قالبه الاصلي قم بالذهاب الي الرابط التالي من هنا     ,, الجميل في هذا السلايدر انه يعرض تدويناتك بطريقه اوتوماتيكيه دون الحاجه لتغيير روابط الصور و العنواين وغيره في كل مره مثل باقي السلايدرات المنتشره بكثره هذه الايام .. قد يسأل البعض ومادام هو بكل تلك المميزات فلماذا قمت بازالته من مدونتك ؟؟ !! الامر بسيط جدا ويرجع لسببين الاول هو ان مدونتي تهتم بالشروحات والدروس والاضافات وليست مجله اخباريه او مدونه ترفيهيه متنوعه . السبب الثاني هو الكلاسيكيه المفرطه التي تحكم قالب مدونتي فقد رايت انه لا يتناسب مطلقا مع حجم الهيدر و الاحجام الصغيره للادوات والمصغرات التي اخترتها لمدونتي .. لكى لا نذهب بعيدا الامر متروك لمن اراده فقط قم بالذهاب الي لوحة تحكم مدونة بلوجر ثم الي تحرير HTML  ابحث عن

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

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

 <!-- 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> وضع قبلها مباشرة الكود الموجود في الاسفل :

/* /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> وضع قبله مباشرة الكود الموجود بالاسفل :

<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>  وضع بلها مباشرة الكود التالي الخاص بمكتبة الجي كويري.

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

بقلم يونس لمدون

شاب مغربي اكتب حول تطوير مدونات بلوجر وتحسين التدوين العربي تقنيا وفنيا ، اتابع اخبار الشبكات الاجتماعية وكل ما له علاقة بتطوير التدوين

هل اعجبك هذا الموضوع ؟	إشترك عبر خدمة RSS تابعني عبر الفيس بوك تابعني على تويتر اشترك عبر البريد الالكتروني