طريقة اضافة سلايد شو احترافي الى البلوجر

طريقة اضافة سلايد شو احترافي الى البلوجر

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

يمكنك تغيير ألوان هذا السلايدشو بالطريقة سريعة جدا عن طريقة  تغييرها في CSS الخاص به .

معاينة السلايدشو

يمكنكم أيضا تغيير شكل الكتابة بالتغيير GE SS TV الى شكل الكتابة التي تريدها .

قد يهمك : طريقة تغيير شكل الكتابة على البلوجر إلى شكل أكثر إحترافية

طريقة اضافة السلايدشو الى مدونات البلوجر

• أول خطوة ندهب الى المدونة ثم قالب ، ثم تحرير HTML
• ثم نبحث عن الكود </head>
• نضيف الكود التالي فوقه مباشرة

<style>
/* CSS from http://hukmat.blogspot.com/ */
@font-face{font-family: GE SS TV;src: url(https://dl.dropboxusercontent.com/s/6rb9luqhya2z7t6/ge_ss_tv_bold.ttf);}
#alwansd{
height: 387px;
width: 990px;
margin:20px auto 0;
background:#2B344A  center no-repeat;}
.alwanw{position: relative;height: 350px;}
.alwanw .contentdiv{visibility: hidden;position: absolute;height: 96%;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;}
.alwan-ps{text-align: right;float: right;width: 270px;height: 20px;margin-right: 15px;}
.alwan-ps a{font-size:0; background:#95A5A6; float:right; border-radius:50px; height: 15px;
width: 15px; margin:0 0 0 6px;}
.alwan-ps .selected{background:#00B8FF;}
.alwan-ps .next,.alwan-ps .prev {display:none;}
.alwanip{width: 271px;padding: 15px !important;bottom: 0;float: right !important;}
.alwanip a{color:#fff;font: 15px GE SS TV;margin:0;padding:0;line-height: 26px;}
.alwanip h6{margin:0;}
.alwanip .alwand{font-family: GE SS TV;color: #fff;margin: 10px -15px 7px;padding: 10px 43px 10px 10px;background: #00B8FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq9zhhJjiLXMD831k8vZNi1v2NVZUxvKxTxhhP8FdOrs0p35-1QFuG9NDuAkWkAq8xHQc9-4HFQGHy0zXgPY7r0e_XqzeDmpY-MKUqi9wTnCllDk8sZsI6M8eFKmRGqNIaUt_8bbhdylc/s1600/day-slid.png) right center no-repeat;}
.alwanip p{ font: 12px GE SS TV;
font-size: 13px;margin: 0;color: #fff;line-height: 26px;}
.alwansf a img{float: right !important; }
.alwansf {float: left !important;width: 689px !important;}
.alwansf a{width: 186px;height: 186px;float: right;}
.column-center-outer {
width: 100%;}
</style>
<script>
      //<![CDATA[
/* Script from:http://simplexdesign.blogspot.com/ */
imgr = new Array();
imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg";
showRandomImg = true;
aBold = true;
summaryPost =240;
numposts1 = 11;
label1 = "999";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="689" height="387" 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>

• نبحث مرة اخرى عن الكود  </body>
• نضيف الود التالي فوقه مباشرة

<script src='http://azharmesir.googlecode.com/files/template.contentslider.js'></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 class='main-outer'>

• ثم نضيف الكود التالي فوقه 

<div id='alwansd'>
<div class='alwanw' id='slider1'>
<script>
      //<![CDATA[
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>

• أخيرا ابحث عن label1 = "999";  
• و غير 999 بإسم تسميتك المفضلة .

مقالات ذات صلة