طريقة جعل المواضيع بهذا الشكل على البوابة

3 مشترك

اذهب الى الأسفل

طريقة جعل المواضيع بهذا الشكل على البوابة Empty طريقة جعل المواضيع بهذا الشكل على البوابة

مُساهمة من طرف medo520 الخميس 29 أكتوبر 2015 - 1:04

السلام عليكم أصدقائي الأعزاء
كثير من المواقع خاصة الاخبارية تجعل لها ما تسميه بـ"الاسليدير"في صفحتها الرئيسية لعرض أهم الأخبار من خلاله بشكل متحرك
فهل يمكن أن أجعل هذه الميزة على بوابة المنتدى؟؟ وكيف ذلك؟؟.. وإذا كان ممكنا فهل يمكن جعلها بشكل آلي؟ أم عن طريق أكواد تومبيلات يتم تغييرها يدويا؟
وشكرا جزيلا
وهذه صورة لنموزج من الاسليدرات التى تستخدمها المواقع.. والتى أريد مثلها
طريقة جعل المواضيع بهذا الشكل على البوابة 10fxq0w
طريقة جعل المواضيع بهذا الشكل على البوابة 10fxq0w
medo520
medo520

طريقة جعل المواضيع بهذا الشكل على البوابة 01010

ذكر
عدد المساهمات : 52
معدل النشاط : 4865
السُمعة : 0

http://jowhar.ahlamontada.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

طريقة جعل المواضيع بهذا الشكل على البوابة Empty رد: طريقة جعل المواضيع بهذا الشكل على البوابة

مُساهمة من طرف YasirAyad الخميس 29 أكتوبر 2015 - 1:50

مرحبآ اخي,
كود سلايد شو احترافى
لا يوجد لدينا كود سلايد شو متوفر بالتقنيات غير الذي وضعته لك. وبداخل الموضوع هناك 2 ردود أيضآ, فامامك الان 3 أكواد. غير ذلك فلتبحث بجوجل عن ما يناسبك  طريقة جعل المواضيع بهذا الشكل على البوابة 851176
YasirAyad
YasirAyad
 
 

ذكر
عدد المساهمات : 10113
معدل النشاط : 15262
السُمعة : 297

http://yasirayad.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

طريقة جعل المواضيع بهذا الشكل على البوابة Empty رد: طريقة جعل المواضيع بهذا الشكل على البوابة

مُساهمة من طرف JoryAbdallah الخميس 29 أكتوبر 2015 - 3:52

كود سلايدر احترافي بشكل انيق وبعدة صور

صورة السلايدر

طريقة جعل المواضيع بهذا الشكل على البوابة Fc08s9
https://2img.net/h/oi62.tinypic.com/fc08s9.gif




الكود



