لابد وأن نتطرق لكل الطرق التى تجعل من مدونات بلوجر فى صدارة أنواع النطاقات من حيث الترتيب والتصميم والإضافات التى تجعلها كذلك. قد قمنا بتدوين 4 طرق مختلفة التصميم لعرض أحدث موضوعات مدونتك على بلوجر وهنا الطريقة الخامسة الأكثر تطورا لأن بها مميزات رائعة وهو تحرك الموضوعات كأنها شرائح منزلقة مع عرض اسم الكاتب والتاريخ وعرض الصور بمقاسات مختلفة.
كود الإضافة:
<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/AVvXsEhuL9hH1G0JD6MXYroE_ISz9KgTKySAsx0Cccl5mxRFJF5foWDFl7MWqdniAd4DPrGmJtYvuXVB3KYf1v0zwqYK4Majl5cuHkvZ9oLhz1vxpblEB-Je8zdoSsTEFW6ldLgj3Tq1SZt75tg/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.abu-iyad.com",
MaxPost:10,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:6000,
autoplay:true,
tagName:false
});
//]]>
</script>
<a href="http://www.abu-iyad.com">مدونة أبو إياد</a>
والأن اذا أعجبتك الإضافة يمكنك ان تتبع الأتى:
1- الدخول الى لوحة تحكم بلوجر.
2- الدخول الى تخطيط Layout.
3- قم بإضافة أداة جديدة Add a Gadget فى المكان المراد ظهور الأداة فيه واختر HTML/JavaScript.
4- قم بنسخ الكود ولصقه داخل HTML/JavaScript
5- قم بالحفظ Save arrangement وتمتع بالأداة.
ملاحظة هامة:
يجب عليك تغيير كلمة abu-iyad الملونة بالأحمر ووضع اسم مدونتك وليكن مثلا iglal.blogspot.
يمكنك تغيير 6000 لتلتحكم فى سرعة تحرك الموضوعات.
يمكنك تغيير true الى false اذا أردت أن تكون الموضوعات ثابته.
