Facebook Unveils A Smarter Search Engine Is Now Available Samsung Beefs Up Chromebox With A Core I5 Processor 5 Shockingly Outdated Problems Women in the Military Face Microsoft Opens Xbox 360 Update To Beta Testers
في قسم:

سلايدشو اسود انيق

اليوم باذن الله سوف نتحدث عن كيفية اضافة سلايدشو انيق و جذاب باللون الاسود طبعا الكل يعرف ما هو السلايدشو و كيفية عمله لذلك لم اجد بدا لشرحه وتعريفه بل يكفينا رؤية المثال في تلك المدونة التجريبية حتى ندرك طبيعة عمله و هل هو مناسب وجذاب ام لا وهته صورة للسلايدشو

 اذا اذا عجبك هذا السلايدشو و اردت تطبيقه في مدونتك ما عليك سوى تتبع الخطوات التالية:
من القالب تحرير الHTML ثم متابعة نقوم بالبحث عن الكود التالي:



]]></b:skin>
و نظيف الكود التالي قبله/فوقه مباشرة
/* js-disabled class - set image sizes so they all fit in the viewer */
.js-disabled img { width:100px; height:100px; display:block; float:left; margin:30px 0 0; }

#outerContainer { width:542px; height:202px; margin:auto; position:relative; }
#imageScroller { width:542px; height:202px; position:relative; background:#000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfil476F-ZXTb7NbalY0Y4ZsiST2vLZGjBpmJG4IeM2-W6zB22Nvp2CoiN198WRl-3hDNHGlh8mDC1Sq3CJ6g6NKs2XM2o9VGaXacrR0D6eWHe7RVz5Y-w5fZq0-Hdk0o7awkDaAmbK3c/s1600/imageScrollerBG.png) no-repeat; }
#viewer { width:522px; height:182px; overflow:hidden; margin:auto; position:relative; top:10px; }
#imageScroller a:active, #imageScroller a:visited { color:#000000; }
#imageScroller a img { border:0; }
#controls { width:534px; height:47px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkm0XM8FNQuwpVc5A-mvc38Xa_9nkFM8Xiu8gAuus1KVlmRot9xSC5vpZP6v0YXz76ANYjaQyvTH13y3Y6VtXLTcJxCV8iiTDLn3CoznGNJKytJfPmshagvukVRisninBUJPH3bjR_n_E/s400/controlsBG.png) no-repeat; position:absolute; top:4px; left:4px; z-index:10; }
#controls a { width:37px; height:35px; position:absolute; top:3px; }
#controls a:active, #controls a:visited { color:#0d0d0d; }
#title { color:#ffffff; font-family:arial; font-size:100%; font-weight:bold; width:100%; text-align:center; margin-top:10px; }
#rtl { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCFI30GMjKvkWUgrmAqhnZjHcGZaXuOzZV95mcZvUCRoCtJ4C4JlUojt17Ej1GbsJVeCL0OkemajfGCt_nb_96-7ZskdMxoKWxJR4Kw23eTIp2iVX_efIl6SI3OsZicPBRwOqNvDoF_FA/s400/rtl.png) no-repeat; left:100px; }
#rtl:hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfVoLZKNJxa4FkZJFURmBQPEgOxe0sN61TfqxQEJSRQLBfen7BojCD9JRD-Wg8xLQvkO0iAO1WYvDWkqVgzf6r6_EmP_EHxAhkaO1_-pmE45nfj2nCsRdUtnlDHOdVBT5VZFj_6xddlmg/s1600/rtl_over.png) no-repeat; left:99px; }
#ltr { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_IJTsAEoFWh3fDWscUtoJGnjtnNYBTcuFm026mURm-n-VZPHGK-V9Ll6AwNq_be5K4sRKjCGCJkXTzNmedyRcl0tndqWFBHXDTYSdyCPA3ItXyl3EB4dQ-Io7oeiHW4PFSuLhV2NV3ZI/s400/ltr.png) no-repeat; right:100px; }
#ltr:hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtVzTImG2d91Wv558WDv1tl3zt1Um-owigTUC6-wwMpqM31ETkwxzNRQpniFCrQqKuG_KShTjBn5BoBn8wMlVq1O9k1MZtvP6QRTm2kjPNts2FTiJ8etMyNjMKzaCzA_C4klgi9d8n7C8/s400/ltr_over.png) no-repeat; }
ثم نبحث عن الوسم التالي:
<head>
و نظيف بعده كود الجيوكويري التالي:
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='http://bloggerbelog.googlecode.com/files/imagescroller.js' type='text/javascript'/>
 الان لم يبقى لنا سوى حفظ القالب و التوجه الى تخطيط ثم اضافة ادات من نوع html/javascripte و نظيف الكود التالي:
<div id='outerContainer'>
   <div id='imageScroller'>
    <div class='js-disabled' id='viewer'>
     <a class='wrapper' href='#' title='Apple'><img alt='Apple' class='logo' id='apple' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-bFpArFt3228_6GsRYUmchWT8O-DCMHwIvAjEuyzlCUG7otae9Z1f36YcpNvgU0viTikglQhtEWmss9i2ThbB4LZeIClikvYaNwbA2O6IuprVMVWzY4w9IwgOzsdzCJPjcK117il-Xfs/s400/apple.jpg'/></a>
     <a class='wrapper' href='#' title='Firefox'><img alt='Firefox' class='logo' id='firefox' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhih4TEWG39xyg0ifENC6UOTMXe8gNAI25q60Q-KLW9vQ8gETXbQUQrvSPpDKFseiDGQnccL4MYUW4VRKn88Nf9kKdo9c2Bhx58m4FFWjeZ3MN-gnBtPW5mE8n1HGLNyj3NkZ0OU5KTCls/s400/firefox.jpg'/></a>
     <a class='wrapper' href='#' title='jQuery'><img alt='jQuery' class='logo' id='jquery' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGstkDYIZ9qQKD3CAtMU1CI2_49U5nKARvCoM688paYyPPt-rYYyKmoGprJMPHEAb-kBBwf5eO8R4uSxcHjfuYhuFAxwA-tTnRYPejFZbdM1ro3mMiJ-OaOTB9nrjVrj9Upr0KjZ_z9yE/s400/jquery.jpg'/></a>
     <a class='wrapper' href='#' title='Twitter'><img alt='Twitter' class='logo' id='twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG_u4XxItQ6gAt9bEzuWdfzfAO3Or3_tXhEHOlwVRJvjv1quC64NsAuwf6jAEAmUs7DJQriJPGhtciEJO_wEmSBcGa64M5AdiYJJQg0A4X_OgfDGpxZJXsS3Sg6a3BzhvxapFIpyL_BV0/s400/twitter.jpg'/></a>
     <a class='wrapper' href='#' title='jQuery UI'><img alt='jQuery UI' class='logo' id='jqueryui' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu9G9z6bqHTvXl_qkipQHp2v0wq7Vx7Kca4EHy1g09gQ4DDnkO_TE46yTzGYz6pb0-DuBUEjfbrqr-hsvQWaUaAxDLb3WSjznQi3i7rVGfXVKpsKByHw-09fMpL9yGjHdFslvGNRP4udc/s1600/jqueryui.jpg'/></a>
    </div>
   </div>
  </div>
غير ما باللو الاحمر الى ما يناسبك ولا تنسى ايضا تغيير روابط الصور و مبروك عليك السلايدشو و الى لقاء قريب

0 التعليقات:

Proudly Powered by Blogger.