إضافة مواضيع ذات صلة منزلقة

إضافة مواضيع ذات صلة منزلقة

يوجد الآن مشاهدة التعليقات : 1

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

إضافة سلايدر للمشاركات المختارة تلقائيا متصلة بنفس التسمية بهذه الإضافة يمكن لزائر ملاحظة الموضوع المقدم فور نزوله لصفحة عند قرائة موضوع ستظهر له بإمكانه ايضا اغلاقها ولن تظهر ثانية إلا إذا توجه لموضوع اخر وأيضا سأشرح كيفية إبقائها تظهر وكل هذا بعد المعاينة
شرح طريقة التركيب
1. توجه للقالب >> تحرير ثم ابحث بإستعمال Ctrl+F عن <head/>
2. ضع الكود التالي فوقه
<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>
2. إبحث عن </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() خاص بظهور الأداة إذا أردت أن تظهر دائما في الموضوع أحذف الكود
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك تعليق واحد:

  1. ممكن درس عن الاضافة اللى حضرتك عملها عندك " النشرة البريدية "

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم