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

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


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

يمكنك تغيير ألوان هذا السلايدشو بالطريقة سريعة جدا عن طريقة  تغييرها في 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 بإسم تسميتك المفضلة .

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

Previous
Next Post »

3 التعليقات

التعليقات
7/07/2015 delete

لم اجد الوسم <الاخير ديف ماذا الرد على رسالتي

Reply
avatar
3/19/2016 delete

اخى انا ما وجدت الكود الاخير

ان تصرفت وركبته لكن كبير جدا والمحتوى صغير جدا اى صورة الموضوع صغيره جدا

ما الحل

هذه مدونتى http://thaptalmbda89.blogspot.com/

Reply
avatar
7/22/2016 delete

اخواني ان لم تجدوا الكود الاخير
راسلني علي هذا الايميل وسوف اقدم لك الحل
www.facebook.com/mohamedwael22333
مدونتي :www.techocean.tk

Reply
avatar

المروجوا احترام سياسة المدونة و عمل بها و شكرا ااا