زوار ومتابعي المدونة
السلام عليكم ورحمة الله وبركاته
أقدم لكم اليوم إضافة مهمة لإصحاب المدونات ومواقع الكتب , او تحميل الكتب , الانمي , البرامج , الالعاب , مواقع تعليميه , حيث انه سلايد شو يقوم بعرض الصور على شكل مربعات متقطعه .
- طريقة التركيب :
1- إدخل إلى مدونتك | ثم أختر تخطيط | ثم إضافة أداة " HTML/JavaScript "
2- اللصق الكود التالي في صندوق الأداة :
<style>
#homeblog7CarouselSlider {
height:130px;
background-color:#333333;
border:10px solid #000000;
position:relative;
margin:50px 50px;
overflow:auto;
}
/* CarouselSlider by www.homeblog7.blogspot.com */
#homeblog7CarouselSlider:before,
#homeblog7CarouselSlider:after {
content:"";
display:block;
position:absolute;
top:0;
bottom:0;
left:-4px;
width:4px;
height:100%;
box-shadow:0 0 4px black;
z-index:10;
}
#homeblog7CarouselSlider:after {
left:auto;
right:-4px;
}
#homeblog7CarouselSlider .container {
position:absolute;
top:0;
left:0;
margin:5px 0 0 5px;
width:300%;
height:120px;
}
#homeblog7CarouselSlider figure {
display:block;
background-color:white;
float:left;
width:150px;
height:120px;
margin:0 5px 0 0;
position:relative;
overflow:hidden;
}
#homeblog7CarouselSlider figcaption {
display:block;
position:absolute;
right:0;
bottom:-50px;
left:0;
background-color:black;
font:italic normal 11px Arial,Sans-Serif;
color:white;
padding:4px 10px;
text-align:left;
opacity:.8;
}
#homeblog7CarouselSlider figure img {
display:block;
border:none;
margin:0 0;
}
</style>
<div id="homeblog7CarouselSlider">
<div class="container">
<figure>
<a href="#" title="عنوان التسمية التوضيحية">
<img alt="" src="http://im50.gulfup.com/8roqQo.jpg" />
</a>
</figure>
<figure>
<a href="#" title="عنوان التسمية التوضيحية">
<img alt="" src="http://im50.gulfup.com/58ny9E.jpg" />
</a>
</figure>
<figure>
<a href="#" title="عنوان التسمية التوضيحية">
<img alt="" src="http://im50.gulfup.com/wXStxz.jpg" />
</a>
</figure>
<figure>
<a href="#" title="عنوان التسمية التوضيحية">
<img alt="" src="http://im50.gulfup.com/GkPRmI.jpg" />
</a>
</figure>
<figure>
<a href="#" title="عنوان التسمية التوضيحية">
<img alt="" src="http://im50.gulfup.com/PXCl1v.jpg" />
</a>
</figure>
<figure>
<a href="#" title="عنوان التسمية التوضيحية">
<img alt="" src="http://im50.gulfup.com/m39Md3.jpg" />
</a>
</figure>
<figure>
<a href="#" title="عنوان التسمية التوضيحية">
<img alt="" src="http://im50.gulfup.com/t8EK6x.png" />
</a>
</figure>
<figure>
<a href="#" title="عنوان التسمية التوضيحية">
<img alt="" src="http://im50.gulfup.com/IjpBxR.jpg" />
</a>
</figure>
<figure>
<a href="#" title="عنوان التسمية التوضيحية">
<img alt="" src="http://im50.gulfup.com/2g5iJW.jpg" />
</a>
</figure>
</div>
</div>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript'>//<![CDATA[
(function($) {
var config = {
itemMargins: 5 // Distance between the thumbnails
};
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('overflow', 'hidden');
$container.css('width', total_width);
// Auto caption builder & hover effect
$item.each(function(cap) {
if ($(this).children().attr('title')) {
cap = $(this).children().attr('title');
$(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", function(e) {
if ($(this).width() < $container.width()) {
$container.css('left', -((e.pageX - o_l) * (c_w - t_w) / t_w));
}
});
}).trigger("resize");
})(jQuery);
//]]>
</script>
- عدّل ما هو ملون .
- استخدم هذا الكود عند إضافة صورة جديدة :
<figure>
<a href="#" title="عنوان التسمية التوضيحية">
<img alt="" src="رابط الصورة" />
</a>
</figure>
تنويه : أحبائي وأعزائي : تحية طيبة وبعد ، أنتم تعلمون كم يبذل كاتب التدوينة من جهد وعصف ذهني كي يخرجها إلى حيز الوجود أرجو من شخصكم الكريم عند النقل ذكر المصدر .
كتب بواسطة Expert Blogger
بلدي هو الأردن مشرف سابقا على عدة منتديات و مواقع و صفحات تعليمية على الفيسبوك و من عشاق البحت و الاكتشاف أشياء جديدة و حصرية حول شبكت الأنترنيت من أهمها مدونات بلوجر و وود دبرس و الصفحات على الفيسبوك أحب مساعدة المبتدئين لإنجاز طموحاتهم كما أسعى لتحقيقي طموحاتي من خلال هذا الموفع المتواضع أتمنى أن تنال مقالاتي إعجابكم و أن أكون أول من يدعمكم لشق طريقكم نحو التطور و الإحتراف و الإستفادة من خلال عرض مجموعة من المعلومات و المواضيع القيمة .
0 التعليقات:
إرسال تعليق