الخبير عامر بشير

‏إظهار الرسائل ذات التسميات سلايد شو. إظهار كافة الرسائل

سلايد شو لمدونات بلوجر يعرض اكثر من قسم - سلايد شو رقم 13 كتبها: المدون التقني - الخبير عامر بشير

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

السلام عليكم ومرحبا بكم في مدونة الخبير عامر بشير

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

يمكنك معاينة من هنا

شرح طريقة التركيب

اولا ابحث في القالب على وضع الكود التالي فوقه مباشرة

<b:if cond='data:view.isHomepage'><link defer='defer' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css' rel='stylesheet'/><style type="text/css">/*<![CDATA[*/ /*===================================== = slider =====================================*/ .sliders{display:none} .slider-card{direction:ltr;height:503px;position:relative;overflow:hidden;padding-top:25px;background:-webkit-linear-gradient(#2c2d2c,#131514);background:linear-gradient(#2c2d2c,#131514)} .backImage{position:absolute;width:100%;height:100%;top:0;left:0;background-size:cover;background-position:center;filter:blur(0)} .slider-card .QualitySpan{text-align:center;color:#323232;position:absolute;right:10px;top:10px;background:#fff;font-size:14px;padding:4px 8px;border-radius:4px;font-weight:700;border:0;font-family:font,neo;box-shadow:0 0 5px rgba(0,0,0,.5490196078431373)} .slider-card>span.nextslider-card{-webkit-transform:translate(-80px,0);transform:translate(-80px,0);position:absolute;-webkit-transition:.3s all ease;transition:.3s all ease;width:60px;height:60px;border-radius:15px;top:50%;left:20px;background:#262626;margin-top:-30px;z-index:10;box-shadow:0 1px 16px rgba(0,0,0,.47);line-height:54px;text-align:center;color:#fafafa;cursor:pointer;padding-top:5px;font-size:35px;padding-right:8px} .slider-card>span.prevslider-card{-webkit-transform:translate(80px,0);transform:translate(80px,0);position:absolute;-webkit-transition:.3s all ease;transition:.3s all ease;width:60px;border-radius:15px;height:60px;top:50%;right:20px;box-shadow:0 1px 16px rgba(0,0,0,.47);background:#262626;margin-top:-30px;z-index:10;padding-top:5px;line-height:53px;cursor:pointer;text-align:center;color:white;font-size:31px;padding-right:0;padding-left:2px} .slider-card:hover>span{-webkit-transform:translate(0);transform:translate(0)} .slider-card li .container{height:500px;position:relative;width:1200px;margin:0 auto} .bottomBarDetails>.social-shares{float:right;color:#ddd;font-weight:700;font-size:12px;left:initial;margin-left:8px;position:static;border-top:0;padding-top:0;margin-top:0} .owl-carousel .owl-wrapper-outer{overflow:hidden;position:relative;width:100%} .slider-card .owl-item{overflow:hidden} .owl-item .imdbSpan{-webkit-transition:.3s all ease;transition:.3s all ease;position:absolute;top:42px;left:10px;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.43);background:#efaf22;z-index:100;font-weight:700;font-size:17px;color:#2f2f2f;padding:5px 10px 6px;font-family:neo} .slider-card li{list-style:none;padding-top:10px;height:590px;position:relative;z-index:1;-webkit-transition:.1s all linear;transition:.1s all linear;background-repeat:no-repeat;background-size:100%;background-position:0% 25%} .slider-card li a:nth-child(5){display:none} .slider-card li:before{content:'';position:absolute;top:-10%;left:-10%;z-index:-2;width:120%;opacity:.3;-webkit-filter:blur(3px);height:120%;background-size:100%;background-position:center} .coverSlider{height:100%;overflow:hidden;background-position:top center;background-size:cover;position:relative;-webkit-transition:.3s all ease;transition:.3s all cubic-bezier(.56,.28,.34,1.34)} .slider-card li a .coverSlider:after{content:'';position:absolute;top:0;right:0;width:100%;height:100%;background:-webkit-linear-gradient(transparent,rgba(0,0,0,.84));background:linear-gradient(transparent,rgba(0,0,0,.84));-webkit-transition:.4s .1s all ease;transition:.4s .1s all ease;opacity:0;-webkit-transform:translate(0,150px);transform:translate(0,150px)} .titleSmalled{position:absolute;bottom:0;right:0;width:100%;font-size:19px;-webkit-transform:translate(0,0%);transform:translate(0,0%);background:-webkit-linear-gradient(transparent,rgba(0,0,0,.84));background:linear-gradient(transparent,rgba(0,0,0,.84));font-weight:700;padding:30px 15px 10px;color:white;-webkit-transition:.3s all ease;transition:.3s all cubic-bezier(.56,.28,.34,1.34)} .slider-card li a:hover .titleSmalled{-webkit-transform:translateY(-29px);transform:translateY(-29px)} .YearSpan{position:absolute;top:10px;left:10px;background:rgba(33,33,33,.88);border-radius:4px;padding:3px 6px 2px;font-weight:700;color:white;z-index:10;font-family:neo;font-size:13px} .YearSpan i{margin-left:3px} .posterSlider{width:90px;height:110px;border:3px solid #f3f3f3;box-shadow:0 1px 3px rgba(0,0,0,.37);position:absolute;top:195px;right:12px;-webkit-transform:translate(110px,0);transform:translate(110px,0)} .slider-card li a:hover .posterSlider{-webkit-transform:translate(0,0);transform:translate(0,0);-webkit-transition:.4s .2s all ease;transition:.4s .2s all cubic-bezier(.56,.28,.34,1.34)} .slider-card li a img{width:100%;height:100%} .detailsDesc{height:113px;background:-webkit-linear-gradient(rgb(0,0,0),rgba(0,0,0,.54));background:linear-gradient(rgb(0,0,0),rgba(0,0,0,.54));border-top:2px solid rgb(2,2,2);padding:15px 23px;font-size:15px;font-weight:700;color:#efefef} .bottomBarDetails{position:absolute;top:9px;right:9px} .bottomBarDetails>div>div{background:rgba(255,255,255,.7607843137254902);margin-bottom:4px;padding:4px 8px;border-radius:7px;font-size:13px;color:#000;font-weight:700;-webkit-transition:.4s all ease;-moz-transition:.4s all ease;-o-transition:.4s all ease;transition:.4s all ease;-webkit-transform:scale(0);transform:scale(0)} .bottomBarDetails>div>div:nth-child(1){transition-delay:.1s} .bottomBarDetails>div>div:nth-child(2){transition-delay:.2s} .bottomBarDetails>div>div:nth-child(3){transition-delay:.3s} .bottomBarDetails>div>div:nth-child(4){transition-delay:.4s} a.box:hover .bottomBarDetails>div>div{transform:scale(1)} .bottomBarDetails>div>div i{margin-left:4px} .slider-card li a{right:0;box-shadow:0 1px 6px rgba(0,0,0,.54);height:433px;overflow:hidden;text-align:right;direction:rtl;display:inline-block;position:relative;width:24.1%;width:calc(25% - 10px);float:right;margin-right:5px;margin-left:5px;border:3px solid #fff} .slider-card li a:hover .coverSlider{height:316px} .slider-card li a:hover .titleHovered{-webkit-transform:translateY(-120px);transform:translateY(-120px);-webkit-transition:.4s .2s all ease;transition:.4s .2s all cubic-bezier(.56,.28,.34,1.34)} .slider-card li a:hover .coverSlider:after{opacity:1;-webkit-transform:translate(0);transform:translate(0)} .slider-card li a:hover .bottomBarDetails{-webkit-transform:scale(1);transform:scale(1)} @media (max-width:1199px){.slider-card{height:initial;padding-bottom:10px}.slider-card li .container{width:100%;height:initial}.slider-card li{height:initial}.slider-card li a{width:24%;width:calc(25% - 10px);height:293px}.posterSlider{display:none}.titleSmalled{font-size:15px}.slider-card li a:hover .titleSmalled{-webkit-transform:translateY(0);transform:translateY(0)}} @media (max-width:767px){.slider-card li a{width:48%;width:calc(50% - 10px);margin-bottom:10px}} @media (max-width:399px){.slider-card li a{height:200px}} /*]]>*/ </style></b:if>

