الهجان مستر وليد فريد
ادعية لوجة الله : عدد المساهمات : 4697 تاريخ الميلاد : 04/07/1975 تاريخ التسجيل : 21/09/2009 العمر : 48
| موضوع: اضافة اخر المواضيع جانبيه بتقنية jquery متحركة وبطريقة عرض احترافية لمدونات بلوجرl الجمعة مايو 30 2014, 06:55 | |
| نقدم لكم في موضوع اليوم اضافة رائعة متميزة جدا لمدونات بلوجر اضافة اخر الاخبار بطريقة عرض جديدة واحترافية واكثر من رائعة بفضل تقنية jquery هذه الاضافة حصرية على شبكة ربحني تقبل مرورى على الموضوع مع الشكر نتمنا ان تنال اعجابكم هذه الاضافة ونتمنا ان لا تحرمونا من تعليقاتكم ومن مشاركتكم للموضوع نتركم مع الشرح ناتي للشرح طريقة الاضافة اعدادات المدونة → التخطيط → اضفة اداة → HTML/JavaScript ونقوم باضافة هذا الكود - الكود:
-
<center>
<div id="headerbox">اخر المواضيع</div>
<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://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-sidebar-slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://www.rb7ne.com/",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>
<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'/>
<style scoped="" type="text/css">
/*
Made by rb7ne.com with lot of hardwork please keep the comment intact
*/
ul.abt-sidebar-slider * {
-moz-box-sizing: border-box;
}
ul.abt-sidebar-slider {
font: 11px GESSTwoMediumRegular,tahoma;
}
ul.abt-sidebar-slider, ul.abt-sidebar-slider li {
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
ul.abt-sidebar-slider {
height: 500px;
width: 100%;
}
ul.abt-sidebar-slider li {
display: none;
float: left;
height: 24.5%;
overflow: hidden;
padding: 0;
position: absolute;
width: 100%;
}
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 li:nth-child(2) {
left: 0;
top: 50%;
}
ul.abt-sidebar-slider img {
border: 0 none;
height: 100%;
width: 100%;
}
ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider li {
transition: all 0.4s ease-in-out 0s;
}
ul.abt-sidebar-slider li:nth-child(4) {
left: 0;
top: 75%;
width: 100%;
}
ul.abt-sidebar-slider li:nth-child(3) {
left: 0;
top: 25%;
}
ul.abt-sidebar-slider .overlayx {
background-color: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
}
ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider img {
border: 4px solid #669900;
border-radius: 3px 3px 3px 3px;
}
ul.abt-sidebar-slider .overlayx:hover {
opacity: 0.1;
}
ul.abt-sidebar-slider h4 {
color: white;
font-family: GESSTwoMediumRegular,tahoma;
font-size: 18px;
font-weight: 100;
line-height: 1.5em;
margin: 0;
padding: 0 10px;
position: absolute;
top: 18px;
width: 100%;
z-index: 2;
}
ul.abt-sidebar-slider .label_text {
bottom: 10px;
color: white;
font-size: 90%;
left: 10px;
position: absolute;
z-index: 2;
}
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;
height: 25px;
position: relative;
text-indent: -9999px;
width: 15px;
}
.buttons a:before {
border-color: transparent #535353 transparent transparent;
border-style: solid;
border-width: 8px 7px;
content: "";
height: 0;
left: 50%;
margin-left: -10px;
margin-top: -8px;
position: absolute;
top: 50%;
width: 0;
}
.buttons a.nextx:before {
border-color: transparent transparent transparent #535353;
margin-left: -3px;
}
.date {
background: none repeat scroll 0 0 rgba(55, 146, 26, 0.84);
bottom: 93px;
padding: 8px;
position: relative;
right: 6px;
}
#headerbox {
background:
#79B306;
font-family: GESSTwoMediumRegular,tahoma;
padding: 4px;
}
</style>
</center>
<a href="http://www.rb7ne.com/2014/05/responsive-and-automated-slider-jquery-blogger.html" target="_blank"> <span style="font-size: xx-small;">Get it here </span></a><br/> الان قم بتعديل رابط wwwrb7ne.com الذي بلون الازرق الى رابط المدونة الخاصة بك
ولطلب تعديل لون الاضافة ليتناسب مع لون القالب الخاص بامكانك ترك تعليق في الموضوع مع رابط المدونة لنقوم بارسال الاضافة لك بلون الخاص بك
| |
|