افضل سلايد شو كلاسيك إحترافي لمدونة بلوجر متجاوب مع جميع القوالب 2016-2017

الكاتب : Salah Nassih التاريخ : 3:23:00 م القسم : بلوكر

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

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

1 : لذهب الى القالب ثم تحرير Html و ابحث عن ]]></b:skin> و ضع الكود الكود التالي فوقه

.slider-wrapper{
  text-align:center;
  font-size:20px; 
  margin-bottom:7px;
}
.owl-controls{
  position: absolute;
  left: 5px;
  top: 4px;
}
.owl-nav >div {
  float: right;
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 2px;
  color: #FFFFFF;
  margin-right: 5px;
  line-height: 50px;
  background: #FF5722;
  font-weight: bold;
  font-size: 26px;
}
.owl-nav .owl-prev:before {
  content: "\f105";
  font-family: fontawesome;
}
.owl-nav .owl-next:before {
  content: "\f104";
  font-family: fontawesome;
}
#recn-b {
  margin-bottom:
  auto;margin-top: -11px;
}
.mag-content{
  position: absolute;
  bottom: 0;
  z-index: 99999;
  padding: 20px;
  display: block;
  background-image: linear-gradient(transparent,rgba(0,0,0,0.83));
  width: 100%;
  text-align: center;
}
.owl-carousel.owl-rtl .owl-item:hover {
  background-color: #202020;
  opacity: 0.5;
}
#recn-b li{
  height:300px;
  position:relative;
  overflow:hidden
}
.recent-author:before {
  content: "\f007";
  font: normal normal normal 14px/1 FontAwesome;
  font-family:fontawesome;
  margin-left:5px;
  display:inline-block;
  color: #FFFFFF;
}
.recent-meta >span {
  font-size: 15px;
  color: #FFF;
  background: #FF5722;
  border-radius: 2px;
  padding: 8px 10px;
}
h3.mag-title a{
  color:#fff; 
  font-weight:100;
  font-size:16px;
  line-height: 5;
}
.mag-thumb a{
  display:block;
  width:100%;
  height:300px;
  overflow:hidden;
}
.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;
  overflow:hidden;
  -webkit-transform:translate3d(0,0,0)
}
.owl-carousel .owl-controls .owl-dot,.owl-carousel .owl-controls .owl-nav .owl-next,.owl-carousel .owl-controls .owl-nav .owl-prev{
  cursor: pointer;
}
.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
}
.owl-carousel.owl-rtl .owl-item{
  float:left;
  height: 300px;
}
.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
}

2 : ابحث عن الأمر </body> و ضع الكود التالي فوقه :

3 : قم بوضع هذا الكود في المكان الذي تريد وضع السلايدر فيه و من الأفضل ضعه أفل اخر تسمية من قسم الأقسام

ملاحظات هامة جدا :

1 : عند وضع هذا الكود ستذهب الى التخطيط و ستجد أداة باسم slid-posts ضع داخلها اسم القسم الذي تريد عرض مواضيعه

2 : عندما تريد أن تحفظ السلايدر ربما يعطيك كلمة خطأ بها Slid-posts فغيرها بأي كلمة أخرى تريد مثلا slids-posts و اذا أعطاك خطأ اخر به HTML18 غيرها بأي رقم ك HTML25

اذا لم تفهم طريقة التركيب مو الموضوع فتابع هذا الفيديو :

salahnassih

صفحات المدونة

الأحد، 4 ديسمبر 2016

افضل سلايد شو كلاسيك إحترافي لمدونة بلوجر متجاوب مع جميع القوالب 2016-2017

هناك تعليق واحد: