0 سلايدر رائع بأكثر من 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/AVvXsEgiUbqcLptZF5KDgoHhnGIBZPdhYfAZlsDoO0RPThmayYQqrveSAykSknSU0RsKM6uQ6TPN-tXdzBVEuWbnH1uD7NJ9MBndIeStfON5GrSRDWczmB7e413F7_nLFjow1COUs5lf2HDBYoRh/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/AVvXsEjaxUNxOpMdiQ0SZFa3JMExC0xX6Td2xROsVl-7qC9-wq50PJgVuXsxJErWlUO-e2JjRXtCyhqsPyivo81pDvH4o4dlqkisXQPqeyHzWKKIrmve8Fan5SDuIt8TiXvbMQwhKnw9oI9aOY2W/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/AVvXsEhQakasWfvpnWzfWH58LHVCdE5GhGBvuwuBCy1ZpBDlfxnZp43aU4AP2P9_GBAdU0-zGtvA1Gp3SSA74P-MT7EwNdsf-SHbin8VMqBWHQMBP-vx14GzjQehJAUP9jgVh0DScDmQa7-6__DR/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 بالعنوان الذي سيظهر فوق الصورة في السلايدر :)

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

Posted in: بلوجر