Like And Win VIP Hack
Click Like To WIN 30 Day VIP Hack

إضافة كود آخر المشاركات لمدونات بلوجر شكل جديد متحرك مع التخصيص

Home // Blog // إضافة كود آخر المشاركات لمدونات بلوجر شكل جديد متحرك مع التخصيص

 
Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0

السلام عليكم ورحمة الله وبركاته

قدمنا لكم في مواضيع سابقة عن إضافة آخر
المواضيع لمدونات بلوجر بشكل تلقائي لكن اليوم موضوعنا هو نفس المواضع
السابقة عن أكواد أخر المشاركات أو آخر التدوينات, لكن بشكل جديد رائع يعرض
الصور بحجم أكبر ومعتمة مع إضافة النص في وسط الصورة مما يعطيها شكل جميل
وحديث كما أنها تتحرك حوالي كل 7 ثواني لتظهر المواضيع الأقدم منها

مثال حي عن الكود:

معاينة

كيفية الإضافة إلى مدونتك

إذهب إلى لوحة تحكم مدونتك –>> تخطيط –>> ثم أنقر على إضافة أداة ثم أختر من بين الأداوت أداة HTML/JavaScript
ثم ألصق الكود التالي داخل الأداة:
<center>
<div id="featuredpostside"></div>
<script type="text/javascript">function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="abt-sidebar-slider"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(//s[0-9]+-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(//s[0-9]+(-c|/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};</script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://mdadalgled.blogspot.com/",
MaxPost:4,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>
<style scoped="" type="text/css">
/*
by madad2.com
*/
#featuredpostside {
height: 500px;
overflow: hidden;
}
ul.abt-sidebar-slider * {
    -moz-box-sizing: border-box;
}
ul.abt-sidebar-slider {
    font: 11px 'Open Sans',sans-serif;;
}
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: 1000px;
    width: 100%;
}
ul.abt-sidebar-slider li {
    display: none;
    float: left;
    height: 25%;
    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-radius: 3px 3px 3px 3px;
    margin-top: -5px;
}
ul.abt-sidebar-slider .overlayx:hover {
    opacity: 0.1;
}
ul.abt-sidebar-slider h4 {
   color: white;
font-family: 'Open Sans',sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.5em;
margin: 0;
padding: 0px;
position: absolute;
left: 5%;
top: 40%;
width: 90%;
z-index: 2;
background: rgba(0, 0, 0, 0.4)url(http://4.bp.blogspot.com/-5BAxq07aDQA/UgdY3Mk8spI/AAAAAAAAB84/ElxocGOzgYA/s1600/Opacity.png)
}
ul.abt-sidebar-slider .label_text {
    bottom: 10px;
    color: white;
    font-size: 90%;
    left: 10px;
    position: absolute;
    z-index: 2;
}

.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 #004489;
bottom: 218px;
padding: 8px;
position: relative;
right: 10px;
border-top-left-radius: 5px;
}
.autname {
background: none repeat scroll 0 0 #004489;
top: -3px;
padding: 8px;
position: relative;
left: 138px;}
</style>
</center>
التخصيص:
غير http://mdadalgled.blogspot.com/ برابط مدونتك
عدد المشاركات MaxPost:4 يمكنك تغيير الرقم

Related Post

قوائم لعرض النصوص السلام عليكم ورحمة الله تعالى وبركاته ، إضافة النهار عبارة عن شرائح تعرض فيها نصوص أو شروحات .. هي كمعرض إذا صح القول تحتوي على تأثير رائع يمكن أن تست...
طريقة اعطاء فيديوهات بلوجر شكل مميز... بسم الله الرحمن الرحيم مرحبا بكم في مدونة مسطرة ... و موعدنا اليوم مع درس من دروس بلوجر و هو طريقة اعطاء فيديوهات بلوجر شكل مميز ...
السلايدر التقني بنسختيه العادية والتلقائية... التنسيق التقني من اكثر التنسيقات المطلوبة والمستخدمه في المدونات ودائما ما يطلبها المدونين ويسعون لتركيبها وهناك العديد من النسخ من هذا السلايدر لكن ا...
إضافة شاحنة الفيسبوك إلى المدونه... أهلا وسهلاً بكم من جديد على إضافات بلوجر طريق كل مدون الى النجاح اليوم سأشرح طريقة إضافة شاحنة فيسبوك على مدونتك من أجل زيادة عدد المعجبيك. حيث سيعجب ...
Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0

0 Comments ON " إضافة كود آخر المشاركات لمدونات بلوجر شكل جديد متح... "
leave a response

*







Copyright © All Rights Reserved 2014→2017 To Add-Fast.CoM