نقطة ويب نقطة ويب

آخر الأخبار

random
جاري التحميل ...

  1. السلام عليكم
    اذا كنتم تحبون مساعدة اخوتكم فيرجا منك ارسال لي هذا القال المركب على دونتك هذي على الايميل التالي:
    Yamanhuhu20@gmail.com

    ردحذف
  2. مدونة المجانيات : Almajaniyat
    احصل على المجانيات و شروحات لطرق الحصول على مجانيات تصلك حتى باب بيتك
    https://www.almajaniyat.org

    ردحذف

إضافة سلايد شو إحترافي الإصدار الأول

السلام عليكم ورحمة الله وبركاتة ، متابعي ومحبي مدونة نقطة ويب ، عشاق منصة بلوجر هم كثر و في كل مرة يبحثون عن أشياء جديدة لطرحها على مواقعهم و مدوناتهم و في درس اليوم سأعطيكم إضافة يبحث عنها تقريبا كل عشاق بلوجر ، الا و هي سلايد شو تلقائي و إحترافي يمكن إضافته إلى جميع مدونات بلوجر ، و لكن تابع الموضوع جيدا لتتلعم تركيبها بإحترافية .
إضافة سلايد شو إحترافي الإصدار الأول
إضافة سلايد شو إحترافي الإصدار الأول

وقبل الولوج إلي الشرح يمكنك معاينة السلايد علي الموقع التالي .

أولا قم بالبحث عن الوسم ]]></b:skin> ثم قم بوضع الأكواد التالية فوقة مباشرة.



#recenpo .widget-content{font-family:inherit } .recentsp-Webponto .Webponto-post{float:right;overflow:hidden;margin:0;padding:0} .Webponto-post .recent-box{float:right;width:41%;position:relative;margin-bottom:11px} .Webponto-post .recent-box:first-child{width:58%;margin-left:11px} .Webponto-post .recent-box:first-child .magp-thumb img{background-size:cover;width:100%;height:499px} .magp-thumb img{background-size:cover;width:100%;height:244px} .recent-box .mag-content{position:absolute;bottom:2%;padding:0 17px;right:0} .recent-box .mag-content .postwriter,.recent-box .mag-content .magp-date{display:inline-block} .Webponto-post .post-title .magp-title{font-weight:700;text-shadow:1px 1.732px 0 rgba(0,0,0,0.086);color:#fff;font-size:18px;-webkit-transform:matrix(1.04943167426545,0,0,1,0,0);-moz-transform:matrix(1.04943167426545,0,0,1,0,0);-ms-transform:matrix(1.04943167426545,0,0,1,0,0);transform:matrix(1.04943167426545,0,0,1,0,0);margin:0 10px} .Webponto-post .mag-bottom .psummary{color:#c4c4c4;font-family:inherit ;line-height:21px;margin-bottom:2px;font-size:15px} .Webponto-post .recent-box .magp-thumb a:before{content:'';position:absolute;width:100%;height:100%;background:-moz-linear-gradient(top,rgba(31,31,31,0.26) 0%,rgba(31,31,31,0.59) 100%);background:-webkit-linear-gradient(top,rgba(31,31,31,0.26) 0%,rgba(31,31,31,0.59) 100%);background:linear-gradient(to bottom,rgba(31,31,31,0.14) 0%,rgba(31,31,31,0.39) 100%);background:-o-linear-gradient(to bottom,rgba(31,31,31,0.14) 0%,rgba(31,31,31,0.39) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#421f1f1f',endColorstr='#961f1f1f',GradientType=0)} .Webponto-post .post-title .magp-title:before{content:'';background:#ff8400;display:inline-block;width:10px;height:10px;margin-left:10px} .Webponto-post .magp-date .post-date{color:#dedede;font-size:14px} .Webponto-post .magp-date .post-date:before,.Webponto-post .postwriter .writer-p:before{content:'\f073';display:inline-block;font-family:fontawesome;margin-left:5px;color:#ff8400} .Webponto-post .postwriter .writer-p{color:#dedede;font-size:14px} .Webponto-post .postwriter{margin-left:10px} .Webponto-post .postwriter .writer-p:before{content:'\f007'} @media screen and (max-width : 768px) { .recentsp-Webponto{float:right;display:none}}

ثانيا: قم بالبحث عن الوسم </body> ثم قم بوضع الأكواد التالية فوقة مباشرة.


