سلايدر Piecemaker2 ثلاثي الابعاد على بلوجر رائع كما في الووردبريس

السلايدر او السلايدشو، مهم لدى البعض، و لا وجود للمدونة بدونه، لكن اغلبها متشابهة جدا، و خاصة في منصة بلوجر، فكلها بسيطة جدا، و ليست بتاثرات رائعة، لكن ليس بعد الان، لانني احضرت لكم سلايدر رائع بمعنا الكلمة، الوودربريس يملك سلايدر Cu3er، و بلوجر اصبح يملك Piecemaker2 اعرف انك لن تصدق لكن انظر الى الصورة اسفله لترى عن ماذا اتحدث:

بالتاكيد بعد روئيتك للصورة سوف ترغب حتما في رويته يعمل، و انا ايضا بالتاكيد لن امنعك، تفضل هنا:

هذا السلايدر رائع يدعم صيغ عديدة لاظهارها، ليس الصور وحدها كما في كل السلايدرات العادية المتوافرة لبلوجر، يمكنك بواسطة هذا السلايدر اظهار:

1. مقاطع فيديو
2. ملفات فلاشية
3. صور

انها لتجربة رائعة ان يظهر مثل هذا السلايدر على منصة بلوجر. اذا كنت متحمسا لنبدأ،،

   بسم الله،،

قبل ان نبدأ بعملية ادراج السلايدر علينا تحميل الملفات الخاصة به.

- بعد التحميل ادخل الى الفولدر لتجد مجموعة من الملفات، افتح الملف المسمى “piecemaker.xml“ بعد فتحه ستجد ما يلي:

1. <?xml version="1.0" encoding="utf-8"?>
2.  <Piecemaker>
3.   <Contents>
4.     <Image Source="http://www.bloggertheme.net/piecemaker/contents/1.jpg" Title="The Piecemaker 2">
5.       <Text>&lt;h1&gt;New hot Features&lt;/h1&gt;&lt;p&gt;The all new Piecemaker comes with lots of new features, making it even more slick.&lt;/p&gt;&lt;p&gt;Just to mention a few - you can now specify unlimited transition styles, include your own SWF and Video files, add hyperlinks to images and info texts with all special characters.&lt;/p&gt;&lt;p&gt;We also impoved the navigation and the animation with animated shadows and pixel-perfect transitions.&lt;/p&gt;</Text>
6.       <Hyperlink URL="http://www.bloggertheme.net" Target="_blank" />
7.     </Image>
8.     <Image Source="http://www.bloggertheme.net/piecemaker/contents/2.jpg" Title="Lots of new Features">
9.       <Text>&lt;h1&gt;New hot Features&lt;/h1&gt;&lt;p&gt;The all new Piecemaker comes with lots of new features, making it even more slick.&lt;/p&gt;&lt;p&gt;Just to mention a few - you can now specify unlimited transition styles, include your own SWF and Video files, add hyperlinks to images and info texts with all special characters.&lt;/p&gt;&lt;p&gt;We also impoved the navigation and the animation with animated shadows and pixel-perfect transitions.&lt;/p&gt;</Text>
10.       <Hyperlink URL="http://www.bloggertheme.net" Target="_blank" />
11.     </Image>
12.     <Flash Source="http://www.bloggertheme.net/piecemaker/contents/flash.swf" Title="Loaded SWF File">
13.       <Image Source="http://www.bloggertheme.net/piecemaker/contents/flash-preview.png" />
14.     </Flash>
15.     <Image Source="http://www.bloggertheme.net/piecemaker/contents/piecemaker3.png" Title="Editing made Easy"></Image>
16.     <Video Source="http://www.bloggertheme.net/piecemaker/contents/video.mp4" Title="Video Example"Width="910" Height="365" Autoplay="true">
17.       <Image Source="http://www.bloggertheme.net/piecemaker/contents/video-preview.jpg" />
18.     </Video>
19.   </Contents>
20.   <Settings ImageWidth="900" ImageHeight="360" LoaderColor="0x333333" InnerSideColor="0x222222"SideShadowAlpha="0.8" DropShadowAlpha="0.7" DropShadowDistance="25" DropShadowScale="0.95"DropShadowBlurX="40" DropShadowBlurY="4" MenuDistanceX="20" MenuDistanceY="50" MenuColor1="0x999999"MenuColor2="0x333333" MenuColor3="0xFFFFFF" ControlSize="100" ControlDistance="20"ControlColor1="0x222222" ControlColor2="0xFFFFFF" ControlAlpha="0.8" ControlAlphaOver="0.95"ControlsX="450" ControlsY="280&#xD;&#xA;" ControlsAlign="center" TooltipHeight="30"TooltipColor="0x222222" TooltipTextY="5" TooltipTextStyle="P-Italic" TooltipTextColor="0xFFFFFF"TooltipMarginLeft="5" TooltipMarginRight="7" TooltipTextSharpness="50" TooltipTextThickness="-100"InfoWidth="400" InfoBackground="0xFFFFFF" InfoBackgroundAlpha="0.95" InfoMargin="15" InfoSharpness="0"InfoThickness="0" Autoplay="10" FieldOfView="45"></Settings>
21.   <Transitions>
22.     <Transition Pieces="9" Time="1.2" Transition="easeInOutBack" Delay="0.1" DepthOffset="300"CubeDistance="30"></Transition>
23.     <Transition Pieces="15" Time="3" Transition="easeInOutElastic" Delay="0.03" DepthOffset="200"CubeDistance="10"></Transition>
24.     <Transition Pieces="5" Time="1.3" Transition="easeInOutCubic" Delay="0.1" DepthOffset="500"CubeDistance="50"></Transition>
25.     <Transition Pieces="9" Time="1.25" Transition="easeInOutBack" Delay="0.1" DepthOffset="900"CubeDistance="5"></Transition>
26.   </Transitions>
27. </Piecemaker>

