الجمعة، 27 ديسمبر، 2013

تركيب سلايدشو بقسم محدد لمدونات بلوجر بدون اى اخطاء featured content slider

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






صورة لشكل السلايدر


كيفية تركيب سلايد شو :
قبل اضافة اى اكواد يجب اخذ نسخة احتياطية قبل وضع اى اكواد ومن هنا درس بسيط يعلمك طريقة اخذ نسخة احتياطية الان ناتى الى الطريقة فى البداية ادخل الى لوحة تحكم مدونتك ومن بعدها اضغط على القالب الأن اضغط على تحرير HTML
قم بالبحث عن هذا الكود :
 ]]></b:skin>
وضع فوقة مباشرة هذا الكود :
#featured{ margin-bottom:10px; } .sliderwrapper{ position: relative; border-bottom-width: 6px; height: 124px; } .sliderwrapper .contentdiv{ visibility: hidden; position: absolute; height: 100%; filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1; padding:15px 15px 15px 0px; background:#f1f1f1; border-radius: 5px 5px 5px 5px; box-shadow: 0 0 3px #ABABAB; margin-top:10px; } .pagination{ text-align: right; margin-top: 50px; padding:5px; } .pagination a{ font:11px Arial; color:#a3a3a3; padding:4px 8px 4px 8px; } .pagination a.selected{ color:#4f4f4f; } .pagination .prev,.pagination .next { color:#EAEAEA; font-size:0px; background:none; padding:0px; } .featuredPost{ width:410px; padding:0px 10px 10px 10px !important; bottom:0; float:left !important; margin-right: 54px; } .featuredPost a{ color:#515151; font: 18px "Microsoft Sans Serif"; margin:0; padding:0; } .featuredPost h2{margin:0 0 8px 0;} .featuredPost span{font-size:11px; margin:0; color:#797979;} .featuredPost p{font-size:12px; margin:4px 0 0 0; color:#797979;} .sliderPostPhoto a img{float: right !important;} .sliderPostPhoto{float: right !important; width:100px !important;}
ثم ابحث عن هذا الكود :
</head>
ضع فوقة مباشرة هذا الكود :
&lt;script&gt;
    /* Script from:http://simplexdesign.blogspot.com/ */
    imgr = new Array();
    imgr[0] = &quot;http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg&quot;;
    showRandomImg = true;
    aBold = true;
    summaryPost = 100;
    numposts1 =17;
    label1 = &quot;دروس بلوجر&quot;;
    function removeHtmlTag(strx,chop){var s=strx.split(&quot;&lt;&quot;);for(var i=0;i&lt;s.length;i++){if(s[i].indexOf(&quot;&gt;&quot;)!=-1){s[i]=s[i].substring(s[i].indexOf(&quot;&gt;&quot;)+1,s[i].length)}}s=s.join(&quot;&quot;);s=s.substring(0,chop-1);return s}
    function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i&lt;numposts1;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&lt;entry.link.length;k++){if(entry.link[k].rel==&#39;alternate&#39;){posturl=entry.link[k].href;break}}for(var k=0;k&lt;entry.link.length;k++){if(entry.link[k].rel==&#39;replies&#39;&amp;&amp;entry.link[k].type==&#39;text/html&#39;){pcm=entry.link[k].title.split(&quot;&quot;)[0];break}}
    if (&quot;content&quot; in entry) {
    var postcontent = entry.content.$t;}
    else
    if (&quot;summary&quot; in entry) {
    var postcontent = entry.summary.$t;}
    else var postcontent = &quot;&quot;;
    postdate = entry.published.$t;
    if(j&gt;imgr.length-1) j=0;
    img[i] = imgr[j];
    s = postcontent    ; a = s.indexOf(&quot;&lt;img&quot;); b = s.indexOf(&quot;src=\&quot;&quot;,a); c = s.indexOf(&quot;\&quot;&quot;,b+5); d = s.substr(b+5,c-b-5);
    if((a!=-1)&amp;&amp;(b!=-1)&amp;&amp;(c!=-1)&amp;&amp;(d!=&quot;&quot;)) img[i] = d;
    var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=[&quot;Jan&quot;,&quot;Feb&quot;,&quot;Mar&quot;,&quot;Apr&quot;,&quot;May&quot;,&quot;Jun&quot;,&quot;Jul&quot;,&quot;Aug&quot;,&quot;Sep&quot;,&quot;Oct&quot;,&quot;Nov&quot;,&quot;Dec&quot;];var day=postdate.split(&quot;-&quot;)[2].substring(0,2);var m=postdate.split(&quot;-&quot;)[1];var y=postdate.split(&quot;-&quot;)[0];for(var u2=0;u2&lt;month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;
    }}
    var daystr = day+ &#39; &#39; + m + &#39; &#39; + y ;
    var trtd = &#39;&lt;div class=&quot;contentdiv&quot;&gt;&lt;div class=&quot;sliderPostPhoto&quot;&gt;&lt;a href=&quot;&#39;+posturl+&#39;&quot;&gt;&lt;img width=&quot;155&quot; height=&quot;121&quot; class=&quot;alignnone&quot; src=&quot;&#39;+img[i]+&#39;&quot;/&gt;&lt;/a&gt;&lt;div class=&quot;sliderPostInfo&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;featuredPost&quot;&gt;&lt;h2&gt;&lt;a href=&quot;&#39;+posturl+&#39;&quot;&gt;&#39;+posttitle+&#39;&lt;/a&gt;&lt;/h2&gt;&lt;span&gt;&#39;+daystr+&#39;&lt;/span&gt;&lt;p&gt;&#39;+removeHtmlTag(postcontent,summaryPost)+&#39;...&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&#39;;
    document.write(trtd);
    j++;
    }}
    &lt;/script&gt;
ملحوظة :
قم بتغير كلمة دروس بلوجر الى القسم الذى يناسبك المحدد باللون الأصفر
قم بتغير رقم 17المحدد باللون الأخضر الى الرقم الذى تريدة وهو عدد عرض المواضيع
الأن قم بالبحث مرة اخرى عن هذا الكود :
</body>
ضع فوقة مباشرة هذا الكود :
  &lt;script src=&#39;http://dl.dropbox.com/u/12924430/contentslider.js&#39;&gt;&lt;/script&gt;
    &lt;script&gt;
    featuredcontentslider.init({
    id: &quot;slider1&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;#increment&quot;, //Valid values: &quot;#increment&quot;, &quot;markup&quot;, [&quot;label1&quot;, &quot;label2&quot;, etc]
    nextprev: [&quot;Previous&quot;, &quot;Next&quot;], //labels for &quot;prev&quot; and &quot;next&quot; links. Set to &quot;&quot; to hide.
    enablefade: [true, 0.5], //[true/false, fadedegree]
    autorotate: [true, 6000], //[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)
    }
    })
    &lt;/script&gt;
ابحث عن هذا الكود :
<div id='main-wrapper'>
ضع اسفلة مباشرة هذا الكود :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
                <div id='featured'>
                  <div class='sliderwrapper' id='slider1'>
                    <script>
                      document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
                    </script>
                  </div>
                  <div class='pagination' id='paginate-slider1'>
                  </div>
                </div>
              </b:if>
بالأخير قم بحفظ التغيرات وانتهى التركيب وستجد الاضافة تعمل معك بدون اى اخطاء وارجو بأن هذه الاضافة اعجبتكم وانتظرونى بأضافة اخرى جديدة (( لا خير فى كاتم العلم ))

ليست هناك تعليقات :

إرسال تعليق

قال تعالى ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )

الموافقة على نشر التعليقات

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