كيفية إضافة أفضل سلايد شو مميز وجذاب على مدونة بلوجر حيث سوف يقوم في كل مرة تقوم فيها بنشر مشاركات جديدة سيظهر المنشور تلقائياً في الصفحة الأولى
كيفية إضافة أفضل سلايدر شو مميز وجذاب على مدونة بلوجر 2019 |
طريقة تثبيت السلايدر شو سهل للغاية لا يحتاج لجهد كبير كل ما يتوجب عليك هو أتباع الخطوات التالية
أذهب إلى حسابك في بلوجر ثم تحرير HTML ثم CTRL +F ثم اضافة الإضافة التالية فوق هذا الوسم ]]></b:skin>
#feature-posts-section{max-height:370px;overflow:hidden;padding:20px;margin:0 auto;}
.featured-posts a{color:#fff;}
.featured-posts a:hover{color:#fff;text-decoration:underline;}
.main-post.featured-posts a{margin:0;font-size:18px}
.featured-posts .col-post{float:right;position:relative;overflow:hidden;}
.featured-posts .secondary-post{width:34.4%;margin:0;}
.featured-posts .secondary-post:nth-child(odd){margin:6px 0 0 0}
.featured-posts .main-post{width:65.0%;padding:0;margin:0 0 0 6px}
.featured-posts span{padding:8px;color:#fff;font-size:12px;font-style:normal;top:0;right:0;z-index:2;position:absolute}
.featured-posts span.lebb{background:#e74c3c;visibility:hidden;opacity:0;top:-20px;transition:all .3s}
.featured-posts .main-post:hover span.lebb,.featured-posts .secondary-post:hover span.lebb{visibility:visible;opacity:1;top:0;}
.featured-posts img{height:100%;transition:transform 0.35s ease 0s;-moz-transition:transform 0.35s ease 0s;-o-transition:transform 0.35s ease 0s}
.featured-posts .main-post img{height:335px;width:100%;object-fit:cover}
.featured-posts .secondary-post img{height:160px;object-fit:cover;width:100%}
.featured-posts .main-post:hover img,.featured-posts .secondary-post:hover img{transform:scale(1.1)}
.featured-posts header{position:absolute;bottom:0;left:0;padding:20px;width:100%;z-index:2}
.featured-posts h4{font-size:15px;line-height:1.3;}
.featured-posts header h3,.featured-posts header h4{font-weight:400}
.featured-posts span.vignette{background-color:transparent;position:absolute;overflow:hidden;margin:0;padding:0;height:100%;top:0;right:0;right:0;bottom:0;transition:background 0.3s linear,opacity 0.3s linear}
@media screen and (max-width:768px) {
h1.post-title.entry-title a, h2.post-title.entry-title a {margin:15px 0;}
#feature-posts-section{display:none}}
.featured-posts .main-post:before,.featured-posts .secondary-post:before{bottom:0;content:"";display:block;height:50%;width:100%;position:absolute;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000 100%)}
.featured-posts span{background:rgba(0,0,0,0.3);display:inline-block;color:#fff;font-style:normal;position:absolute;transition:all .4s;font-size:11px;line-height:1.4;padding:3px 6px;top:10px;right:10px;z-index:2}
الخطوة الثانية قم بوضع الكود التالي فوق هذا الوسم </head><b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
snippet_count = 80;
//<![CDATA[
function removeHtmlTag(n,e){if(-1!=n.indexOf("<")){for(var t=n.split("<"),i=0;i<t.length;i++)-1!=t[i].indexOf(">")&&(t[i]=t[i].substring(t[i].indexOf(">")+1,t[i].length));n=t.join("")}for(e=e<n.length-1?e:n.length-2;" "!=n.charAt(e-1)&&-1!=n.indexOf(" ",e);)e++;return n=n.substring(0,e-1),n+"....."}function createSnippet(n){var e=document.getElementById(n),t=snippet_count,i='<div class="snippets">'+removeHtmlTag(e.innerHTML,t)+"....."+"</div>";e.innerHTML=i}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(e,t){for(var s=e.split("<"),r=0;r<s.length;r++)-1!=s[r].indexOf(">")&&(s[r]=s[r].substring(s[r].indexOf(">")+1,s[r].length));return s=s.join(""),s=s.substring(0,t-1)}function sliderposts(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,numposts1<=e.feed.entry.length?maxpost=numposts1:maxpost=e.feed.entry.length;for(var t=0;t<maxpost;t++){var r,i,n=e.feed.entry[t],l=n.category[0].term,o=n.title.$t;if(t==e.feed.entry.length)break;for(var m=0;m<n.link.length;m++)if("alternate"==n.link[m].rel){i=n.link[m].href;break}for(var m=0;m<n.link.length;m++)if("replies"==n.link[m].rel&&"text/html"==n.link[m].type){r=n.link[m].title.split(" ")[0];break}if("content"in n)var g=n.content.$t;else if("summary"in n)var g=n.summary.$t;else var g="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[t]=imgr[j],s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[t]=d);for(var h=[1,2,3,4,5,6,7,8,9,10,11,12],p=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],f=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),u=(postdate.split("-")[0],0);u<h.length;u++)if(parseInt(f)==h[u]){f=p[u];break}if(0==t){var v='<div class="main-post col-post"><a href="'+i+'"><span class="blue">'+l+'</span><img src="'+img[t]+'" height="350" width="640" alt=""></img></a><header><h3 class="entry-title"><a href="'+i+'" title="">'+o+"</a></h3></header></div>";document.write(v)}else{var v='<div class="secondary-post col-post" style="margin-right:0"><span class="blue">'+l+'</span><a class="hover_play_small" href="'+i+'"><img src="'+img[t]+'" height="200" width="320"></img></a><header><h4><a href="'+i+'">'+o+"</a></h4></header></div>";document.write(v)}j++}}imgr=new Array,imgr[0]="http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif",showRandomImg=!0,aBold=!0,summaryPost=150,summaryTitle=50,numposts1=10,featured_numposts="3";
//Label Badge
function label_pick(e){labelnes=new Array,labelnes[1]="<div class='badge featured'><div class='badge-img'><i class='fa fa-bolt'></i></div></div>",labelnes[2]="<div class='badge badge1 trendy'><div class='badge-img'><i class='fa fa-bolt'></i></div></div>","Hot"==e&&document.write(labelnes[1]),"Hiburan"==e&&document.write(labelnes[2])}
//]]>
</script>
</b:if>
أما الخطوة الإخيرة قم بوضع الكود التالي في المكان الذي تريد أن يظهر فيه السلايدر وبالعادة يكون قوق رسائل المدونة الإلكترونية<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='ct-wrapper' id='feature-posts-section'>
<div class='featured-posts padding clearfix'>
<script type='text/javaScript'>
document.write("<script src=\"/feeds/posts/default/?max-results="+featured_numposts+"&orderby=published&alt=json-in-script&callback=sliderposts\"><\/script>");
</script>
</div>
</div>
</b:if>
هذ كل شي وشكراَ لك