سلايدر رائع بأكثر من 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. */
12. /* The Nivo Slider styles */
13. #slider {
14. width: 618px;
15. height: 246px;
16. }
18. .nivoSlider {
19. position: relative;
20. }
22. .nivoSlider img {
23. position: absolute;
24. top: 0px;
25. left: 0px;
26. }
27. /* If an image is wrapped in a link */
28. .nivoSlider a.nivo-imageLink {
29. position: absolute;
30. top: 0px;
31. left: 0px;
32. width: 100%;
33. height: 100%;
34. border: 0;
35. padding: 0;
36. margin: 0;
37. z-index: 6;
38. display: none;
39. }
40. /* The slices and boxes in the Slider */
41. .nivo-slice {
42. display: block;
43. position: absolute;
44. z-index: 5;
45. height: 100%;
46. }
48. .nivo-box {
49. display: block;
50. position: absolute;
51. z-index: 5;
52. }
53. /* Caption styles */
54. .nivo-caption {
55. position: absolute;
56. left: 0px;
57. bottom: 0px;
58. background: #000;
59. color: #fff;
60. opacity: 0.8;
61. /* Overridden by captionOpacity setting */
62. width: 100%;
63. z-index: 8;
64. }
66. .nivo-caption p {
67. padding: 5px;
68. margin: 0;
69. }
71. .nivo-caption a {
72. display: inline !important;
73. }
75. .nivo-html-caption {
76. display: none;
77. }
78. /* Direction nav styles (e.g. Next & Prev) */
79. .nivo-directionNav a {
80. position: absolute;
81. top: 45%;
82. z-index: 9;
83. cursor: pointer;
84. }
86. .nivo-prevNav {
87. left: 0px;
88. }
90. .nivo-nextNav {
91. right: 0px;
92. }
93. /* Control nav styles (e.g. 1,2,3...) */
94. .nivo-controlNav a {
95. position: relative;
96. z-index: 9;
97. cursor: pointer;
98. }
100. .nivo-controlNav a.active {
101. font-weight: bold;
102. }
103. /*
104. Skin Name: Pascal Theme
105. Skin URI: http://nivo.dev7studios.com
106. Skin Type: fixed
107. Description: A nice, light skin for the Nivo Slider.
108. Version: 1.0
109. Author: Gilbert Pellegrom & Pascal Gartner
110. Author URI: http://dev7studios.com
111. */
113. .theme-pascal.slider-wrapper {
115. width: 668px;
116. height: 299px;
117. margin: 0 auto;
118. padding-top: 17px;
119. position: relative;
120. }
122. .theme-pascal .nivoSlider {
123. position: relative;
124. width: 630px;
125. height: 235px;
126. margin-left: 19px;
127. background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3pdItxO7orxGhr3LZRytvS5bV8FugJPx1eq7dcv4ndOWzYTrvE9Asx5OoPPNG0HpJG4WFcjhq33LK5eWM1ZzUF-PvlwWsdnGUi_cMHwWp4EM1P9wwFTr9pi8MdsHuSkfWexkwfnIEKxWk/s1600/helperblogger-loading.gif) no-repeat 50% 50%;
128. }
130. .theme-pascal .nivoSlider img {
131. position: absolute;
132. top: 0px;
133. left: 0px;
134. display: none;
135. width: 630px;
136. /* Make sure your images are the same size */
137. height: 235px;
138. /* Make sure your images are the same size */
139. }
141. .theme-pascal .nivoSlider a {
142. border: 0;
143. display: block;
144. }
146. .theme-pascal .nivo-controlNav {
147. background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtvaWpozn-HV54wSwSi-HFeh2jJ_qQ1_rNeosZg8iRDJoGTfxM_X_3i2hPlLIMErhik1OOlPoi5uE9cyAnr02ZDL_CCElO18OHOcMAPLRaFFucghTeBznXl6QCy2bpfVdTZomQQ4Xi5WeG/s1600/helperblogger-controlnav.png) no-repeat;
148. width: 251px;
149. height: 40px;
150. position: absolute;
151. left: 200px;
152. /* Tweak this to center bullets */
153. bottom: -42px;
154. padding: 8px 0 0 82px;
155. z-index: 20;
156. }
158. .theme-pascal .nivo-controlNav a {
159. display: block;
160. width: 22px;
161. height: 22px;
162. background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWPigLiFYAScyHQjS_CQeHfaewEcbaP7bVamcooK166zmFbe-8kGR3Cx-QSA4j4Jp1CpWzD_H2O3IuySAg_Wmymoo5rHAOsL73Xv-8eJu6a4mWGeYfBoezQGx780Y_EMpHfI8s12iR5EZi/s1600/helperblogger-bullets.png) no-repeat;
163. text-indent: -9999px;
164. border: 0;
165. margin-right: 3px;
166. float: left;
167. }
169. .theme-pascal .nivo-controlNav a.active {
170. background-position: 0 -22px;
171. }
173. .theme-pascal .nivo-directionNav a {
174. display: none;
175. }
177. .theme-pascal .nivo-caption {
178. bottom: 40%;
179. left: auto;
180. right: 0px;
181. width: auto;
182. max-width: 630px;
183. overflow: hidden;
184. background: #fff;
185. text-shadow: none;
186. font-family: arial, serif;
187. color: #4c4b4b;
188. }
190. .theme-pascal .nivo-caption p {
191. padding: 5px 15px;
192. color: #333;
193. font-weight: bold;
194. font-size: 27px;
195. text-transform: uppercase;
196. }
198. .theme-pascal .nivo-caption a {
199. color: #333;
200. font-weight: bold;
201. font-size: 27px;
202. text-transform: uppercase;
203. }
205. .theme-pascal .ribbon {
207. width: 111px;
208. height: 111px;
209. position: absolute;
210. top: -8px;
211. left: -8px;
212. z-index: 300;
213. }
214. /*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 بالعنوان الذي سيظهر فوق الصورة في السلايدر :)

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

• Facebook
• Twitter
• Google Plus
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati