تغيير شكل المشاركات الشائعة الى شكل سلايد متحرك

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

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

• أولا نقوم بالبحث عن هذا الوسم (]]>) ثم تضع فوقه الكود التالى :

.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(0px,0px,0px)}.owl-carousel .owl-controls .owl-nav .owl-prev,.owl-carousel .owl-controls .owl-nav .owl-next,.owl-carousel .owl-controls .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{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:right}.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-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;-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}left:0}.slider .owl-prev:hover,.slider .owl-next:hover{background-color:rgba(23,23,23,0.9);color:#fefefe}

.PopularPosts .widget-content ul li{margin-bottom:10px;position:relative}
.PopularPosts ul li:hover .PopularPosts ul li:before{transition:0.3s;transform:rotate(360deg)}
.PopularPosts .widget-content ul li:last-child{margin-bottom:0;border-bottom:none;padding-bottom:0!important}
.PopularPosts img{width:100%;transform-style:flat!important;height:100%}
.PopularPosts .owl-controls .owl-nav >div{width:30px;height:30px;margin-left:5px;background:#5D728A;cursor:pointer;color:#ffffff;line-height:33px;text-align:center;display:inline-block;transition:0.3s;font-size:15px}
.PopularPosts .owl-controls{display:block;position:absolute;top:10px;right:10px}
.PopularPosts .item-thumbnail{float:none;height:250px;width:100%;overflow:hidden;transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease}
.popular-posts .item-snippet{color:#D6D3D3;text-align:right;padding:10px;font-size:12px;line-height:20px}
.popular-posts ul li .item-caption{position:relative;text-align:center;margin:auto;margin-top:-153px;padding:14px;background-image:linear-gradient(transparent,rgba(0,0,0,0.83))}
.popular-posts .item-title{line-height:30px;font-size:16px;text-align:justify;padding:10px;height:65px}
.item-title a{color:#fff}
.item-title a:before{content:"\f087";display:block;background-color:#5D728A;font-family:FontAwesome;height:28px;width:32px;line-height:28px;font-size:14px;text-align:center;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;float:right;margin-right:0;margin-left:5px;color:#FFF}
.popular-posts .item-snippet:before{content:"\f10e";font-family:FontAwesome;margin-left:5px}
.popular-posts .item-snippet:after{content:"\f10d";font-family:FontAwesome;margin-right:10px}

• الأن ابحث عن هذا الوسم () بعدها قم بوضع الكود التالى فوقه

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

هذا كان شرح اليوم، أذا واجهتك اي مشكلة لا تتردد فى كتابة تعليق، دمتم فى أمان الله