هي واحدة من أجمل العناصر التي قد تضاف إلى المدونة
فأنت ستضع بداخلها ما يميز مدونتك عن غيرها ..
هذه الإضافة تلفت نظر الزائر بشكل كبير ..
وتيسر له عملية تصفح أكثر المواضيع ذات أهمية في مدونتك
سأشرح كيفية إضافتها بالشكل الذي تظهر به في مدونتي هكذا ..
وللبحث السريع يتم الضغط على ctrl+f ثم نسخ الكود ولصقه في مربع البحث وسيظهر لك مكانه في القالب ..
ابحث عن هذا الكود </head>
ثم قم بلصق هذا الكود أعلاه مباشرة
أو ابحث عن هذا الكود <head>
وقم بلصق الكود السابق أسفله مباشرة
(ثاثآ) :
ابحث عن ]]></b:skin> وضع فوقها هذه الأكواد مباشرة
يمكنك أن تغير في عرض السلايدر بما يناسب مدونتك
من خلال أن تغير قيمة width: 590px
ثم اضغط حفظ القالب
رابعآ :
توجه الآن إلى تخطيط عناصر الصفحة
+ اضغط إضافة أداة في أي مكان تريد + إضافة html/javascript
اترك عنوان الإضافة فارغآ .. ثم قم بلصق الكود التالي
يجب أن تعد الصور والمواضيع المختارة بشكل جيد
بحيث يتناسب حجم الصورة مع حجم السلايدر
كما يمكنك أن تزيد عدد المواضيع التي ستعرضها في السلايدر كما ترغب
مع مراعاة الآتي :
رابط الموضوع "هو الرابط الذي تود الزائر أن ينتقل إليه حين ضغطه على الصورة "
رابط صورة الموضوع "هو رابط الصورة التى قمت بصنعها .. ثم إضافتها على أحد مواقع استضافة الصور"
عنوان الموضوع "هو العنوان الذي سيظهر في الشريط أسفل الصورة .. حاول أن تجعله ملفتآ للانتباه"
تستطيع أن تغير في عرض وارتفاع السلايدر بما يتناسب مع مدونتك .. عن طريق تغيير هذه الأرقام width: 590, height: 250
وهذه هي الإضافة كما في مدونتي
احفظ الأداة
ثم قم سحبها لتضعها فوق "رسائل المدونة الالكترونية" كما في هذا الشكل
ثم قم بحفظ هذا الترتيب ..
قم بعرض مدونتك بعد التغييرات
واستمتع بهذه الإضافة ..
فأنت ستضع بداخلها ما يميز مدونتك عن غيرها ..
هذه الإضافة تلفت نظر الزائر بشكل كبير ..
وتيسر له عملية تصفح أكثر المواضيع ذات أهمية في مدونتك
سأشرح كيفية إضافتها بالشكل الذي تظهر به في مدونتي هكذا ..
(أولآ) :
من لوحة التحكم توجه إلى التخطيط + تحرير HTML
من لوحة التحكم توجه إلى التخطيط + تحرير HTML
ثم في خانه نسخ احتياطي / استعادة القالب
اضغط على ( تنزيل قالب كامل ) ، ثم قم بتحميل الملف على جهازك الخاص ، هذه الخطوه مهمه
جدآ في حاله حدوث خطأ ما ، حيث يمكنك بعد ذلك استرجاع قالبك ببساطه ، ويرجى تطبيق هذه
الخطوه عند أي تغيير تحدثه في أكواد القالب ..
(ثانيآ) :
من تصميم + تحرير HTML
اضغط على ( توسيع قوالب عناصر واجهة المستخدم ) (ثانيآ) :
من تصميم + تحرير 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'/>
أو ابحث عن هذا الكود <head>
وقم بلصق الكود السابق أسفله مباشرة
(ثاثآ) :
ابحث عن ]]></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; }
يمكنك أن تغير في عرض السلايدر بما يناسب مدونتك
من خلال أن تغير قيمة width: 590px
ثم اضغط حفظ القالب
رابعآ :
توجه الآن إلى تخطيط عناصر الصفحة
+ اضغط إضافة أداة في أي مكان تريد + إضافة html/javascript
اترك عنوان الإضافة فارغآ .. ثم قم بلصق الكود التالي
<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: 590, height: 250, navigation: true, delay: 5000 });
});
</script>
يجب أن تعد الصور والمواضيع المختارة بشكل جيد
بحيث يتناسب حجم الصورة مع حجم السلايدر
كما يمكنك أن تزيد عدد المواضيع التي ستعرضها في السلايدر كما ترغب
مع مراعاة الآتي :
رابط الموضوع "هو الرابط الذي تود الزائر أن ينتقل إليه حين ضغطه على الصورة "
رابط صورة الموضوع "هو رابط الصورة التى قمت بصنعها .. ثم إضافتها على أحد مواقع استضافة الصور"
عنوان الموضوع "هو العنوان الذي سيظهر في الشريط أسفل الصورة .. حاول أن تجعله ملفتآ للانتباه"
تستطيع أن تغير في عرض وارتفاع السلايدر بما يتناسب مع مدونتك .. عن طريق تغيير هذه الأرقام width: 590, height: 250
وهذه هي الإضافة كما في مدونتي
<div id='coin-slider'>
<a href="http://shamsbokraa.blogspot.com/search/label/%D9%85%D9%88%D8%A8%D8%A7%D9%8A%D9%84">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOfOjMgBwYDuUASp5A5Owupo8i00hmsnlSfLjz_X-43jTH4MJSQRzMjEvRZoTwFThdBp3ixIGiG5xSJ5GbOObLhdNByOjNyqik8BbnkkxLvzyNm3_QM8TPydv59y9PlwcGR6JrDl_bl3Uk/s1600/Untrgrheitled-1.jpg" />
<span>أفضل ثيمات وخلفيات موبايل نوكيا</span>
</a>
<a href="http://shamsbokraa.blogspot.com/2010/10/donald-zolan.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDHuwg5b08mFpkdsIkedXhZOFl4fyPixg5q2VB-nn_2ILX_Q6Bfa6hoNZw5AXvZhl1soyo5EoP5iIfAdzQuHLYiiJDj2v6jxXeEYa30aCE5C1FVJMxLr7YCsgzyOYgToyOdnAylaa6ihD2/s1600/Untitled-2.jpg" />
<span>أفضل صور الأطفال الزيتية</span>
</a>
<a href="http://shamsbokraa.blogspot.com/2010/06/2_24.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxwj4ge_t4X6k1lUC2Rg3Afg4e-e0VVw-Id-ekpZ3gUKsfio4iWXhLOVzMcmVB2J3QIvs8y11IKtILJSEgbMRnQBA2BGmidngZGyq7IHpsf6UUfTOB5q4fAOXNB9nN66K-qTjd8HBg5aEc/s1600/Untitled-3.jpg" />
<span>أفضل صور مضحكة عن المذاكرة والامتحانات</span>
</a>
<a href="http://shamsbokraa.blogspot.com/search/label/%D8%A7%D8%B3%D8%AA%D8%B1%D8%A7%D8%AA%D9%8A%D8%AC%D9%8A%D8%A7%D8%AA%20%D8%A5%D8%AF%D8%A7%D8%B1%D9%87%20%D8%A7%D9%84%D8%AA%D9%81%D8%A7%D9%88%D8%B6%20%D8%A7%D9%84%D9%86%D8%A7%D8%AC%D8%AD">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq2NY1bafo5mui935KbTrh9H6Efg1Rkm-iZYP7JGTyBfUNoH27tH7FzRgMfW4kHj5cFSPEbe4d8OP8cKJQnRLEZcREl8syiNBpm2bbMkSvU8zKfP_wkWixRgbOOTmPzucQR8OxmyG5HEv4/s1600/Untitled-1.jpg" />
<span>استراتيجيات إدارة التفاوض الناجح</span>
</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 580, height: 250, navigation: true, delay: 5000 });
});
</script>
احفظ الأداة
ثم قم سحبها لتضعها فوق "رسائل المدونة الالكترونية" كما في هذا الشكل
ثم قم بحفظ هذا الترتيب ..
قم بعرض مدونتك بعد التغييرات
واستمتع بهذه الإضافة ..
.jpg)
