اضافة اخر المواضيع جانبيه بتقنية jquery متحركة وبطريقة عرض احترافية لمدونات بلوجر

نقدم لكم في موضوع اليوم اضافة رائعة متميزة جدا لمدونات بلوجر اضافة اخر الاخبار بطريقة عرض جديدة واحترافية واكثر من رائعة بفضل تقنية 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 الذي بلون الازرق  الى رابط المدونة الخاصة بك

ولطلب تعديل لون الاضافة ليتناسب مع لون القالب الخاص بامكانك ترك تعليق في الموضوع مع رابط المدونة لنقوم بارسال الاضافة لك بلون الخاص بك 

نتمنا ان يكون الموضوع نال اعجابكم وان تكونو دائما من متابعين مدونة ربحني شكرا لتتابعو جديد الحصريات معانا