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

www.monte-escalier-prix.org

شاركه على +Googleأضفه الى Deliciousشاركه على Twitterشاركه على Facebookأضفه الى StumbleUponأضفه الى Digg

لابد وأن نتطرق لكل الطرق التى تجعل من مدونات بلوجر فى صدارة أنواع النطاقات من حيث الترتيب والتصميم والإضافات التى تجعلها كذلك. قد قمنا بتدوين 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/AVvXsEiGOu0Pb2kHjMYkb_qQpO0B_SZ8alErf2BI-Bl8DOKoswxDBPhrCcLnsc7PdkkMdvfTk5EtaOZqCLds6My6-3jw7mU2le9eytc60z3_6_blHyGYS1xFyU3lDYBKYFu-4s6-nuHisNRg3bE/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 اذا أردت أن تكون الموضوعات ثابته.

أى سؤال لا تتردد فى وضعه بتعليقك :)

بقلم mohammed glal

مهندس مصري ومتابع جيد للأخبار والمستجدات التقنية والاعلام الاجتماعى ومهتم بالاعلان عن الشركات الناشئة عبر مدونته الشخصية (مدونة راصد تقني), كاتب سابق على مدونة عالم الإبداع ومشرف سابق فى موقع نقطة التطوير ومنتدى الديوان -تم اغلاقه-. أحب القراءة والترجمة للمستجدات التقنية والتكنولوجية. المالك الحالي لمدونة أبو إياد.

روابط هذه التدوينة قابلة للنسخ واللصق
URL
HTML
BBCode

www.monte-escalier-prix.org

تنبيه : المرجوا عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا

www.monte-escalier-prix.org