كود code سلايد شو, Slideshow 2014

[linnou]

http://www.dzbatna.com/images/icons/icon26.gif ظƒظˆط¯ ط³ظ„ط§ظٹط¯ ط´ظˆ, Slideshow 2014 (http://www.dzbatna.com/t2225340/)



السلام عليكم ورحمة الله وبركاته
طريقة سهلة جدا لإضافة أداة سلايد الى مدونات blogger التي تقوم بعرض مواضيع
او المنتدى forum بشكل الي ومميز مثلما نراه تماما في مواقع الأخبار الكبيرة والتي تعطي طابعا احترافي للمنتدى او للمدونه.
طريقه التركيب install في المنتدى forum
من لوحة الادآره الذهآب الى
الاستيالات والقوالب
البحث عن قآلب
رمز PHP:

<code style="white-space:nowrap"> <code> ad_header_end
</code> </code>

والصق الكود code فيه واحفظ طبعا من مرعآة المتغيرات لانها يدويه تآبع الشرح طريقة معي

شرح طريقة للمودونه
من لوحة التحكم للمدونة blog نختار التخطيط ثم نختار اضافة أداة ثم نختار اداة HtmlJavaScript
نقوم بلصق الكود code التالي
رمز PHP:

<code style="white-space:nowrap"> <code> <style type="text/css">


/* JavaScript Image Slider By http://mdonti-n.blogspot.com/ */


#mcis {
display: none;
}


#sliderFrame {
position: relative;
width: 468px;
margin: 0 auto;
border:3px solid #E1E0E2;
}


#ribbon {
width: 111px;
height: 111px;
position: absolute;
top: -4px;
right: -4px;
}


#slider {
width: 468px;
height: 260px;
background: #fff url(https://lh3.googleusercontent.com/-jr3u7sHVNzc/T_9iyf5egvI/AAAAAAAAC9c/jwanynfbt7Y/h120/mdonti-n.blogspot.com-loading.gif) no-repeat 50% 50%;
position: relative;
margin: 0 auto;
box-shadow: 0px 1px 5px 010007;
}


#slider img {
position: absolute;
border: none;
display: none;
}


#slider a.imgLink {
z-index: 2;
display: none;
position: absolute;
top: 0px;
right: 0px;
border: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}


div.mc-caption-bg, div.mc-caption-bg2 {
position: absolute;
width: 100%;
height: auto;
padding: 0;
right: 0px;
bottom: 0px;
z-index: 3;
overflow: hidden;
font-size: 0;
}




div.mc-caption-bg {



background-color: #0066CC;
}


div.mc-caption {
font: bold 25px/21px traditional arabic ;
color: #0000;
z-index: 4;
padding: 10px 0;
text-align: center;
}


div.mc-caption a {
color: #FB0;
}


div.mc-caption a:hover {
color: #DA0;
}


div.naفي بي vBulletsWrapper {
top: 250px;
right: 190px;
width: 150px;
background: none;
padding-right: 20px;
position: relative;
z-index: 5;
cursor: pointer;
}


div.naفي بي vBulletsWrapper div {
width: 11px;
height: 11px;
background: transparent url(https://lh3.googleusercontent.com/-XpmNmet2gQE/T_9iZTdKsgI/AAAAAAAAC9U/e5Hto1X5zKc/h120/mdonti-n.blogspot.com-bullet.png) no-repeat 0 0;
float: right;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
margin-left: 11px;
_position: relative;
}


div.naفي بي vBulletsWrapper div.active {
background-position: 0 -11px;
}


#slider {
transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
</style>


<script src="http://my-mdonti.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>


<div id="sliderFrame">
<div id="ribbon"></div>
<div id="slider">


<a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a>


<a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a>


<a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a>


<a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a>


<a href="xxxxxx"><img src="ppppp"alt=" ttttt"/></a>
</div></div>
</code> </code>

ملآحظه
قبل الحفظ نقوم باضافة المواضيع التي نود ظهورها على السلايد شو كمايلي :
نضع مكان الرمز xxxxx رابط الموضوع
نضع مكان الرمز ppppp رابط الصورة
نضع مكان الرمز ttttt عنوان الموضوع
وليكن المواضيع المميزه او الحصريه
ثم نقوم بحفظ الكود code
تعديل الإضافة بما يتناسب مع منتداك او مدونتك
1- اذا أردنا زيادة عدد المواضيع المعروضة نقوم بزيادة عدد الأكواد التالية
رمز PHP:

<code style="white-space:nowrap"> <code> <a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a>
</code> </code>

اي نقوم بنسخها ولصقها الواحدة تلو الأخرى حسب عدد المواضيع التي نريد عرضها على السلايد شو
(Slideshow ).
2- التحكم في ارتفاع وعرض الأداة (الإطار الخارجي) نقوم بالبحث عن الكود code التالي :

رمز PHP:

<code style="white-space:nowrap"> <code> #slider {
width: 468px;
height: 260px;
</code> </code>

لتغيير عرض الأداة width
لتغيير ارتفاع الأداة height
3- تغيير لون السلايدشو الصغيرة
(التي يتم بها عرض عنوان الموضوع )
نبحث عن الكود code التالي :
رمز PHP:

<code style="white-space:nowrap"> <code> background-color: #0066CC;
</code> </code>

ونقوم بتغيير الرمز 0066cc
(للحصول على الألوان بصيغة html انتقل للصفحة التالية )من هنــــــآ
(http://html-color-codes.info/)4- تغيير حجم ولون خط عنوان الموضوع (عناوين المواضيع المعروضة على السلايد شو) ابحث عن الكود code التالي
رمز PHP:

<code style="white-space:nowrap"> <code> font: bold 25px/21px traditional arabic ;
</code> </code>

الرمز traditional arabic لإستبدال نوع الخط
الرمز 25px حجم الخط .
/
حمل الكود code من المرفقآت
وبكذا خلصنا ومبروك عليك
عملت لكم موقت المثآل من
انتى وانا ملك الاحساس (http://www.u1-m1.com/vb/)

الكود code منقول اتمنى لكم الفآئدةhttp://www.dzbatna.com/images/smilies/blushing.gif






التعديل الأخير كان بواسطة khaleid; 03 - 02 - 2014 الساعة 01:45

ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)

الملفات المرفقة
http://www.traidnt.net/vb/images/attach/txt.gif كود سلاشيو.txt (http://www.traidnt.net/vb/attachments/682912d1359844571-كود-سلاشيو.txt) (2.6 كيلوبايت, عدد مرات المشاهدة 124 مرة)


https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©