/ / / اضافة سلايدشو جانبي للمدونه

اضافة سلايدشو جانبي للمدونه

, Edit

السلام عليكم

اضافتنا اليوم هي سلايد شو ذاتي للقائمه الجانبيه للمدونه يعرض اخر ما يتم نشره في مدونتك ما يميز هذه الاضاقه انها لا تحتاج الى روابط المواضيع ولا روابط الصور كما انها ايضا تمتاز بسهولة التركيب كما انه يضيف جمالا لمدونتك ومن فوائده ايضا انه يضيف احترافيه للمدونه كما انه يحث الزوار على الدخول للمواضيع المعروضه مما يزيد نسبة المشاهده لموقعك كما انه على أربع قطع متحركه يعرض صورة الموضوع مع ملخص 
يمكنكم معاينته في هذه الصوره (ملاحظه انقر على الصور في الموضوع لمشاهدتها بوضوح)



الان الطريقه  

1_ادخل لوحة التحكم
2_اختار تخطيط
3_اضغط : اضافة اداة
4_أختار  : HTML \ JavaScript
(ملاحظه للأفضل ان تكون الاداة في القائمه الجانبيه وليس في اعلى المدونه)
ملاحظه انت مخير بين ان تضع عنوانا للأداة او تبقيها بدون عنوان والافضل ان لا تضع عنوان فهو سلايد شو لا يحتاج للتعريف
اضف الكود التالي  _5




<style scoped="" type="text/css">

ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

ul.rcentside{font:normal normal 11px Verdana,Geneva,sans-serif}

ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative}

ul.rcentside{width:100%;height:500px}

ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}

ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block}

ul.rcentside img{border:0;width:100%;height:100%}

ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}

ul.rcentside li:nth-child(2){left:0;top:50%}

ul.rcentside li:nth-child(3){left:50.5%;top:50%}

ul.rcentside li:nth-child(4){width:100%;left:0;top:75%}

ul.rcentside  .overlayx,ul.rcentside li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}

ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5u3W-7GRteSW5l0BOU4tb1mzZfOJlbKav6VN1Up4wKv_fIh085eKA3EdgqsuVveO3Q6kJHa4k30oSAt5yz5eV_J8J8jI0O3E8ZG9ZOD2CsQgSfWLlipg1eIKuzEDLNcEl7QCUxvAn_9s/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}

ul.rcentside .overlayx,ul.rcentside img{border:4px solid #2E8DCE;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}

ul.rcentside li:nth-child(1) .overlayx{background-position:50% 25%}

ul.rcentside .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}

ul.rcentside h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}

ul.rcentside li:nth-child(1) h4,ul.rcentside li:nth-child(4) h4{font-size:150%}

ul.rcentside .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}

ul.rcentside li:nth-child(2) .autname,ul.rcentside li:nth-child(3) .autname{display:none}

.buttons{margin:5px 0 0}

.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative;float:left;}

.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}

.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}

</style>

<div id="featuredpostside" style="width:300px;"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script src="https://ivyth.googlecode.com/svn/js/featuredpostside.min.js" type="text/javascript"></script>

<script type='text/javascript'>

//<![CDATA[

FeaturedPostSide({

blogURL:"http://ljhlg.blogspot.com/",

MaxPost:8,

idcontaint:"#featuredpostside",

ImageSize:300,

interval:5000,

autoplay:true,

MonthNames:["جانفي","فيفري","مارس","أفريل","ماي","جوان","جويلية","أوت","سبتمبر","أكتوبر","نوفمبر","ديسمبر"],

tagName:false

});

//]]>

</script>

لا تنسى غير ما مظلل باللون الاحمر في الكود الى رابط مدونتك
والان اضغط حفظ ومبروك عليكم الاداة
عزيزي الزائر لا تنسى تعليقك قبل المغادره 
والى اضافات جديده 
تحياتي لكم 






أقرب طريق : من العراق , اهتمامي وحبي للتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحت وواضبت على ماأحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته , اهتماماتي للتدوين جعلني أتحدى العمل ، للأكواد ، والتعديل عليها وتكويدهالتخرج بالأشكال المناسبه .

    تعليقات بلوجر
    تعليقات فيس بوك

4 التعليقات:

الاشتراك في: تعليقات الرسالة ( Atom )