حصريا بمعنى الكلمة ... كود جافا رائع جدا ضيف لديك اعلانات او بنرات تتبدل تلقائيا وبشكل رائع اتحدى اذا شاهدته من قبل ...

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

حصريا بمعنى الكلمة ... كود جافا رائع جدا ضيف لديك اعلانات او بنرات تتبدل تلقائيا وبشكل رائع اتحدى اذا شاهدته من قبل ...

الموضوع السابق الموضوع التاليمركز رفع الصور
Posted By

Moh'd S Hammoudeh


انشرالموضوع
الرد عن طريق الفيس بوك
الابلاغ عن الموضوع




مواقع صديقة
All Tricks And Tips
Entertainment
أضف موقعك هنا
أضف موقعك هنا


صفحات فيسبوكية رائعة
All Tricks And Tips
Entertainment
المحاسبين
موقع جنتل الاردن
أضف صفحتك هنا
أضف صفحتك هنا


صفحتنا الرسمية على الفيس بوك

صفحتنا الرسمية على تويتر



الجمعة مارس 01, 2013 8:39 pm ساندنا على الفيس بوك  ساندنا على اليوتيوب ساندنا على تويـــــــتر








دائما نقدم لكم اخر ما نحصل عليه من تقنيات واكواد حصرية ومميزة لا نخفيها ابدا عنكم ....

اولا الكود حصري وربي شاهد على ذلك لم اقك بنقله بتاتا .....



الكود عبارة عن بنرات او اعلانات لموقعك تتبدل خلال فترة معينة بطريقة جدا مميزة


لرؤية مثال على الكود من هنا

اقتباس :

<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="جديد حمل تولبار موقعنا وتمتع بالحصريات 2013" 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>

اولا خطوات التركيب ...

1-قم بتغيير اللون الاحمر بالكود الى روابط الصور التي تريدها مع الانتباه ان تكون عرض الصورة وطلها كالاتي 760*90

2-ثانيا نقوم بتغيير اللون الاخضر الى النص الذي تريده ان يظهر مع الاعلان

طبعا الكود السابق يحتوي على اربع بنرات او اعلانات اذا اردت زيداتهم فقط قم بإضافة هذا الى اخر الكود

اقتباس :


<li><a href="" target="_blank"><img src="رابط الصورة" title="النص الذي تريده ان يظهر مع الصورة" alt="" /></a></li>


3- قم بعمل صفحة html جديدة وضع بها الكود السابق بعد التعديل عليه كما يناسبك

4- الخطوة الاخيرة هي ان تستدعي الصفحة من خلال فريم وهو كالاتي
اقتباس :

<iframe marginwidth="0"
src="http://www.algantel.com/h79-page"
marginheight="0" frameborder="0" height="90"" scrolling="no"
width="760"></iframe>
فقط قم باستبدال الرابط الموجود باللون الاحمر بالرابط الذ وضعت فيه الكود في صفحة ال html الموجود في الخطوة رقم 3


الان فقط ضع الكود الموجود في الخطوة رقم 4 فقط في المكان الذي تريد ان يظهر فيه الاعلانات او البنرات ...

انتهى الشرح وبالتوفيق


ملاحظة الكود غير منقول وهو حصري من موقغ جنتل الاردن











جميع المواضيع و الردود تعبر عن رأي صاحبها ولا تعبر عن رأي إداره موقع جنتل الاردن بــتــاتــآ
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 

الموضوع السابق الموضوع التالي
صفحة 1 من اصل 1








جميع الحقوق محفوظة لبوابة جنتل الاردن © 2013