سلايدر خفيف وأنيق وسهل التنسيق

<div dir="rtl" style="text-align: right;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> </div> <div style="text-align: right;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <span style="clear: right; float: right; font-size: large; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNP_X_egImpcWrz3A5NjbGWAsWr9FiUr_ciGRYnZrC8DlW9lzDH64YYziotUuWtJnyi18WIh6V3yK9oRuf4ZHK1lUXblQklyMpe4Zo3-3JSlBbV02rm1q_5_G3Zdg4NKpD2cR7PwQvvD49/s1600/050.jpg" /></span></div> <div style="text-align: right;"> <span style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;">السلايد شو أو السلايدر </span><b style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;">Slider</b><span style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;"> هي إضافة تمكنك من عرض صور بشكل متعاقب وأنيق وطبعا يمكن إستخدمها في عرض مواضيعك المميزة أو أى شئ ترغب بعرضه يكون واضح ولافت للأنظار هناك عشرات الإضافات التي تستخدم نفس الخاصية ولكن إخترت لكم هذه بالتحديد وهي من تصميمات  </span><a href="http://www.menucool.com/" rel="nofollow" style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; color: #8a0808; font-family: 'Droid Arabic Kufi'; line-height: 21px; text-decoration: none;" target="_blank">menucool.com</a><span style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;">لأنها تحتوي عدة مميزات أول شئ هي خفيفة جداً وهو ما تفتقر اليه أغلب السلايد الأخرى ميزة أخرى وهي ان تصميمها بسيط وليس مبالغ فيه فلا تسبب شذوذ عن الإطار العام لمدونتك أيضا هي سهلة التنسيق وستتوائم مع مدونتك ومظهرها بسهولة بإذن الله أيضا هي سهلة التركيب فالكود الخاص بها ستضيفة الى آداة</span><span style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; color: #3d85c6; font-family: 'Droid Arabic Kufi'; line-height: 21px;"><b> HTML/JavaScript</b></span><span style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;"> ثم إسحب الآداة فوق صندوق المواضيع ولا شئ آخر وهو من النادر إيجاده في كثير من السلايد أيضا بها ميزة أخرى وهي عدم الخروج عن الإطار الأساسي كثير من الإضافات الخاصة بالسلايد عند بداية التحميل نجد الصور ظاهرة بشكل عمودي ومشوه ثم بعد إكتمال التحميل تبدأ بالظهور بالشكل العادي أما هذه الإضافة لا توجد بها تلك المشكلة فهي ستظل بشكل متناسب حتى قبل التحميل أيضا بعض السلايد يعطيك عدد محدد من الروابط لا تستطيع تجاوزه اما هذه فالعدد مناسب وانت من يتحكم به ربما الشئ الوحيد الذي ينقص هذه الإضافة هو أن الصور يجب ان تكون بالحجم المناسب يصعب تعديل الحجم عبر الأكواد مع إني افضل ذلك حتى لا تكون الصور مشوهه</span></div> <br style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; font-size: 14px; line-height: 21px;" /> <span style="font-size: x-large;"><span style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;">كود السلايدر</span></span><br /> <blockquote class="tr_bq" style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: #f2f2f2; border: 3px dashed rgb(187, 187, 187); font-family: Arial; font-size: 14px; line-height: 21px; margin: 7px 0px; max-height: 250px; overflow: auto; padding: 9px;"> <style type="text/css"><br /> <br /> <br /> #mcis {<br />  display: none;<br /> }<br /> <br /> #sliderFrame {<br />  position: relative;<br />  width: <b>600</b>px;<br />  margin: 0 auto;<br /> border:5px solid <span style="color: #38761d;"><b>#000</b></span>;<br /> border-bottom:25px solid <span style="color: #38761d;"><b>#000</b></span>;<br /> background:#fff;<br /> border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;<br /> margin-bottom:5px;<br /> }<br /> #slider img {<br />  position: absolute;<br />  border: none;<br /> display: none;<br /> }<br /> <br /> #slider {<br />  width: <b>600</b>px;<br />  height: <span style="color: #990000;"><b>218</b></span>px;<br />  background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLJrF2Hqh-322Z0drmr7Qf91KhTQUKGlBv4XsGIJb8FKGio6QibQMggF-wbiTdBEgXGJh0E2X5F9uu2VVn0CjpLR2DR6pQahpquicy_Rxsz7-XuvOqJF8AVsmxUGTI7PYo3bWUXFabPg4/s39/cnmuslidlod.gif) no-repeat 50% 50%;<br />  position: relative;<br />  margin: 0 auto;<br />  box-shadow: 0px 1px 5px #999999;<br /> }<br /> <br /> #slider a.imgLink {<br />  z-index: 2;<br />  display: none;<br />  position: absolute;<br />  top: 0px;<br />  left: 0px;<br />  border: 0;<br />  padding: 0;<br />  margin: 0;<br />  width: 100%;<br />  height: 100%;<br /> }<br /> <br /> div.mc-caption-bg, div.mc-caption-bg2 {<br />  position: absolute;<br />  width: 100%;<br />  height: auto;<br />  padding: 0;<br />  left: 0px;<br />  bottom: 0px;<br />  z-index: 3;<br />  overflow: hidden;<br />  font-size: 0;<br /> }<br /> <br /> div.mc-caption-bg {<br />  background-color: black;<br /> }<br /> <br /> div.mc-caption {<br />  font: bold 14px/20px Arial;<br />  color: #EEE;<br />  z-index: 4;<br />  padding: 10px 0;<br />  text-align: center;<br /> }<br /> <br /> div.mc-caption a {<br />  color: #FB0;<br /> }<br /> <br /> div.mc-caption a:hover {<br />  color: #DA0;<br /> }<br /> <br /> div.navBulletsWrapper {<br />  top:<span style="color: #b45f06;"><b>225</b></span>px;<br /> background: none;<br />  position: relative;<br />  z-index: 5;<br />  cursor: pointer;<br /> }<br /> <br /> div.navBulletsWrapper div {<br />  width: 11px;<br />  height: 11px;<br />  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHIGc17ffhbPgNe1l3F6aeZUqTre2bbBS7LbYgc-PvfQjiMgrPjzubKd3rHqdXFizjbQRYrtz_fJvVbZnIHSb0-UnnlUP9Pmf9WzSYVHRzAsC2H0XJ-G7mCXE5HInmweK-OrYC86Le_Xo/s22/cnmu-sliddot.png) no-repeat 0 0;<br />  float: left;<br />  overflow: hidden;<br />  vertical-align: middle;<br />  cursor: pointer;<br />  margin-right: 11px;<br />  _position: relative;<br /> }<br /> <br /> <br /> <br /> div.navBulletsWrapper div.active {<br />  background-position: 0 -11px;<br /> }<br /> <br /> #slider {<br />  transform: translate3d(0,0,0);<br />  -ms-transform: translate3d(0,0,0);<br />  -moz-transform: translate3d(0,0,0);<br />  -o-transform: translate3d(0,0,0);<br />  -webkit-transform: translate3d(0,0,0);<br /> }<br />  </style><br /> <br /> <script src="https://cnmu.googlecode.com/svn/trunk/cnmuslid.js" type="text/javascript"></script><br /> <br /> <div id="sliderFrame"><br />                 <div id="slider"><br /> <span style="color: red;"><a href="رابط الموضوع"><img src="رابط الصورة" alt="عنوان الموضوع"/></a></span><br /> <a href="رابط الموضوع"><img src="رابط الصورة" alt="عنوان الموضوع"/></a><br /> </div></div></blockquote> <br style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; font-size: 14px; line-height: 21px;" /> <h2 style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; border-bottom-color: rgb(215, 217, 218); border-bottom-style: solid; border-bottom-width: 1px; font-family: 'Droid Arabic Kufi'; font-size: 23px; font-weight: 400; line-height: 21px; margin-bottom: 10px; margin-top: 5px; padding-bottom: 15px;"> طريقة تنسيق السلايد</h2> <span style="font-size: large;"><br style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;" /><span style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;">بالنسبة للرقم </span><b style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;">600</b><span style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;"> هذا هو عرض السلايدر وهو متكرر لذا إن أردت ان تعدل عرض السلايد يجب ان تغير الرقم في كل المرات المتكرر فيها</span><br style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;" /><span style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;">الرقم </span><span style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; color: #990000; font-family: 'Droid Arabic Kufi'; line-height: 21px;"><b>218</b></span><span style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;"> هو إرتفاع السلايد يمكنك تعديله لكن بنفس القدر الذي ستعدله به يجب ان تعدل به هذا الرقم أيضا </span><span style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; color: #b45f06; font-family: 'Droid Arabic Kufi'; line-height: 21px;"><b>225</b></span><span style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;"> فإن قمت بالزيادة مثلا بنسبة 20 يجب أن تزيد الآخر 20 وإن قمت بالإنقاص نفس الشئ تنقص الآخر بنفس النسبة </span><br style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;" /><span style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;">أما هذا الكود </span><span style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; color: #38761d; font-family: 'Droid Arabic Kufi'; line-height: 21px;"><b>#000</b></span><span style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;"> وهو متكرر مرتين هذا لون السلايد قم بتعديله باللون الذي يعجبك</span><a href="http://cnmu.blogspot.com/p/copy-color-picker.html" style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; color: #8a0808; font-family: 'Droid Arabic Kufi'; line-height: 21px; text-decoration: none;" target="_blank"> أكواد الألوان</a><br style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;" /><span style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;">أما هذا الكود</span><span style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; color: red; font-family: 'Droid Arabic Kufi'; line-height: 21px;"> <a href="رابط الموضوع"><img src="رابط الصورة" alt="عنوان الموضوع"/></a></span><br style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;" /><span style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;">هو كود الصور او الموضوعات قم بتكراره بحسب العدد الذي ستضيفه</span><br style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;" /><span style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;">ملاحظة حجم الصور يجب ان يكون بحجم العرض والإرتفاع الذي ستحدده</span><br style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;" /><span style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;"> فمثلا في الكود العرض محدد بـ 600 والإرتفاع 218</span><br style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;" /><span style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; background-color: white; font-family: 'Droid Arabic Kufi'; line-height: 21px;">إذا الصورة ستكون بحجم 600x218</span></span></div>

