سلايدر بجيكويري JQUERY متجاوب يعرض احدث المواضيع - عالم تكنولوجيا والمعلوميات|جديد المواضيع و الأخبار التقنية

الثلاثاء، 3 فبراير، 2015

سلايدر بجيكويري JQUERY متجاوب يعرض احدث المواضيع

سلايدر بجيكويري JQUERY  متجاوب يعرض احدث المواضيع
سلايدربجيكويري JQUERY  احترافي متجاوب يعرض احدث المقالات ، مستعمل في العديد من القوالب المدفوعة منها قالب Mega-mag قالبFlatMag قالبBmag والعديد سلايدر احترافي يلائم تقريبا جميع القوالب من حيث الشكل فيما يخص التركيب فهو سهل 
إما بوضعه بأداة مكانها فوق رسائل المدونة الإلكترونية أو بداخل القالب وكل هذا سيتم شرحه بعد المعاينة
شرح طريقة تركيب الإضافة


1. مباشرة من التخطيط أضف أداة Html/JavaScript وضع الكود التالي بها


إضغط مرتيين لتحديد الكل
<style>
/* CSS Responsive Slider Recent Post www.Ar1web.com */
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:21px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:droid arabic kufi;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:Electrolize,ge_ss_threeregular;
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:Electrolize,ge_ss_threeregular;
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<div id="featuredpost"></div>
<script type="text/javascript" src="https://ar1web-com.googlecode.com/svn/Hm/slider-post.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://www.igli4.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false

});
});
//]]>
</script>

* المحدد بالأزرق ضع بدله رابط موقعك
إذا اردت وضع السلايدر بداخل القالب تابع المراحل التالية

1. ابحث داخل القالب بإستعمال Ctrl+F عن </head>
2. ضع الكود المحدد باللون الأحمر فوقه
3. ابحث عن </body>
4. ضع الكود المحدد باللون الأصفر فوقه
* في هذه المرحة والأخيرة يوجد مكانين لوضع الكود بهما ويكون إما فوق المواضيع أو تحت القائمة وغيرها
5. ابحث عن content-wrapper أو عن main-wrapper 
6.  ضع الكود المحدد باللون البرتقالي تحت احد الأكواد

هكذا اكون قد انتهيت نلتقي في التدوينة القادمة تحياتي

ليست هناك تعليقات:

إرسال تعليق

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