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

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


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



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

  • نتوجه الى المدونة 
  • ثم قالب ،
  • تحرير HTML
  • نبحث عن الكود الثالي 
</head>

  • ثم نضيف الكود الثالي فوقه   " قبل الوسم </head> "

<script>
//<![CDATA[
/* Script from:http://hukmat.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>

  • نبحث مرة أخرى عن الوسم 
</body>

  • ثم نضيف الكود التالي فوقه  " قبل الوسم </body> "
<script type="text/javascript" src="http://yourjavascript.com/917824114/slider.js"></script><script>
      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)
      }
                                 })
    </script>





  • نبحث عن الكود 

 ]]></b:skin>


  • ثم نضيف الكود التالي قبله  - فوقه
 /*--------------Slider-------------*/
#alwansd{
height: 276px;
margin: 0 auto;
padding: 18px;
background: #fbfbfb;
width: 1229px;
margin-right: -132px;
border-bottom: 2px solid #E6E6E6;
position: relative;
}
.alwanw{
position: relative;
height: 241px;
width: 78%;
margin: 0 auto;
}
.alwanw .contentdiv{
visibility: hidden;
opacity: 1;
position: absolute;
height: 240px;
}
.alwan-ps{
text-align: right;
float: left;
width: 490px;
height: 13px;
margin: 0 auto;
}
.alwan-ps .toc {
float: right;
font-size: 0;
width: 13px;
height: 13px;
background: #e74c3c;
margin-left: 8px;
border-radius: 60px;
}
.alwan-ps .selected {background: #95A5A6;}
.alwan-ps .prev ,.alwan-ps .next{
display:none;
}
.alwan-ps .next:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyanWay92Y18ZqF1hCV0iHmwG7c9960htMfcS29wVp1eIAeeYNrUDVcQY_-Z0FSqlfAU9J6_ZCTVIfBFxugmG-rpAw-g30NnTJl50lNxo26vdTLbZz45JqbvGNo7zzse5t2ODk_bIzVGk/s1600/next-h.png);}
.alwanip{
width: 486px;
float: left !important;
padding: 0 37px 0 0;
margin: 0 auto;
}
.alwanip a{
color: #2c3e50;
font: 19px DroidKufi-Bold;
margin: 0 auto;
line-height: 37px;
}
.post-body img {
margin: -1px 0 0 8px;
padding: 3px;
border: 1px solid #dfdfdf;
border-radius: 3px;
}
.alwanip h6{margin: 0;}
.alwanip h6 a:hover {color:#95A5A6;}
.alwanip .alwand{
color:#fff;
}
.alwanip p{
margin: 0 auto;
color: #95A5A6;
font-family: hacen_liner;
}
.alwansf {
float: right !important;
margin:0 auto;
}
.alwansf a img {
width: 435px;
height: 275px;}
.alwansf a img:hover{
}
.alwansf a img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}

  •   أخير مرحلة  نبحث عن 


<div id='content-wrapper'> 
 
أو الكود الثالي  
 
 <div id='main-wrapper'>


  • ثم نضيف الكود الثالي تحته مباشرة  أسفل الكود السابق


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

  </b:if>


  • ثم نضغط على حفظ .
  • لا تنسوا تغيير حكمات بإسم تسميتك أو قسمك المفضلة .

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

Previous
Next Post »

27 التعليقات

التعليقات
8/10/2014 delete

مرحبا بك دائما

Reply
avatar
8/12/2014 delete

ممكن تسوي شرح تشفير الحقوق القالب و اذا تم مسح الحقوق يأخذه الى الرابط الي اضعه و شكرا

Reply
avatar
8/18/2014 delete

لدي مشكل صور التدوينات لا تظهر في سلايدشو مع أني جربت أكثر 5 نماذج من سلايدشو

Reply
avatar
8/18/2014 delete

أرسل رابط المدونة لأبحث لك عن حل .

Reply
avatar
8/18/2014 delete

http://www.3galgerie.net/

Reply
avatar
ysf
8/28/2014 delete

السلام عليك احي يحصل خطأ في الكود الاخير وبتحديد في

Reply
avatar
8/31/2014 delete

اخي السلايد شو غير شغال ابدا
http://www.th3pro-cs.com/

Reply
avatar
8/31/2014 delete

لقد عدلث عليه شغال الآن ، جرب مرة أخرى

