كيف عمل سلايد شو slideshow فى مدونات بلوجر

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

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

كيف اضافة سلايد شو slideshow فى مدونات بلوجر ؟
1- ادخل على لوحة التحكم الخاصة بك فى بلوجر
2- اضغط على القالب ثم تحرير HTML
3- ابحث عن كود </head>
او اضغط على CTRAL + F وابحث عن كود </head>
4- اضف هذا الكود قبل كود </head> تابع الكود الذى سوف تضيفة فى قالبك :

/* ------------------------------------------------------------------------
	s3Slider

Developped By: Boban Kari??ik -> http://www.serie3.info/
 CSS Help: M?©sz??ros R?³bert -> http://www.perspectived.com/
	Version: 1.0

Copyright: Feel free to redistribute the script/modify it, as
			   long as you leave my infos at the top.
-------------------------------------------------------------------------- */

(function($){

$.fn.s3Slider = function(vars) {

var element     = this;
 var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
 var current     = null;
 var timeOutFn   = null;
 var faderStat   = true;
 var mOver       = false;
 var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
 var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

items.each(function(i) {

$(items[i]).mouseover(function() {
        mOver = true;
     });

$(items[i]).mouseout(function() {
         mOver   = false;
         fadeElement(true);
     });

});

makeSlider();

};

})(jQuery);

//]]>
</script><br />
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script><br />
<style type='text/css'>
#s3slider {
background:#000000;
border:1px solid #818e8f;
width: 550px;
height: 200px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 550px;
position: absolute;
top:0px;
padding: 0px;
margin: 0px;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 550px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style></a>

ملحوظة :
لتغير من سرعة العرض غير السرعة 4000 سوف تقلل من السرعة او تزيد من السرعة عرض السلايد شو .
6- قبل حفظ القالب اعمل معاينة لتاكد من سلامة القالب من اى خطأ ثم احفظ القالب .
7- الان اذهب الى لوحة التحكم ثم التخطيط ثم اضافة اداة ثم اختار اداة HTML/ Java script .
8- ثم اضاف هذا الكود فى الاداة

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1r6ja5RmfAdILaXeEJ73JGjzZpN-v3Q1JBsRrdJytN2cW_loVCVG7ZMvaxuOK3AOZmdyGmUCQYVMpjpfgem9h65-NbkGRRKDd3K0c3aFGmqWU4hAOVcBDD4vwfyV3LZDaUypriwatLnTo/s1600/Crysis-11.jpg" /><span>Crysis : Download Full Version</span></a></li>
<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnKQ57hKsQ6jCCffCf4sm-v9xO-9H9EcvySu8HLUJSN9YH6o_m72JKHbXwOlqmMRMx0AMeciXkkzXEblfe5PTR_gSQ9jw9IGvj81WH_yrvfDDNDvTPXq79zSqfsmF_6siv8uP0ode0vV5R/" /><span>Halo 3 : Play Game Online</span></a></li>
<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQxkljEMoS6ZmIL6QISSSKDSnrlhkrRTHjgFPopyJmaFM0BUOn4ud9KlsOxgMnhmvimtPrfMgtp4EJm2WOHoA290JOqEQItPF4YWjZgkvfhfJ2SUYufwPL5n1yr3FYMLZ2l7ankmPYyGQL/" /><span>Avatar : Watch Movie Now !!!</span></a></li>
<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJV6K9AvVg_JsEz9GOKEM7ywuE9SqAQCME-Iwt58XeytdZP4_4PAeP1kdkRGc6tOcQ7cyn3rJilBtCcAa3MWbKkfwEuuUSnETZpc2CicvVry0eClEhYol3F3SY5nf2KnLTxzo52pUsrTXW/s1600/call+of+duty-11.jpg" /><span>Call Of Duty 4 : Get Here</span></a></li>
<li class="s3sliderImage"></li>
</ul>
</div>
<br />
<div class='clear'>
</div>
</a>

ملحوظة :
فى هذا الكود عليك ان تغير التالى :
* رابط الموضوع او المقال عن طريق "YOUR-LINK-HERE" غير جملة الاجنبية اضف رابط الى رابط الخاص بك
* غير رابط الصورة عن طريق https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJV6K9AvVg_JsEz9GOKEM7ywuE9SqAQCME-Iwt58XeytdZP4_4PAeP1kdkRGc6tOcQ7cyn3rJilBtCcAa3MWbKkfwEuuUSnETZpc2CicvVry0eClEhYol3F3SY5nf2KnLTxzo52pUsrTXW/s1600/call+of+duty-11.jpg
* تستطيع تغير الكلام الظاهر على الصورة مكان الكلام <span>Avatar : Watch Movie Now !!!</span>
بين الكودين هذة </span>ضع كلامك هنا <span> .
* عرض الصور 550 بكسل والارتفاع 200 بكسل .

اى استفسار عن كيف اضافة او عمل سلايد شو slideshow فى مدونة بلوجر راسلنى اتمنى ان يكون الموضوع عجبكم .

كيف عمل سلايد شو slideshow فى مدونات بلوجر

لا تعليق "كيف عمل سلايد شو slideshow فى مدونات بلوجر"

زوار المدونة

Page Views