الكود:
<style>
 #mcis { display: none;}
 #sliderFrame {
   background:#222;
   margin: 2px auto 20px;
   padding: 20px 20px 28px;
   position: relative;
   width: 620px;
 }
 #slider img {
  position: absolute;
  border: none;
 display: none;
 }
 #slider {
  width: 620px;
  height: 350px;
  background: #fff url(https://lh6.googleusercontent.com/-TghMlE2NjrY/U0ZhaCofIVI/AAAAAAAADuE/Y3WD45mnRDU/s32/preview.gif) no-repeat 50% 50%;
  position: relative;
  margin: 0 auto;
 }
 #slider a.imgLink {
  z-index: 2;
  display: none;
  position: absolute;
  top: 0px;
  left: 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;
  left: 0px;
  bottom: 0px;
  z-index: 3;
  overflow: hidden;
  font-size: 0;
 }
 div.mc-caption-bg {background-color: black;}
 div.mc-caption {
   background: url("https://lh5.googleusercontent.com/-lafTQRfuog0/U0EsxD_XSMI/AAAAAAAADr4/16mJJ7Ssx_0/s28/backslide.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
   color: #EEEEEE;
   font: bold 15px/30px tahoma;
   padding: 10px 0;
   text-align: center;
   z-index: 4;
 }
 div.mc-caption a { color: #FB0;}
 div.mc-caption a:hover { color: #DA0;}
 div.navBulletsWrapper {
  top:350px;
 background: none;
  position: relative;
  z-index: 5;
  cursor: pointer;
 }
 div.navBulletsWrapper div{
 background:#ccc;
 cursor: pointer;
 float: right;
 height: 9px;
 margin-left: 1px;
 overflow: hidden;
 vertical-align: middle;
 width: 87px;
 }
 div.navBulletsWrapper div.active { background:#1980E6;}
 #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="https://cnmu.googlecode.com/svn/trunk/cnmuslid.js" type="text/javascript"></script>

 <div id="sliderFrame">
 <div id="slider">
 <a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
 <a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
 <a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
 <a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
 <a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
<a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
 </div></div>


شرح التعديل على السلايدر شو

الرقم  620 هو عرض السلايدر عدله في المرتين
الرقم 350 هو الإرتفاع عدله أيضاً في المرتين
هذا #1980E6 هو لون السلايدر النشط

الإستخدام

استبدل i# برابط الصورة بالمقاس المناسب الذي اخترته لعرض وارتفاع السلايدر
استبدل رمز # بالرابط الذي تريده ان يظهر عند الضغط على الصورة
اما كلمة عنوان الموضوع استبدلها بعنوان مناسب
انت لديك 7 سطور كل سطر يساوي صورة في السلايدر , يمكنك الحذف او يمكنك تكرار الكود دة
الكود:
<a href="#"><img src="i#" alt="عنوان الموضوع"/></a>


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

طريقة التركيب

يوضع الكود فى اى مكان يقبل HTML


ذكر المصدر عند النقل




السلام عليكم ورحمة الله وبركاته

اولا لنتعرف عن معنى سلايدر شو

السلايد شو أو السلايدر Slider هي إضافة تمكنك من عرض صور بشكل متعاقب وأنيق وطبعا يمكن إستخدمها في عرض مواضيعك المميزة أو أى شئ ترغب بعرضه يكون واضح ولافت للأنظار

صورة لسلايدر

طريقة جعل المواضيع بهذا الشكل على البوابة 2q37s52

https://2img.net/h/oi61.tinypic.com/2q37s52.gif

الكود متميز وذو شاشة سهل التحكم له مؤثر بالتنقل للموضوع الثاني

الان للكود تفضلوا

الكود:
<style type="text/css">


 #mcis {
  display: none;
 }

 #sliderFrame {
  position: relative;
  width: 600px;
  margin: 0 auto;
 border:5px solid #000;
 border-bottom:25px solid #000;
 background:#fff;
 border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;
 margin-bottom:5px;
 }
 #slider img {
  position: absolute;
  border: none;
 display: none;
 }

 #slider {
  width: 600px;
  height: 218px;
  background: #fff url(https://lh4.googleusercontent.com/-k6J7L0AmqnE/UV7FswW-qsI/AAAAAAAABC0/iwjr-yjs8Tg/s39/cnmuslidlod.gif) no-repeat 50% 50%;
  position: relative;
  margin: 0 auto;
  box-shadow: 0px 1px 5px #999999;
 }

 #slider a.imgLink {
  z-index: 2;
  display: none;
  position: absolute;
  top: 0px;
  left: 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;
  left: 0px;
  bottom: 0px;
  z-index: 3;
  overflow: hidden;
  font-size: 0;
 }

 div.mc-caption-bg {
  background-color: black;
 }

 div.mc-caption {
  font: bold 14px/20px Arial;
  color: #EEE;
  z-index: 4;
  padding: 10px 0;
  text-align: center;
 }

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

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

 div.navBulletsWrapper {
  top:225px;
 background: none;
  position: relative;
  z-index: 5;
  cursor: pointer;
 }

 div.navBulletsWrapper div {
  width: 11px;
  height: 11px;
  background:transparent url(https://lh5.googleusercontent.com/-7NRCeJsVpFQ/UV7Fs6xP8RI/AAAAAAAABCw/REtO-oLoX7Q/s22/cnmu-sliddot.png) no-repeat 0 0;
  float: left;
  overflow: hidden;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 11px;
  _position: relative;
 }



 div.navBulletsWrapper 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="https://cnmu.googlecode.com/svn/trunk/cnmuslid.js" type="text/javascript"></script>

 <div id="sliderFrame">
                 <div id="slider">
<a href="رابط الموضوع"><img src="رابط الصورة" alt="عنوان الموضوع"/></a>
 <a href="رابط الموضوع"><img src="رابط الصورة" alt="عنوان الموضوع"/></a>
 </div></div>

شرح الكود

بالنسبة للرقم 600 هذا هو عرض السلايدر وهو متكرر لذا إن أردت ان تعدل عرض السلايد يجب ان تغير الرقم في كل المرات المتكرر فيها
الرقم 218 هو إرتفاع السلايد يمكنك تعديله لكن بنفس القدر الذي ستعدله به يجب ان تعدل به هذا الرقم أيضا 225 فإن قمت بالزيادة مثلا بنسبة 20 يجب أن تزيد الآخر 20 وإن قمت بالإنقاص نفس الشئ تنقص الآخر بنفس النسبة
أما هذا الكود #000 وهو متكرر مرتين هذا لون السلايد قم بتعديله باللون الذي يعجبك أكواد الألوان
أما هذا الكود <a href="رابط الموضوع"><img src="رابط الصورة" alt="عنوان الموضوع"/></a>
هو كود الصور او الموضوعات قم بتكراره بحسب العدد الذي ستضيفه
ملاحظة حجم الصور يجب ان يكون بحجم العرض والإرتفاع الذي ستحدده
 فمثلا في الكود العرض محدد بـ 600 والإرتفاع 218
إذا الصورة ستكون بحجم 600x218

طريقة التركيب

يوضع الكود فى اى مكان يقبل HTML

عند النقل اذكر المصدر

+
لو تراسلني برابط الموقع ﻻقوم بتحويل السلايد فقط لك
JoryAbdallah
JoryAbdallah
 
 

انثى
عدد المساهمات : 3030
معدل النشاط : 8182
السُمعة : 295

http://taqnyiat.ahlamontada.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

طريقة جعل المواضيع بهذا الشكل على البوابة Empty رد: طريقة جعل المواضيع بهذا الشكل على البوابة

مُساهمة من طرف medo520 الخميس 29 أكتوبر 2015 - 4:22

JAR7 كتب:كود سلايدر احترافي بشكل انيق وبعدة صور

صورة السلايدر

طريقة جعل المواضيع بهذا الشكل على البوابة Fc08s9
https://2img.net/h/oi62.tinypic.com/fc08s9.gif




الكود



الكود:
<style>
 #mcis { display: none;}
 #sliderFrame {
   background:#222;
   margin: 2px auto 20px;
   padding: 20px 20px 28px;
   position: relative;
   width: 620px;
 }
 #slider img {
  position: absolute;
  border: none;
 display: none;
 }
 #slider {
  width: 620px;
  height: 350px;
  background: #fff url(https://lh6.googleusercontent.com/-TghMlE2NjrY/U0ZhaCofIVI/AAAAAAAADuE/Y3WD45mnRDU/s32/preview.gif) no-repeat 50% 50%;
  position: relative;
  margin: 0 auto;
 }
 #slider a.imgLink {
  z-index: 2;
  display: none;
  position: absolute;
  top: 0px;
  left: 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;
  left: 0px;
  bottom: 0px;
  z-index: 3;
  overflow: hidden;
  font-size: 0;
 }
 div.mc-caption-bg {background-color: black;}
 div.mc-caption {
   background: url("https://lh5.googleusercontent.com/-lafTQRfuog0/U0EsxD_XSMI/AAAAAAAADr4/16mJJ7Ssx_0/s28/backslide.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
   color: #EEEEEE;
   font: bold 15px/30px tahoma;
   padding: 10px 0;
   text-align: center;
   z-index: 4;
 }
 div.mc-caption a { color: #FB0;}
 div.mc-caption a:hover { color: #DA0;}
 div.navBulletsWrapper {
  top:350px;
 background: none;
  position: relative;
  z-index: 5;
  cursor: pointer;
 }
 div.navBulletsWrapper div{
 background:#ccc;
 cursor: pointer;
 float: right;
 height: 9px;
 margin-left: 1px;
 overflow: hidden;
 vertical-align: middle;
 width: 87px;
 }
 div.navBulletsWrapper div.active { background:#1980E6;}
 #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="https://cnmu.googlecode.com/svn/trunk/cnmuslid.js" type="text/javascript"></script>

 <div id="sliderFrame">
 <div id="slider">
 <a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
 <a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
 <a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
 <a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
 <a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
<a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
 </div></div>


شرح التعديل على السلايدر شو

الرقم  620 هو عرض السلايدر عدله في المرتين
الرقم 350 هو الإرتفاع عدله أيضاً في المرتين
هذا #1980E6 هو لون السلايدر النشط

الإستخدام



استبدل i# برابط الصورة بالمقاس المناسب الذي اخترته لعرض وارتفاع السلايدر
استبدل رمز # بالرابط الذي تريده ان يظهر عند الضغط على الصورة
اما كلمة عنوان الموضوع استبدلها بعنوان مناسب
انت لديك 7 سطور كل سطر يساوي صورة في السلايدر , يمكنك الحذف او يمكنك تكرار الكود دة
الكود:
<a href="#"><img src="i#" alt="عنوان الموضوع"/></a>


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

طريقة التركيب

يوضع الكود فى اى مكان يقبل HTML


ذكر المصدر عند النقل




السلام عليكم ورحمة الله وبركاته

اولا لنتعرف عن معنى سلايدر شو

السلايد شو أو السلايدر Slider هي إضافة تمكنك من عرض صور بشكل متعاقب وأنيق وطبعا يمكن إستخدمها في عرض مواضيعك المميزة أو أى شئ ترغب بعرضه يكون واضح ولافت للأنظار

صورة لسلايدر

طريقة جعل المواضيع بهذا الشكل على البوابة 2q37s52

https://2img.net/h/oi61.tinypic.com/2q37s52.gif

الكود متميز وذو شاشة سهل التحكم له مؤثر بالتنقل للموضوع الثاني

الان للكود تفضلوا

الكود:
<style type="text/css">


 #mcis {
  display: none;
 }

 #sliderFrame {
  position: relative;
  width: 600px;
  margin: 0 auto;
 border:5px solid #000;
 border-bottom:25px solid #000;
 background:#fff;
 border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;
 margin-bottom:5px;
 }
 #slider img {
  position: absolute;
  border: none;
 display: none;
 }

 #slider {
  width: 600px;
  height: 218px;
  background: #fff url(https://lh4.googleusercontent.com/-k6J7L0AmqnE/UV7FswW-qsI/AAAAAAAABC0/iwjr-yjs8Tg/s39/cnmuslidlod.gif) no-repeat 50% 50%;
  position: relative;
  margin: 0 auto;
  box-shadow: 0px 1px 5px #999999;
 }

 #slider a.imgLink {
  z-index: 2;
  display: none;
  position: absolute;
  top: 0px;
  left: 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;
  left: 0px;
  bottom: 0px;
  z-index: 3;
  overflow: hidden;
  font-size: 0;
 }

 div.mc-caption-bg {
  background-color: black;
 }

 div.mc-caption {
  font: bold 14px/20px Arial;
  color: #EEE;
  z-index: 4;
  padding: 10px 0;
  text-align: center;
 }

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

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

 div.navBulletsWrapper {
  top:225px;
 background: none;
  position: relative;
  z-index: 5;
  cursor: pointer;
 }

 div.navBulletsWrapper div {
  width: 11px;
  height: 11px;
  background:transparent url(https://lh5.googleusercontent.com/-7NRCeJsVpFQ/UV7Fs6xP8RI/AAAAAAAABCw/REtO-oLoX7Q/s22/cnmu-sliddot.png) no-repeat 0 0;
  float: left;
  overflow: hidden;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 11px;
  _position: relative;
 }



 div.navBulletsWrapper 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="https://cnmu.googlecode.com/svn/trunk/cnmuslid.js" type="text/javascript"></script>

 <div id="sliderFrame">
                 <div id="slider">
<a href="رابط الموضوع"><img src="رابط الصورة" alt="عنوان الموضوع"/></a>
 <a href="رابط الموضوع"><img src="رابط الصورة" alt="عنوان الموضوع"/></a>
 </div></div>

شرح الكود

بالنسبة للرقم 600 هذا هو عرض السلايدر وهو متكرر لذا إن أردت ان تعدل عرض السلايد يجب ان تغير الرقم في كل المرات المتكرر فيها
الرقم 218 هو إرتفاع السلايد يمكنك تعديله لكن بنفس القدر الذي ستعدله به يجب ان تعدل به هذا الرقم أيضا 225 فإن قمت بالزيادة مثلا بنسبة 20 يجب أن تزيد الآخر 20 وإن قمت بالإنقاص نفس الشئ تنقص الآخر بنفس النسبة
أما هذا الكود #000 وهو متكرر مرتين هذا لون السلايد قم بتعديله باللون الذي يعجبك أكواد الألوان
أما هذا الكود <a href="رابط الموضوع"><img src="رابط الصورة" alt="عنوان الموضوع"/></a>
هو كود الصور او الموضوعات قم بتكراره بحسب العدد الذي ستضيفه
ملاحظة حجم الصور يجب ان يكون بحجم العرض والإرتفاع الذي ستحدده
 فمثلا في الكود العرض محدد بـ 600 والإرتفاع 218
إذا الصورة ستكون بحجم 600x218

طريقة التركيب

يوضع الكود فى اى مكان يقبل HTML

عند النقل اذكر المصدر

+
لو تراسلني برابط الموقع ﻻقوم بتحويل السلايد فقط لك

فعلا اسليدر رائع جدا ومشهده أجمل مما في الصورة #JAR7  أشكرك عليه، وأشكر أيضا #new.moon  على موضوعه المفيد
واتمنى لو أجد سليدر مثلما في الصورة التى في موضوع الاستفسار
كما ارجومن ادارة احلى منتدي أن تدعممنتدياتها بمثل هذه الفكرة وتجعله بشكل آلي
medo520
medo520

طريقة جعل المواضيع بهذا الشكل على البوابة 01010

ذكر
عدد المساهمات : 52
معدل النشاط : 4865
السُمعة : 0

http://jowhar.ahlamontada.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة


 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى