سلايدر رائع بأكثر من 15 حركة مميزة من Nivo للبلوجر

في السابق كنت قد وضعت تدوينة عن سلايدر رااائع، لكن للاسف لم يعمل مع اغلب من جربه، لهذا اضطررت الى اخفاء التدوينة و البحث عن سلايدر اخر، راائع، و جمييل، بحركاة جميلة، يليق بمدوناتكم الجميلة، و الحمد لله استطعت ان احضر لكم سلايدر مقدم من Nivo، و معدل بواستطتي، اذا كان يهمك الامر فلتتفضل بالدخول :)
   + لنبدأ على بركة الله،،
  - اولا اذا اردت مثالا حيا: هنا
 - لادخال في مدونتك، الامر سهل، اولا احفظ نسخة من قالبك الحالي، ثم اهب الى تحرير HTML ستظهر لك نافذة اضغط متابعة.
 - ثم ابحث عن الكود التالي:
]]></b:skin>
 - بعد ان تجده اضف فوقه مباشرة هذا الكود:
  1. /*Start Nivo Slider Css http://ridasail.blogspot.com*/
  2. /*
  3. * Copyright 2011, Gilbert Pellegrom,
  4. * Free to use and abuse under the MIT license.
  5. * http://www.opensource.org/licenses/mit-license.php
  6. * Modified By - Rida SAIL @ ridasail.blogspot.com For blogger by - Rahul Ippar @ helperblogger.com
  7. *
  8. * August 2012
  9. */
  10. /* The Nivo Slider styles */
  11. #slider {
  12. width: 618px;
  13. height: 246px;
  14. }
  15. .nivoSlider {
  16. position: relative;
  17. }
  18. .nivoSlider img {
  19. position: absolute;
  20. top: 0px;
  21. left: 0px;
  22. }
  23. /* If an image is wrapped in a link */
  24. .nivoSlider a.nivo-imageLink {
  25. position: absolute;
  26. top: 0px;
  27. left: 0px;
  28. width: 100%;
  29. height: 100%;
  30. border: 0;
  31. padding: 0;
  32. margin: 0;
  33. z-index: 6;
  34. display: none;
  35. }
  36. /* The slices and boxes in the Slider */
  37. .nivo-slice {
  38. display: block;
  39. position: absolute;
  40. z-index: 5;
  41. height: 100%;
  42. }
  43. .nivo-box {
  44. display: block;
  45. position: absolute;
  46. z-index: 5;
  47. }
  48. /* Caption styles */
  49. .nivo-caption {
  50. position: absolute;
  51. left: 0px;
  52. bottom: 0px;
  53. background: #000;
  54. color: #fff;
  55. opacity: 0.8;
  56. /* Overridden by captionOpacity setting */
  57. width: 100%;
  58. z-index: 8;
  59. }
  60. .nivo-caption p {
  61. padding: 5px;
  62. margin: 0;
  63. }
  64. .nivo-caption a {
  65. display: inline !important;
  66. }
  67. .nivo-html-caption {
  68. display: none;
  69. }
  70. /* Direction nav styles (e.g. Next & Prev) */
  71. .nivo-directionNav a {
  72. position: absolute;
  73. top: 45%;
  74. z-index: 9;
  75. cursor: pointer;
  76. }
  77. .nivo-prevNav {
  78. left: 0px;
  79. }
  80. .nivo-nextNav {
  81. right: 0px;
  82. }
  83. /* Control nav styles (e.g. 1,2,3...) */
  84. .nivo-controlNav a {
  85. position: relative;
  86. z-index: 9;
  87. cursor: pointer;
  88. }
  89. .nivo-controlNav a.active {
  90. font-weight: bold;
  91. }
  92. /*
  93. Skin Name: Pascal Theme
  94. Skin URI: http://nivo.dev7studios.com
  95. Skin Type: fixed
  96. Description: A nice, light skin for the Nivo Slider.
  97. Version: 1.0
  98. Author: Gilbert Pellegrom & Pascal Gartner
  99. Author URI: http://dev7studios.com
  100. */
  101. .theme-pascal.slider-wrapper {
  102. width: 668px;
  103. height: 299px;
  104. margin: 0 auto;
  105. padding-top: 17px;
  106. position: relative;
  107. }
  108. .theme-pascal .nivoSlider {
  109. position: relative;
  110. width: 630px;
  111. height: 235px;
  112. margin-left: 19px;
  113. background:url(http://3.bp.blogspot.com/-8_SdXQgExvc/T6jU_3y_AZI/AAAAAAAABns/o_t44IAT8oM/s1600/helperblogger-loading.gif) no-repeat 50% 50%;
  114. }
  115. .theme-pascal .nivoSlider img {
  116. position: absolute;
  117. top: 0px;
  118. left: 0px;
  119. display: none;
  120. width: 630px;
  121. /* Make sure your images are the same size */
  122. height: 235px;
  123. /* Make sure your images are the same size */
  124. }
  125. .theme-pascal .nivoSlider a {
  126. border: 0;
  127. display: block;
  128. }
  129. .theme-pascal .nivo-controlNav {
  130. background: url(http://3.bp.blogspot.com/-eENGcnLAvuQ/T6jU_Olkn_I/AAAAAAAABng/iVakuF1qQ_s/s1600/helperblogger-controlnav.png) no-repeat;
  131. width: 251px;
  132. height: 40px;
  133. position: absolute;
  134. left: 200px;
  135. /* Tweak this to center bullets */
  136. bottom: -42px;
  137. padding: 8px 0 0 82px;
  138. z-index: 20;
  139. }
  140. .theme-pascal .nivo-controlNav a {
  141. display: block;
  142. width: 22px;
  143. height: 22px;
  144. background: url(http://2.bp.blogspot.com/-iqnXNTLjVhQ/T6jU-X50mVI/AAAAAAAABnc/SIQefpBfgyQ/s1600/helperblogger-bullets.png) no-repeat;
  145. text-indent: -9999px;
  146. border: 0;
  147. margin-right: 3px;
  148. float: left;
  149. }
  150. .theme-pascal .nivo-controlNav a.active {
  151. background-position: 0 -22px;
  152. }
  153. .theme-pascal .nivo-directionNav a {
  154. display: none;
  155. }
  156. .theme-pascal .nivo-caption {
  157. bottom: 40%;
  158. left: auto;
  159. right: 0px;
  160. width: auto;
  161. max-width: 630px;
  162. overflow: hidden;
  163. background: #fff;
  164. text-shadow: none;
  165. font-family: arial, serif;
  166. color: #4c4b4b;
  167. }
  168. .theme-pascal .nivo-caption p {
  169. padding: 5px 15px;
  170. color: #333;
  171. font-weight: bold;
  172. font-size: 27px;
  173. text-transform: uppercase;
  174. }
  175. .theme-pascal .nivo-caption a {
  176. color: #333;
  177. font-weight: bold;
  178. font-size: 27px;
  179. text-transform: uppercase;
  180. }
  181. .theme-pascal .ribbon {
  182. width: 111px;
  183. height: 111px;
  184. position: absolute;
  185. top: -8px;
  186. left: -8px;
  187. z-index: 300;
  188. }
  189. /*End Nivo Slider Css http://ridasail.blogspot.com*/
  - الان ابحث عن:
</head>
 - ثم اضف قبله مباشرة الكود التالي:
  1. <!-- Nivo Slider Scripts Starts-->
  2. <script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>
  3. <script src='http://helperblogger.x10.mx/scripts/jquery.nivo.slider.pack.js' type='text/javascript'/>
  4. <script type='text/javascript'>
  5. $(window).load(function() {
  6. $(&#39;#slider&#39;).nivoSlider();
  7. });
  8. </script>
  9. <!-- Nivo Slider Script Ends-->
 - احفظ التغييرات عن طريق الضغط على حفظ.
 - الان اذهب الى تخطيط، و اضف اداة جديدة HTML/JavaScript، وضعها فوق كل من القائمة الجانبية و رسائل المدونة،بهذا الشكل :
 - ثم الصق فيها الكود التالي:
  1. <div class="slider-wrapper theme-pascal">
  2. <div class="ribbon">
  3. </div>
  4. <div id="slider" class="nivoSlider">
  5. <a href="YOUR LINK HERE"><img src="IMAGE URL HERE" alt="" title="ADD CAPTION HERE"/></a>
  6. <a href="YOUR LINK HERE"><img src="IMAGE URL HERE" alt="" title="ADD CAPTION HERE"/></a>
  7. <a href="YOUR LINK HERE"><img src="IMAGE URL HERE" alt="" title="ADD CAPTION HERE"/></a>
  8. <a href="YOUR LINK HERE"><img src="IMAGE URL HERE" alt="" title="ADD CAPTION HERE"/></a>
  9. </div>
  10. <div id="htmlcaption" class="nivo-html-caption">
  11. </div>
  12. </div>
  - الان كلما عليك فعله، هو استبدال YOUR LINK HERE برابط التدوينة، YOUR IMAGE HERE برابط الصورة، و ADD CAPTION HERE بالعنوان الذي سيظهر فوق الصورة في السلايدر :)

   اتمنى ان تشتغل بشكل جيد، انتهى شرحنا لليوم، شكرا لمروركم و الى اللقاء :)
رمضانكم كريم.
_____________________________________________________________________________________

9 التعليقات:

غير معرف يقول...

merci mon ami et voila mon blog FreeBook
AbdouBatna.blogspot.com

Unknown يقول...

merci pour ta visite
:)

Unknown يقول...

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

شكرا على الشرح

سويت كل شيء

بس في الاخير مهي راضيه الصور تظهر

Unknown يقول...

بعد ان جربته اخي، لقد تم حذف السكريبت الخاص بالسلايدر،
لهذا لايعمل.

e3sar يقول...

جزاكم الله خيراً

و لكنه لم يعمل لدي ولا اعرف لماذا و لكنه يدل علي التحميل و لكن تحميل مستمر ولا يظهر شئ
و يمكنك التأكد من هذا الرابط http://tagrooba.blogspot.com/
هذه المدونة لتجربة القوالب ليس إلا

Unknown يقول...

اضن ان السكريبت لم يعد يعمل اخي الكريم، ساحاول ان اجد سكربت جديد، لكنني لا استطيع ان اعدك بشيء :)

e3sar يقول...

أولاً جزاك الله خيراً علي ردك و تفاعلك
ثانياً هل يمكنك التعديل علي هذه السلايدرات
بحيث إذا اعطيتك رابط لاحد المواقع به سلايدر مميز هل يمكنك التعديل عليه قليلاً و جعله مثل الذي فوق ؟؟؟؟؟؟؟

Unknown يقول...

لا اضن انني ساستطيع ان افعل هذا، اسف :(

غير معرف يقول...

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

أضف تعليق

 
| مدونة رضا © 2010-2012 | تعريب وتطوير : عرب بلوجر | الى الاعلى |