استبدل اذن الروابط الموجودة في الملف بروابطك انت، كما انها يجب ان تكون مباشرة.
- احفظ الملف بعد الانتهاء من التعديل، ثم ارفعها على اي موقع رفع يوفر روابط مباشرة، كـDropbox،
- بعد ان ترفعه، ادخل الى لوحة التحكم لمدونتك و اذهب الى تحرير HTML، ثم ابحث عن:

</head>

- لتصلق قبله/فوقه الكود التالي:

1. <script src='http://www.bloggertheme.net/piecemaker/scripts/swfobject/swfobject.js' type='text/javascript'>
2. </script>
3.  
4. <script type='text/javascript'>
5.       var flashvars = {};
6.  
7.       flashvars.cssSource = "http://www.bloggertheme.net/piecemaker/piecemaker.css";
8.  
9.       flashvars.xmlSource = "http://www.bloggertheme.net/piecemaker/piecemaker.xml";
10.  
11.       var params = {};
12.  
13.       params.play = "true";
14.  
15.       params.menu = "false";
16.  
17.       params.scale = "showall";
18.  
19.       params.wmode = "transparent";
20.  
21.       params.allowfullscreen = "true";
22.  
23.       params.allowscriptaccess = "always";
24.  
25.       params.allownetworking = "all";
26.  
27.       swfobject.embedSWF('http://www.bloggertheme.net/piecemaker/piecemaker.swf', 'piecemaker', '970', '450', '10', null, flashvars,    
28.  
29.       params, null);
30.  
31. </script>

- استبدل ثانية الروابط الزرقاء بروابطك، ثم احفظ القالب، يجب ان تكون قد اخذت نسخة احتياطية قبل تطبيق هذا التغيير.
- بعد ذلك اذهب الى تخطيط ثم اختر اداة “HTML/JavaScript” و الصق بها هذا الكود:

1. <center>
3. <div id="piecemaker">
5. Put your alternative Non Flash content here.
7. </div>
9. </center>

و بهذا تكون قد انتهيت.
  اتمنى ان يكون مفيدا، و الى اللقاء :-)