سكربت يعرض منتجاتك على مدونات بلوجر |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'> <script type='text/javascript'> //<![CDATA[ var imgsoon ='//4.bp.blogspot.com/-_hfWJ2Q-JIo/W5uIRiXc-2I/AAAAAAAAFwM/4AimTghXZeUu-IUbIvkk0tZ85WXLlTfngCLcBGAs/w360-h265-c/742isdrv1.png', noimg ="http://4.bp.blogspot.com/-OI0BoYP677M/VZu1TW7a3DI/AAAAAAAAFsE/4BRdE2YFS5A/s1600/noimg.png", linkscript ='//rawgit.com/abdelalilebbihi/abdou_tech/master/gadget/products-abdoutech.js'; var node = document.createElement('script'); node.type = 'text/javascript'; node.async = true; node.src = linkscript; var runscript = document.getElementsByTagName('script')[0]; runscript.parentNode.insertBefore(node, runscript); //]]> </script> </b:if>

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

<div id="products"> <div class="container"> <div class="title"> منتجاتنــا</div> <ul id='products-abdoutech' source='http://store.abdoutech.com' source-label='بلوجر' num-source='3'> </ul> <div class="clearfix"> </div> <a class="more" href="#" title="عرض المزيد من المنتجات">عرض المزيد من المنتجات</a> </div> </div>

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

• اولا إبحث على </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;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> وضع الكود التالي فوقه مباشرة

<b:if cond='data:view.isHomepage'> <script type='text/javascript'> //<![CDATA[ //LTR var imgsoon ='//4.bp.blogspot.com/-_hfWJ2Q-JIo/W5uIRiXc-2I/AAAAAAAAFwM/4AimTghXZeUu-IUbIvkk0tZ85WXLlTfngCLcBGAs/w360-h265-c/742isdrv1.png', noimg ="http://4.bp.blogspot.com/-OI0BoYP677M/VZu1TW7a3DI/AAAAAAAAFsE/4BRdE2YFS5A/s1600/noimg.png"; linkscript ='//rawgit.com/abdelalilebbihi/abdou_tech/master/gadget/products-abdoutech-ltr.js'; var node = document.createElement('script'); node.type = 'text/javascript'; node.async = true; node.src = linkscript; var runscript = document.getElementsByTagName('script')[0]; runscript.parentNode.insertBefore(node, runscript); //]]> </script> </b:if>

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

<div id="products"> <div class="container"> <div class="title"> products</div> <ul id="products-abdoutech" num-source="NUM SHOW " source-label="NAME LABEL" source="LINK BLOG"> </ul> <div class="clearfix"> </div> <a class="more" href="#" title="View more products">View more products</a> </div> </div>



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

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

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