سكربت يعرض منتجاتك على مدونات بلوجر |rtl and ltr

السلام عليكم ومرحبا بكم في مدونة عبدو تكنولوجي

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

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

شرح تركيب الاضافة بنسبة لمدونات ال RTL

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

<b:if cond='data:view.isHomepage'>
<style>
.bubblingG{text-align:center;width:93px;height:49px;margin:0 auto;margin-right:44%}
.bubblingG span{display:inline-block;vertical-align:middle;width:10px;height:10px;margin:24px auto;background:rgb(231,73,55);border-radius:49px;-o-border-radius:49px;-ms-border-radius:49px;-webkit-border-radius:49px;-moz-border-radius:49px;animation:bubblingG 1.5s infinite alternate;-o-animation:bubblingG 1.5s infinite alternate;-ms-animation:bubblingG 1.5s infinite alternate;-webkit-animation:bubblingG 1.5s infinite alternate;-moz-animation:bubblingG 1.5s infinite alternate}
#bubblingG_1{animation-delay:0s;-o-animation-delay:0s;-ms-animation-delay:0s;-webkit-animation-delay:0s;-moz-animation-delay:0s}
#bubblingG_2{animation-delay:0.45s;-o-animation-delay:0.45s;-ms-animation-delay:0.45s;-webkit-animation-delay:0.45s;-moz-animation-delay:0.45s}
#bubblingG_3{animation-delay:0.9s;-o-animation-delay:0.9s;-ms-animation-delay:0.9s;-webkit-animation-delay:0.9s;-moz-animation-delay:0.9s}
@keyframes bubblingG{0%{width:10px;height:10px;background-color:rgb(231,73,55);transform:translateY(0)}100%{width:23px;height:23px;background-color:rgb(255,255,255);transform:translateY(-20px)}}
@-o-keyframes bubblingG{0%{width:10px;height:10px;background-color:rgb(231,73,55);-o-transform:translateY(0)}100%{width:23px;height:23px;background-color:rgb(255,255,255);-o-transform:translateY(-20px)}}
@-ms-keyframes bubblingG{0%{width:10px;height:10px;background-color:rgb(231,73,55);-ms-transform:translateY(0)}100%{width:23px;height:23px;background-color:rgb(255,255,255);-ms-transform:translateY(-20px)}}
@-webkit-keyframes bubblingG{0%{width:10px;height:10px;background-color:rgb(231,73,55);-webkit-transform:translateY(0)}100%{width:23px;height:23px;background-color:rgb(255,255,255);-webkit-transform:translateY(-20px)}}
@-moz-keyframes bubblingG{0%{width:10px;height:10px;background-color:rgb(231,73,55);-moz-transform:translateY(0)}100%{width:23px;height:23px;background-color:rgb(255,255,255);-moz-transform:translateY(-20px)}}
#products{background-color:#f7f7f7;border-bottom:1px solid #e6e6e6;border-top:1px solid #e6e6e6;padding:50px 0;text-align:center}
#products .title{border-bottom:1px solid #959595;color:#e64938;display:table;font-family:inherit;font-size:25px;margin:0 auto 40px;padding:0 100px 10px;position:relative}
#products .title::after{background-color:#e64938;bottom:-2px;content:"";display:table;height:5px;left:0;margin:0 auto;position:absolute;right:0;width:40%}
#products ul li{float:right;margin:0 0 0 30px;width:352px;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;-webkit-transition-duration:0.5s;transition-duration:0.5s}
#products ul li:hover,#products ul li:focus,#products ul li:active{-webkit-transform:scale(1.1);transform:scale(1.1);-webkit-transition-timing-function:cubic-bezier(0.47,2.02,0.31,-0.36);transition-timing-function:cubic-bezier(0.47,2.02,0.31,-0.36)}
#products ul li:last-child{margin:0 auto}
#products ul li .titlee{background-color:#01add3;color:#ffffff;display:block;font-family:inherit;font-size:18px;height:45px;line-height:45px;padding:0 50px;position:relative;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#products ul li .titlee::after{background-color:#04c9f5;color:#ffffff;content:"\f104";font-family:FontAwesome;font-size:28px;height:45px;line-height:45px;position:absolute;right:0;text-align:center;top:0;width:45px}
#products ul li .content{background-color:#ffffff;padding:5px}
#products ul li .content img{margin:0 auto 5px;width:100%}
#products ul li .content span{background-color:#717171;color:#f5d220;direction:ltr;float:right;font-size:20px;height:40px;line-height:40px;text-align:center;width:49%}
#products ul li .content a{background-color:#01add3;color:#ffffff;display:block;float:left;font-size:15px;font-weight:bold;height:40px;line-height:40px;text-align:center;width:49%}
#products ul li .content a:hover{background-color:#04c9f5}
#products ul li:nth-child(2n) .titlee{background-color:#a5c769}
#products ul li:nth-child(2n) .titlee:after{background-color:#b9dd79}
#products ul li:nth-child(2n) .content a{background-color:#a5c769}
#products ul li:nth-child(2n) .content a:hover{background-color:#b9dd79}
#products ul li:nth-child(3n) .titlee{background-color:#8c76bd}
#products ul li:nth-child(3n) .titlee:after{background-color:#9e85d6}
#products ul li:nth-child(3n) .content a{background-color:#8c76bd}
#products ul li:nth-child(3n) .content a:hover{background-color:#9e85d6}
#products a.more{background-color:#e74937;border-bottom:3px solid #a13326;border-radius:3px;color:#ffffff;display:inline-block;font-size:15px;font-weight:bold;margin:30px auto 0;padding:5px 60px;text-shadow:0 1px 0 #a13326}
#products a.more:hover{background-color:#a13326}
</style>
</b:if>

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

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

