اڷسسڷام ععـڷيڪم
ڪيف اڷحـζـآإڷ جميع‘ـاً ععـساڪم بخير يآإرب ۈماٺششڪۈن بآإس .؟
ع‘ـدٺُ ڷڪـم من جديد مع شرح إاضافـۃ جميڷه جداً ۈرآئع‘ـﮧ باڷنسبـۃٍ ڷي ۈهيا إاضافـۃ اڷسڷايدر شۈ
ۈٺسٺطيع‘ـۈن مُشاهدٺها فِـي مدۈنٺيـے , ۈهۈه عباره ع‘ـن عارض ڷـ اڷبنراٺ
ۈيٺحرڪ بشڪڷ جميڷ جداً , حيث ٺسٺطيع ع‘ـرض أجمڷ اڷمۈاضيع في اڷسڷايدر شۈ ۈٺغير اڷبنراٺ =)
نبدآ ع برڪة اڷڷه , ڷا أطڷب مِـنڪم سۈآإ اڷٺرڪيز
نفٺح ڷـۈحة اڷٺحڪم اڷخاصـۃ بنآإ ۈنٺبع اڷمسار اڷٺآإڷي ( ٺصميم ~> ٺحرير HTML )
ۈقۈمۈ بآإخذ نسخ‘ـﮧ أحٺياطيـﮧ من اڷقآإڷب ٺجنباً ڷـ ۈقۈع أي خطآ ,
فآذا ارٺڪٺبم خطآ ما ٺسٺطيع‘ـۈن ٺنزيڷ اڷقاڷب ۈسٺعۈد اڷـآمۈر ڪما ڪانٺ قبڷ إاضافة أي ڪۈد
اڷآن نضغط ع Ctrl+F من اڷڪيبۈرد ڪِـي يظهر ڷنا شريط ابحث
نقۈم بڷصق هذا اڷۈسم ڪِـي نبحث ع‘ـنـﮧ <head> ۈبع‘ـده مُباشرةً ( أيّ أسفڷـﮧ ) نضع اڷڪۈد اڷٺآإڷيـے
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://javascript-file.googlecode.com/svn/trunk/coin-slider.min.js' type='text/javascript'/>
مِـن ثُـم نبحث عن اڷۈسم اڷٺآإڷي ]]></b:skin> ۈأعڷاه مُباشرةً ( أيّ فۈقـﮧ ) نضع اڷڪۈد اڷٺآإڷيـے
/*
Coin Slider jQuery plugin CSS styles
http://workshop.rs/projects/coin-slider
*/
.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
.cs-title { text-align:right; width: 590px; padding:10px; background-color: #000000; color: #FFFFFF; }
.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
• هذا قياس عرض اڷشريط اڷأسۈد اڷخاص بعنۈان اڷمۈضۈع , ڷن ٺڷاحظۈه فِـي مدۈنٺيـے
ڷـآني ڷم أقم بآضافة عنۈان ڷڷبنراٺ ۈأڪٺفيٺ بڪٺابة اڷعنۈان في اڷبنر نفسـﮧ سٺفهمۈن ماقصده اڪثر في اڷخطۈه اڷٺآإڷيـﮧ
اڷآن انٺهينا من اڷخطۈه اڷـآۈڷى ۈسننٺقڷ إڷى اڷثآإنيـۃ
ۈهيا إضافة أداة اڷسڷايدر إڷى ٺصميم اڷمدۈنـﮧ , ننٺقڷ إڷى ( ٺصميم ~> عناصر اڷصفحـۃ )
ۈنضغط ع إضافة أادة ۈمن اڷنآإفذه اڷمنبثقـﮧ نخٺآإر إضافة اڷـ أداة HTML/Javascrip
نٺرڪ مڪآإن إاضافة اڷع‘ـنۈان خاڷيـے
ۈنضييف اڷڪۈد اڷٺاڷيـے
div id='coin-slider'>
<a href="رابط الموضوع الأول">
<img src="رابط صورة الموضوع الأول" />
<span>عنوان الموضوع الأول</span>
</a>
<a href="رابط الموضوع الثاني">
<img src="رابط صورة الموضوع الثاني" />
<span>عنوان الموضوع الثاني</span>
</a>
<a href="رابط الموضوع الثالث">
<img src="رابط صورة الموضوع الثالث" />
<span>عنوان الموضوع الثالث</span>
</a>
<a href="رابط الموضوع الرابع">
<img src="رابط صورة الموضوع الرابع" />
<span>عنوان الموضوع الرابع</span>
</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 716, height: 250, navigation: true, delay: 5000 });
});
</script>
• هنا سٺضيف رآإبط مۈضۈع‘ـڪ
• ۈهنا رآإبط اڷصۈره ( أي اڷبنر )
• هنا عنۈان اڷمۈضۈع , ۈاني ڷم اسٺخدمۈ ٺقدرۈ ٺسٺخدمۈ عشان ٺعرفۈ اڷفرق
• ده عع‘ـرض اڷبنر ۈانٺـم غيرۈه ع حسب ماٺحبۈ ٺخڷۈ بنرآإٺڪم
• ده طۈڷ اڷبنر ۈانٺـم غيرۈه ع حسب ماٺحبۈ ٺخڷۈ بنرآإٺڪم
اڷآن سنقۈم بسحب أداة اڷـ HTML/Javascrip إڷى أعڷى اڷرسائڷ اڷـآڷڪٺرۈنيـﮧ , إنظرۈ إڷى اڷصۈره
ۈبعدها نضغط ع اڷزر اڷبرٺقاڷي اڷخاص باڷحفظ
هنيئاً ڷڪم اڷسڷايدر اڷرآإئـع فِـي مدۈنٺـڪم اڷجميـڷه . اڷـآن سآٺطرق ڷـ اضافـﮧ ٺڪميڷيـۃ ڷم‘ـن يرغغ‘ـب بٺخصيص اڷسڷايدر اڪثر
ۈهيا ڷيسٺ أجباريه عڷيڪم ڪِـي ٺقۈمۈ بها ۈإنما ع حسب اڷرغغ‘ـبـۃ ڷا غغ‘ـير
سآإقۈم اڷـآن بشرح طريقـۃ أخفاء اڷسڷايدر من صفحاٺ اڷمدۈنـﮧ ۈع‘ـرضـﮧ فقط في اڷصفـζـۃ اڷرئيسيـۃ
اٺبع‘ـۈ اڷٺآإڷي ۈرڪزۈ فقط
نذهب إڷى ( ڷۈحة اڷٺحڪم ~> ٺصميم ~> عناصر اڷصفحـۃ )
ۈنخٺآإر أداة اڷسڷايدر اڷٺي اضفناها بآعڷى رسائڷ اڷمدۈنـۃ اڷـآڷڪٺرۈنيـﮧ ۈنضغط ع ٺحرير
ۈنضيف عنۈان بمڪان ڪٺابة اڷعنۈان ۈنڪٺب أي ڪڷمـﮧ ۈڷٺـڪن ( اڷسڷايدر شۈ )
اڷـآن نذهب إڷى ( ٺصميم ~> ٺحرير HTML )
ۈنضغط ع Ctrl+F ۈنڷصق اڷعنۈان اڷذي اخٺرناه ۈهۈه ( اڷسڷايدر شۈ )
ۈنقۈم باڷنظر إڷى اڷڪۈد اڷٺاڷي ۈسٺرۈن بآن اڷڪۈد بآڪمڷه مۈجۈد ماعدا اڷڪۈداٺ اڷمضافـﮧ باڷڷۈن اڷأحمر
فقۈمۈ بنسخها ۈڷصقة بنفس اڷمۈضع ۈبعد ذڷڪ اضغطۈ ع حفظ اڷقاڷب
<b:widget id='HTML2' locked='false' title='السلايدر شو' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:if> </b:includable> </b:widget>
اٺجهۈ إڷى ( ٺصميم ~> عناصر اڷصففحـۃ ) ۈاخٺارۈ أداة اڷسڷايدر شۈ ۈقۈمۈ باڷضغط ع ٺحرير
ۈاحذفۈ اڷعنۈان اڷذذي اضفناه ۈأضغطۈ ع حفظ
ۈبهذا هنيئاَ ڷڪم اڷسڷايدر ۈٺم‘ـنى ان يڪۈن ششرحـζـي مفهۈم ۈۈاضح
ۈحاڷياً أي اسٺفسار اطرحۈه بصندۈق اڷشاٺ ڷآن مشڪڷة اڷٺعڷيقاٺ ڷم ٺحڷ بعع‘ـد
ۈنحن بطۈر حڷها بمساععـدة أحد اڷـآخۈه اڷبرمجييـن
اسٺۈدععـڪم اڷڷه
السلامُ عليكم ورحمة الله وبركاته
جزاكِ الله كل خير ع ما قدمته
تحياتي
شكراً لكِ شعشوع ض1
ماستر ~
لاتعليق على هذا الابداع
ع‘ـليكم السسلام جميعـاً
شكراً ع التعليقآإت , وآإن ششاء الله تروقكم تدوينآإتي
سسسلام‘ـي
بارك الله فيك اختي على الشرح الرائع
شكرا جزيلا لكي
ولدي طلب ممكن تشرحي كيف ممكن اضافة هيدر للمدونة
في امان الله
ععـليكم السسلام
أهلا بكَ اخ‘ـي آإكس فآإير . حسنآإً فالـآمر سهل جداً سآإقوم بشرح‘ـه
بع‘ـدما اطرح الإضافـة التـي اقوم بكتابتها حالياً
وشكراً لـ تعليقك و2 \\~
السسلام عليكم ..
مشكوره خيتو لاكن أنا سويت مثل ما قلت لاكن طلع لي كذا ليه :
http://im16.gulfup.com/2012-03-03/1330768569631.png
=(
السلام عليكم ورحمة الله وبركاته
مبدعة كما عهدناك أختي شعاع أحد أفضل مصممات
العرب ولايمكن لعاقل نكران ذلك.
إذَا سمحتِ وتكرمتي علي أود منكِ عمل شرح إضافة
تبويبات أسفل الهيدر بالتفصيل وإذا لم تكوني
متفرغة أرجو منكِ دلي على موقع أو مدونة
بها هذا الدرس أكون لكِ شاكرًا وممتنًا طيلة حياتي.
والسلام خير ختام
تسلمي اختي شعاع على الدرس الاكثر من رائع
الطريقة ما نفعت معي وش الحل
عليكم السسلام
زي مايبان من الصوره , ان الغلط منك
مااضفت الكودات صح
اضيفها مجدداً ^^
عليكم السسلام
اشكرك اخي ع مديحك واحرجتني حقاً
بالنسبـه لـ التبويبات فماشفت درس
دي إضافتها سهله , روح لـ لوحة التحكم ~> تصميم ~> إضافة اداة
واختصار الصفحات , وضيف كم ماتشتي من تبويبات ^^
السسلام عـليكم
اهلا بك اخي آرابيكا نورت المدونه
اخوي ديمون دانيت , كيف يعني مانفعت معاك ؟
ممكن صوره توضح لي ^^
السلام عليكم ورحمة الله وبركاته , كيف حالك اختي شعاع
ان شاء الله في أفضل الحالآت
انا والله سويت نفس اللي قلتيه بالضبط لكن ما سارت متحركة تقدري تقوليلي كيف
أخلي الأربع الصور تتحرك !! وأعتذر عالإزعاج ..
الصور ظهرت بس مو متحركة تحت بعض
شوفي الرابط : http://demon-dante20.blogspot.com/
تحياتو
السلام عليكم
شكرا اختي شعاع على الشرح الواضح
لكن جربتها اكثر من 3 او 4 مرات لكنها لم تعمل
الصور تظهر تحت بعضها ولا تتحرك
نفس المشكلة التي تواجه الجميع ..
اتمنى تشوفي حل للمشكلة
^_^
شكراً اختي شعاع لطرحك الدائم لكل ماهو رائع
لكن اردت ان استفسر مقاس التصاميم الي ندخلها جوت الاداة
كم عرض وكم طول وشكراً مقدماً
هلآ ، قرآسيس آختي "شعآع"
بس ممكن سؤآل آنآ جيت آسوي آلي سويتيه
بس مَ لقيت "عنآصر آلصفحهه" ..
ممكن تصؤريلي فين آلآقيهآ’
لآنِ تؤ جججديده بِ آلبلوق -.-"
سمنآي ع آلآزعآج ..
مشكور كتير