نجوم مصرية
منتديات نجوم مصرية منتدى المدونين واصحاب المواقع منتدى المدونين والتدوين



تابع نجوم مصرية على أخبار جوجل




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

 


معظم المُدوّنين على منصة البلوغر يطلبونها وكثير منهم يتخلى عن استعمال القوالب التي تتوفّر على هذه التقنية لأنها تقنية تتطلب التعديل اليدوي في كل مرة على محتوى المختصرات المُراد عرضها.
السلايد شو أنافذة عرض مختصرات المواضيع..
الخطوات بسيطة وتتطلب بعض التركيز مع مراعاة كل التوجيهات الواردة في الموضوع لا سيما فيما يتعلق بالمقاسات حتى تتماشى الإضافة مع خصوصية كل قالب يريد صاحبه أن يركبّ له سلايد شو.
الخطوات
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود بالإستعانة بلوحة التحكم (CTRL+F).
تابع نجوم مصرية على أخبار جوجل


1-قم بالبحث عن [HTML]</head>[/HTML]
ثم قم بلصق هذا الكود قبله
[HTML]&lt;&gt;
/* from:http://simplexdesign.blogspot.com/ */
imgr = new Array();
imgr[0] = &quot;http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg&quot;;
showRandomImg = true;
aBold = true;
summaryPost = 140;

numposts1 = 5;
label1 = &quot;منوعات&quot;;

