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

السلام عليكم زوارومتابعي مدونة أخبار وتقنيات اليوم وعلى قسم إضافات بلوجر سنقدم شرح لكيفية إضافة سلايدر شو أنيق وإحترافي لعرض المواضيع على مدونة بلوجر

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

لتركيب الإضافة يجب تتبع الخطوات التالية بدقة وتركيز
- بعد تسجيل الدخول للمدونة نختار القالب من لوحة التحكم ولا ننسى أخذ نسخة إحتياطية للقالب
- تحريرHTML
- المرحلة الأولى:
1- البحث عن الكود أسفله في القالب بالضغط على Ctrl+F

]]></b:skin>

2- ننسخ الكود التالي ونلصقه فوق الأول

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

- المرحلة الثانية :

1- نبحث عن الكود التالي الذي يوجد في أخر القالب

</body>

2- بعد تحميل ملف سكريبت الإضافة ننسخ الكود ونلصقه فوق الكود أعلاه

- المرحلة الثالثة: تختلف حسب تصميم القالب
* في حال وجود قسم خاص بسلايد شو على التخطيط: نتخطى هذه المرحلة
* في حال العكس: نختار المكان المراد إضافة عليه قسم سلايد شو غالبا يكون تحت قائمة التسميات فوق المشاركات
1- نبحث عن أحد الأمرين

رسائل المدونة الإلكترونية أو post-wrapper

في حال تعذر عليك ذلك نبحث عن أحدى التسميات الموجودة في القائمة لتحديد موضع وضع كود قسم السلايد في التخطيط
2- ننسخ ونلصق الكود التالي في المكان المختار

3- نحفظ النموذج

في الأخير: ندخل إلى التخطيط ونقوم بتحرير القسم الخاص بالسلايدر شو بإضافة إسم القسم المراد عرض مقالاته.

أرجو أن أكون قد أفدتكم ولو بقليل

بقلمAbdel ben

مدون شغوف أعشق التدوين المعلوماتي ، والإطلاع على آخر مستجدات التقنية وعالم الأنترنت ..أقدم أخبارا تقنية أولا بأول في مجال الهواتف الذكية والشبكات الإجتماعية

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

بقلمAbdel ben

شارك الموضوع

مواضيع قد تهمك