السلام عليكم
دائما نقدم لكم اخر ما نحصل عليه من تقنيات واكواد حصرية ومميزة لا نخفيها ابدا عنكم ....
اولا الكود code حصري وربي شاهد على ذلك لم انقله بنقله بتاتا .....
الكود code عبارة عن بنرات او اعلانات لموقعك تتبدل خلال فترة معينة بطريقة جدا مميزة
لرؤية مثال على الكود code من هنا
رمز Code:
<html dir="rtl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <script src='http://www.algantel.com/16335.js' type='text/javascript'></script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { //Execute the slideShow, set 3 seconds for each images slideShow(9500); }); function slideShow(speed) { //append a LI item to the UL list for displaying caption $('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>'); //Set the opacity of all images to 0 $('ul.slideshow li').css({opacity: 0.0}); //Get the first image and display it (set it to full opacity) $('ul.slideshow li:first').css({opacity: 1.0}); //Get the caption of the first image from REL attribute and display it $('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title')); $('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt')); //Display the caption $('#slideshow-caption').css({opacity: 0.7, bottom:0}); //Call the gallery function to run the slideshow var timer = setInterval('gallery()',speed); //pause the slideshow on mouse over $('ul.slideshow').hover( function () { clearInterval(timer); }, function () { timer = setInterval('gallery()',speed); } ); } function gallery() { //if no IMGs have the show class, grab the first image var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first')); //Get next image, if it reached the end of the slideshow, rotate it back to the first image var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first')); //Get next image caption var title = next.find('img').attr('title'); var desc = next.find('img').attr('alt'); //Set the fade in effect for the next image, show class has higher z-index next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000); //Hide the caption first, and then set and display the caption $('#slideshow-caption').animate({bottom:-70}, 300, function () { //Display the content $('#slideshow-caption h3').html(title); $('#slideshow-caption p').html(desc); $('#slideshow-caption').animate({bottom:0}, 500); }); //Hide the current image current.animate({opacity: 0.0}, 1000).removeClass('show'); } //]]> </script> <style type="text/css"> body { margin:0; } ul.slideshow { list-style:none; width:760px; height:90px; overflow:hidden; position:relative; margin:0; padding:0; font-family:Arial,Helvetica,Trebuchet MS,Verdana; ; } ul.slideshow li { position:absolute; left:0; right:0; } ul.slideshow li.show { z-index:500; } ul img { width:760px; height:90px; border:none; } #slideshow-caption { width:760px; height:30px; position:absolute; bottom:0; left:0; color:#000000; background:#FFFFFF; z-index:500; } #slideshow-caption .slideshow-caption-container { padding:5px 10px; z-index:1000; } #slideshow-caption h3 { margin:0; padding:0; font-size:16px; } #slideshow-caption p { margin:5px 0 0 0; padding:0; } </style> <ul class="slideshow"> <li><a href="
http://www.algantel.com/t4569-topic" target="_blank"><img src="
http://i14.servimg.com/u/f14/14/82/58/44/44410.png" title="
أعلن هنا لدينا وحقق اهدافك بأقل الاسعاربمساحة 760*90 " alt="موقع جنتل الاردن" /></a></li> <li><a href="
http://algantelcom.ourtoolbar.com/" target="_blank"><img src="
http://i14.servimg.com/u/f14/14/82/58/44/555510.png"title="
جديد حمل تولبار موقعنا وتمتع بالحصريات 2014" alt="" /></a></li> <li><a href="
http://www.torchbrowser.com/" target="_blank"><img src="
http://i14.servimg.com/u/f14/14/82/58/44/1112.png" title="
هام جدا: حمل آخر إصدار من هذا المتصفح الرائع وتمتع بأفضل سرعة وتناسق ولا ننصح بإنترنت اكسبلور" alt="موقع جنتل الاردن" /></a></li> <li><a href="" target="_blank"><img src="
http://i14.servimg.com/u/f14/14/82/58/44/toolba10.png" title="
إدارة موقعنا تتحدث بصوت الشعب الاردني الى الشعب السوري فنحن معكم يدا واحدة والفرج قادم ان شاء الله" alt="" /></a></li> </ul> </body> </html>
اولا خطوات التركيب install ...
1-قم بتغيير اللون الاحمر الموجود بالكود code السابق الى روابط الصور التي تريدها مع الانتباه ان تكون عرض الصورة وعرضها كالاتي 760*90
2-ثانيا نقوم بتغيير اللون الاخضر الى النص الذي تريده ان يظهر مع الاعلان واللون الاصفر الى الرابط الخاص الذي تريد عند الضغط على الصورة او البنر ان يذهب اليه
طبعا الكود code السابق يحتوي على اربع بنرات او اعلانات اذا اردت زيداتهم فقط قم بإضافة هذا الى اخر الكود code
رمز Code:
<li><a href="" target="_blank"><img src="رابط الصورة" title="
النص الذي تريده ان يظهر مع الصورة" alt="" /></a></li>
3- قم بعمل صفحة html جديدة وضع بها الكود code السابق بعد التعديل عليه كما يناسبك
4- الخطوة الاخيرة هي ان تستدعي الصفحة من خلال فريم وهو كالاتي
رمز Code:
<iframe marginwidth="0" src="
http://www.algantel.com/h79-page" marginheight="0" frameborder="0" height="90"" scrolling="no" width="760"></iframe>
فقط قم باستبدال الرابط الموجود باللون الاحمر بالرابط الذ وضعت فيه الكود code في صفحة ال html الموجود في الخطوة رقم 3
الان فقط ضع الكود code الموجود في الخطوة رقم 4 فقط في المكان الذي تريد ان يظهر فيه الاعلانات او البنرات ...
انتهى الشرح طريقة وبالتوفيق
ملاحظة الكود code غير منقول وهو حصري من موقع جنتل الاردن
ط*طµط±ظٹط§ ط¨ظ…ط¹ظ†ظ‰ ط§ظ„ظƒظ„ظ…ط© ... ظƒظˆط¯ ط¬ط§ظپط§ ط±ط§ط¦ط¹ ط¬ط¯ط§ ط¶ظٹظپ ظ„ط¯ظٹظƒ ط§ط¹ظ„ط§ظ†ط§طھ ط§ظˆ ط¨ظ†ط±ط§طھ طھطھط¨ط¯ظ„ طھظ„ظ‚ط§ط¦ظٹط§ ط±ط§ط¦ط¹
رد مع اقتباس
