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

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

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

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

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

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

* بعدها اختر تحرير 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'>

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

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

مدونة معاون

كود الماسكي لإخفاء رقم الهاتف عند الاتصال بأي شخص

اخفاء الرقم عند الاتصال بأي شخص كود الماسكي

كيفية كشف رقم مجهول او كود ماسكي في موبيليس وجيزي واوريدو

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

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