سكربت يعرض منتجاتك على مدونات بلوجر |rtl and ltr كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

سبتمبر 19, 2018

0 تعليقات

شاركه غرد جوجل+

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.

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

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

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

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

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

<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>

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

<b:if cond='data:view.isHomepage'><script type='text/javascript'>//<![CDATA[ var imgsoon ='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Omm_aILhJf4YKrbVRrfKfOUMIOdIhshZAdYewseJ1ORe5xGjOxCsuL3RblSJBiDuzwFMaQ4kHx34oBoR6Us0chsSFkqhqjjnz__WztlCFyFWimPWBxDBD3V59FffacS9BNlQdlH3MVg/w360-c-h265/742isdrv1.png', noimg ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjERRxqhBkRah54cwu-CXFlLj_lhzw1lBqcnpUAFCBg4QKiiTnBUTr_ZtVU0rKTwaNyzOA5WYF8eAgHVEyqYwN5PqFYaWxyLywzfPZ9ikiXJo_1GMq9Q-8N6JIUv7NaMPQd7dNKBSU2gLNA/s1600/noimg.png", linkscript ='https://cdn.jsdelivr.net/gh/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.ab-expert.blogspot.com' source-label='بلوجر' num-source='3'></ul><div class="clearfix"></div><a class="more" href="#" title="عرض المزيد من المنتجات">عرض المزيد من المنتجات</a></div></div>

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

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

<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>

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

<b:if cond='data:view.isHomepage'><script type='text/javascript'>//<![CDATA[ //LTR var imgsoon ='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Omm_aILhJf4YKrbVRrfKfOUMIOdIhshZAdYewseJ1ORe5xGjOxCsuL3RblSJBiDuzwFMaQ4kHx34oBoR6Us0chsSFkqhqjjnz__WztlCFyFWimPWBxDBD3V59FffacS9BNlQdlH3MVg/w360-c-h265/742isdrv1.png', noimg ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjERRxqhBkRah54cwu-CXFlLj_lhzw1lBqcnpUAFCBg4QKiiTnBUTr_ZtVU0rKTwaNyzOA5WYF8eAgHVEyqYwN5PqFYaWxyLywzfPZ9ikiXJo_1GMq9Q-8N6JIUv7NaMPQd7dNKBSU2gLNA/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>



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

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

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

الكلمات المفتاحية :

Written by you: Technical blogger AMER BACHIR

URL Of Post:

https://ab-expert.blogspot.com/2018/09/rtl-and-ltr.html

HTML Code Of Post:

<a href="https://ab-expert.blogspot.com/2018/09/rtl-and-ltr.html">سكربت يعرض منتجاتك على مدونات بلوجر |rtl and ltr كتبها: المدون التقني - الخبير عامر بشير</a>