سلايد شو متجاوب بعدة خصائص



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


في هذه التدوينة أجببت أن أقدم
لكم سلاد شو قمت بتصميمه بنفسي
وأحببت مشاركته معكم




طريقة التركيب

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

  • body .options {
  • display: flex;
  • flex-direction: row;
  • align-items: stretch;
  • overflow: hidden;
  •      min-width: 95%;
  •      max-width: 95%;
  •      margin: 0 auto 20px;
  • width: calc(100% - 100px);
  • height: 400px;
  • }
  •  @media screen and (max-width: 718px) {
  • body .options {
  • min-width: 520px;
  • }
  • body .options .option:nth-child(5) {
  • display: none;
  • }
  • }
  •  @media screen and (max-width: 638px) {
  • body .options {
  • min-width: 440px;
  • }
  • body .options .option:nth-child(4) {
  • display: none;
  • }
  • }
  •  @media screen and (max-width: 558px) {
  • body .options {
  • min-width: 360px;
  • }
  • body .options .option:nth-child(3) {
  • display: none;
  • }
  • }
  •  @media screen and (max-width: 478px) {
  • body .options {
  • min-width: 280px;
  • }
  • body .options .option:nth-child(2) {
  • display: none;
  • }
  • }
  •  body .options .option {
  • position: relative;
  • overflow: hidden;
  • min-width: 60px;
  • margin: 10px;
  • background: var(--optionBackground, var(--defaultBackground, #e6e9ed));
  • background-size: auto 120%;
  • background-position: center;
  • cursor: pointer;
  • transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
  • }
  •  body .options .option:nth-child(1) {
  • --defaultBackground: #ed5565;
  • }
  •  body .options .option:nth-child(2) {
  • --defaultBackground: #fc6e51;
  • }
  •  body .options .option:nth-child(3) {
  • --defaultBackground: #ffce54;
  • }
  •  body .options .option:nth-child(4) {
  • --defaultBackground: #2ecc71;
  • }
  •  body .options .option:nth-child(5) {
  • --defaultBackground: #5d9cec;
  • }
  •  body .options .option:nth-child(6) {
  • --defaultBackground: #ac92ec;
  • }
  •  body .options .option.active {
  • flex-grow: 10000;
  • transform: scale(1);
  • max-width: 600px;
  • margin: 0px;
  • border-radius: 40px;
  • background-size: auto 100%;
  • /*&:active {
  • transform:scale(0.9);
  • }
  • */
  • }
  •  body .options .option.active .shadow {
  • box-shadow: inset 0 -120px 120px -120px black, inset 0 -120px 120px -100px black;
  • }
  •  body .options .option.active .label {
  • bottom: 20px;
  •      left: 0;
  •      right: 20px;
  • }
  •  body .options .option.active .label .info > div {
  • left: 0px;
  • opacity: 1;
  • }
  •  body .options .option:not(.active) {
  • flex-grow: 1;
  • border-radius: 30px;
  • }
  •  body .options .option:not(.active) .shadow {
  • bottom: -40px;
  • box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;
  • }
  •  body .options .option:not(.active) .label {
  • bottom: 10px;
  • left: 0;
  • }
  •  body .options .option:not(.active) .label .info > div {
  • left: 20px;
  • opacity: 0;
  • }
  •  body .options .option .shadow {
  • position: absolute;
  • bottom: 0px;
  • left: 0px;
  • right: 0px;
  • height: 120px;
  • transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
  • }
  •  body .options .option .label {
  • display: flex;
  • position: absolute;
  • right: 0px;
  • height: 40px;
  • transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
  • }
  •  body .options .option .label .icon {
  • display: flex;
  • flex-direction: row;
  •     margin-right: 11px;
  •     justify-content: center;
  • align-items: center;
  •    min-width: 40px;
  •    max-width: 40px;
  •    height: 65px;
  •    margin-top: -25px;
  •    border-radius: 20px;
  • background-color: white;
  • color: var(--defaultBackground);
  • }
  •  body .options .option .label .info {
  • display: flex;
  • flex-direction: column;
  • justify-content: center;
  • margin-right: 10px;
  • color: white;
  • white-space: pre;
  •    text-align: right;
  • }
  •  body .options .option .label .info > div {
  • position: relative;
  • transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out;
  • }
  •  body .options .option .label .info .main {
  • font-weight: bold;
  • font-size: 1.2rem;
  • }
  •  body .options .option .label .info .sub {
  • transition-delay: 0.1s;
  • }
  • .icon .tag {
  •     transform: rotate(90deg);
  •     text-decoration: none;
  •     line-height: 1 !important;
  • padding: 0 0 8px;
  • }
  •  .main a {
  •     color: #fff;
  •     text-decoration: none;
  • }
  • .option:first-child .icon .tag {
  •     color: #5D9CEC;
  • }
  • .option:nth-child(2) .icon .tag {
  •     color: #d01a1a;
  • }
  • .option:nth-child(3) .icon .tag {
  •     color: #b4d01a;
  • }
  • .option:nth-child(4) .icon .tag {
  •     color: #3eab06;
  • }
  • .option:nth-child(5) .icon .tag {
  •     color: #dca60c;
  • }
  • .sub:after {
  •     content: "\f017";
  •     font-family: fontawesome;
  •     padding-left: 5px;
  • }
  1. ثم ابحث عن الوسم </body>
  2. وضع الأكواد التالية فوقه
  • <script type='text/javascript'>
  • //<![CDATA[
  • $("#IsweebSlider .widget").each(function(){
  • var e=$(this),
  •     t=e.find(".widget-content").text(),
  •     l=t.split("/"),
  •     i=l[0],r=l[1],
  •     n=Math.floor(Math.random()*i+1);
  • if(t.match("recentpost"))
  • var o="/feeds/posts/default?alt=json-in-script&max-results="+i;
  • else if(t.match("randompost"))
  • var o="/feeds/posts/default?alt=json-in-script&orderby=updated&start-index="+n+"&max-results="+i;
  • else var o="/feeds/posts/default/-/"+r+"?alt=json-in-script&max-results="+i;
  • $.ajax({
  • type:"GET",
  • url:o,
  • dataType:"jsonp",
  • success:function(e){
  • for(var t="<ul class='isw-DySlider options'>",l="",i=0;i<e.feed.entry.length;i++){
  • for(var r=e.feed.entry[i],
  • postAuthor=r.author[0].name.$t,
  • uriauthor=r.author[0].uri.$t,
  • date=r.published.$t.substring(0,10),
  • n=r.title.$t,
  • o=0;o<r.link.length;o++){
  • if("replies"==r.link[o].rel&&"text/html"==r.link[o].type){r.link[o].title,r.link[o].href}if("alternate"==r.link[o].rel){
  • var f=r.link[o].href;break}}
  • var p,h=r.content.$t,u=$("<p>").html(h).text(),m=u.substring(0,180)+"...",
  • v=r.category[0].term;
  • try{p=0==i?r.media$thumbnail.url.replace("s72-c","w550-h420-c").replace("default","hqdefault"):r.media$thumbnail.url.replace("s72-c","w550-h420-c").replace("default","hqdefault")}catch(g){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),p=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"http://3.bp.blogspot.com/-qnLm52EsvBE/VDkrZ46TWXI/AAAAAAAAAsM/tiJ36WiboU4/s1600/90.jpg"}
  • l+='<div class="option" style="--optionBackground:url('+p+');">',
  • l+='<div class="shadow">',
  • l+="</div>",
  • l+='<div class="label">',  
  • l+='<div class="icon"><a class="tag" href="/search/label/'+v+'">'+v+"</a></div>",
  • l+='<div class="info">',  
  • l+='<div class="main"><a href='+f+">"+n+"</a></div>",
  • l+='<div class="sub">'+date+"</div>",
  • l+="</div>",
  • l+="</div>",
  • l+="</div>",  
  • l+="</div>"}
  • l+="</ul>",
  • t+=l,
  • $("#IsweebSlider .widget-content").html(t);
  • /*==============*/
  • //OwlCarousel-js
  • /*==============*/
  • $(".option").click(function(){
  •    $(".option").removeClass("active");
  •    $(this).addClass("active");
  •    
  • });
  • $(".option").each(function(){
  •    $(".option:first").addClass("active");
  • });
  • }})
  • });
  • //]]>
  • </script>
  1. الان قم بنسخ الأكواد التالية
  2. وضعها في المكان الذي يناسبك ويفضل وضعها فوق main-wrapper
  • <div class='DySliderstyle-material' id='IsweebSlider'>
  • <b:section class='Isweeb-slickSlider' id='Isweeb-slickSlider' maxwidgets='1'>
  •   <b:widget id='HTML748' locked='true' title='' type='HTML' version='1'>
  •     <b:widget-settings>
  •       <b:widget-setting name='content'>5/recentpost</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>
ان أردت أن يعمل السلايد شو بتسمية فقم بتغيير قوالب بتسمية لديك وان أردت أن يظهر مواضيع عشوائية ضع مكان التسمية randompost ولعرض اخر المواضيع ضع مكانها recentpost

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


EmoticonEmoticon