ثانيا ابحث في القالب على وضع هذا الكود فوقه
تحميل الكود من هنا

الان ضع الكود التالي في اي مكان تريده

<b:section class='sliders' id='slider' cond='data:view.isHomepage'>  <b:widget id='TextList2' locked='false' title='اقسام الموقع' type='TextList' version='2' visible='true'>    <b:widget-settings>      <b:widget-setting name='shownum'/>      <b:widget-setting name='item-6'>حيوانات</b:widget-setting>      <b:widget-setting name='item-5'>قهوة</b:widget-setting>      <b:widget-setting name='item-4'>رسوم</b:widget-setting>      <b:widget-setting name='item-3'>عقل</b:widget-setting>      <b:widget-setting name='sorting'>NONE</b:widget-setting>      <b:widget-setting name='item-2'>ألوان</b:widget-setting>      <b:widget-setting name='item-1'>ابداع</b:widget-setting>      <b:widget-setting name='item-0'>فنون</b:widget-setting>    </b:widget-settings>    <b:includable id='main'>  <b:include name='content'/></b:includable>    <b:includable id='content'><div class='slider-card'>     <div class='backImage' style='background-image: url()'/>  <span class='nextslider-card'><i class='fa fa-chevron-left'/></span>  <span class='prevslider-card'><i class='fa fa-chevron-right'/></span>   <b:tag class='slides owl-carousel owl-theme  wow' data-wow-duration='1s' name='div'> <b:loop values='data:items' var='item2'><b:tag expr:data-qism='data:item2' id='slide-1Cover' name='li'/></b:loop></b:tag>      </div></b:includable>  </b:widget></b:section>

