اضافة سلايد شو احترافي وانيق لمدونات البلوجر

السلام عليكم ، احبائي أقدم اليكم اليوم سلايدشو احترافي للمدونات العربية ، سلايدشو ملائم مع المدونات الأخبارية و التعليمية بشكل مناسب دون اخطاء و سريع التحميل أيضا .

السلايدشو من احدث السلايشوات المتوفرة و قد تم تعريبه ليتلائم مع المدونات و مواقع العربية دون مشاكل ، بحيث يتوفر على واجهة عرض بالشكل احترافي و مناسب و متناسب مع المدونات حيث يتم عرض 5 مواضيع في فترة واحدة ،ا .

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

اضافة سلاسدشو احترافي و انيق الى مدونات البلوجر

1. نتوجه الى المدونة ثم نختار قالب .

2. نضغط تحرير HTML .

3. نبحث عن الكود "استعمل CTRL+F"

</head>

4. نضيف الكود الثالي من فوقه .

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

لاضافة شكل الكتابة احترافي أضف الكود الثالي من فوق الكود السابق "هذا اختياري"

<link href='https://asma-rahmouni.googlecode.com/svn/trunk/GESSTwoMediumRegular.css' rel='stylesheet' type='text/css'/>

<link href='https://asma-rahmouni.googlecode.com/svn/trunk/GESSTwoLight.css' rel='stylesheet' type='text/css'/>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

5. الآن توجه الى تخطيط .

6. ثم اضافة اداة ثم اختار HTML/Javascript

7. أضف الكود الثالي و ضغط حفظ .

<style>

/* CSS Responsive 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){right:0;top:0}

#slides li:nth-child(2){right:50%;width:25%;height:50%}

#slides li:nth-child(3){right:75%;width:25%;height:50%}

#slides li:nth-child(4){right:50%;top:50%;width:25%;height:50%}

#slides li:nth-child(5){right:75%;top:50%;width:25%;height:50%}

#slides li:nth-child(1) h4 {overflow:hidden;font-size:16px;bottom:0;color:#fafafa;width:100%;

padding:10px 90px 10px 10px;text-align:right;text-transform:uppercase;background:rgba(0,0,0,0.3);

height:90px;font-family:'Oswald',GESSTwoMediumRegular;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;right:0;}

#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;right:10px;

padding:0;font-family:'Oswald',GESSTwoLight;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:15px;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:12px;font-family:'Oswald',GESSTwoMediumRegular;

right:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;

background:rgba(41,41,41,0.7);text-align:right;text-transform:uppercase;margin-left:10px;}

#slides .label_text{font-size:14px;color:#fff;bottom:10px;z-index:3;right:10px;

position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald',GESSTwoLight;

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:29px;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%;right:0;width:50%}

#slides li:nth-child(3){right:50%;top:50%;width:50%;height:25%}

#slides li:nth-child(4){right: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:14px;line-height:16px;}}

</style>

<div id="featuredpost"></div>

<script type="text/javascript" src="https://www.dropbox.com/s/ouw82qk0vdkkxf4/slidershow.js?dl=1"></script>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function () {

FeaturedPost({

blogURL:"http://30mars.com/",

MaxPost:8,

idcontaint:"#featuredpost",

ImageSize:500,

interval:10000,

autoplay:true,

tagName:false

});

});

//]]>

</script>