سلايدرشو خفيف تلقائي واحترافي لمدونات بلوجر
السلام عليكم , السلايدرشو من الامور المهة في المدونة اذ يقوم بعرض اخر المواضيع مما يعطي المدونة طابع احترافي ,
ان شاء الله سأقدم لكم سلايدر خفيف وجميل لمدونات بلوجر وتلقائي سيقوم بعرض اخر المواضيع كما ان طريقةالتركيب سهلة ,
توجه الى لوحة التحكم بلوجر ثم قوالب
تحرير html
ابحث عن الوسم ]]></b:skin>
ثم اظف تحته هدا الكود
/* CSS Responsive Slider Recent Post */
#featuredpost {margin:15px auto;}
#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:25px;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:Electrolize,ge_ss_threeregular;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:'Oswald';
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;}}
/* CSS Fonts */
@font-face {font-family:'Open Sans';font-style:normal;font-weight:600;
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');}
بعد دالك ابحث عن </body>
ثم اظف فوقه مباشرة هدا الكود
<script type='text/javascript'> $(".PopularPosts img").each(function () { $(this).attr("src", $(this).attr("src").replace(/\/s[0-9]+(\-c)?\//, "/w80-h60-c/")) }); </script> <script type="text/javascript" src="https://arlina-design.googlecode.com/svn/slider-post.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://prog-007.blogspot.com/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
استبدل ما باللون الاحمر برابط مدونتك
الخطوة الاخيرة اختر مكان وضع السلايدر ولوضعه اسفل الهيدر اي فوق المشاركات
ابحث عن <div id='content-wrapper'> او content-wrapper
وضع فوقه الكود <div id="featuredpost"></div>
الطريقة التانية لاظافة السلايدر بواسطة ادات HTML/JavaScript
توجه الى لوحة تحكم بلوجر
التخطيط , اضافة ادات HTML/JavaScript
ثم ضع فيها هدا الكود
<style>/* CSS Slider Recent Post */#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:25px;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:'Oswald';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:'Oswald';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:'Oswald';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://arlina-design.googlecode.com/svn/slider-post.js"></script><script type='text/javascript'>//<![CDATA[$(document).ready(function () {FeaturedPost({blogURL:"رابط المدونة ",MaxPost:8,idcontaint:"#featuredpost",ImageSize:500,interval:10000,autoplay:true,tagName:false});});//]]></script>
غير ما باللون الاحمر بما يناسبك
لتغيير الخط ابحث عن font-family:'Oswald';
بالتوفيق ادا واجهة اي مشكل لا تتردد في وضعه في التعليق