الان احفظ و إذهب الى التخطيط واضف التسميات التي تريد ضهور لها مواضيع

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر سكربت سلايد شو سلايدر شو يونيو 08, 2019

اضافة سكربت يعرض اخر المواضيع على المدونة بطريقة جميلة كتبها: المدون التقني - الخبير عامر بشير

السلام عليكم ومرحبا بكم في مدونة الخبير عامر بشير

اضافة اليوم عبارة عن سكربت يعرض اخر مواضيع المدونة حيث يتكون من 2 اماكن مكان لسلايدر و المكان الاخر على روابط للمواضيع

يمكنك معاينة الاضافة من هنا

شرح تركيب الاضافة

اولا إبحث في القالب على وضع الكود التالي فوقه مباشرة

ثانيا إبحث على وضع الكود التالي فوقه مباشرة
الكود موجود على هذه الصفحة من هنا

الان ضع الكود التالي في المكان الذي تريد ضهور فيه الاضافة

يمكنك التعديل على عدد ضهور المواضيع عبر التغيير الرقم الذي ب الاحمر

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

Admin Amer لا يوجد تعليق اضافات بلوجر افلام انمي بلوجر سكربت سلايد شو سلايدر شو أبريل 30, 2019

اضافة سلايد شو لمدونات الانمي و الافلام - سلايد شو النسخة 12 لمدونات بلوجر كتبها: المدون التقني - الخبير عامر بشير

السلام عليكم ومرحبا بكم في مدونة الخبير عامر بشير

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

يمكنك معاينة الاضافة من هنا

نبدا بشرح على بركة الله

إبحث في القالب على وضع الكود التالي فوقه مباشرة

