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

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

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

1- الخطوة الاولى هي البحث عن الوسم التالي.
</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>
2- اعد البحث عن الوسم التالي.
</body>
عند ايجاده قم بوضع الكود التالي فوقه.
3- الان مع اخر كود قم بوضعه في المكان الذي تريده ان يظهر فيه السلايد شو.
<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>
بعدها قم بحفظ القالب و انتقل الى التخطيط ستظهر لك اداة جديدة في التخطيط، افتحها وضع بها التسمية التي تريدها، بعدها قم بمشاهدة النتيجة.