السلام عليكم اخوني
اليوم سوف اتطرق عن طريقة اضافت سلايد شو بطريقه احترافيه وسوف احول قدر المستطاع تسهيل العمله لكم
والان طريقة وضع الكودات كال التي
نبحث عن كلمة <head>
وفوقها مباشره نلسق الكود التالي
<style type='text/css'>
/* <![CDATA[ */
#w2bSlideContainer {position: relative;display: block;}
#w2bNivoSlider {position:relative;width:460px !important;height:300px !important;min-height:300px !important;background: url("http://4.bp.blogspot.com/-TBMTXcO0VxM/T7dSfCUe9dI/AAAAAAAABgY/dmbkzgOPQI0/s1600/w2bLoader.gif") no-repeat 50% 50%; margin: 20px auto 35px;-webkit-box-shadow: 0px 1px 5px rgba(0,0,0,0.4);-moz-box-shadow: 0px 1px 5px rgba(0,0,0,0.4);box-shadow: 0px 1px 5px rgba(0,0,0,0.4);}
#w2bNivoSlider img {position:absolute;top:0;left:0;display:none}
.nivoSlider {position:relative;width:100%;height:auto;}
.nivoSlider img {position:absolute;top:0;left:0}
.nivo-main-image {display:block!important;position:relative!important;width:100%!important}
.nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none}
.nivo-slice {display:block;position:absolute;z-index:5;height:100%;top:0}
.nivo-box {display:block;position:absolute;z-index:5;overflow:hidden}
.nivo-box img {display:block}
.nivo-caption {padding:10px;font: bold 25px/21px traditional arabic;text-align: center;position:absolute;left:10px;bottom:10px;right:10px;background:#000;color:#fff;-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8;width:auto;z-index:8;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.nivo-caption p {padding:5px;margin:0}
.nivo-caption a {display:inline!important}
.nivo-html-caption {display:none}
.nivo-directionNav a {position:absolute;top:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;background:url("http://3.bp.blogspot.com/-bJzN66mSNNc/T7dSdjkzf3I/AAAAAAAABgI/PlGK0Q8OYeU/s1600/w2bArrows.png") no-repeat;text-indent:-9999px;border:0}
.nivo-prevNav {left:10px}
.nivo-nextNav {background-position:-30px 0!important;right:10px}
.nivo-controlNav {position:absolute;left:0;right:0;bottom:-35px;text-align:center}
.nivo-controlNav a {position:relative;z-index:9;cursor:pointer;display:inline-block;width:22px;height:22px;background:url("http://4.bp.blogspot.com/-DEGRTSA4m6A/T7dSenBUBpI/AAAAAAAABgM/EB-Q2htVToI/s1600/w2bBullets.png") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
.nivo-controlNav a.active {font-weight:bold;background-position:0 -22px}
/* ]]> */
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='http://widgets.way2blogging.org/blogger-widgets/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery(document).ready(function($) {
$('#w2bNivoSlider').nivoSlider({
effect : 'random',
slices : 4,
boxCols : 8,
boxRows : 4,
animSpeed : 600,
pauseTime : 3000,
startSlide : 0,
directionNav : true,
directionNavHide : true,
controlNav : true,
keyboardNav : false,
pauseOnHover : true,
captionOpacity : 0.9
});
});
/* ]]> */
بعدها نقوم بحفظ النمودج والخروج
ونذهب الى التخطيط واضافت اداة
HTML / JAVASCRIPT
ونلسق الكود التالي كما هو
<div id="w2bSlideContainer">
<div id="w2bNivoSlider">
<a href="رابط الموضوع"><img src="http://im40.gulfup.com/iilGN.jpg" title="تكنولوجيا العالم اليوم" alt=""/></a>
<a href="رابط الموضوع"><img src="http://im40.gulfup.com/l5I0q.jpg" title="تكنولوجيا العالم اليوم" alt=""/></a>
<a href="رابط الموضوع"><img src="http://im42.gulfup.com/uFIQm.jpg" title="تكنولوجيا العالم اليوم" alt=""/></a>
<a href="رابط الموضوع"><img src="http://im35.gulfup.com/C0Kib.jpg" title="تكنولوجيا العالم اليوم" alt=""/></a>
<a href="رابط الموضوع"><img src="http://im34.gulfup.com/epa0Y.jpg" title="تكنولوجيا العالم اليوم" alt=""/></a>
</div>
</div>
طبعا حذف اسم المدونه الخاصه بنا واضافت اسم مدونتك واضافت الروابط والعناوين
وبمكانك التعديل على السلايد شو وتغير الصور الموجوده وتغير حتى المقاس في عرض السلايد شو ولكم بعض من الصور تكمله للشرح
شراح الدخول الى التخطيط بالصور
اضافت اداة هنا
وقربيا شرح تعديل القالب انشالله
وانا انتضر مشاركاتكم القيمه للمدونه
4:53 ص
Unknown
تصنيف : برامج الايفون
المشاركات
