السبت، 8 فبراير 2014

الرئيسية » إضافات بلوجر » إضافة أحدث موضوعات مدونات بلوجر كشرائح منزلقة رائعة

إضافة أحدث موضوعات مدونات بلوجر كشرائح منزلقة رائعة

5:52:00 م

إضافات بلوجر

بسم الله الرحمن الرحيم والصلاة والسلام على أشرف

المرسلين سيدنا محمد وعلى آله وصحبه أجمعين

لابد وأن نتطرق لكل الطرق التى تجعل من مدونات

بلوجر فى صدارة أنواع النطاقات من

حيث الترتيب والتصميم و من الإضافات التى تجعلها

كذلك. اضافة لعرض أحدث موضوعات مدونتك على

بلوجر وهنا الطريقة الأكثر تطورا لأن بها مميزات

رائعة متل تحريك الموضوعات كأنها شرائح منزلقة مع

عرض اسم الكاتب والتاريخ وعرض الصور بمقاسات

مختلفة

كود الإضافة

<style scoped="" type="text/css">
/*trickstoo modified widget of abt slider widget*/
ul.abt-sidebar-slider *{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
ul.abt-sidebar-slider{
font:normal normal 11px embria
}
ul.abt-sidebar-slider,ul.abt-sidebar-slider li{
margin:0;
padding:0;
list-style:none;
position:relative
}
ul.abt-sidebar-slider{
width:100%;
height:500px
}
ul.abt-sidebar-slider li{
height:24.5%;
position:absolute;
padding:0;
width:49.5%;
float:left;
overflow:hidden;
display:none
}
ul.abt-sidebar-slider li:nth-child(1),ul.abt-sidebar-slider li:nth-child(2),ul.abt-sidebar-slider li:nth-child(3),ul.abt-sidebar-slider li:nth-child(4){
display:block
}
ul.abt-sidebar-slider img{
border:0;
width:100%;
height:100%} ul.abt-sidebar-slider li:nth-child(1){width:100%;
height:49.5%;
margin:0 0 2px;
left:0;top:0
}
ul.abt-sidebar-slider li:nth-child(2){left:0;top:50%}
ul.abt-sidebar-slider li:nth-child(3){left:50.5%;top:50%}
ul.abt-sidebar-slider li:nth-child(4){width:100%;left:0;top:75%}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider li{
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out
}
ul.abt-sidebar-slider .overlayx{
width:100%;
height:100%;
position:absolute;
z-index:2;
left:0;
top:0;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEissukIbQ1U3HR5iRt5ziznCCzyj48_LedoE04Izt1wjAKIkNRuFQB7sF2-ZCUL3UTeZSKSxy0au4PudLH0weGDhZguSt0z3z63-ozTfpzN23leq6LhvBqHVhedZGBsjxB45TraClBHUzg/s1600/linebg-fade.png);
background-position:50% 50%;
background-repeat:repeat-x
}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{
border:4px solid black;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px
}
ul.abt-sidebar-slider li:nth-child(1) .overlayx{
background-position:50% 25%
}
ul.abt-sidebar-slider .overlayx:hover{
-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";
filter:alpha(opacity=10);-khtml-opacity:0.1;
-moz-opacity:0.1;opacity:0.1
}
ul.abt-sidebar-slider h4{
position:absolute;
bottom:30px;
z-index:2;
color:white;
margin:0;
width:100%;
padding:0 10px;
line-height:1.5em;
font:embria;
font-weight:normal
}
ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{
font-size:150%
}
ul.abt-sidebar-slider .label_text{
position:absolute;
bottom:10px;
left:10px;
z-index:2;
color:white;
font-size:90%}
ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider li:nth-child(3) .autname{
display:none
}
.buttons{
margin:5px 0 0
}
.buttons a{
display:inline-block;
text-indent:-9999px;
width:15px;
height:25px;
position:relative
}
.buttons a::before{
content:"";
width:0;
height:0;
border-width:8px 7px;
border-style:solid;
border-color:transparent #535353 transparent transparent;
position:absolute;
top:50%;
margin-top:-8px;margin-left:-10px;
left:50%
}
.buttons a.nextx::before{
border-color:transparent transparent transparent #535353;
margin-left:-3px
}
</style>
<div id="featuredpostside">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://trickstoo-slider-recent-posts.googlecode.com/svn/trickstoo-slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://www.tounsicoool.blogspot.com",
MaxPost:10,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:6000,
autoplay:true,
tagName:false
});
//]]>
</script>
<a href="http://www.tounsicoool.blogspot.com">Tounsi Cool</a>

طريقة تركيب الاضافة

الدخول الى لوحة تحكم بلوجر

2- الدخول الى تخطيط Mise en page .

3- قم بإضافة أداة جديدة Ajouter un badget فى المكان المراد ظهور الأداة فيه واختر HTML/JavaScript.

4- قم بنسخ الكود ولصقه داخل HTML/JavaScript

enregistrer قم بالحفظ

ملاحظة هامة

يجب عليك تغيير www.tounsicoool.blogspot.com ووضع اسم مدونتك
يمكنك تغيير 6000 لتلتحكم فى سرعة تحرك الموضوعات.
يمكنك تغيير true الى false اذا أردت أن تكون الموضوعات ثابته.

0 commentaires:

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)