السلام عليكم
ورحمة الله تعالى
وبركاته
في هذه التدوينة أجببت أن أقدم
لكم سلاد شو قمت بتصميمه بنفسي
وأحببت مشاركته معكم
- قم بتحرير القالب
- ثم ابحث عن الوسم ]]></b:skin>
- وضع الأكواد التالية فوقه
- 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;
- }
- ثم ابحث عن الوسم </body>
- وضع الأكواد التالية فوقه
- <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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0DBemkOKpTfMTm3a4P7lHba7yccFyu4ygenrUa5HsyHyD-kHLvfeX_mhFG8GgyBl0nQ30gY01r2Y2SwkNDo7y_8oXyHTWawZ8xgt5UyFFzqvNzX7rJOU3fngsZ1iEJP6OMLPhVgbJFpU/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>
- الان قم بنسخ الأكواد التالية
- وضعها في المكان الذي يناسبك ويفضل وضعها فوق 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
جميل
ردحذفتصفح الإيميل منذ اسبوع أو أقل ستجد أنني راسلتك ولم ترد علي إلي الان
ردحذف