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

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

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

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

* اولا اتجه الى لوحة تحكم مدونتك.

* بعدها الى المظهر (القالب).

* ثم اضغط على سهم جنب كلمة تخصيص.

* بعدها اختر تحرير html.

* الان اضغط داخل صندوق اكواد وقم بضغط على Ctrl + F من لوحة مفاتيح كمبيوتر.

* سيظهر لك مربع بحث قم بالبحث عن هذا الكود التالي.

</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>

* الان وبنفس الطريقة السابقة اعد البحث عن الوسم التالي.

</body>

عند ايجاده قم بوضع الكود التالي فوقه.

الكود غير متوفر حاليا ! سنعمل على تحديثه في لقرب وقت 

* الان نأتي لوضع الكود المسؤول عن اظهار السلايد شو. و يمكنك وضعه في المكان الذي تريد ان يظهر فيه السلايد شو. في حال لم تعرف اترك لنا تعليق و سنتواصل معك و سنخبرك اين تضعه.

<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>

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

تعليقات