سكربت يعرض منتجاتك على مدونات بلوجر |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>