سلايد يعرض المواضيع حسب التسميات لمدونات بلوجر
كنا قد قدمنا لكم مجموعة من أفضل ما يوجد على انترنت من سلايد شو ، منها ما هو متجاوب مع الاجهزة الذكية ومنها ماهو مصمم بطريقة انيقة ومنها ما هو سريع ومنها من يجمع كل هذه الاشياء ، وفي هذه التدوينة سنقدم لكم نوع اخر من سلايد شو الذي يعرض المواضيع حسب التسميات ، كما انه سريع ولا يسبب ثقل في المدونة ، تابعوا معنا طريقة التركيب.
شرح كيفية تركيب سلايد شو يعرض المواضيع حسب التسميات:
* اولا اتجه الى لوحة تحكم مدونتك.
* بعدها الى المظهر (القالب).
* ثم اضغط على سهم جنب كلمة تخصيص.
* بعدها اختر تحرير 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 >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 >div:hover {
color: #FFF;
background: #ED0005;
}
.owl-nav .owl-next:before{ content:"\f104"; font-family:fontawesome}
.owl-nav .owl-prev:before{ content:"\f105"; 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:"\f007"; font-family:fontawesome; margin-left:5px; display:inline-block}
.recent-meta {
text-align: center;
padding-top: 20px;
}
.recent-meta >span {
font-size: 22px;
color: #f9f9f9;
}
h3.mag-title a {
font-family: 'Acme',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:".";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 != ""'>
<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>
عند انتهاء من كل شيء قم بحفظ القالب و انتقل الى التخطيط ستظهر لك اداة جديدة في التخطيط ، افتحها وضع بها التسمية التي تريدها ، بعدها قم بمشاهدة النتيجة. كان هذا كل شيء ، اذا واجهت اي مشكلة اتركها في تعليق وسيسعدنا مساعدتك ، سلام.