اضافة اخر المواضيع rss متحركة بشكل رائع جذاب
لمشاهدة الأضافة
طريقة التركيب :
1 - لوحة التحكم
2 - القالب
3 - تحرير HTML
4 - اضغط على CTRL+F
5 - ابحث عن ]]>
6 - ضع الكود التالي فوقة مباشرة
.MBL-container-header h1{font-weight:300; font-size:48px; text-align:center;} .MBL-container-header h2{font-size:30px; text-align:center;} #MBLnewsticker1 ul { padding: 0px; } .MBLnewsticker { width: 100%; overflow: hidden; height: 440px; position: relative; padding: 0 5px; box-sizing: border-box; margin: 0 auto; text-align:center; } .MBLnewsticker>ul { padding: 0; margin: 0; list-style-type: none; position: relative; } .MBLnewsticker>ul>li { display: none; width: 100%; height: 100px; background: #FFF; position: absolute; overflow: hidden } .MBLnewsticker>ul>li>.MBL-content { position: absolute; top: 0; bottom: 30px; left: 0; right: 0; box-sizing: border-box; padding: 5%; overflow: hidden; } .MBLnewsticker>ul>li>.MBL-content a { text-decoration: none; } .MBLnewsticker>ul>li>.MBL-content a:hover { text-decoration: underline; } .MBLnewsticker>ul>li>.MBL-info { position: absolute; bottom: 0; left: 0; right: 0; height: 20px; padding: 5px; border-top: solid 1px #DDD; } .MBLnewsticker>ul>li>.MBL-info a { display: inline-block; width: 20px; height: 20px; background: #0F0; opacity: 0.2; cursor: pointer; } .MBLnewsticker>ul>li>.MBL-info a:hover { opacity: 1; } .MBLnewsticker>ul>li>.MBL-info a.MBL-facebook-black { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp30iUEg_chwIrFWUZSRjvejI7mzCQRpja5pZhULpEO4bRzkRk9EIwaWLCKFCL_iuBKczZU2LSgtkJj6M5VUp5SOMvvkRFdrE4wezt7YIXBrMoocoN96P1nr6OSiRy5apyH5Nd_mX0V9Ky/s1600/buttons-black.png) 0 0 no-repeat; float: left; margin-right: 5px; } .MBLnewsticker>ul>li>.MBL-info a.MBL-twitter-black { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp30iUEg_chwIrFWUZSRjvejI7mzCQRpja5pZhULpEO4bRzkRk9EIwaWLCKFCL_iuBKczZU2LSgtkJj6M5VUp5SOMvvkRFdrE4wezt7YIXBrMoocoN96P1nr6OSiRy5apyH5Nd_mX0V9Ky/s1600/buttons-black.png) -20px 0 no-repeat; float: left; margin-right: 5px; } .MBLnewsticker>ul>li>.MBL-info a.MBL-google-black { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp30iUEg_chwIrFWUZSRjvejI7mzCQRpja5pZhULpEO4bRzkRk9EIwaWLCKFCL_iuBKczZU2LSgtkJj6M5VUp5SOMvvkRFdrE4wezt7YIXBrMoocoN96P1nr6OSiRy5apyH5Nd_mX0V9Ky/s1600/buttons-black.png) -40px 0 no-repeat; float: left; } .MBLnewsticker>ul>li>.MBL-info a.MBL-link-black { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp30iUEg_chwIrFWUZSRjvejI7mzCQRpja5pZhULpEO4bRzkRk9EIwaWLCKFCL_iuBKczZU2LSgtkJj6M5VUp5SOMvvkRFdrE4wezt7YIXBrMoocoN96P1nr6OSiRy5apyH5Nd_mX0V9Ky/s1600/buttons-black.png) -60px 0 no-repeat; float: right; } .MBLnewsticker>ul>li>.MBL-info a.MBL-facebook-white { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPspJjrr9zzFfWie55yyv5vI5-98L_NjE7mAUPh57cuTIsmCY6kejaU_gkH0O8UH42iFpsAErmF40zSUu06Xf-Wkjojuz9L7QkYiYwXh_ce05xCrrzDf1ipzBA2GH1fvKTsgQ5pQKRwz16/s1600/buttons-white.png) 0 0 no-repeat; float: left; margin-right: 5px; } .MBLnewsticker>ul>li>.MBL-info a.MBL-twitter-white { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPspJjrr9zzFfWie55yyv5vI5-98L_NjE7mAUPh57cuTIsmCY6kejaU_gkH0O8UH42iFpsAErmF40zSUu06Xf-Wkjojuz9L7QkYiYwXh_ce05xCrrzDf1ipzBA2GH1fvKTsgQ5pQKRwz16/s1600/buttons-white.png) -20px 0 no-repeat; float: left; margin-right: 5px; } .MBLnewsticker>ul>li>.MBL-info a.MBL-google-white { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPspJjrr9zzFfWie55yyv5vI5-98L_NjE7mAUPh57cuTIsmCY6kejaU_gkH0O8UH42iFpsAErmF40zSUu06Xf-Wkjojuz9L7QkYiYwXh_ce05xCrrzDf1ipzBA2GH1fvKTsgQ5pQKRwz16/s1600/buttons-white.png) -40px 0 no-repeat; float: left; } .MBLnewsticker>ul>li>.MBL-info a.MBL-link-white { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPspJjrr9zzFfWie55yyv5vI5-98L_NjE7mAUPh57cuTIsmCY6kejaU_gkH0O8UH42iFpsAErmF40zSUu06Xf-Wkjojuz9L7QkYiYwXh_ce05xCrrzDf1ipzBA2GH1fvKTsgQ5pQKRwz16/s1600/buttons-white.png) -60px 0 no-repeat; float: right; } .MBLnewsticker>ul>li>.MBL-info span { position: absolute; left: 80px; right: 30px; text-align: center; opacity: 0.4; z-index: 0; font-size: 13px; cursor: default; } .MBLnewsticker>div { width: 50px; height: 30px; cursor: pointer; position: absolute; opacity: 0.3; } .MBLnewsticker>div:hover { opacity: 1; } .MBLnewsticker>div.MBL-top-arrow { top: 0; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSWApbiAfYkG7TFeDrpFcabaL0VWIaZUK_z3UizduJsMxDi2f5CgHvlpc8LMYSGLv1AKRaMjIbw9zPxIDBdEGP-TXplolsGPgxCw30snQe3EgYHsyFgZwBhtbVemnhairngUV7FQu0833C/s1600/arrows-black.png) top no-repeat; } .MBLnewsticker>div.MBL-bottom-arrow { bottom: 0; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSWApbiAfYkG7TFeDrpFcabaL0VWIaZUK_z3UizduJsMxDi2f5CgHvlpc8LMYSGLv1AKRaMjIbw9zPxIDBdEGP-TXplolsGPgxCw30snQe3EgYHsyFgZwBhtbVemnhairngUV7FQu0833C/s1600/arrows-black.png) bottom no-repeat; } .MBLnewsticker .MBL-top0 { -ms-transform: scale(0.80); -webkit-transform: scale(0.85); transform: scale(0.85); opacity: 0.85; top: 0; z-index: 1; display: block; } .MBLnewsticker .MBL-top1 { -ms-transform: scale(0.87); -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.9; top: 20px; z-index: 2; display: block; } .MBLnewsticker .MBL-top2 { -ms-transform: scale(0.95); -webkit-transform: scale(0.95); transform: scale(0.95); opacity: 0.95; top: 45px; z-index: 3; display: block; } .MBLnewsticker .MBL-active { -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; top: 75px; z-index: 10; display: block; } .MBLnewsticker .MBL-bottom2 { -ms-transform: scale(0.95); -webkit-transform: scale(0.95); transform: scale(0.95); opacity: 0.95; top: 105px; z-index: 6; display: block; } .MBLnewsticker .MBL-bottom1 { -ms-transform: scale(0.87); -webkit-transform: scale(0.90); transform: scale(0.90); opacity: 0.9; top: 130px; z-index: 5; display: block; } .MBLnewsticker .MBL-bottom0 { -ms-transform: scale(0.80); -webkit-transform: scale(0.85); transform: scale(0.85); opacity: 0.85; top: 150px; z-index: 4; display: block; } .MBL-easing2 { transition: .25s linear; -moz-transition: .25s linear; -webkit-transition: .25s linear; } .MBL-easing li { transition: .5s ease-out; -moz-transition: .5s ease-out; -webkit-transition: .5s ease-out; } .MBL-radius li { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .MBL-radius2 li { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .MBL-shadow li { -webkit-box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3); -moz-box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3); box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3); } .MBL-shadow-big { -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important; -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important; }
كرر العملية بالبحث عن
وضع الكود التالي فوقة
الخطوة الأخيرة توجه الى التخطيط
واضافة اداة HTML/JavaScript
وانسخ الكود التالي مع تغيير المدون بالأسفل
مـلاحــظــة
قم بتغيير http://feeds.feedburner.com/blogspot/eRrPUF بالرابط الخاص بك
تغيير 100% لتعديل عرض الاضافة
تغيير 5000 لتعديل سرعة تناوب الشرائح كلما قل كلما زادة السرعة
تغيير FFF# لتعديل لون خلفية info bar
تغيير 766D6D# لتعديل لون الرابط الذي يظهر في الشريط
تغيير f2f2f2 # لتعديل لون خلفية الشريط الاخباري
تغيير DDD# لتعديل لون border او الحواف الخاصة بالشريط
لاتنسى الأشتراك بالمدونة والتعليق على التدوينة
