بالنسبة لاول رابط الشرح يقول التالي :
افتح تحرير القالب ثم ابحث عن
وضع قبل التالي :
كود PHP:
#featuredContent{float:left;width:407px;margin-right:10px;display:inline}<br />
#featured-slider{position:relative;overflow:hidden;width:407px;height:245px}<br />
#featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:407px;min-height:30px;height:auto!important;background:url(http://4.bp.blogspot.com/-bp2HK6MdDXg/T5aB6vI5GPI/AAAAAAAAF98/gwCsmb8Fcks/s1600/transparant.png)}<br />
#featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}<br />
#featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px Tahoma;text-transform:none;padding:0 5px}<br />
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}<br />
#paginate-featured-slider{display:block;background-color:#f0f0f0;margin-bottom:0;padding:0 0 5px}<br />
#paginate-featured-slider ul{width:415px;padding-bottom:0;list-style:none}<br />
#paginate-featured-slider ul li{display:inline;width:75px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}<br />
#paginate-featured-slider img{padding-top:5px;background:#f0f0f0}<br />
#paginate-featured-slider a img{border-top:4px solid #f0f0f0}<br />
#paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}
وابحث عن : </ head>
وضع قبلها الكود التالي :
كود PHP:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/><br />
<script src='https://gleoz.googlecode.com/files/contentslider.js' type='text/javascript'/><br />
<br />
<script type='text/javascript'><br />
//<![CDATA[<br />
imgr = new Array();<br />
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";<br />
showRandomImg = true;<br />
<br />
aBold = true;<br />
<br />
summaryPost = 100;<br />
summaryTitle = 25;<br />
<br />
numposts3 = 5;<br />
<br />
function removeHtmlTag(strx,chop){<br />
var s = strx.split("<");<br />
for(var i=0;i<s.length;i++){<br />
if(s[i].indexOf(">")!=-1){<br />
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);<br />
}<br />
}<br />
<br />
s = s.join("");<br />
s = s.substring(0,chop-1);<br />
return s;<br />
}<br />
function showrecentposts3(json) {<br />
****j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;<br />
****img**= new Array();<br />
<br />
******for (var i = 0; i < numposts3; i++) {<br />
********var entry = json.feed.entry[i];<br />
********var posttitle = entry.title.$t;<br />
********var pcm;<br />
********var posturl;<br />
********if (i == json.feed.entry.length) break;<br />
********for (var k = 0; k < entry.link.length; k++) {<br />
**************if (entry.link[k].rel == 'alternate') {<br />
****************posturl = entry.link[k].href;<br />
****************break;<br />
**************}<br />
********}<br />
********<br />
********for (var k = 0; k < entry.link.length; k++) {<br />
**************if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {<br />
****************pcm = entry.link[k].title.split(" ")[0];<br />
****************break;<br />
**************}<br />
********}<br />
********<br />
********if ("content" in entry) {<br />
**************var postcontent = entry.content.$t;}<br />
********else<br />
********if ("summary" in entry) {<br />
**************var postcontent = entry.summary.$t;}<br />
********else var postcontent = "";<br />
********<br />
********postdate = entry.published.$t;<br />
****<br />
****if(j>imgr.length-1) j=0;<br />
****img[i] = imgr[j];<br />
****<br />
****s = postcontent****; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);<br />
<br />
****if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;<br />
<br />
****//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';<br />
<br />
<br />
****var month = [1,2,3,4,5,6,7,8,9,10,11,12];<br />
****var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];<br />
<br />
****var day = postdate.split("-")[2].substring(0,2);<br />
****var m = postdate.split("-")[1];<br />
****var y = postdate.split("-")[0];<br />
<br />
****for(var u2=0;u2<month.length;u2++){<br />
********if(parseInt(m)==month[u2]) {<br />
************m = month2[u2] ; break;<br />
********}<br />
****}<br />
<br />
****var daystr = day+ ' ' + m + ' ' + y ;<br />
<br />
****var trtd = '<div class="contentdiv"><a href="'+posturl+'"><img width="407" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';<br />
****document.write(trtd);<br />
<br />
<br />
****j++;<br />
}<br />
<br />
}<br />
<br />
function showrecentposts4(json) {<br />
****j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;<br />
****img**= new Array();<br />
<br />
******for (var i = 0; i < numposts3; i++) {<br />
********var entry = json.feed.entry[i];<br />
********var posttitle = entry.title.$t;<br />
********var pcm;<br />
********var posturl;<br />
********if (i == json.feed.entry.length) break;<br />
********for (var k = 0; k < entry.link.length; k++) {<br />
**************if (entry.link[k].rel == 'alternate') {<br />
****************posturl = entry.link[k].href;<br />
****************break;<br />
**************}<br />
********}<br />
********<br />
********for (var k = 0; k < entry.link.length; k++) {<br />
**************if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {<br />
****************pcm = entry.link[k].title.split(" ")[0];<br />
****************break;<br />
**************}<br />
********}<br />
********<br />
********if ("content" in entry) {<br />
**************var postcontent = entry.content.$t;}<br />
********else<br />
********if ("summary" in entry) {<br />
**************var postcontent = entry.summary.$t;}<br />
********else var postcontent = "";<br />
********<br />
********postdate = entry.published.$t;<br />
****<br />
****if(j>imgr.length-1) j=0;<br />
****img[i] = imgr[j];<br />
****<br />
****s = postcontent****; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);<br />
<br />
****if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;<br />
<br />
****//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';<br />
<br />
<br />
****var month = [1,2,3,4,5,6,7,8,9,10,11,12];<br />
****var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];<br />
<br />
****var day = postdate.split("-")[2].substring(0,2);<br />
****var m = postdate.split("-")[1];<br />
****var y = postdate.split("-")[0];<br />
<br />
****for(var u2=0;u2<month.length;u2++){<br />
********if(parseInt(m)==month[u2]) {<br />
************m = month2[u2] ; break;<br />
********}<br />
****}<br />
<br />
****var daystr = day+ ' ' + m + ' ' + y ;<br />
<br />
****var trtd = '<li><a class="toc" href="#"><img width="75" height="50" class="alignnone" src="'+img[i]+'"/></a></li>';<br />
****document.write(trtd);<br />
<br />
****j++;<br />
}<br />
<br />
}<br />
<br />
//]]><br />
</script>
الخطوة الثالثة اذهب للتخيطط واضف اداة JAVA / HTML
وضع بها الكود التالي :
كود PHP:
<div id='featuredContent'><br />
<div class='sliderwrapper' id='featured-slider'><br />
<script><br />
document.write("<script src=\"/feeds/posts/default/-/MARCADOR?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");<br />
</script><br />
</div><br />
<div id='paginate-featured-slider'><br />
<ul><br />
<script><br />
document.write("<script src=\"/feeds/posts/default/-/MARCADOR?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");<br />
</script><br />
</ul><br />
<div class='clear'></div><br />
</div><br />
<script type='text/javascript'><br />
featuredcontentslider.init({<br />
id: "featured-slider", //id of main slider DIV<br />
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]<br />
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]<br />
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.<br />
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"<br />
enablefade: [true, 0.4], //[true/false, fadedegree]<br />
autorotate: [true, 5000], //[true/false, pausetime]<br />
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide<br />
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)<br />
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)<br />
}<br />
})<br />
</script><br />
</div>
وطبعا ضع السلايد بالوسط او باي مكان تحتاجه
وتقدر تتحكم بعرض السلايد او اي شي تريده بالتغيير في الس اس اس في الخطوة الاولي
شرح الرابط الثاني في الرد القادم