سلايد شو يعمل تلقائياَ بالأقسام ( التسميات ) لمدونة بلوجر

قبل أن نضيف أي كود  بمدونة بلوجر ، يجب أن نأخذ  نسخة إحتياطية من قالب المدونة ،  ولكي نضيف السلايد شو الذي يعمل بألأقسام اي انه تختار قسم معين في مدونتك وسوف يعرض مواضيعه .  نتبع الخطوات التالية :

طريقة التركيب

(مع ضرورة أخذ نسخة إحتياطية من القالب قبل عمل أي تغير )

1- ندخل الى لوحة تحكم المدونة .  

 2- نضغط على كلمة  قالب  من القائمة الجانبية   مثل الصورة التالية :

بعد الضغط على كلمة قالب سوف تظهر لنا شاشة مثل الصورة التالية:

 ومن  تلك الصورة السابقة نضغط على تحرير   HTML    ، لكي يظهر لنا الصورة التالية:  

3- نبحث عن الكود التالي (اضغط على CTRL + F من الكيبورد لظهور عملية البحث ):

 ]]></b:skin>

4 - بعد أن نجد الكود السابق  نضيف قبله مباشرة  الكود التالي  :

 

/* http://it9an.com  */
#alwansd{
height: 397px;
margin: 0 0 20px 20px;
padding: 15px 17px 15px 16px;
width: 617px;
background: #373737;
border-top: 4px solid #00B4FF;
}
.alwanw{
position: relative;
height:385px;
}
.alwanw .contentdiv{
visibility: hidden;
position: absolute;
opacity: 1;
}
.alwan-ps{
text-align: right;
float: left;
width: 618px;
height: 11px;
margin-left: -1px;
}
.alwan-ps .toc{
font-size: 0px;
width: 50.5px;
height: 11px;
float: right;
background: #5b5b5b;
margin-left: 1px;
}
.alwan-ps a.selected{
background:#dfdfdf;
}
.alwan-ps .prev, .alwan-ps .next {display:none; }
.alwanip{
width: 597px;
padding: 10px !important;
bottom: 0;
float: left !important;
position: absolute;
background:url(http://3.bp.blogspot.com/--PmJCnAgSsc/USDs0q1v30I/AAAAAAAADoY/_nmnrEqXG4U/s1600/backslide.png);
}
.alwanip a{
color:#dcdcdc;
font: 12px droidkufi-bold;
margin:0;
padding:0;
line-height: 19px;
}
.alwanip h6{margin: 0;}
.alwanip h6 a:hover {color:#ffa800;}
.alwanip .alwand{font:12px arial; margin:4px 0; color:#a5a5a5; }
.alwanip p{font-size: 13px;
margin: 0;
color: #a5a5a5;
line-height: 23px;
}
.alwansf a img{float: right !important; }
.alwansf {float: right !important; width:100px !important;}
.column-center-outer {
width: 100%;
}

 

مع ملاحظة ضرورة تغيير 00b4ff# باللون الطاغي في مدونتك .

5- نبحث عن الكود التالي (اضغط على CTRL + F من الكيبورد لظهور عملية البحث ):

</head> 

6 - بعد أن نجد الكود السابق  نضيف قبله مباشرة  الكود التالي  :

&lt;script&gt;
/* Script from:http://7loll.blogspot.com/ */
imgr = new Array();
imgr[0] = &quot;http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg&quot;;
showRandomImg = true;
aBold = true;
summaryPost = 150;
numposts1 = 12;
label1 = &quot;Yourlabel&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;يناير&quot;,&quot;فبراير&quot;,&quot;مارس&quot;,&quot;ابريل&quot;,&quot;مايو&quot;,&quot;يونيو&quot;,&quot;يوليو&quot;,&quot;أغسطس&quot;,&quot;سبتمبر&quot;,&quot;أكتوبر&quot;,&quot;نوفمبر&quot;,&quot;ديسمبر&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;alwansf&quot;&gt;&lt;a  href=&quot;&#39;+posturl+&#39;&quot;&gt;&lt;img  width=&quot;617&quot; height=&quot;385&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;alwanip&quot;&gt;&lt;h6&gt;&lt;a  href=&quot;&#39;+posturl+&#39;&quot;&gt;&#39;+posttitle+&#39;&lt;/a&gt;&lt;/h6&gt;&lt;div  class=&quot;alwand&quot;  &gt;&#39;+daystr+&#39;&lt;/div&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;

 

مع ملاحظة ضرورة تغيير Your Label باسم القسم الذي سيتم عرض مواضيعه عشوائيا .

 

7- نبحث عن الكود التالي (اضغط على CTRL + F من الكيبورد لظهور عملية البحث ):

</body>

8 - بعد أن نجد الكود السابق  نضيف قبله مباشرة  الكود التالي  :

&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;



 

9- نبحث عن الكود التالي (اضغط على CTRL + F من الكيبورد لظهور عملية البحث ):

 

<div id='main-wrapper'>
أو
<div id='content'>
أو
<div id="content"></div>
أو
<div class='column-center-inner'>
او
<b:section class='main' id='main' showaddelement='no'>

 

10 - بعد أن نجد الكود السابق  نضيف قبله مباشرة  الكود التالي  :

 

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div id='alwansd'>
<div class='alwanw' 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='alwan-ps' id='paginate-slider1'>
</div>
</div>
</b:if>

11- نضغط على زر حفظ التغيرات   لكي يتم حفظ القالب .

جزى الله خيرا كل من ساهم فيه