اضافت سلايد شو للمدونه بلوجر والتعديل عليه كيف ماتريد ~ تكنولوجيا العالم اليوم

الأربعاء، 27 نوفمبر 2013

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

4:01 ص

Unknown

لا يوجد تعليقات

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

والان طريقة وضع الكودات كال التي
نبحث عن كلمة <head>
وفوقها مباشره نلسق الكود التالي

/* <![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>

/* <![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>

طبعا حذف اسم المدونه الخاصه بنا واضافت اسم مدونتك واضافت الروابط والعناوين

وبمكانك التعديل على السلايد شو وتغير الصور الموجوده وتغير حتى المقاس في عرض السلايد شو ولكم بعض من الصور تكمله للشرح

شراح الدخول الى التخطيط بالصور

شرح مصور اضافت سلايد شو بطريقة احترافيه والتعديل عليه بسهوله

اضافت اداة هنا

وقربيا شرح تعديل القالب انشالله

وانا انتضر مشاركاتكم القيمه للمدونه

شرح اضافت سلايد شو بطريقه ذكيه واحترافيه

تصنيف : قسم بلوجر

تكنولوجيا العالم اليوم

الأربعاء، 27 نوفمبر 2013