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

بسم الله الرحمن الرحيم

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

اولا : اذهب الى لوحة التحكم ثم القالب ثم تحرير html  ثم اضغط توسيع الكود وابحث عن

]]></b:skin>

 ثم اضف الكود التالى فوقه مباشرة

<!--
/*
/*
* jQuery Nivo Slider v2.5.1
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* Bloggerised by http://www.bloggertricks.biz
*
*/
#slider-wrapper {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXz5D3CEam03C_wk1RQ8OoSX_lY-5PWS0FVllcRumuglRgO9tv9G7F2Z2InVHPOr6z_CJ0fqGLqiJof5nPel_JlLowxUy0_PJ8UArMhWP3AnMjkG8uqct9cbvVZdDP5NGBh0qTk665sfw/s1600/slider.png) no-repeat;
width:998px;
height:392px;
margin:0 auto;
padding-top:74px;
margin-top:50px;
}
#slider {
position:relative;
width:618px;
height:246px;
margin-left:190px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNec2yiHN_aXHI8kxJ0WJ9ZkE-TlNNXXSLQhHJeV4EAyxHBsT8hs3cRXNpsKrtaHqpPYf2Wk-iijJDDXexzbaPCnyLKfhg5UGG0c2Ig5wnjYvYF4i2rZ9lJDGTncZjDlp2uftDTJad_SZ-/s1600/%5Bbloggertricks.biz%5Dload.gif) no-repeat 50% 50%;
margin-bottom:30px;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9lrQt3lWXCGNoSSn30WlglxR2INSEHca7Ayom8Hg5rt9WbjudkpVEai4MJJ6Ak_8XltbnKuRWHhiTUhH7MqnOuqqqYcscLMgWJC-0LosY1NG2_r4TDFt5O9t23ADXfEY1pbHAitZeyRYk/s1600/%5Bbloggertricks.biz%5DBullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji1WS7SvsV4pAjpFNU_q7vOMjujhcEzsXfJOiroX8WevLzigIznzp58NWpraYAmcAHOWb4VEILT0bPKG1jHCjz-uZ4RdqeQhBOBgQZF4csgqWNW-kH1pyqpWiu57tPQsb0XlkQKJ-9FRkt/s1600/%5Bbloggertricks.biz%5DArrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:8;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji1WS7SvsV4pAjpFNU_q7vOMjujhcEzsXfJOiroX8WevLzigIznzp58NWpraYAmcAHOWb4VEILT0bPKG1jHCjz-uZ4RdqeQhBOBgQZF4csgqWNW-kH1pyqpWiu57tPQsb0XlkQKJ-9FRkt/s1600/%5Bbloggertricks.biz%5DArrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
/* Control nav styles (e.g. 1,2,3…) */
.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9lrQt3lWXCGNoSSn30WlglxR2INSEHca7Ayom8Hg5rt9WbjudkpVEai4MJJ6Ak_8XltbnKuRWHhiTUhH7MqnOuqqqYcscLMgWJC-0LosY1NG2_r4TDFt5O9t23ADXfEY1pbHAitZeyRYk/s1600/%5Bbloggertricks.biz%5DBullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}

ثانيا : اذهب الى منطقة الهيدير head

واضف الكود التالى فيها

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script src='http://yourjavascript.com/1611641113/jquery.nivo.slider.pack.js' type='text/javascript'></script>
<script type='text/javascript'>
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

ثالثا :  احفط القالب بعد عمل التعديلات السابقة

رابعا : اذهب الى التخطيط ثم الى اضافة ادة جديدة واختار اداة Html/JavaScript

 اكتب بداخلها الكود الاتى

<code>

<div id='slider'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh2Nfi1yJxVuB5Sm1393MNnZTpWU2pBRl1H6P-bI4JYI9WuJFoffaV3OirLeYe50cDGUQeYtyEjO7e57f8CxixwoI7K48bXIZjcdXSip-7IWER5FJKr3T8Hs6lsVR0hfczplrwaIAMwfA/s1600/toystory.jpg'/>
<a href='http://dev7studios.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEion5l2FqP4RbTm4GxTXS4ieWc8ndpOUQz1PvXgn3Xnq96mloCQp1O4WjyVOsvmkwCn26Ft1lkVUY1k5-BpdjBBQF7BJiqpMGyIkMXi95p2vihpnc3tp9jU-fEPK8_YXjz2sefcJrpEvq4/s1600/up.jpg' title='#htmlcaption'/>
</a><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj40Y7Rnea52wQUQdBanPbnQoFc_SMDRWjX2OH29w10VPtOD2iEMqhQRWD1JY5ZxvgoX4HVIC0vF6BRY5PvuUyK5IKt-XyAejPlh5UKOCqmeW9Xi8YIg4ubIGDjguguEYR2zigiCG-0jAY/s1600/walle.jpg' title='This is an example of a caption'/>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipUdnQrHWgWQ636hG2jx4W0y8L7Fw5aXAkdKyew7g79fWJY22cs1UPUNI6CHkm3CrSK3wmHehwUqyLvv_P8k82biYyJ4e3i6cPPW6_rUgfZU8rmGtI7YsOA5Q5XJo07CwaPL3l36EzXgU/s1600/nemo.jpg'/>
</div>

خامسا : احفط الاداه وعاين المدونة تجد كل شى تمام ان شاء الله

ملاحظة : الصور التى بالقطعة الاخيرة هى التى تعرض فى السلايد

مثال على هذا السلايد

من هنا