<script type='text/javascript'> //<![CDATA[ $("#recenpo .widget").each(function(){var t=$(this).find(".widget-content").text(),e=t.split("/"),l=e[0],i=e[1],r=Math.floor(Math.random()*l+1);if(t.match("recentpost"))var n="/feeds/posts/default?alt=json-in-script&max-results="+l;else n=t.match("randompost")?"/feeds/posts/default?alt=json-in-script&orderby=updated&start-index="+r+"&max-results="+l:"/feeds/posts/default/-/"+i+"?alt=json-in-script&max-results="+l;$.ajax({type:"GET",url:n,dataType:"jsonp",success:function(t){for(var e="<ul class='Webponto-post'>",p="",o=0;o<t.feed.entry.length;o++){var f,h;for(l=(f=t.feed.entry[o]).title.$t,i=0;i<f.link.length;i++)if("replies"==f.link[i].rel&&"text/html"==f.link[i].type&&(r=f.link[i].title,n=f.link[i].href),"alternate"==f.link[i].rel){var m=f.link[i].href;break}try{h=0==o?f.media$thumbnail.url.replace("s72-c","w600-h400-c").replace("default","hqdefault"):f.media$thumbnail.url.replace("s72-c","w400-h200-c").replace("default","hqdefault")}catch(t){s=f.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),h=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"http://3.bp.blogspot.com/-qnLm52EsvBE/VDkrZ46TWXI/AAAAAAAAAsM/tiJ36WiboU4/w600-h400-c/90.jpg"}p+='<li class="recent-box"><div class="recento">',p+='<div class="magp-thumb"><a href="'+m+'" target ="_top"><img class="magp-img" src="'+h+'" title="'+l+'" alt="'+l+'"/></a></div>';var u=f.author[0].name.$t,v=f.published.$t,g=f.content.$t;p+='<div class="mag-content">',p+='<div class="post-title"><a class="magp-title" href='+m+' target ="_blank">'+l+"</a></div>",p+='<div class="mag-bottom">',p+='<p class="psummary">'+$("<p>").html(g).text().substring(0,150)+"...</p>",p+='<div class="postwriter"><a href='+f.author[0].uri.$t+' class="writer-p">'+u+"</a></span></div>";for(var x=[1,2,3,4,5,6,7,8,9,10,11,12],k=["01","02","03","04","05","06","07","08","09","10","11","12"],A=v.split("-")[2].substring(0,2),w=v.split("-")[1],y=v.split("-")[0],j=0;j<x.length;j++)if(parseInt(w)==x[j]){w=k[j];break}p+='<div class="magp-date"><a href="'+m+'" class="post-date"> '+A+"/"+w+"/"+y+"</s></div>",p+="</div>",p+="</div></div></li>"}e+=p+="</ul>",$("#HTML784 .widget-content").html(e)}})}); //]]> </script>

ثالثا ومع الكود الأخير وهو الكود المسؤل عن إظهار السلايد في المكان الذي تريدة ويمكنك وضعة في اي مكان تريد ان يظهر به السلايد .


<b:if cond='data:blog.url == data:blog.homepageUrl'> <div class='recentsp-Webponto'> <div class='container'> <b:section class='no-items' id='recenpo' maxwidgets='1' showaddelement='no'> <b:widget id='HTML784' locked='true' title='سلايد شو' type='HTML' version='1'> <b:widget-settings> <b:widget-setting name='content'>3/فنون</b:widget-setting> </b:widget-settings> <b:includable id='main'> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> </b:section> </div> </div> </b:if>

وهناك ثلاث خيارات لعرض السلايدر.

  1.  استبدال "فنون" بإحدى التسميات الموجوده في مدونتك لعرض التدوينات منها فقط . 
  2. استبدال "فنون" ب "recentpost" لعرض آخر الموضوعات . 
  3. استبدال "فنون" ب "randompost" لعرض موضوعات عشوائية .

إلي هنا أكون قد انتهيت من الشرح وإن واجهتك اي مشكلة يمكنك تركها في التعليقات والله الموفق.

عن الكاتب

ِAhmed Shahata

التعليقات

ADVERTISEMENT ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

اتصل بنا

إذا أعجبك محتوى مدونتنا نتمنى البقاء على تواصل دائم ، فقط قم بإدخال بريدك الإلكتروني للإشتراك في بريد المدونة السريع ليصلك جديد المدونة أولاً بأول ، كما يمكنك إرسال رساله بالضغط على الزر المجاور ...

جميع الحقوق محفوظة

نقطة ويب