اضافات وأدوات بلوجر سلايدر خفيف وأنيق وسهل التنسيق

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

مزيد من المعلومات »

طريقة وضع كود أو نص داخل إطار تحديد الكل

<div dir="rtl" style="text-align: right;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaMow_W53yJgZvmSLyZlZOJnv6M4B2qwXGz71RL5Hx4aKiavD4lQAyuXO7WNxjXxdJ0PmnWChtwOS-3WPgRwNSfFv3rOcEHhTYzCJQS0UW52jfg8H8QDxgqyD2wfbmgze0t6vmxlN1t8MF/s1600/050.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaMow_W53yJgZvmSLyZlZOJnv6M4B2qwXGz71RL5Hx4aKiavD4lQAyuXO7WNxjXxdJ0PmnWChtwOS-3WPgRwNSfFv3rOcEHhTYzCJQS0UW52jfg8H8QDxgqyD2wfbmgze0t6vmxlN1t8MF/s1600/050.jpg" /></a></div> <br /> <div class="post-body" style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; font-family: 'Droid Arabic Kufi'; font-size: 14px; line-height: 1.5em;"> <div dir="rtl" trbidi="on"> <div dir="rtl" trbidi="on"> <br /></div> <div dir="rtl" trbidi="on"> <div class="post-body" style="line-height: 1.5em;"> <div dir="rtl" trbidi="on"> <div dir="rtl" trbidi="on"> <br /> أحيانا قد يتطلب أن نضيف كود طويل وهناك عدة طرق لفعل ذلك ولكن كنوع من التسهيل على القراء يمكن أن يتم إضافة الأكواد داخل إطار يسمح بتحديدها كلها ليسهل النسخ <b>Text area With Select All</b>والطريقة سهله وبسيطة فقط نتبع التالي<br /> ندخل الى تحرير القالب وفوق الوسم <b></head></b> نضيف الكود التالي<br /> <br /> <blockquote class="tr_bq" style="background-color: #f2f2f2; border: 3px dashed rgb(187, 187, 187); font-family: Arial; margin: 7px 0px; max-height: 250px; overflow: auto; padding: 9px;"> <script type="text/javascript"><br /> function selectAll()<br /> {<br /> document.form1.demo.focus();<br /> document.form1.demo.select();<br /> }<br /> </script></blockquote> <br /> <div style="text-align: center;">  ثم عند كتابة موضوع نحول لوحة الكتابة من <span style="color: red;">تأليف</span> الى وضع <b><span style="color: blue;">HTML</span></b></div> <div style="text-align: center;"> <br /> <a href="http://www.blogger.com/blogger.g?blogID=477844892825172877" name="more" style="color: #8a0808;"></a><br /> ثم نضع الكود التالي</div> <br /> <blockquote class="tr_bq" style="background-color: #f2f2f2; border: 3px dashed rgb(187, 187, 187); font-family: Arial; margin: 7px 0px; max-height: 250px; overflow: auto; padding: 9px;"> <form name="form1" ><br /> <textarea cols="<span style="color: #38761d;"><b>25</b></span>" rows="<span style="color: red;"><b>10</b></span>" name="demo"><br /> أكتب هنا الكود او الكلمات التي تريد<br /> </textarea><br /> </br><br /> <input type="button" name="selectit" value="تحديد الكل" onclick="selectAll ();"><br /> </form></blockquote> <br /> <div style="text-align: center;"> على أن <b><span style="color: red;">10</span> =</b> عدد الصفوف</div> <div style="text-align: center;"> و <b><span style="color: #38761d;">25</span> =</b> عدد عرض الأحرف</div> </div> </div> </div> <div class="post-footer" style="background-color: whitesmoke; border: 1px solid rgb(221, 221, 221); line-height: 20px; margin-top: 10px; padding: 8px 10px;"> <br /></div> </div> </div> </div> <br /> <div> <div class="post-body" style="-webkit-text-stroke-color: rgb(150, 151, 150); -webkit-text-stroke-width: 0.4000000059604645px; font-family: 'Droid Arabic Kufi'; font-size: 14px; line-height: 1.5em;"> <div dir="rtl" trbidi="on"> <div style="text-align: center;"> <form name="form1"> <textarea cols="25" name="demo" rows="10">