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

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

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

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

لتركيب الإضافة يجب تتبع الخطوات التالية بدقة وتركيز
- بعد تسجيل الدخول للمدونة نختار القالب من لوحة التحكم ولا ننسى أخذ نسخة إحتياطية للقالب
- تحرير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

التالي

رسالة أحدث

السابق

رسالة أقدم

إعلان في أسفل التدوينة

المشاركات الشائعة

نموذج الاتصال