Reply
avatar
8/31/2014 delete

السلام عليكم، أخي السلايد لا يظهر و هذا بسبب الطلب الكبير لرابط الجافا سكريبت https://dl.dropboxusercontent.com/u/12924430/contentslider.js الذي لم يعد يعمل بسبب إيقافه مؤقتا، توجه إلى الرابط و ستظهر لك رسالة خطأ، يرجى رفعه في رابط آخر...
رسالة الخطأ التي ستظهر لك عند التوجه إلى الرابط هي:
Error (509)
This account's public links are generating too much traffic and have been temporarily disabled!

Reply
avatar
8/31/2014 delete

لاحظ في مدونتي الفراغ الأبيض في بداية الصفحة (السلايد لا يعمل): http://astu-tech.blogspot.com
رابط الgs. الموجود في الكود الرابع هو الذي لا يعمل، إن كان لديك ملف الgs في حاسوبك قم برفعه بنفسك و قم بتغيير الرابط في الكود.
في إنتظار ردك.....شكرا

Reply
avatar
8/31/2014 delete

شكرا لك سبتم رفع سكربت قريبا

Reply
avatar
8/31/2014 delete

لقد حلت المشكل عاود نسخ الأكواد في الموضوع

Reply
avatar
10/06/2014 delete

مرحبا اخي لدي مشكلة في السلايد شو
http://nechervandenany.blogspot.com/

Reply
avatar
10/19/2014 delete

تم بنجاح بدون الخطوة الاخيرة شكرااا أخي على السلايد

Reply
avatar
10/22/2014 delete

جاري التجربة...
http://softic-net.blogspot.com/

Reply
avatar
10/26/2014 delete

السلايدر شو توقف عن العمل هل من حل لإعادة تشغيله

Reply
avatar
8/01/2015 delete

اخر سطر في اخر كود لايشتغل ماهو الحل؟

Reply
avatar
9/09/2015 delete

السلايد مو شغال

http://special-eltech.blogspot.com

Reply
avatar
غير معرف
11/08/2015 delete

شكرا أخي

Reply
avatar
1/30/2016 delete

نجحت معي لكن هل يمكنني عرض جميع المواضيع التي في التصنيفات الاخرى

Reply
avatar
2/16/2016 delete

شراء الاثاث المستعمل بالمدينة المنورة

شراء الاثاث المستعمل بالمدينة المنورة

شراء الاثاث المستعمل بالمدينة المنورة

شراء العفش المستعمل بالمدينة المنورة

شركة شراء الاثاث المستعمل بالمدينة المنورة

شراء الاثاث المستعمل بالمدينة المنورة

شراء الاثاث المستعمل بالمدينة المنورة

شركة شراء اثاث مستعمل بالمدينة المنورة

شركة تنظيف شقق بالمدينة المنورة

شركة شراء اثاث مستعمل بالمدينة المنورة

شركة مكافحة حشرات بالمدينة المنورة

شراء الاثاث المستعمل بالدمام

شراء الاثاث المستعمل بينبع

شركة شراء اثاث مستعمل بالمدينة المنورة

شركة شراء اثاث مستعمل بالمدينة المنورة

شركة شراء اثاث مستعمل بالمدينة المنورة

شركة نقل اثاث بينبع

شركة نقل اثاث بينبع

شركة نقل اثاث بالمدينة المنورة

شركة نقل اثاث بالمدينة المنورة

شركة شراء اثاث مستعمل بالمدينة المنورة

شراء وبيع الاثاث المستعمل بالمدينة المنورة

شراء وبيع الاثاث المستعمل بالمدينة المنورة

شراء الاثاث المستعمل بحائل
https://www.facebook.com/Userbuyfurniturehail/
شركة شراء الاثاث المستعمل بحائل

https://www.facebook.com/شراء-ا?ثاث-المستعمل-بالقصيم-و-بريدة-1066927123325718/?fref=ts
شركة شراء الاثاث المستعمل بالقصيم و بريدة

شراء وبيع الاثاث المستعمل بالدمام

شركة نقل الاثاث بالمدينة المنورة

Reply
avatar
3/04/2016 delete

آخر كود لم اعرف كيف اضيفه .. ارجوا المساعدة وشكرا

Reply
avatar
6/29/2016 delete

http://alpha-info.blogspot.com/

Reply
avatar

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