<b:if cond='data:view.isHomepage'><link defer='defer' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css' rel='stylesheet'/><style type="text/css">/*<![CDATA[*/ .SliderMaster{position:relative;z-index:1;overflow:hidden;direction:ltr;height:560px;background:#0000009e;padding-top:90px} .SliderCover{position:absolute;top:0;right:0;width:100%;height:100%;background-size:cover;background-position:center;z-index:-1;animation:SliderAnimate 8s ease alternate infinite;opacity:.12;transition:.4s all ease} @keyframes SliderAnimate{0%{background-position:0% 100%}} .SliderMaster li > img{width:220px;height:330px;margin-left:10px;float:right;border:5px solid #fff} .SliderMaster > ul{width:600px;margin:0 auto;position:relative} .SliderMaster > ul > li{list-style:none} .SliderMaster > ul:after{content:'';display:block;clear:both} /*.SliderMaster > ul:before{content:'';position:absolute;top:0;left:0;width:50%;height:100%;background:linear-gradient(to right,#191919,#1f1f1f00);z-index:0;pointer-events:none;visibility:hidden} */ .Slidercontent{opacity:0;color:white;width:calc(100% - 250px);top:32px;position:absolute;left:24px;transform:translate(-120px,0px);transition:.4s .2s all ease;height:240px} .Slidercontent .SliderTitle{font-family:cairo;font-size:18px;color:#dedede;line-height:24px;margin-bottom:7px;font-weight:bold;max-height:47px;overflow:hidden} .PosterMovie{width:170px;height:260px;overflow:hidden;float:right;transition:.4s .1s all ease;margin:-10px 30px 20px 25px;border-radius:15px;border:2px solid #243340;box-shadow:0 1px 5px #0000008c} .SliderMaster .owl-item > li{text-align:right;height:290px;direction:rtl;transition:.4s all ease;background:#000;margin:50px 15px 0 15px;padding:0 0 0 15px;border-radius:15px;box-shadow:0 4px 18px #0000008a;position:relative;z-index:1;transform:scale(0.8);list-style:none} .owl-item.active .SliderCover{transform:translate(0);opacity:.1} .SliderMaster .owl-item.active > li{opacity:1;transform:perspective( 600px ) rotateX(0deg );background:#22313f;box-shadow:0 4px 18px #0000008a} .SliderMaster .owl-item > li .PosterMovie{transform:translate(0px,-120px);opacity:0} .SliderMaster .owl-item.active > li .PosterMovie{transform:translate(0) scale(1.1);opacity:1} .Slidercontent > ul > li{display:inline-block;list-style:none;font-size:13px;margin-left:7px;color:#fff;font-weight:bold;padding-left:7px;border-left:1px solid #ffffff38;line-height:100%;position:relative;top:4px;margin-bottom:4px} .Slidercontent > ul{margin-bottom:8px;padding-bottom:8px} .Slidercontent > ul > li.category{background:#1e55a3;padding:4px 8px 3px 8px;border-radius:4px;font-size:12px;border-left:0;line-height:16px} .SliderItemCover{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;transition:.4s all ease;overflow:hidden;background-size:cover;background-position:center;border-radius:15px} .SliderItemCover:after{content:'';position:absolute;top:0;right:0;width:100%;height:100%;background:linear-gradient(to right,#18232dbf 0%,#162029 60%,#162029 100%);z-index:1} .Sliderdesc{font-size:13px;color:#ffffff99;font-weight:bold;line-height:22px;height:85px;overflow:hidden} .SliderMaster .owl-item.active .Slidercontent{transform:translate(0);opacity:1} .SliderMaster .owl-item.active .SliderItemCover{opacity:.8} .SliderMaster .owl-item.active .SliderTitle{color:white} a.WatchButton{background:#1e55a3;width:155px;display:block;float:left;color:white;height:45px;text-align:right;transition:.2s all ease;font-weight:bold;font-size:17px;border-radius:5px;padding-top:11px;line-height:23px;position:absolute;bottom:0;left:0;border-bottom:2px solid #dedede;box-shadow:0 1px 2px #00000052} span.PlayOverlay{position:absolute;top:0;right:0;width:100%;height:100%;background:#0000007a;text-align:center;color:#dedede;font-size:50px;padding-top:111px} span.PlayOverlay > i{display:block;width:50px;height:50px;border-radius:50%;font-size:20px;padding-top:9px;margin:0 auto;padding-left:2px} span.PlayOverlay > svg{width:50px;position:absolute;top:50%;margin-right:-25px;margin-top:-23px} a.WatchButton i{float:right;font-size:18px;margin-right:10px;margin-left:8px;color:#1e55a3;background:#dedede;border-radius:4px;transition:.2s all ease;width:30px;height:30px;text-align:center;margin-top:-5px;padding-top:6px} a.slider-next{left:50%;margin-left:-340px} a.slider-prev{right:50%;margin-right:-340px} .SliderMaster:hover a.slider-next,.SliderMaster:hover a.slider-prev{opacity:1} a.slider-next:hover,a.slider-prev:hover{color:white} a.slider-next,a.slider-prev{position:absolute;top:50%;z-index:10;transition:.3s all ease;margin-top:-23px;z-index:100;font-size:60px;color:#E6E6E6;text-shadow:0 0 7px black} a.WatchButton:hover{background:#1b4c90} a.WatchButton:hover > i{} .SliderMasterBorderless{direction:ltr;overflow:hidden;height:420px;padding:0 15px} .SliderMaster .owl-controls{display:none!important} .SliderMaster .owl-stage-outer{overflow:inherit} /*]]>*/ </style></b:if>

إبحث في القالب على وضع الكود التالي فوقه مباشرة
الكود من هنا

الان ضع الكود التالي في المكان الذي تريد ضهور فيه السلايد شو

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر سكربت سلايد شو سلايدر شو أبريل 18, 2019

جعل المشاركات الشائعة على شكل سلايدر كتبها: المدون التقني - الخبير عامر بشير

السلام عليكم ومرحبا بكم في مدونة الخبير عامر بشير

اقدم لكم اضافة رائعة و هيا عبارة عن جعل المشاركات الشائعة تظهر على شكل سلايدر

يمكنك معاينة الاضافة من هنا

شرح التركيب

