سلايد للمشاركات المختارة تلقائيا

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

معاينة الإضافة

شرح طريقة تركيب الإضافة

1. توجه للقالب >> تحرير

2. ابحث بإستعمال Ctrl+F عن <head/>

3. ضع الكود التالي فوقه

<style>
.slidebox {
    position:fixed;
    bottom:100px;
    right:-300px;
    width:290px;
    height:150px;
    font-size:30px;
    color:white;
    background:#333;
    transition:all .4s ease-in-out;
    padding-right:10px;
    border-radius:3px 0 0 3px;
}
.header-slidebox{
    position:absolute;
    top:0;
    left:0;
    text-align:left;
    font-family:droid arabic kufi;
    font-size:18px;
    font-weight:Bold; 
    background:#505050;
    border-bottom:1px solid #282828;
    padding:0 10px;
    height:30px;
    width:100%;
    line-height:30px;
    border-radius:3px 0 0;
}
.closeslidebox{
    color:#333;
    position:absolute;
    top:0px;
    right:0px;
    font-family:Arial;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    background:#ddd;
    text-align:center;
    width:30px;
    height:30px;
    line-height:30px;
    border-bottom:1px solid #282828;
    transition:all .3s ease-in-out;
}
.closeslidebox:hover{
    background:#cacaca;
}
#random-posts img{
    float:left;
    margin:0 10px 10px 0;
    background:#FFF;
    width:130px;
    height:100px;
    padding:0;
    transition:all .3s ease-in-out;
    border-radius:3px;
}
#random-posts img:hover{
    opacity:.7;
}
ul#random-posts{
    list-style:none;
    margin-top:40px;
    margin-right:10px;
    font-family:Electrolize,ge_ss_threeregular;
    font-size:14px;
    line-height:1.2em;
}
ul#random-posts li a{
    color:#eee;
    text-decoration:none;
}
.readmorerandom a{
    position:absolute;
    bottom:0;
    right:0;
    font-family:Electrolize,ge_ss_threeregular;
    font-size:14px;
    font-weight:400;
    background:#505050;
    text-align:center;
    display:block;
    padding:2px 8px;
    transition:all .3s ease-in-out;
    color:#eee!important;
    border-radius:3px 0 0
}
.readmorerandom:hover a{
    color:#333!important;
    background:#cacaca;} </style>

4. ابحث عن <body/> نضع الكود التالي فوقه 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='slidebox'>
  <div class='header-slidebox'>إخترناها لك</div>
<ul id='random-posts'>
<script type='text/javascript'>
//<![CDATA[
var rdp_numposts=1;
var rdp_snippet_length=100;
var rdp_info='no';
var rdp_comment='Comment';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
    function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://lh5.googleusercontent.com/-hxY0rTdcuyM/UfUyPpaoBKI/AAAAAAAACsQ/vFtqfUwj074/s72-no/no-image.PNG"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_posttitle+'"><img alt="'+rdp_posttitle+'" title="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_posttitle+'">'+rdp_posttitle+'</a></div>');document.write('<div class="readmorerandom"><a href="'+rdp_posturl+'" rel="nofollow" title="إقرأ المزيد">إقرأ المزيد</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
//]]>
</script>
</ul>
    <div class='closeslidebox'>&#215;</div>
</div>

<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
$(window).scroll(function(){
    if ($(this).scrollTop() > 400) {
       $('.slidebox').stop().animate({ right: '0px' });
    }
});
$(function() { 
    $('.closeslidebox').click(function () {
    $('.slidebox').css({right:'-300px'});
    $('.slidebox').fadeOut();
    
});
     });
});
//]]> 
</script>
</b:if>

* المحدد باللون الأصفر $('.slidebox').fadeOut()

خاص بظهور الأداة إذا أردت أن تظهر دائما في الموضوع أحذف الكود 

• غرد
• شاركه
• شاركه
• شاركه
• شاركه

محمد أعدو

مدون و مصمم محترف . أهتم خاصة بمجال تصميم المواقع و الواجهات . درسة البرمجة بمدرسة الإعلاميات العربية بوجدة .

المدونة: مدونة دروسنا