اهلا بمتتبعي مدونة سوفت ترايد في درس جديد و مفيد .
من أهم و أكثر الإضافات استعمالا السلايد شو حيث يقدم للزائر أو المتابع أخر الأخبار أو المقالات بتصميم جميل و مميز .
إضافة سلايد شو تلقائي لمدونات بلوجرد
إضافة سلايد شو تلقائي لمدونات بلوجرب
إضافة سلايد شو تلقائي لمدونات بلوجري
إضافة سلايد شو تلقائي لمدونات بلوجرب
إضافة سلايد شو تلقائي لمدونات بلوجري
ستنطرق الأن إلى واحد من أكثر ال slideshows إستعمالا : سلايد شو مدونة المحترف
و من مميزاته أنه يتناسب مع أغلبية المواقع بمختلف تصاميمها .
معاينة :
طريقة تركيب السلايد شو :
1- أولا قم بأخذ نسخة إحتياطية لتفادي أي مشكلة قد تواجهها .
2- توجه إلى لوحة التحكم خاصتك على بلوجر
3- توجه نحو تعديل القالب
إبحث عن الكود التالي : (يمكنك البحث عبر الضغط على ctrl+f)
فوقه مباشرة (قبله) أضف الكود التالي :
height: 428px;
margin: 0 0 0px 0px;
padding: 15px 28px 15px 16px;
width: 672px;
background: #373737;
}
.alwanw{
position: relative;
height:385px;
}
.alwanw .contentdiv{
visibility: hidden;
position: absolute;
opacity: 1;
}
.alwan-ps{
text-align: right;
float: left;
width: 670px;
height: 11px;
margin-left:-43px;
}
.alwan-ps .toc{
font-size: 0px;
width: 102px;
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: 618px;
padding: 10px !important;
bottom: 0;
float: left !important;
position: absolute;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB1PPocDZfaiJWgv5NRcxl7qlxA0pjvcaa_lpPG_YW3XGsyjMLmClnjN5p5B2owVmBLYgZ-4d0HKB7pCSDP5jf_TbEhyphenhyphen2gCiAEEPn7KsX0LD05YgoHJYHnFQUqxMHtEnejhGglqYKHws4/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:#c2df00;}
.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:680px!important;}
.column-center-outer {
width: 680px;
}
|
ابحث من جديد عن :
</head>
قبله مباشرة أضف الكود التالي : (غير كلمة "كل" بإسم القسم الذي تريده أن يظهر في السلايد شو)
/* Script from:http://computer-for-security.blogspot.com */
imgr = new Array();
imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 150;
numposts1 = 6;
label1 = "كل";
function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");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<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<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;
var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];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="alwansf">
<a href="'+posturl+'"><img width="617" height="385" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo">
</div>
</div>
<div class="alwanip">
<h6>
<a href="'+posturl+'">'+posttitle+'</a></h6>
<div class="alwand" >
'+daystr+'</div>
<p>
'
+removeHtmlTag(postcontent,summaryPost)+'...</p>
</div>
</div>
';
document.write(trtd);
j++;
}}
</script>
|
إبحث الأن عن :
فوقه مباشرة أضف هذا الكود :
<script>
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" 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)
}
})
</script>
|
أخر خطوة : إبحث عن
(ربما لا تجده , يمكنك وضع رابط مدونتك في تعليق و مشكلتك و سيتم الرد عليك) (ضع تعليقا ضمن تعاليق بلوجر و ليس تعليقات الفيسبوك حتى يصلني إشعار بذلك و أجيب عليك في أقرب وقت) بعده / أسفله مباشرة , أضف هذا الكود
<div id='alwansd'>
<div class='alwanw' id='slider1'>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
<div class='alwan-ps' id='paginate-slider1'>
</div>
</div>
</b:if>
|
قم بحفظ القالب و يمكنك ملاحظة السلايد شو في مدونتك ! :)
إضافة سلايد شو تلقائي لمدونات بلوجرد
إضافة سلايد شو تلقائي لمدونات بلوجرب
إضافة سلايد شو تلقائي لمدونات بلوجري
إضافة سلايد شو تلقائي لمدونات بلوجرب
إضافة سلايد شو تلقائي لمدونات بلوجري
0 تعليقات