اولا احذف جميع اكواد css الخاصة بشكل الاول للمشاركة الشائعة
ثانيا إبحث في القالب على هذا الكود وضع الكود التالي فوقه مباشرة

الان إبحث في القالب على وضع الكود التالي فوقه مباشرة

الان احفظ القالب ومبروك عليك الاضافة

لا تنسى الاشتراك في المدونة لكي تتوصل بكل جديد

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر سكربت سلايد شو سلايدر شو مارس 22, 2019

سلايد شو النسخة 11 يعرض اخر المواضيع لمدونات بلوجر كتبها: المدون التقني - الخبير عامر بشير

السلام عليكم ومرحبا بكم في مدونة الخبير عامر بشير

شرح اليوم على سلايد شو يعرض اخر المواضيع على المدونة بطريقة رائعة ومميزة

يمكنك معاينة الاضافة من هنا

نبدا شرح التركيب على بركة الله

ابحث في القالب على وضع الكود التالي فوقه مباشرة

<b:if cond='data:view.isHomepage'><style type="text/css">/*<![CDATA[*/ /* slider Posts */ .owl-carousel{display:none;width:100%;-webkit-tap-highlight-color:transparent;/* position relative and z-index fix webkit rendering fonts issue */   position:relative;z-index:1} .owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden;/* fix firefox animation glitch */} .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;/* fix for flashing background */ -webkit-transform:translate3d(0px,0px,0px)} .owl-carousel .owl-wrapper,.owl-carousel .owl-item{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)} .owl-carousel .owl-item{position:relative;min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none} .owl-carousel .owl-item img{display:block;width:100%} .owl-carousel .owl-nav.disabled,.owl-carousel .owl-dots.disabled{display:none} .owl-carousel .owl-nav .owl-prev,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-dot{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{visibility:hidden} .owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .owl-carousel.owl-grab{cursor:move;cursor:grab} .owl-carousel.owl-rtl{direction:rtl} .owl-carousel.owl-rtl .owl-item{float:right} /* No Js */ .no-js .owl-carousel{display:block} .owl-carousel .animated{animation-duration:1000ms;animation-fill-mode:both} .owl-carousel .owl-animated-in{z-index:0} .owl-carousel .owl-animated-out{z-index:1} .owl-carousel .fadeOut{animation-name:fadeOut} @keyframes fadeOut{0%{opacity:1}100%{opacity:0}} .owl-height{transition:height 500ms ease-in-out} .owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity 400ms ease} .owl-carousel .owl-item img.owl-lazy{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;transition:transform 100ms ease} .owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)} .owl-carousel .owl-video-playing .owl-video-tn,.owl-carousel .owl-video-playing .owl-video-play-icon{display:none} .owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity 400ms ease} .owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} .slider-featured{background-color:#c2c9d0;clear:both;width:100%;height:270px;position:relative} .slider-featured:after{content:" ";display:block;clear:both} .owl-loaded .featured-posts{display:block!important} .slider-featured .featured-posts{list-style:none;position:relative;height:270px;display:none} .slider-featured-grid .featured-posts{position:relative;height:200px;width:25%;display:block;float:left} .slider-featured-grid .featured-posts .featured-content{bottom:10px;top:inherit;text-align:left;left:14px} .slider-featured-grid .featured-posts:first-child{height:400px;width:50%} .slider-featured-grid .featured-posts .featured-title{font-size:15px;margin-top:6px} .featured-content .post-time,.featured-content .post-time i{color:rgba(255,255,255,0.4)} .featured-post{background-repeat:no-repeat;background-size:cover;background-position:25% 50%;position:absolute;top:0;left:0;height:100%;bottom:0;right:0} .featured-posts:hover .featured-post:after{background-color:rgba(36,36,40,0)} .featured-post:after{content:' ';position:absolute;background-color:rgba(36,36,40,0.5);transition:all .2s ease;top:0;left:0;bottom:0;right:0;z-index:2} .featured-posts .featured-content{position:absolute;top:90px;right:0;left:0;text-align:center;padding:8px 6px;color:#a5a4a4;background-color:rgba(0,0,0,0);z-index:4} .featured-ft{display:block;margin:8px 0;position:absolute;z-index:2;top:10px;right:20px} .featured-posts .featured-title{font-size:24px;line-height:1.4em;text-transform:uppercase;display:block;font-weight:300;text-shadow:1px 2px 2px rgba(0,0,0,.2);color:#fff} .featured-content span,.featured-content i{font-size:12px;text-shadow:1px 2px 2px rgba(0,0,0,.2);color:#fff} span.featured-format-tags{padding:4px;background:-webkit-linear-gradient(-30deg,#00004d 0%,#5333ed 49%,#2cd4d9 100%);text-align:center;background:#2b0c93;background:-moz-linear-gradient(left,#2b0c93 0,#a54098 56%,#f84272 100%);background:-webkit-linear-gradient(left,#2b0c93 0,#a54098 56%,#f84272 100%);background:linear-gradient(to right,#2b0c93 0,#a54098 56%,#f84272 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b0c93',endColorstr='#f84272',GradientType=1 )} .featured-content .post-time{float:none} .slider-featured .owl-stage .post-time{opacity:0;-webkit-transform:translateY(22px);transform:translateY(22px)} .slider-featured .owl-stage .active .post-time{transform:translate3d(0px,0px,0px);opacity:1;transition-property:-webkit-transform,opacity;transition-duration:800ms;transition-timing-function:cubic-bezier(0.39,0.575,0.565,1)} .slider-featured .owl-stage .featured-title{opacity:0;-webkit-transform:translateY(22px);transform:translateY(22px)} .slider-featured .owl-stage .active .featured-title{transform:translate3d(0px,0px,0px);opacity:1;transition-property:-webkit-transform,opacity;transition-duration:400ms;transition-timing-function:cubic-bezier(0.39,0.575,0.565,1)} .slider-featured .owl-dots{position:absolute;right:10px;width:34px;border-radius:100px;padding:20px 0;background-color:#fff;box-shadow:0 4px 9px 0 rgba(43,43,49,.1),0 7px 14px 0 rgba(43,43,49,.13);text-align:center;bottom:10px} .slider-featured .owl-dots .owl-dot{display:block;width:8px;height:8px;background-color:#efefef;box-shadow:inset 0 0 0 8px #efefef;margin:4px auto;border-radius:50%;-webkit-transition:-webkit-transform 0.1s ease-in-out,background-color 0.2s ease 0.3s,box-shadow 0.25s ease-out;-moz-transition:transform 0.1s ease-in-out,background-color 0.2s ease 0.3s,box-shadow 0.25s ease-out;-o-transition:transform 0.1s ease-in-out,background-color 0.2s ease 0.3s,box-shadow 0.25s ease-out;transition:transform 0.1s ease-in-out,background-color 0.2s ease 0.3s,box-shadow 0.25s ease-out;cursor:pointer} .slider-featured .owl-dots .active{background-color:#fff;box-shadow:inset 0 0 0 2px #2B0C93;-webkit-box-shadow:inset 0 0 0 2px #2B0C93;width:12px;height:12px} .slider-featured .owl-nav{position:absolute;top:10px;color:#a8b6c0;width:34px;border-radius:100px;padding:20px 0;background-color:#fff;box-shadow:0 4px 9px 0 rgba(43,43,49,.1),0 7px 14px 0 rgba(43,43,49,.13);text-align:center;right:10px;opacity:0;transition:all .2s ease} .slider-images .owl-nav{bottom:-20px;top:inherit;left:50%;right:inherit;opacity:1;width:80px;height:32px;display:block;padding:0;margin-left:-40px} .slider-images .owl-nav .owl-prev,.slider-images .owl-nav .owl-next{display:inline-block;height:32px;line-height:32px;padding:0 15px} .slider-images{margin-bottom:20px} .slider-featured:hover .owl-nav{opacity:1} .slider-featured .owl-prev:hover,.slider-featured .owl-next:hover{color:#2B0C93;cursor:pointer} /*]]>*/ </style></b:if>

ابحث في القالب على وضع الكود التالي فوقه مباشرة

<b:if cond='data:view.isHomepage'>    <script defer='defer' src='https://cdn.jsdelivr.net/gh/abdelalilebbihi/abdou_tech/OwlCarousel.js' type='text/javascript'></script><script type='text/javascript'>//<![CDATA[ var month_format = [, "يناير", "فبراير", "مايو", "أبريل", "مارس", "يونيو", "يوليو", "أغسطس", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر"]; var noimg ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR4c5fbuZRWTujSbrxR6iVHXs0WjTL4SMk0jUyGfBPBfZbQaUPWtObldh8ZJRPHD0cVrqwya6odbtdCmcxxsBNXB0nYa_HEilOqXSmDw87__vrmNiSzoRH8zexTm90CWNsDaBTDVL0hrc/s1600-r/nth.png"; var numitem = randomnum(1,3);//  (1,3)  رقم عشوائي من واحد الى ثلاث var numitemmob = 2; function randomnum(r,a){for(var n=1;n<=5;n++){var o=a-r+1;return Math.floor(Math.random()*o)+r}} !function(){var e=document.createElement("script") e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/abdelalilebbihi/abdou_tech/gadget/slider-11.js" var t=document.getElementsByTagName("script")[0] t.parentNode.insertBefore(e,t)}(); //]]></script></b:if>

الان لاضهار السلايد شو ضع الكود التالي في المكان الذي تريده

15">

الذي ب اللون الاحمر هوا عدد المواضيع التي تريد ضهورها على سلايدر
اذا اردت اضافة تخصيص للمواضيع ليضهر مواضيع قسم محدد اضف هذا الكود بدلا من الاول

هنا تسمية" data-num="15">

الان احفظ القالب مبروك عليك الاضافة

Admin Amer لا يوجد تعليق اضافات بلوجر سكربت سلايد شو سلايدر شو يناير 19, 2019

سلايد شو لمدونات الافلام و الانمي لبلوجر - الشكل 10 كتبها: المدون التقني - الخبير عامر بشير

السلام عليكم ومرحبا بكم في مدونة الخبير عامر بشير شرح اليوم وكما طلبو متابعين المدونة سلايدشو لمدونات الافلام و الفيديوهات

و السلايدر التالي يتم استعماله في قوالب مارشميلو

معاينة السلايدر من هنا

لتركيب الاضافة اتبع الخطوات التالية

اولا ابحث على وضع الكود التالي فوقه مباشرة

الان ابحث على وضع الكود هذا فوقه مباشرة

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

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر سلايد شو سلايدر شو ديسمبر 15, 2018

سلايدر مثبت يعرض اخر المواضيع لمدونات بلوجر كتبها: المدون التقني - الخبير عامر بشير

السلام عليكم ومرحبا بكم في مدونة الخبير عامر بشير اقدم لكم سلايدر بشكل اخر وشبيه بسلايدر الخاص بمدونتي

ما يميز هذا سلايدر انه بسيط جدا وانيق

يمكنك معاينة الاضافة من هنا

شرح التركيب

اولا ابحث على وضع الكود التالي فوقه

<b:if cond='data:view.isHomepage'><style type="text/css">    /*<![CDATA[*/ .slidershow{position:relative;overflow:hidden;padding-top:4%} .slidershow .slider{position:relative;width:50%;height:250px;float:right} .slidershow .slider:nth-child(1){width:50%;float:right;height:500px} .slidershow .slider .slidepost{height:100%;padding:2%} .slidershow .slider .slidepost:after{content:"";position:absolute;height:175px;width:96%;bottom:10px;opacity:1;transition:all .2s linear 0;-webkit-transition:all .2s linear 0;-moz-transition:all .2s linear 0;background-color:rgba(255,255,255,0);background-image:-moz-linear-gradient(bottom,rgba(0,1,1,0.9) 0%,transparent 100%);background-image:-o-linear-gradient(bottom,rgba(0,1,1,0.9) 0%,transparent 100%);background-image:-webkit-linear-gradient(bottom,rgba(0,1,1,0.9) 0%,transparent 100%);background-image:-ms-linear-gradient(bottom,rgba(0,1,1,0.9) 0%,transparent 100%);background-image:linear-gradient(to top,rgba(0,1,1,0.9) 0%,transparent 100%)} .slidershow .slider .slidepost .background-image{width:100%;height:100%;background-position:center;background-size:cover} .slidershow .slider .slidepost .article-content{position:absolute;bottom:2%;right:2%;padding:4%;color:#fff;z-index:1} .slidershow .slider .slidepost .article-content .post-date{color:#ececec} .slidershow .slider .slidepost .article-content .art-title{margin:0;line-height:1.5;padding:10px 0} .slidershow .slider .slidepost .article-content .art-title a{color:#fff} .slidershow .slider .slidepost .article-content .art-title a:hover{color:#65bb6a} .slidershow .slider .slidepost .article-content .meta{padding:5px 0} .slidershow .slider .slidepost .article-content .meta span{display:inline-block;margin-left:10px} .slidershow .slider .slidepost .article-content .meta span a{color:#fff} .slidershow .slider .slidepost .article-content .meta span i{margin-left:5px;color:#65bb6a} .d-none {display: none!important;} @media (min-width: 750px){.d-lg-block {display: block!important;}} /*]]>*/ </style></b:if>

ثانيا ابحث على وضع الكود التالي فوقه مباشرة

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر سلايد شو سلايدر شو ديسمبر 14, 2018

اضافة مواضيع ذات صلة لمدونات بلوجر على شكل سلايد شو متعدد الاشكال كتبها: المدون التقني - الخبير عامر بشير

السلام عليكم مرحبا بكم في مدونة الخبير عامر بشير اليوم اقدم لكم شكل جديد من مواضيع ذات صلة حيث يمكنك تحكم بشكلها واختيار شكل الذي تريده

معاينة الاضافة من هنا

شرح تركيب الاضافة

اولا ابحث على وضع الكود التالي فوقه مباشرة

<b:if cond='data:view.isPost'><link defer='defer' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css' rel='stylesheet'/><style type="text/css">/*<![CDATA[*/ /* Related Posts */ #related-posts{background:#ffffff;margin-bottom:30px;border:1px solid #e5e5e5;-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,0.06);-moz-box-shadow:0 0 5px 0 rgba(0,0,0,0.06);margin-bottom:30px;padding:20px} #related-posts li{overflow:hidden;position:relative;padding:0;list-style:none} .related-img{height:240px} .related-img a{display:block;width:100%;height:100%} .related-content{position:absolute;bottom:0;padding:20px;width:100%;text-align:right} .related-title a{color:#eee;font-family:inherit;font-weight:700;font-size:15px} .related-label{color:#fff;font-size:13px;background:#0076fe;padding:2px 10px;display:inline-block;margin-bottom:10px;overflow:hidden}#related-posts .recent-meta{opacity:0;visibility:hidden;margin-bottom:-24px} #related-posts li:hover .recent-meta{opacity:1;visibility:visible;margin-bottom:0} #related-posts li:hover .related-label{color:#555;background:#fff} #related-posts h5{float: right;display:inline-block;background:#ffffff;padding:0 8px;font-family:inherit;text-transform:uppercase;font-weight:700;font-size:14px;border-right:3px solid #0076fe;color:#555555;position:relative;z-index:999} #related-posts .widget-title{border-bottom:1px solid #eeeeee;position:relative;margin-bottom:15px;padding-bottom:10px} #related-posts .widget-title:after{content:"";height:2px;background:#eeeeee;display:inline-block;width:100%;position:absolute;left:0;top:9px} #related-posts .owl-nav{float:left;background:#ffffff;padding-right:3px;position:relative;z-index:999} #related-posts .owl-nav div{float:right;width:25px;text-align:center;background:#eeeeee;height:25px;margin-right:5px;line-height:25px;margin-top:-4px;color:#555;font-size:15px;cursor:pointer} #related-posts .owl-nav div:hover{color:#fff;background:#0076fe} .mag-share{position:absolute;top:0;height:0;right:0;z-index:99;width:100%;padding:10px} .mag-share .share-button{line-height:27px!important;font-size:13px!important;border:1px solid #fff;float:right;color:#fff!important;position:static!important;width:27px;height:27px;text-align:center;background:rgba(0,0,0,0.11);padding:0!important} .mag-share ul{float:left;margin-top:-15px;opacity:0;visibility:hidden} .mag-share ul a{float:right;width:25px;height:25px;padding:0!important;font-size:13px;text-align:center;line-height:25px!important;margin-right:5px;color:#fff!important} .mag-share.actived ul{opacity:1;margin:0;visibility:visible} .mag-share a:hover,.mag-share.actived .share-button{color:#555!important;background:#fff} .facebook-share{margin-right:0!important;background:#3b5998} .twitter-share{background:#55acee} .google-plus-share{background:#DD4B39} .linkedin-share{background:#0976b4} .pinterest-share{background:#C92228} #related-posts a,#related-posts .recent-meta,.owl-nav div{transition:all .3s;-webkit-transition:all .3s;-o-transition:all .3s;-moz-transition:all .3s} .grident-mag{z-index:99;right:0;pointer-events:none;background:-moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);background:-webkit-gradient(linear,right top,right bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,0.8)));background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);background:-o-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);background:-ms-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#80000000',GradientType=0)} .grident-mag span{color:#ccc!important} .recent-meta{margin-top:10px} .recent-meta span{font-family:inherit;text-transform:capitalize;color:#6d7683;font-size:12px} .recent-date{margin-left:10px} .recent-meta span:before,.related-meta span:before{font-family:fontawesome;margin-left:5px;position:relative;top:-1px} .recent-author:before{content:"\f007"} .recent-date:before{content:"\f073"} /*]]>*/ </style></b:if>