إضافة سلايد شو احترافي لمدونة بلوجر لعرض المقالات الخاصة بك

</p> <style> <div> #BloggerSpiceCarouselSlider { height: 130px؛ لون الخلفية: # 333333 ؛ الحد: 10 بكسل صلب # 000000 ؛ الموقف: نسبي ؛ الهامش: 50 بكسل 50 بكسل ؛ تجاوز: تلقائي ؛ } / * CarouselSlider بواسطة www.bloggerspice.com * / #BloggerSpiceCarouselSlider: before، #BloggerSpiceCarouselSlider: after { content: ""؛ العرض محجوب؛ الموقف: مطلق. أعلى: 0؛ أسفل: 0؛ اليسار: -4 بكسل ؛ العرض: 4 بكسل ؛ الارتفاع: 100٪؛ ظل الصندوق: 0 0 4 بكسل أسود ؛ مؤشر z: 10 ؛ } #BloggerSpiceCarouselSlider: بعد { اليسار: تلقائي ؛ اليمين: -4 بكسل ؛ } #BloggerSpiceCarouselSlider .container { position: absolute؛ أعلى: 0؛ اليسار: 0؛ الهامش: 5 بكسل 0 0 5 بكسل ؛ العرض: 300٪؛ الارتفاع: 120 بكسل ؛ } #BloggerSpiceCarouselSlider شكل { display: block؛ لون الخلفية: أبيض؛ تعويم: اليسار؛ العرض: 150 بكسل ؛ الارتفاع: 120 بكسل ؛ الهامش: 0 5 بكسل 0 0 ؛ الموقف: نسبي ؛ إخفاء الفائض؛ } #BloggerSpiceCarouselSlider figcaption { display: block؛ الموقف: مطلق. اليمين: 0؛ أسفل: -50 بكسل ؛ اليسار: 0 ؛ لون الخلفية: أسود ؛ الخط: مائل عادي 11 بكسل Arial ، Sans-Serif ؛ اللون الابيض؛ الحشو: 4 بكسل 10 بكسل ؛ محاذاة النص: يسار ؛ العتامة: .8 ؛ } #BloggerSpiceCarouselSlider figure img { display: block؛ الحدود: لا شيء ؛ الهامش: 0 0 ؛ } </ النمط></p> <div معرف = "BloggerSpiceCarouselSlider"> <div الطبقة = "حاوية"> <الرقم> <a href=" # "عنوان title=" لتسمية توضيحية "> <IMG بديل =" "SRC =" HTTP: https://irbah4u.com/wp-content/uploads/2024/02/7-1.jpg "/> < <a href=" # "عنوان title=" لتسمية توضيحية "> <IMG بديل =" "SRC =" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLS5INgjiNboSZ2SR1EgK6ntiMtPoRBFRrXCqLbK7Td2LDF9QxNhS64c1HxIMQO_rj6KV45PaBRFAT1oLcknh4iA33qn6MIIL2HfAZ4kKUqgbnkLoBnzg639Hr0f3XgnIdgYNPN1iQOYhu/s1600/9 .jpg و "/> </A> </ الرقم> <الرقم> <a href=" #" عنوان title=" لتسمية توضيحية "> <IMG بديل = "" SRC = " HTTP: //3.bp.blogspot. com / -cqHmDnU6IUo / UfYvkiKD-pI / AAAAAAAAEIs / 6rNbrWl2n5U / s1600 / 10.jpg "/> </a> </figure> <figure> <a href=" # "title=" عنوان التسمية التوضيحية "> <img alt = "" src = " https://irbah4u.com/wp-content/uploads/2024/02/8-1.jpg " /> </a> </figure> <figure> < a href = " # " title = " عنوان التسمية التوضيحية "> <img alt = "" src = " https://irbah4u.com/wp-content/uploads/2024/02/6-1.jpg " /> </A> </ الرقم> <الرقم> <a href=" # "عنوان title=" لتسمية توضيحية "> <img alt = "" src = "https://irbah4u.com/wp-content/uploads/2024/02/4-1.jpg "/> </a> </figure> <figure> <a href =" # "title =" عنوان التسمية التوضيحية "> <img alt =" "src =" https://irbah4u.com/wp-content/uploads/2024/02/3-1.jpg "/> </a> </ figure > <الرقم> <a href=" # "عنوان title=" لتسمية توضيحية 2"> على <img بديل =" "SRC =" HTTP: // 1.bp.blogspot.com/-xarVMAVA3YU/UfYvkhm4MCI/AAAAAAAAEIw/cehXZF6MeRw/s1600/2.jpg "/> </A> </ الرقم> <الرقم> <a href=" # "عنوان title=" لتسمية توضيحية "> <IMG بديل =" "SRC =" http://4.bp.blogspot.com/-A6GKQkWlf4o/ UfYvkYZjF0I / AAAAAAAAEIo / goOT3YD4D_Y / s1600 / 1.jpg "/> </a> </figure> </p></div> </div> <p><script type = 'text / javascript' src = 'https: //ajax.googleapis. com / ajax / libs / jquery / 1.7.2 / jquery.min.js '> </script> <script type =' text / javascript '> // <! [CDATA [ (الوظيفة ($) { var config = { البند الهوامش:5 // المسافة بين الصور المصغرة }؛ var $ thumbnailScroller = $ ('# BloggerSpiceCarouselSlider')، $ container = $ thumbnailScroller.find ('. container')، $ item = $ container.find ('figure')، item_length = $ item.length، item_width = $ item .outerWidth ()، item_margin = config.itemMargins، total_width = (item_width + item_margin) * item_length، $ window = $ (window)؛ $ thumbnailScroller.css ("تجاوز"، "مخفي")؛ Container.css $ ('العرض'، total_width)؛ // منشئ التسميات التوضيحية التلقائية وتأثير التمرير $ item.each (الوظيفة (غطاء) { if ($ (this) .children (). attr ('title')) { cap = $ (this) .children (). attr ( " $ (this) .children (). removeAttr ('title')؛ $ (this) .append (' <figcaption>' + cap + '</figcaption>')؛ } }). hover (function () { $ (this) .find ('figcaption'). stop (). animate ({ bottom: 0 }، 200)؛ }، function () { $ (this) .find ( 'figcaption'). stop (). animate ({ bottom: -50 }، 200)؛ })؛ $ window.on ("resize"، function () { var o_l = $ thumbnailScroller.offset (). left، t_w = $ thumbnailScroller.width ()، c_w = total_width؛ $ thumbnailScroller.on ("mousemove" ، الوظيفة (e ) { if ($ (this) .width () <$ container.width ()) { $ container.css ('left'، - ((e.pageX - o_l) * (c_w - t_w) / t_w)) ؛ } }) ؛ }). trigger ("تغيير الحجم") ؛ }) (jQuery) ؛ //]]> </script>