<b:if cond='data:view.isHomepage'>
<style>
.bubblingG{text-align:center;width:93px;height:49px;margin:0 auto;margin-right:44%}
.bubblingG span{display:inline-block;vertical-align:middle;width:10px;height:10px;margin:24px auto;background:rgb(231,73,55);border-radius:49px;-o-border-radius:49px;-ms-border-radius:49px;-webkit-border-radius:49px;-moz-border-radius:49px;animation:bubblingG 1.5s infinite alternate;-o-animation:bubblingG 1.5s infinite alternate;-ms-animation:bubblingG 1.5s infinite alternate;-webkit-animation:bubblingG 1.5s infinite alternate;-moz-animation:bubblingG 1.5s infinite alternate}
#bubblingG_1{animation-delay:0s;-o-animation-delay:0s;-ms-animation-delay:0s;-webkit-animation-delay:0s;-moz-animation-delay:0s}
#bubblingG_2{animation-delay:0.45s;-o-animation-delay:0.45s;-ms-animation-delay:0.45s;-webkit-animation-delay:0.45s;-moz-animation-delay:0.45s}
#bubblingG_3{animation-delay:0.9s;-o-animation-delay:0.9s;-ms-animation-delay:0.9s;-webkit-animation-delay:0.9s;-moz-animation-delay:0.9s}
@keyframes bubblingG{0%{width:10px;height:10px;background-color:rgb(231,73,55);transform:translateY(0)}100%{width:23px;height:23px;background-color:rgb(255,255,255);transform:translateY(-20px)}}
@-o-keyframes bubblingG{0%{width:10px;height:10px;background-color:rgb(231,73,55);-o-transform:translateY(0)}100%{width:23px;height:23px;background-color:rgb(255,255,255);-o-transform:translateY(-20px)}}
@-ms-keyframes bubblingG{0%{width:10px;height:10px;background-color:rgb(231,73,55);-ms-transform:translateY(0)}100%{width:23px;height:23px;background-color:rgb(255,255,255);-ms-transform:translateY(-20px)}}
@-webkit-keyframes bubblingG{0%{width:10px;height:10px;background-color:rgb(231,73,55);-webkit-transform:translateY(0)}100%{width:23px;height:23px;background-color:rgb(255,255,255);-webkit-transform:translateY(-20px)}}
@-moz-keyframes bubblingG{0%{width:10px;height:10px;background-color:rgb(231,73,55);-moz-transform:translateY(0)}100%{width:23px;height:23px;background-color:rgb(255,255,255);-moz-transform:translateY(-20px)}}
#products{background-color:#f7f7f7;border-bottom:1px solid #e6e6e6;border-top:1px solid #e6e6e6;padding:50px 0;text-align:center}
#products .title{border-bottom:1px solid #959595;color:#e64938;display:table;font-family:inherit;font-size:25px;margin:0 auto 40px;padding:0 100px 10px;position:relative}
#products .title::after{background-color:#e64938;bottom:-2px;content:"";display:table;height:5px;right:0;margin:0 auto;position:absolute;left:0;width:40%}
#products ul li{float:left;margin:0 30px 0 0;width:352px;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;-webkit-transition-duration:0.5s;transition-duration:0.5s}
#products ul li:hover,#products ul li:focus,#products ul li:active{-webkit-transform:scale(1.1);transform:scale(1.1);-webkit-transition-timing-function:cubic-bezier(0.47,2.02,0.31,-0.36);transition-timing-function:cubic-bezier(0.47,2.02,0.31,-0.36)}
#products ul li:last-child{margin:0 auto}
#products ul li .titlee{background-color:#01add3;color:#ffffff;display:block;font-family:inherit;font-size:18px;height:45px;line-height:45px;padding:0 50px;position:relative;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#products ul li .titlee::after{background-color:#04c9f5;color:#ffffff;content:"\f104";font-family:FontAwesome;font-size:28px;height:45px;line-height:45px;position:absolute;left:0;text-align:center;top:0;width:45px}
#products ul li .content{background-color:#ffffff;padding:5px}
#products ul li .content img{margin:0 auto 5px;width:100%}
#products ul li .content span{background-color:#717171;color:#f5d220;direction:rtl;float:left;font-size:20px;height:40px;line-height:40px;text-align:center;width:49%}
#products ul li .content a{background-color:#01add3;color:#ffffff;display:block;float:right;font-size:15px;font-weight:bold;height:40px;line-height:40px;text-align:center;width:49%}
#products ul li .content a:hover{background-color:#04c9f5}
#products ul li:nth-child(2n) .titlee{background-color:#a5c769}
#products ul li:nth-child(2n) .titlee:after{background-color:#b9dd79}
#products ul li:nth-child(2n) .content a{background-color:#a5c769}
#products ul li:nth-child(2n) .content a:hover{background-color:#b9dd79}
#products ul li:nth-child(3n) .titlee{background-color:#8c76bd}
#products ul li:nth-child(3n) .titlee:after{background-color:#9e85d6}
#products ul li:nth-child(3n) .content a{background-color:#8c76bd}
#products ul li:nth-child(3n) .content a:hover{background-color:#9e85d6}
#products a.more{background-color:#e74937;border-bottom:3px solid #a13326;border-radius:3px;color:#ffffff;display:inline-block;font-size:15px;font-weight:bold;margin:30px auto 0;padding:5px 60px;text-shadow:0 1px 0 #a13326}
#products a.more:hover{background-color:#a13326}
</style>
</b:if>

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

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

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

تحميل الكود من هنا

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

جيك برو | Geek Pro 20 سبتمبر 2018 في 7:37 ص

واصل حبيبي(y)
(y)(k)(k)(k)
(k)(k)(k)
(k)(k)
(y)
- عبدو تكنولوجي - Abdou Technologie 20 سبتمبر 2018 في 9:00 ص
  
  (k)

جيك برو | Geek Pro 20 سبتمبر 2018 في 2:21 م

اخي لاحظت صورة التعليق الخاص ببك | لو سمحت اخي كيف تقوم بتشر تنوينة علي موقعك رغم انها مدونة علي موقع اخر مث ل store الخاص بك او خمسات
- عبدو تكنولوجي - Abdou Technologie 21 سبتمبر 2018 في 3:51 ص
  
  يمكمك مراسلتي واركبها لك ان اردت

Amr Khaled 20 سبتمبر 2018 في 10:01 م

انا حزين عليك يا عبدو
لماسمعته عنك
انت اصبحت مغرور وتعشق المال
ما بك صديقي :(
- عبدو تكنولوجي - Abdou Technologie 21 سبتمبر 2018 في 3:52 ص
  
  لا تحزن اخي فالمتابعين الحقيقيين الذين يعرفوني اما الباقي لا اسمعهم

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