Disqus for mobdeacomputer

Monday, 21 July 2014

طريقة تركيب اضافة سلايدشو مدونة المحترف Th3pf

17:23 blooger now No comments

طريقة تركيب اضافة سلايدشو مدونة المحترف Th3pf

اليوم ستتعرف على كيفية اضافة سلايدشو مدونة المحترف.
طريقة تركيب إضافة السلايدر في مدونات بلوجر الشخصية :
وقبل القيام باي تغيير قم بحفظ نسخة احتياطية للقالب, من لوحة التحكم اتجه الى تصميم ثم تحرير HTML, ضع علامة في خانة توسيع القوالب, ثم إضغط في الكيبورد على Ctrl + F, و ابحث عن الكود التالي :
1
]]></b:skin>
ثم ضع فوقه/قبله كود 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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
#alwansd{

height: 397px;

margin: 0 0 20px 20px;

padding: 15px 17px 15px 16px;

width: 617px;

background: #373737;

border-top: 4px solid #00B4FF;

}

.alwanw{

position: relative;

height:385px;

}

.alwanw .contentdiv{

visibility: hidden;

position: absolute;

opacity: 1;

}

.alwan-ps{

text-align: right;

float: left;

width: 618px;

height: 11px;

margin-left: -1px;

}

.alwan-ps .toc{

font-size: 0px;

width: 50.5px;

height: 11px;

float: right;

background: #5b5b5b;

margin-left: 1px;

}

.alwan-ps a.selected{

background:#dfdfdf;

}

.alwan-ps .prev, .alwan-ps .next {display:none; }

.alwanip{

width: 597px;

padding: 10px !important;

bottom: 0;

float: left !important;

position: absolute;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJOX0BUDooYf0QnWL1dpWzo0S1Fb04864-vc3-1AEBHnE6oPfRb-ywH8viDNKxYffWAo76QEeYLj_3iZneeBK2Q2YwE3NePjkhP6VH7n-LrEJDDMfrtY-p1x1Y7rouRDMMmZsPeR5mmpg/s1600/backslide.png);

}

.alwanip a{

color:#dcdcdc;

font: 12px droidkufi-bold;

margin:0;

padding:0;

line-height: 19px;

}

.alwanip h6{margin: 0;}

.alwanip h6 a:hover {color:#ffa800;}

.alwanip .alwand{font:12px arial; margin:4px 0; color:#a5a5a5; }

.alwanip p{font-size: 13px;

margin: 0;

color: #a5a5a5;

line-height: 23px;

}

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

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

.column-center-outer {

width: 100%;

}
مع تغيير 00b4ff# باللون الطاغي في مدونتك و اللذي يمكنك الحصول عليه من هنا
الآن ابحث عن :
الآن أضف الكود التالي فوقه/قبله :
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
&lt;script&gt;

/* Script from:http://www.3rab-help.com/ */

imgr = new Array();

imgr[0] = &quot;http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg&quot;;

showRandomImg = true;

aBold = true;

summaryPost = 150;

 

numposts1 = 12;

label1 = &quot;Yourlabel&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,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&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==&#39;alternate&#39;){posturl=entry.link[k].href;break}}for(var k=0;k&lt;entry.link.length;k++){if(entry.link[k].rel==&#39;replies&#39;&amp;&amp;entry.link[k].type==&#39;text/html&#39;){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;يناير&quot;,&quot;فبراير&quot;,&quot;مارس&quot;,&quot;ابريل&quot;,&quot;مايو&quot;,&quot;يونيو&quot;,&quot;يوليو&quot;,&quot;أغسطس&quot;,&quot;سبتمبر&quot;,&quot;أكتوبر&quot;,&quot;نوفمبر&quot;,&quot;ديسمبر&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)==month[u2]){m=month2[u2];break;

}}

var daystr = day+ &#39; &#39; + m + &#39; &#39; + y ;

var trtd = &#39;&lt;div class=&quot;contentdiv&quot;&gt;&lt;div class=&quot;alwansf&quot;&gt;&lt;a href=&quot;&#39;+posturl+&#39;&quot;&gt;&lt;img width=&quot;617&quot; height=&quot;385&quot; class=&quot;alignnone&quot; src=&quot;&#39;+img[i]+&#39;&quot;/&gt;&lt;/a&gt;&lt;div class=&quot;sliderPostInfo&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;alwanip&quot;&gt;&lt;h6&gt;&lt;a href=&quot;&#39;+posturl+&#39;&quot;&gt;&#39;+posttitle+&#39;&lt;/a&gt;&lt;/h6&gt;&lt;div class=&quot;alwand&quot; &gt;&#39;+daystr+&#39;&lt;/div&gt;&lt;p&gt;&#39;+removeHtmlTag(postcontent,summaryPost)+&#39;...&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&#39;;

document.write(trtd);

j++;

}}

&lt;/script&gt;
مع تغيير Your Label باسم القسم الذي سيتم عرض مواضيعه عشوائيا
بعد ذلك ابحث عن :
1
</body>
ثم الآن أضف الكود التالي فوقه/قبله  :
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
&lt;script src=&#39;http://dl.dropbox.com/u/12924430/contentslider.js&#39;&gt;&lt;/script&gt;

&lt;script&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 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)

}

})

&lt;/script&gt;
وفي الأخير قم بالبحث عن هذا الكود :
1
<div id='main-wrapper'>أو<div id='content'>أو<div id="content"></div>أو <div class='column-center-inner'>
القالب أضف الكود التالي بعده/أسفله :
(ملاحظة : إذا لم تجد أي كود من هذه الأكواد فقم بالبحت عن هذا الكود :
1
  <b:section class='main' id='main' showaddelement='no'>
 ثم ضع الكود الأتي فوقه/قبله  )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<b:if cond='data:blog.pageType == &quot;index&quot;'>

<div id='alwansd'>

<div class='alwanw' id='slider1'>

<script>

document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);

</script>

</div>

<div class='alwan-ps' id='paginate-slider1'>

</div>

</div>

</b:if>
بعد هذا كله قم بالضغط على حفظ التغييرات ومبروك عليك السلايدر

0 comments:

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
تعريب وتطوير : قوالب بلوجر معربة