function removeHtmlTag(strx,chop){var s=strx.split(&quot;&lt;&quot;for(var i=0;i&lt;s.length;i++){if(s[i].indexOf(&quot;&gt;&quot!=-1){s[i]=s[i].substring(s[i].indexOf(&quot;&gt;&quot+1,s[i].length)}}s=s.join(&quot;&quot;s=s.substring(0,c hop-1);return s}

function showrecentposts1(json){j=(showRandomImg)?Math.floo r((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i&lt;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&lt;entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k&lt;entry.link.length;k++){if(entry.link[k].rel=='replies'&amp;&amp;entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(&quot;&quot[0];break}}

if (&quot;content&quot; in entry) {
var postcontent = entry.content.$t;}
else
if (&quot;summary&quot; in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = &quot;&quot;;
postdate = entry.published.$t;
if(j&gt;imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf(&quot;&lt;img&quot; b = s.indexOf(&quot;src=\&quot;&quot;,a); c = s.indexOf(&quot;\&quot;&quot;,b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&amp;&amp;(b!=-1)&amp;&amp;(c!=-1)&amp;&amp;(d!=&quot;&quot) img[i] = d;

var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=[&quot;Jan&quot;,&quot;Feb&quot;,&quot;Mar&quot;,&q uot;Apr&quot;,&quot;May&quot;,&quot;Jun&quot;,&quo t;Jul&quot;,&quot;Aug&quot;,&quot;Sep&quot;,&quot; Oct&quot;,&quot;Nov&quot;,&quot;Dec&quot;];var day=postdate.split(&quot;-&quot[2].substring(0,2);var m=postdate.split(&quot;-&quot[1];var y=postdate.split(&quot;-&quot[0];for(var u2=0;u2&lt;month.length;u2++){if(parseInt(m)==mont h[u2]){m=month2[u2];break;
}}

var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '&lt;div class=&quot;contentdiv&quot;&gt;&lt;div class=&quot;sliderPostPhoto&quot;&gt;&lt;a href=&quot;'+posturl+'&quot;&gt;&lt;img width=&quot;590&quot; height=&quot;240&quot; class=&quot;alignnone&quot; src=&quot;'+img[i]+'&quot;/&gt;&lt;/a&gt;&lt;div class=&quot;sliderPostInfo&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;featuredPost&quot;&gt;&lt;h2&gt;&lt;a href=&quot;'+posturl+'&quot;&gt;'+posttitle+'&lt;/a&gt;&lt;/h2&gt;&lt;span&gt;'+daystr+'&lt;/span&gt;&lt;p&gt;'+removeHtmlTag(postcontent,summa ryPost)+'...&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;';
document.write(trtd);
j++;
}}
&lt;/&gt;
[/HTML]
ثم عمل حفظ للقالب
يمكنك تعديل هذا الرمز ، وفقا للحاجة الخاصة بك

summaryPost = 140 ؛ --> عدد حروف ملخص الموضوع
numposts1 = 5 ؛ --> عدد المشاركات او الموضيع التى تظهر فى الاضافة

حجم صورك
width=&quot;590&quot; height=&quot;240&quot;
يمكنك التحكم فى حجم الصور من خلال تغير احجام الصور من الكود الاعلى

2-قم بالبحث عن الكود
[HTML]</body>[/HTML]
ثم قم بلصق هذا الكود قبله

[HTML]&lt; src='http://dl.dropbox.com/u/12924430/contentslider.js'&gt;&lt;/&gt;
&lt;&gt;
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 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)
}
})
&lt;/&gt;[/HTML]

ثم قم بحفظ القالب
3-قم بالبحث عن هذا الكود [HTML]<div id='main-wrapper'>[/HTML]
وضع الكود التالى بعده

[HTML] <b:if cond='data:blog.pageType == &quot;index&quot;'>
<div id='منوعات'>
<div class='sliderwrapper' id='slider1'>
<>
document.write(&quot;&lt; src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=publis hed&amp;alt=json-in-&amp;callback=showrecentposts1\&quot;&gt;&lt;\/&gt;&quot;
</>
</div>
<div class='pagination' id='paginate-slider1'>
</div>
</div>
</b:if>[/HTML]
تم قم بحفظ القالب

4-قم بالبحث عن الكود التالى [HTML] ]]></b:skin>[/HTML]
ووضع هذا الكود قبلة
[HTML]#featured{margin-bottom:35px}
.sliderwrapper{position: relative;overflow: hidden;border: 10px solid #dedde5;border-bottom-width: 6px;height: 250px}
.sliderwrapper .contentdiv{background:#68667B;visibility: hidden;position: absolute;left: 0;top: 0;padding: 5px;height: 100%;filterrogidXImageTransform.Microsoft.alph a(opacity=100);-moz-opacity: 1;opacity: 1;}
.pagination{text-align: right;background-color:#dedde5;padding: 2px 10px 10px}
.pagination a{font-size:11px;color:#dedde5;padding: 0 5px;background:#68667B}
.pagination a:hover, .pagination a.selected{color:#68667B;background-color:#fff}
.featuredPost{width:95%;padding:5px 10px 10px;background:#68667b;background:rgba(104, 102, 123, 0.9);color:#dedde5;position:absolute;bottom:0}
.featuredPost a{color:#fff}
.featuredPost a:hover{color:#dedde5}
.featuredPost h2{margin:0;font-size:16px;line-height:1}
.featuredPost span{font-size:10px}
.featuredPost p{font-size:11px}[/HTML]

ثم قم بحفظ القالب

اخر خطوة قم بالبحث عن كلمة"منوعات"وقم بتغيرها باسم القسم
الذى ترغب بظهور الاضافة بة وان شاء الله تشتغل معك الامور
اهدى هذا الموضوع الى الاستاذ محمد ياسين رحمة صاحب مدونة مجتمع بلوجر العربى
الموضوع مترجم من مدونة اجنبية مدونة سايلاكس ديزان.






المقال "شرح اضافة سلايد شو أوتوماتيكي فى مدونتك(بلوجر)" نشر بواسطة: بتاريخ:
amgad2012
على فكرة الموضوع دة كلفنى 6 ساعات اعمل فية
خسارة ميكنش فية ردود
lolita
شكرااااااااااااااااااااااااااااااااااااااا
sun_set
الله يعطيك العافية
منال سالم
الله ينور مجهود رائع
انا عندى مدونة مش عجبانى اناعايز اعمالها كلها مجلات وفيديوهات
وهيكون فيها اعلانات جوجل ممكن تساعدنى فى اختيارها وشكرا
reemhmam
الف شكر على هذا المجهود
ومدونتك اكثر من رائعة
Eragon88
شرح مميز
تسلم ايدك
mahmoedm
تسلم ايديك

لم اجرب الطريقة بس اعتقد انها تعمل

بالتوفيق ..
khOoOkha_a
يعطيك العافيه اخوي
الشرح اكثر من رائع
واجهتني مشكله وهو انو الكود
<div id='main-wrapper'>
ما حصلته وش اسوي ؟
heemhamoo
على فكرة الموضوع دة كلفنى 6 ساعات اعمل فية
خسارة ميكنش فية ردود


مشاء الله شرح ولا احلى ،، شكراااااااا
mr-esaed
رووووووووووووووووووووووووووووووووووووووووووووووووو وووووووووعة الف شكر
drream1986
السلامعليكم اخي ممكن تشرح لي ما الفائدة من وضعها في المدونة وشكرا
amirmsr
السلايد بيضيف شكل جمالى جذاب على المدونه بالاضافه لانه بيديك الفرصه انك تسلط الضوء على المواضيع اللى عاوز زوارك يشوفوها اكتر
شكرا اخى على الموضوع الجميل والفايده دى
@FreeSharee
بداية شكرا جزيلا على الموضوع المشوق والهام جدا بالنسبة النا كمدومنين غير خبراء بمجال لغات البرمجة..
بس أنا مازبط معي .. بوصل لعند الخطوة رقم 3 .. بعمل سيرتش عن الكود وما بقيه .. حتى حاولت أدور عليه بنفسي كلمة كلمة لحتى ألاقيه شي بيشبهه وما لقيت !!
ممكن مساعدة من بعد إنكم !؟ ومشكورين سلفا ^___^
تقبلو مروري ..
Teto2090
شرح رائع شكرا لك ^_^
طريق محترف
مشكور حبيبي
ياريت ترفق الأكواد بملفات أفضل علشان الصفحة تكون مرتبة



اسم العضو:
سؤال عشوائي يجب الاجابة عليه

الرسالة:


رابط دائم

مواضيع مشابهة:
طريقة اضافة مدونتك فى ارشفة قوقل
اضافة محرك بحث الى مدونتك
اضافة شعار الانتفاضة الفلسطينية بموقعك او مدونتك
جديد بلوجر - اضافة احصائيات الزائرين في مسودة بلوجر

Powered by vBulletin Version 3.8.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd
جميع الحقوق محفوظة © fmisr.com منتديات نجوم مصرية