إضافة شريط الصور المتحركة لتدوينات بلوجر

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


انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).
تذكير:لا تنسى أخي المدون أن تأخد نسخة إحتياطية لمدونتك تجنبا لأي أخطاء.
]]></b:skin>
ثم ضع الكود التالي فوقه :

#myslides{

background:#000 url(http://1.bp.blogspot.com/_xfdD6S9fOk4/Sd1SjSaUrXI/AAAAAAAAA20/ndvDf0nTslY/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;

}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;

}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/

}

.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}

.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}
لتغير الخلفية،قم بتغير الرابط باللون الاحمر حسب رغبتك
والآن قم بالبحث عن الكود التالي:
</head>
ثم ضع الكود التالي فوقه :
<!-- JavaScript Slider -->
<script src='http://sites.google.com/site/mohamedabuiyad/slid-move1/abu-iyad.js' type='text/javascript'/>
<script src='http://sites.google.com/site/mohamedabuiyad/slid-move1/abu-iyad2.js' type='text/javascript'/>

<!-- End JavaScript Slider -->
<script type='text/javascript'>
stepcarousel.setup({
galleryid: &#39;mygallery&#39;, //id of carousel DIV
beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs
panelclass: &#39;panel&#39;, //class of panel DIVs each holding content
panelbehavior: {speed:1500, wraparound:true, persist:true},
autostep: {enable:true, moveby:1, pause:1000},
defaultbuttons: {enable: true, moveby: 4, leftnav: [&#39;http://1.bp.blogspot.com/_v5IxGTiMTD8/SxOlAIA_ZZI/AAAAAAAAAfg/ELVwF1qY8M8/s400/left.jpg&#39;, -48, 0], rightnav: [&#39;http://1.bp.blogspot.com/_v5IxGTiMTD8/SxOlAVn-OvI/AAAAAAAAAfo/kMJcmlXZKCs/s400/right.jpg&#39;, 0, 0]},
statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]

})

</script>
الروابط ذات اللون الاحمر تمثل صورة السهم الى اليسار و اليمين
Speed:1500 : سرعة تحرك الصور
moveby:1 : عدد الصور التي يتخطاها عند تحرك الصور
هذه القيم يمكنك تغييرها حسب رغبتك
قم بحفظ القالب ثم انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascript
ولآن الصق الكود التالي :
<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">

<!-- 1st Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D9%86%D8%B5%D8%A7%D8%A6%D8%AD%20%D9%84%D9%84%D9%85%D8%B3%D8%AA%D9%87%D9%84%D9%83?&max-results=5" target="blank" title="Two Column Denim Template"> <img width="160" alt="Two Column Denim Template" src="http://pics.imagup.com/ano1/1278000007.png" height="110" /> </a>
</div>
<!-- end code of 1st -->

<!-- 2nd Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D9%83%D9%8A%D9%81%20%D8%AA%D8%B5%D9%86%D8%B9?&max-results=5" target="blank" title="Simple Blog Writing Template"> <img width="160" alt="Simple Blog Writing Template" src="http://pics.imagup.com/ano1/1278001914.png" height="110" /> </a>
</div>
<!-- end code of 2nd -->

<!-- 3th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1?&max-results=5" target="blank" title="Lenomag Blogger Template"> <img width="160" alt="Lenomag Blogger Template" src="http://pics.imagup.com/ano1/1278001116.jpg" height="110" /> </a>
</div>
<!-- end code of 3th -->

<!-- 4th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%BA%D8%B1%D8%A7%D8%A6%D8%A8%20%D9%88%20%D8%B9%D8%AC%D8%A7%D8%A6%D8%A8?&max-results=5" target="blank" title="Money Blogger Template"> <img width="160" alt="Money Blogger Template" src="http://pics.imagup.com/ano1/1278001691.png" height="110" /> </a>
</div>
<!-- end code of 4th -->

<!--5th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%BA%D8%B1%D8%A7%D8%A6%D8%A8%20%D9%88%20%D8%B9%D8%AC%D8%A7%D8%A6%D8%A8?&max-results=5" target="blank" title="Digital Statement Blogger Template"> <img width="160" alt="Digital Statement Blogger Template" src="http://pics.imagup.com/ano1/1278002070.jpg" height="110" /> </a>
</div>
<!-- end code of 5th -->

<!--6th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%A7%D9%84%D8%B1%D8%A8%D8%AD%20%D9%85%D9%86%20%D8%A7%D9%84%D8%A5%D9%86%D8%AA%D8%B1%D9%86%D8%AA?&max-results=5" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278002754.png" height="110" /> </a>
</div>
<!-- end code of 6th -->

<!--7th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1?&max-results=5" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278003649.png" height="110" /> </a>
</div>
<!-- end code of 7th -->

<!--8th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%A7%D9%84%D8%AA%D8%BA%D8%B0%D9%8A%D8%A9%20%D9%88%D8%A7%D9%84%D8%B5%D8%AD%D8%A9?&max-results=5" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278003860.png" height="110" /> </a>
</div>
<!-- end code of 8th -->

<!--9th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278004864.png" height="110" /> </a>
</div>
<!-- end code of 9th -->

<!--10th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278094671.png" height="110" /> </a>
</div>
<!-- end code of10th -->

<!--11th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278094825.png" height="110" /> </a>
</div>
<!-- end code of11th -->

<!--12th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%A7%D9%84%D8%A3%D8%AB%D8%A7%D8%AB%20%D9%88%D8%A7%D9%84%D8%AF%D9%8A%D9%83%D9%88%D8%B1?&max-results=5" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278095024.png" height="110" /> </a>
</div>
<!-- end code of 12th -->

</div></div></div>
وأخيرا قم بتبديل الروابط ذات اللون الاحمر بروابط مدونتك والروابط ذات اللون الازرق بروابط الصور اتمنى ان تنال اعجابكم

هناك 42 تعليقًا:

  1. إضفاتك كلها رائعة حياك الله و أكتر من أمتالك

    ردحذف
  2. شكرا جدا على الكود الرائع

    ردحذف
  3. اضافه جميله يا ابو اياد بس انا كان نفس اشوف المعاينه لاني دخلت عليها قال اني لازم اكون من القراء المدعوين

    ردحذف
  4. @Dr/ walaa salah

    الآن يمكنك الدخول للمعاينة

    ردحذف
  5. متشكره يا ابو اياد

    ردحذف
  6. السلام عليكم ورحمة الله وبركاته

    كيف حالك اخي العزيز محمد بو سلامة تحياتي لك يا طيب ولكل اهل المغرب انت فعلاً مميز ومواضيعك رائعة وهادفة اشكرك سأجرب هذا الكود واشكرك مرة اخرة اخوك

    انور العراقي

    ردحذف
  7. @انور العراقي
    بارك الله فيك أخي أنور وجزاك الف خير تحية طيبة لك وللشعب العراقي الصامد ،وفقك الله وشكرا لك على الزيارة

    ردحذف
  8. راكثر من رائع يا ابوا اياد والى مزيد من التقدم

    اتمنى زيارتك لمدونتى وارشادى بنصائحك دائما

    http://ornamentalplantsandcoral.blogspot.com

    ردحذف
  9. بارك الله فيك أخي بعد التعديل الروابط ذات اللون الاحمر بروابط مدونتك والروابط ذات اللون الازرق بروابط الصور هل سوف نكرير العملية عندكل موضوع او سوف يدرج الموضوع شريط الصور المتحركة لتدوينات بلوجر المرجوالتوضيح وشكرا

    ردحذف
  10. أخي أبو إياد نجح الموضوع معي لكن وضع شريط الصور لم يكن في منتصف الصفحة ولكنه في اليمين منها، أرجو منك إفادتي كيف أستطيع توسيطه.
    بارك الله فيك

    ردحذف
  11. لو ممكن اعرف الكود ينحط فوق الكلمة التلى تم البحث عنها ازاى اعمل مسافة على شان يكون فى مكان ولا ازاى

    ردحذف
  12. اضافة جميلة, لكن هل هنالك طريقة لتظهر فقط في الصفحة الرئيسة و شكرا :p

    ردحذف
  13. مشكور جدااااااااااااا على هذه المدونه الرئعه جدا

    ردحذف
  14. بارك الله فيك شرح أكثر من رائع

    ردحذف
  15. يعني كل مرة اضع رابط الصورة و رابط المدونة ؟

    ردحذف
  16. السلام عليكم ورحمة الله
    الله يجزاك الجنه
    مدونة جداً رائعه
    أستمتعت بالتجول بين صفحاتها
    واستفدت الكثير جعلها الله في موازين حسناتك
    .......... ولكن لدي استفسار بخصوص هذه الاضافة الرائعه
    لأني اضفتها لمدونتي وأتت بالشكل الطولي
    وأنا أريدها تأتي بالعرض صورتين فقط مع الاسهم الجانبيه للتحريك .....
    كما هو موضح بالمعاينه .... ومشكووور مقدماً..

    ردحذف
  17. @احساس
    عند إضافتك للإضإفة قومي بإزاحة الأداة فوق المواضيع لكي تظهر لك بالعرض

    ردحذف
  18. بارك الله فيك أخي الحبيب ...أشهد الله على حبك فيه ...فلطالما استفدت من دروسك
    وهذه بعضها هنا
    http://video-dza.blogspot.com/

    http://toumiat.blogspot.com

    بارك الله فيكم ونفع بكم
    محبكم أبو عبد الرحمن الاندلسي

    ردحذف
  19. الله يديك العافيه ياخيوو
    يعني ما في طريقه اقدر اخلي صور الموضيع تجي بطرقيه عشوائيه
    بدون ما اضيفها انا بنفسي
    ......
    وكمان حابه اشكرك على المدونه الجميله بارك الله فيك وكثر من امثالك وجعلها في ميزان حسناتك يارب

    ردحذف
  20. @أميرة رمادي
    فهمت عليك أختي الكريمة لا توجد حاليا مثل هذه الإضافة منطبقة على هذه القائمة حالييا ،لكن في حين توفرها سوف يتم وضع شرح لها ،سعدت بزيارتك وبالتوفيق

    ردحذف
  21. ابو اياد الاضافه تمااااام اوى بس عاوزها تيجى ف نص الصفحه عشان دى بتظهر ف يمين وانا بحب التناسق ياريت تقولى اعمل كده ازاااااااااااى !! وشكرا ليك ...

    ردحذف
  22. @elshab7
    ونسيت اقولك ازاى اغير لون خلفيه الصوره نفسها مش الخلفيه كلها لا ده ف دهر الصوره ف خلفيه اسود ع ازرق كده نفسى اغيرها ياااربت تقولى وشكرااا...

    ردحذف
  23. شكرا ابو اياد

    ردحذف
  24. شكرا علي الاضافة الرائعه دي بس كنت عاوز اخلي الصور في الهيدر من فوق تبقي في منتصف الصفحة ؟؟ ممكن تقولي الطريقة

    ردحذف
  25. الف الف الف الف شكر يا حبيب قلبى

    ردحذف
  26. للموضوع أهمية عندي وعند الكثير من المدونين .. تقبل مني جزيل الشكر .. دعواتي لك بالتوفبق والنجتح

    ردحذف
  27. pergola aluminium11:45 م

    شكرا لك على المجهود

    ردحذف
  28. ألف شكر لك أخي الفاضل فقد إستفدت كثيرا منك.

    ردحذف
  29. شكرا لك اخي الحبيب و الحمد لله استفدت منها و عدتها بجعل الخلفية شفافة و صور التوجيه كمان من عملي بس لساتي اعاني من مشكلة انها عند تحركها تتحرك من اليسار الى اليمين صح بس المشكلة انها تزيد تتحرك حركة زيادة ما عرفت كيف اخليها تتحرك فقط على الصور الموجودة

    هذا هو رابط مدوني (مختصة في العاب فلاش)

    http://en-games-flash.blogspot.com

    شكرآ للمرة الثانية على مجهودك الجبار الذي استفاد منه كل العرب و هو لشرف لنا

    ردحذف
  30. https://sites.google.com/site/lightbox007/emoticon/64%2819%29.png

    ردحذف
  31. هدا هو كود حسابي على الفيسبوك:
    ***********
    hhhhhhhhhhhhhhhhhh

    ردحذف
  32. غير معرف6:00 م

    cod facebook
    ************

    ردحذف
  33. لا أجد كود ]]> في مدونتي ما البديل شكرا

    ردحذف
  34. @Malika malikaa

    تأكدى بعدم وجود فراغات قبل الكود واذا كان كذلك ابحثتى عن
    b:skin وستجديه ان شاء الله وبانتظارك

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

    ردحذف
  36. اضافة رائعة
    بس ممكن استفسار اخي الكريم
    بالنسبة للاسهم اليمين والشمال
    ليه ما اقدر اضيف عليهم css لازاحتهم مثلا الى اليمين او الشمال
    ممكن تساعدنا وجزاك الله خير

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية