اضافة احلى سلايدشو تلقائي لعرض اخر المواضيع
في هذا الموضوع حبيت ان اقدم لكم احلى سلايدشو تلقائي لعرض اخر مواضيع المدونة طبعاً السلايدشو يضيف لمسة من الجمال على مدونات بلوجر بحيث يجلب انظار الزوار ويستعرض اخر مواضيع المدونة بشكل تلقائي اكثر من رائع
في هذا الموضوع حبيت ان اقدم لكم احلى سلايدشو تلقائي لعرض اخر مواضيع المدونة طبعاً السلايدشو يضيف لمسة من الجمال على مدونات بلوجر بحيث يجلب انظار الزوار ويستعرض اخر مواضيع المدونة بشكل تلقائي اكثر من رائع
طريقة تركيب السلايدشو
1- من لوحة التحكم -> قالب -> تحرير HTML 2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات 3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)قم بالبحث عن الكود ]]></b:skin> واضف قبله الكود التالي
.s3slider {
margin:0 auto 10px;
border:2px solid white;
background:white none no-repeat 50% 50%;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
position:relative;
overflow:hidden;
}
background-image:u
.s3slider.loading {
rl('data:image/gif;base64,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');
text-indent:-9999px;
}
3slider-content,
.
.
ss3slider-content li {
position:absolute;
0;
top
:
right:0;
bottom:0;
left:0;
margin:0;
padding:0;
list-style:none;
overflow:hidden;
l
}
.s3slider-content
i {
ition:static;
di
po
ssplay:none;
}
nt img {
display:bloc
.s3slider-cont
ek;
dth:100%;
w
i
height:100%;
max-width:none;
max-height:none;
border:none;
padding:
outline:none
;0;
margin:0;
}
3slider-caption {
.
s position:absolute;
0;
right
:
bottom:0;
left:0;
height:auto;
font:normal normal 11px/normal GESSTwoMediumRegular;
color:white;
lor:black;
opacity:.
background-c
o8;
filter:alpha(opacity=80);
padding:7px 10px 10px;
display:none;
}
3slider-title,
.
.
ss3slider-meta {display:block}
.s3slider-title a {
110%;
font-size
:
font-weight:bold;
color:white;
n:none;
}
.s3slider-tit
text-decorati
ole a:focus,
le a:hover {text-decoration:underline}
.s3slider-me
.s3slider-ti
tta-comment:before {content:" - "}
4- والان بعد ان قمت باضافة الكود اضغط على حفظ ثم نذهب الى التخطيط اضافة اداة Html/javascript فوق رسالئل المدونة الالكترونية
واضف الكود التالي داخل الاداة
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id="s3slider-container">
<div class="s3slider loading" style="width:420px;height:270px;">
Memuat...
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
var s3slider_config = {
url: 'http://t3own.blogspot.com',
numPost: 7,
labelName: null,
monthArray: [
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
noImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC',
newTabLink: false,
containerId: 's3slider-container',
slider: {
width: 420,
height: 270,
timeOut: 4000
}
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/blogger-s3slider.js"></script>
</b:if>
غير رابط المدونة http://Pro-NewNet.blogspot.com برابط مدونتكnumPost: عدد المواضيع التي تعرض في السلايدشو يمكنك تغيرها حسب رغبتكwidth: تغير عرض السلايدشو حسب حجم مدونتكheight: تغير طول السلايدشو حسب رغبتك ايضاًلاتقرأ وترحل ضع بصمتك معنا من خلال ترك تعليقاي استفسار حول الموضوع ضعه في تعليقدمتم برعاية الله وحفظه
1- من لوحة التحكم -> قالب -> تحرير HTML
2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات
3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)
قم بالبحث عن الكود ]]></b:skin> واضف قبله الكود التالي
.s3slider {
margin:0 auto 10px;
border:2px solid white;
background:white none no-repeat 50% 50%;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
position:relative;
overflow:hidden;
}
background-image:u
.s3slider.loading {
rl('data:image/gif;base64,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');
text-indent:-9999px;
}
3slider-content,
.
.
ss3slider-content li {
position:absolute;
0;
top
:
right:0;
bottom:0;
left:0;
margin:0;
padding:0;
list-style:none;
overflow:hidden;
l
}
.s3slider-content
i {
ition:static;
di
po
ssplay:none;
}
nt img {
display:bloc
.s3slider-cont
ek;
dth:100%;
w
i
height:100%;
max-width:none;
max-height:none;
border:none;
padding:
outline:none
;0;
margin:0;
}
3slider-caption {
.
s position:absolute;
0;
right
:
bottom:0;
left:0;
height:auto;
font:normal normal 11px/normal GESSTwoMediumRegular;
color:white;
lor:black;
opacity:.
background-c
o8;
filter:alpha(opacity=80);
padding:7px 10px 10px;
display:none;
}
3slider-title,
.
.
ss3slider-meta {display:block}
.s3slider-title a {
110%;
font-size
:
font-weight:bold;
color:white;
n:none;
}
.s3slider-tit
text-decorati
ole a:focus,
le a:hover {text-decoration:underline}
.s3slider-me
.s3slider-ti
tta-comment:before {content:" - "}
4- والان بعد ان قمت باضافة الكود اضغط على حفظ ثم نذهب الى التخطيط اضافة اداة Html/javascript فوق رسالئل المدونة الالكترونية
واضف الكود التالي داخل الاداة
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id="s3slider-container">
<div class="s3slider loading" style="width:420px;height:270px;">
Memuat...
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
var s3slider_config = {
url: 'http://t3own.blogspot.com',
numPost: 7,
labelName: null,
monthArray: [
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
noImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC',
newTabLink: false,
containerId: 's3slider-container',
slider: {
width: 420,
height: 270,
timeOut: 4000
}
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/blogger-s3slider.js"></script>
</b:if>
غير رابط المدونة http://Pro-NewNet.blogspot.com برابط مدونتك
numPost: عدد المواضيع التي تعرض في السلايدشو يمكنك تغيرها حسب رغبتك
width: تغير عرض السلايدشو حسب حجم مدونتك
height: تغير طول السلايدشو حسب رغبتك ايضاً
لاتقرأ وترحل ضع بصمتك معنا من خلال ترك تعليق
اي استفسار حول الموضوع ضعه في تعليق
دمتم برعاية الله وحفظه
من فضلك شارك هذا الموضوع اذا اعجبك
الموضوع من طرف: محمد كريم فارس
اسمي محمد كريم فارس من مواليد 1993 بلدي هو المغرب، أهتم بجديد التكنولوجيا و خاصة عالم التدوين . يمكنك متابعتي من خلال : الفيسبوك . جوجل بلس
