إبحث في هذه المدونة

سلايد شو احترافي لعرض المواضيع المدونة حسب التسميات

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

شرح كيفية تركيب السلايد شو:


1- قم بوضع الكود التالي في المكان الذي تريده ان يظهر فيه السلايد شو، اذا لم تعرف اترك لنا تعليق وسنخبرك اين تضعه.
<b:if cond='data:blog.canonicalUrl == data:blog.canonicalHomepageUrl'>
<b:section id='slider-wrapper'>
  <b:widget id='HTML131' locked='false' title='' type='HTML' visible='true'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
</b:section>
</b:if>
2- الخطوة التالية هي البحث عن الوسم التالي.
</head>
عندما تعثر عليه قم بوضع الكود التالي فوقه.
<style>
/* slider */
.slider-wrapper {
    text-align: center;
    font-size: 20px;
    margin: 0px auto -66px auto;
    padding: 76px 50px 0px 50px;
    height: 400px
    box-sizing: content-box;
    max-width: 1300px;
}
.slider-wrapper .section {
    margin: 0px;
}
.slider-wrapper .widget {
    margin: 0px;
}
ul#recn-b {
    width: 97%;
    margin: auto;
    border: 4px solid #fff;
    border-radius: 3px;
}
.owl-controls{ position:absolute;  right:6px;  top:11px}
.owl-nav &gt;div {
    display: inline-block;
    width: 32px;
    height: 30px;
    text-align: center;
    color: #ED0005;
    margin-right: 5px;
    line-height: 29px;
    cursor: pointer;
    background: #FFF;
    font-weight: bold;
    font-size: 26px;
}
.owl-nav &gt;div:hover {
    color: #FFF;
    background: #ED0005;
  }
.owl-nav .owl-next:before{ content:&quot;\f104&quot;;  font-family:fontawesome}
.owl-nav .owl-prev:before{ content:&quot;\f105&quot;;  font-family:fontawesome}
.mag-content {
    position: absolute;
    bottom: 0;
    height:100%;
    z-index: 99999;
    padding: 150px 20px 20px 20px;
    display: block;
    width: 100%;
    overflow: hidden;
    transition: 0.2s;
    vertical-align: middle;
    text-align: right;
    background-image: -webkit-linear-gradient(200deg, rgba(247, 64, 71, 0.10),rgba(237, 0, 5, 0.60));
    background-image: -moz-linear-gradient(200deg, rgba(247, 64, 71, 0.10),rgba(237, 0, 5, 0.60));
    background-image: linear-gradient(200deg, rgba(247, 64, 71, 0.10),rgba(237, 0, 5, 0.60));
    background-image: linear-gradient(200deg, rgba(247, 64, 71, 0.10),rgba(237, 0, 5, 0.60));
}
.mag-content:hover  {
    background-image: -webkit-linear-gradient(200deg, rgba(247, 64, 71, 0.5),rgba(237, 0, 5, 0.8));
    background-image: -moz-linear-gradient(200deg, rgba(247, 64, 71, 0.5),rgba(237, 0, 5, 0.8));
    background-image: linear-gradient(200deg, rgba(247, 64, 71, 0.5),rgba(237, 0, 5, 0.8));
    background-image: linear-gradient(200deg, rgba(247, 64, 71, 0.5),rgba(237, 0, 5, 0.8));
}
ul#recn-b li {
    height: 400px;
    position: relative;
    padding: 0px;
    list-style: none;
    overflow: hidden;
}
ul#recn-b li .mag-thumb {
    width: 100%;
    height: 100%;
}
.recent-author:before{ content:&quot;\f007&quot;;  font-family:fontawesome;  margin-left:5px;  display:inline-block}
.recent-meta {
    text-align: center;
    padding-top: 20px;
}
.recent-meta &gt;span {
    font-size: 22px;
    color: #f9f9f9;
}
h3.mag-title a {
font-family: &#39;Acme&#39;,El Messiri;
    color: #fff;
    font-weight: normal;
    display: block;
    line-height: 28px;
    padding-top: 150px;
    text-align: center;
    font-size: 50px;
}
.mag-thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

.owl-carousel .animated{-webkit-animation-duration:1000ms;animation-duration:1000ms;-webkit-animation-fill-mode:both;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{-webkit-transition:height 500ms ease-in-out;-moz-transition:height 500ms ease-in-out;-ms-transition:height 500ms ease-in-out;-o-transition:height 500ms ease-in-out;transition:height 500ms ease-in-out}.owl-carousel{display:none;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y}.owl-carousel .owl-stage:after{content:&quot;.&quot;;display:block;clear:both;visibility:hidden;line-height:0;height:0}
.owl-carousel .owl-stage-outer {
    position: relative;
    -webkit-transform: translate3d(0,0,0);
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.owl-carousel .owl-controls .owl-dot,.owl-carousel .owl-controls .owl-nav .owl-next,.owl-carousel .owl-controls .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loaded{display:block}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel .owl-refresh .owl-item{display:none}.owl-carousel .owl-item{position:relative;min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-item img{display:block;width:100%;-webkit-transform-style:preserve-3d}.owl-carousel.owl-text-select-on .owl-item{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.owl-carousel .owl-grab{cursor:move;cursor:-webkit-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab}
.owl-carousel.owl-rtl {
    direction: rtl;
    margin: 0px;
    padding: 0px;
}
.owl-carousel.owl-rtl .owl-item{float:left}
.no-js .owl-carousel{display:block}.owl-carousel .owl-item .owl-lazy{opacity:0;-webkit-transition:opacity 400ms ease;-moz-transition:opacity 400ms ease;-ms-transition:opacity 400ms ease;-o-transition:opacity 400ms ease;transition:opacity 400ms ease}.owl-carousel .owl-item img{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;-webkit-transition:scale 100ms ease;-moz-transition:scale 100ms ease;-ms-transition:scale 100ms ease;-o-transition:scale 100ms ease;transition:scale 100ms ease}.owl-carousel .owl-video-play-icon:hover{-webkit-transition:scale(1.3,1.3);-moz-transition:scale(1.3,1.3);-ms-transition:scale(1.3,1.3);-o-transition:scale(1.3,1.3);transition:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;-webkit-background-size:contain;-moz-background-size:contain;-o-background-size:contain;background-size:contain;-webkit-transition:opacity 400ms ease;-moz-transition:opacity 400ms ease;-ms-transition:opacity 400ms ease;-o-transition:opacity 400ms ease;transition:opacity 400ms ease}.owl-carousel .owl-video-frame{position:relative;z-index:1}
</style>
3- اخر خطوة هي البحث عن الوسم التالي.
</body>
عند ايجاده قم بوضع الكود التالي فوقه.

عند انتهاء من كل شيء قم بحفظ القالب و انتقل الى التخطيط ستظهر لك اداة جديدة في التخطيط، افتحها وضع بها التسمية التي تريدها، بعدها قم بمشاهدة النتيجة.
كان هذا كل شيء، اذا واجهت اي مشكلة اتركها في تعليق وسيسعدنا مساعدتك، سلام.

ليست هناك تعليقات:

إرسال تعليق