سلايدر / سلايدشو مدونة المحترف (محترفي الحماية) لجميع القوالب

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


وقبل القيام باي تغيير قم بحفظ نسخة احتياطية للقالب, من لوحة التحكم اتجه الى تصميم ثم تحرير HTML, ضع علامة في خانة توسيع القوالب, ثم إضغط في الكيبورد على Ctrl + F, و ابحث عن الكود التالي :

1
]]>

ثم ضع فوقه/قبله كود CSS التالي :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
#featured{

margin-bottom:10px;

}

.sliderwrapper{

position: relative;

border-bottom-width: 6px;

height: 124px;

}

.sliderwrapper .contentdiv{

visibility: hidden;

position: absolute;

height: 100%;

filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;

padding:15px 15px 15px 0px;

background:#f1f1f1;

border-radius: 5px 5px 5px 5px;

box-shadow: 0 0 3px #ABABAB;

margin-top:10px;

}

.pagination{

text-align: right;

margin-top: 50px;

padding:5px;

}

.pagination a{

font:11px Arial;

color:#a3a3a3;

padding:4px 8px 4px 8px;

}

.pagination a.selected{

color:#4f4f4f;

}

.pagination .prev,.pagination .next { color:#EAEAEA;

font-size:0px; background:none; padding:0px; }

.featuredPost{

width:410px;

padding:0px 10px 10px 10px !important;

bottom:0;

float:left !important;

margin-right: 54px;

}

.featuredPost a{

color:#515151;

font: 18px "Microsoft Sans Serif";

margin:0;

padding:0;

}

.featuredPost h2{margin:0 0 8px 0;}

.featuredPost span{font-size:11px; margin:0; color:#797979;}

.featuredPost p{font-size:12px; margin:4px 0 0 0; color:#797979;}

.sliderPostPhoto a img{float: right !important;}

.sliderPostPhoto{float: right !important; width:100px !important;}

الآن ابحث عن :

1

الآن أضف الكود التالي فوقه/قبله :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<script>

/* 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 = 140;

numposts1 =XX;

label1 = "Your Label";

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="sliderPostPhoto"><a href="'+posturl+'"><img width="155" height="121" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';

document.write(trtd);

j++;

}}

</script>

مع تغيير Your Label باسم القسم الذي سيتم عرض مواضيعه عشوائيا
numposts1 =XX: عدد المواضيع المعروضة
بعد ذلك ابحث عن :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script src='http://dl.dropbox.com/u/12924430/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>

وفي الأخير قم بالبحث عن هذا الكود :

1
أو
أو
أو

لقالب أضف الكود التالي بعده/أسفله :
(ملاحظة : إذا لم تجد أي كود من هذه الأكواد فقم بالبحت عن هذا الكود :

1
 

ثم ضع الكود الأتي فوقه/قبله  )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21




بعد هذا كله قم بالضغط على حفظ التغييرات ومبروك عليك السلايدر

مرسلة بواسطة في
التسميات: ,

ليست هناك تعليقات:

إرسال تعليق

من الرائع ان تشاركنا تجربتك ورأيك، من فضلك لا تستخدم اي كلمات خارجة، روابط لا علاقة لها بالموضوع لانه سيتم حذفها فوراً. فالتعليقات خاضعة للإشراف، دعنا نجعل التعليقات ساحة لتبادل الخبرات والنقاش , واحب ان انبهك انه عند تعليقك تستطيع متابعة التعليق من خلال " إعلامي " الموجودة اسفل يسار الصندوق.
Conversionتحويل الأكواد EmoticonEmoticon

Convert Clean

الاشتراك في: تعليقات الرسالة (Atom)

جميع الحقوق محفوظه لمدونةعرب تيم 2014

من تصميم : عرب تيم