افضل سلايد شو كلاسيك إحترافي لمدونة بلوجر متجاوب مع جميع القوالب 2016-2017
السلام عليكم ورحمة الله وبركاته ومغفرته ، احبتي ومتابعي مدونة هشام هاشم للمعلوميات والتقنيات ، اليوم في قسم دروس بلوجر سوف نقدم لكم احد افضل سلايد شو كلاسيك إحترافي لمدونة بلوجر متجاوب مع جميع القوالب 2016-2017 ، كما اننا سوف نوفر لكم اضافة تشتغل على معظم القوالب بلوجر ، ايضا الطريقة التي سوف نشرح تتوفر على ثلاث خطوات بسيطة وغير معقدة وكما تعتمد على نسخ لصق بدون تغيير اي كود ،كما انه سوف يكون كلاسيكي متجاوب مع جميع القوالب مع اختيار الحجم المناسب لظهور السلايدر .
العديد من المدونين سواء محترفين او مبتدئين دائما تبحث عن اضافة سلايد شو لمدونة بطريقة مناسبة ومتطابقة ، ولكن هناك العديد من الاضافات الخاصة بالسلايدر الغير متجاوب مع القوالب وخصوصا على الهواتف الذكية ، ولكن في هذه التدوينة سوف نقدم لكم اضافة متاجوبة مع الهواتف الذكية بجميع المقاسات ، وكما تعلمون ان السلايدر يعطي جمالية الصفحة الرئيسية بطريقة مقبولة ، مع العلم انه سوف يكون شبيه 100 في المئة بقياس اي قالب بلوجر ، نعم سوف يصبح بنفس القياس الطولي والعرضي.
لاشك ان العديد من المدونين ربما بدلوا القالب الخاص بهم الى قالب احترفي مع اضافة سلايدر فقط ، لانها في الحقيقة ليست محترفة في التصميم ولا في البرمجة فقط تدون لنشر على شبكة الانترنت ، وغالبا تستعمل العديد من القوالب المجانية والتي يمكنك ايجادها بسهولة في المواقع الاحترافية ، ولكن هذه المره سوف تختار اي قالب بدون سلايدر وسوف توفر الحجم المناسب المتجاوب ، بشرط ان تتبع الشرح بالفيديو او الصور لتطبق العملية على اي قالب .
أذا كنت مهتم باضافة السلايدر في المدونة بطريقة احترافية ومنظمة ، فانا انصحك باستعمال هذه الاضافة التي سوف اقدم لك في هذه المدونة المباركة ، كما انك سوف تقوم بنسخ الاضافة متجاوبة مع الهواتف الذكية دون الخروج من السطر ، ايضا سوف اقدم لك شرح في كيفية تغير حجمها الى الحجم الذي تريد .
افضل سلايد شو كلاسيك إحترافي لمدونة بلوجر متجاوب مع جميع القوالب 2016-2017 :
1 - دخول الى القالب >> تحرير html >> افتح محرك البحث عن الاكواد CTRL+F >> ونبحث عن امر ]]></b:skin> ونضع الكود فوقها مباشرة .
1 - دخول الى القالب >> تحرير html >> افتح محرك البحث عن الاكواد CTRL+F >> ونبحث عن امر ]]></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
}