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

اقدم لكم قالب عرفني دوت كوم على مدونات بلوجر مميزات القالب كثيرة ومنها التالي

1. سريع التحميل 
2. متجاوب مع جميع الاجهزة
3. شكل مواضيع احترافي
4. قائمة روابط احترافية
5. سلايد شو احترافي
6. خالي من الاخطأ البرمجية
7. و المزيد تكتشفه بنفسك

• طريقة التعديل عليه

القالب ليس فيه تعديلات كثيرة 

1. تذهب الى التخطيط وستجد كل شئ موضح
2. لتغيير التسمية التي في اخر الاخبار كتالي التسمية/3

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

روابط التحميل و المعاينة

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

seif ahmed November 20, 2018 0 تعليق

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

يمكنكم معاينة الاضافة من هنا

شريح تركيب الاضافة 

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

<b:if cond='data:view.isPost'><style type='text/css'>/*<![CDATA[*/ /* ------ Navigation ------ */ .topic-nav{clear:both;margin-top:20px;display:block;padding:20px;border:1px solid #eeeeee} .topic-nav-wrap{position:relative} .topic-nav-cont{overflow:hidden;font-size:0} .topic-nav-cont a{width:50%;padding:15px;text-align:center;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;position:relative} .topic-nav-cont a:hover{position:static;background:-webkit-linear-gradient(45deg,#d24949,#9e44c9);background:-o-linear-gradient(45deg,#d24949,#9e44c9);background:-moz-linear-gradient(45deg,#d24949,#9e44c9);background:linear-gradient(45deg,#d24949,#9e44c9)} .topic-nav .next{float:left;border-right:1px solid #eeeeee} .topic-nav .prev{float:right;margin-right:-1px;border-left:1px solid #eeeeee} .topic-nav-cont span{display:block;width:120px;margin:0 auto;font-size:12px;color:#777777;position:relative;font-weight:700;padding:5px 0;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;background:#eeeeee} .topic-nav-cont a:hover span{background-color:#FFF;color:#d24949} .topic-nav-cont h4{-webkit-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;transition:.3s ease-in-out;font-size:16px;margin:10px 0 0;overflow:hidden;color:#222222;max-height:50px;line-height:1.5em} .topic-nav-cont a:hover h4{-webkit-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;transition:.3s ease-in-out;color:#FFF} .topic-nav .topic-img{-webkit-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;transition:.3s ease-in-out;opacity:0;width:49.9%;height:180px;border:10px solid #9e44c9;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;position:absolute;bottom:150%;z-index:1} .topic-nav .topic-img img{-webkit-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;transition:.3s ease-in-out;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;width:100%;height:100%;margin:0} .topic-nav-cont a:hover .topic-img{-webkit-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;transition:.3s ease-in-out;opacity:1;bottom:120%} .topic-nav .next .topic-img{left:0} .topic-nav .prev .topic-img{right:0} .topic-nav .topic-img:after{content:"";display:block;border-width:19px;border-style:solid;border-color:#9e44c9 transparent transparent;position:absolute;left:-webkit-calc(50% - 19px);left:-moz-calc(50% - 19px);left:calc(50% - 19px);top:100%} @media screen and (max-width:480px){.topic-nav-cont a.next,.topic-nav-cont a.prev{float:none;width:100%;border:none;display:block}.topic-nav .topic-img{display:none!important}} @media print{.topic-nav{display:none}} /*]]>*/ </style></b:if>

1. إبحث على </body> وضع الكود التالي فوقه

<b:if cond='data:view.isPost'><script type='text/javascript'>/*<![CDATA[*/ var next_text ='الموضوع التالي'; var prev_text='الموضوع السابق'; var noimg ='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9ePGbEGkF20QvAmRZX8Pra6r0g9QSBjwsL_dQS1pulqVsogr0I2HrQIhC2xOC7NPbrkAYnkE0Ygf89uckICP8kuSbivSXyVy5NTbr07m7qJ2gP9V9bEG4ML7y4s8n_Rbt-FxIYTkgcr0/s1600/90.jpg'; $(document).ready(function(){var t=$(".topic-nav .next"),a=$(".topic-nav .prev") $.get(t.attr("href"),function(a){var r=$(a).find("h1.entry-title").text(),i=$(a).find(".post .separator img") try{var n='<img src="'+i[0].src+'" alt="'+r+'" />'}catch(c){var n='<img src="'+noimg+'" alt="'+r+'"/>'}t.html('<span class="next-txt">'+next_text+"</span><h4>"+r+'</h4><div class="topic-img">'+n+"</div>")},"html"),$.get(a.attr("href"),function(t){var r=$(t).find("h1.entry-title").text(),i=$(t).find(".post .separator img") try{var n='<img src="'+i[0].src+'" alt="'+r+'" />'}catch(c){var n='<img src="'+noimg+'" alt="'+r+'"/>'}a.html('<span class="prev-txt">'+prev_text+"</span><h4>"+r+'</h4><div class="topic-img">'+n+"</div>")},"html")}) //]]></script></b:if>

• الان في الخطوة الاخيرة و هوا الكود الذي سوف يظهر في الاضافة وعادة ما تكون الاضافة فوق المواضيع ذات صلة او اسفل ازرار النشر لذا حاول البحث على هذه الاضافات ووضع الكود التالي فوقها او اسفلها 

<b:if cond='data:view.isPost'><div class="topic-nav"><div class="topic-nav-wrap"><div class="topic-nav-cont"><b:if cond='data:newerPageUrl'><a class="next" expr:href='data:newerPageUrl'><span class="next-txt">الموضوع التالي</span><h4><data:newerPageTitle/></h4></a><b:else/></b:if><b:if cond='data:olderPageUrl'><a class="prev" expr:href='data:olderPageUrl'><span class="prev-txt">الموضوع السابق</span><h4><data:olderPageTitle/></h4></a><b:else/> </b:if></div></div></div></b:if>


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

seif ahmed November 18, 2018 0 تعليق

السلام عليكم ومرحبا بكم في مدونة عبدو تكنولوجي شرح اليوم على تركيب اضافة نافذة منبثقة تعرض روابط التحميل بطريقة عصرية

اولا الاضافة تتكون من زر يتم الضغط عليه فتنبثق نافذة فيها عداد تختار انتا مدته بتغيير العدد فقط وبعد الانتهاء يظهر روابط التحميل ويوجد زر اسفل و هوا زر اغلاق كل شئ وينتج زر اعادة تحميل الصفحة لكي يتم التحميل مجددا وهذا يزيد نسبة الزوار للمدونة

يمكنك معاينة الاضافة من هنا 

طريقة التركيب

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

<b:if cond="data:view.isPost"><style type="text/css">/*<![CDATA[*/ /* abdoutech-download */ #abdoutech-download{opacity:0;min-height:550px;padding:30px 0 0;position:fixed;z-index:999999999;width:100%;height:100%;left:0;right:0;top:200%;bottom:0;background:-webkit-linear-gradient(left,#2348a5 0%,#195eca 100%);transition:all .2s ease} .btneffect{border:0;padding:20px 16px;font-size:14px;cursor:pointer;font-family:inherit;color:#fff;background:-webkit-linear-gradient(left,#2348a5 0%,#195eca 100%);border-radius:6px} .btneffect:before{content:"\f0ed";display:block;font-family:FontAwesome;height:28px;width:32px;line-height:25px;font-size:16px;text-align:center;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;float:left;margin-left:2px;margin-right:10px;color:#ffffff} .btneffect.reload:before{content:"\f021"!important} .btnclose{opacity:0;padding:16px 2px;position:fixed;font-family:inherit;z-index:999999999;width:73px;height:43px;line-height:0;left:0;right:0;bottom:500%;transition:all .2s ease;margin:0 auto;background:#fff;border:0;border-bottom:0;border-radius:21px 21px 0 0;cursor:pointer} .btnclose i{color:#1e52b7} #abdoutech-download.open{transition:all .2s ease;opacity:1;top:0} .btnclose.open{transition:all .2s ease;opacity:1;bottom:0} #abdoutech-download .abdoutech-downloadbg{background-position:center center;background-size:cover;height:100%;opacity:0.05;position:absolute;right:0;top:0;width:100%;z-index:-1} #abdoutech-download .count_direct_link .directdownloadlink,#abdoutech-download .count_direct_link.paused .countdownnumber{display:none} #abdoutech-download .count_direct_link .countdownnumber,#abdoutech-download .count_direct_link.paused .directdownloadlink{display:block} #abdoutech-download .count_direct_link .directdownloadlink{margin:0 auto 10px;text-align:center} #abdoutech-download .count_direct_link .countdownnumber .circle{border-radius:999px;box-shadow:0 0 0 10px rgba(255,255,255,0.5) inset;height:150px;left:0;margin:0 auto 10px;position:relative;right:0;width:150px} .count{animation-fill-mode:forwards;color:#ffffff;font-size:40px;line-height:150px;position:absolute;text-align:center;width:100%;z-index:2;-webkit-animation:fadeout .5s (20 + 1)+s 1 linear;-webkit-animation-fill-mode:forwards} @-webkit-keyframes l-rotate{0%{-webkit-transform:rotate(0deg)}50%{-webkit-transform:rotate(-180deg)}100%{-webkit-transform:rotate(-180deg)}} @-webkit-keyframes r-rotate{0%{-webkit-transform:rotate(0deg)}50%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(-180deg)}} @-webkit-keyframes fadeout{0%{opacity:1}100%{opacity:0.5}} #abdoutech-download .count_direct_link .directdownloadlink em{border-radius:100%;border:10px solid #8bc918;color:#8bc918;display:block;height:150px;margin:0 auto;width:150px} #abdoutech-download .count_direct_link .directdownloadlink em:hover{background-color:#8bc918;color:#ffffff} #abdoutech-download .count_direct_link .directdownloadlink em i.animated{font-size:57px;line-height:110px;-webkit-transition-property:-webkit-transform;-webkit-transition-duration:1s;-moz-transition-property:-moz-transform;-moz-transition-duration:1s;-webkit-animation:1s ease 0s normal none infinite magic-mouse-icon;-moz-animation:1s ease 0s normal none infinite magic-mouse-icon;-o-animation:1s ease 0s normal none infinite magic-mouse-icon;animation:1s ease 0s normal none infinite magic-mouse-icon} @-moz-keyframes magic-mouse-icon{0%{margin-top:0;opacity:0}30%{opacity:1}100%{margin-top:20px;opacity:0}} @-webkit-keyframes magic-mouse-icon{0%{margin-top:0;opacity:0}30%{opacity:1}100%{margin-top:20px;opacity:0}} @-o-keyframes magic-mouse-icon{0%{margin-top:0;opacity:0}30%{opacity:1}100%{margin-top:20px;opacity:0}} @keyframes magic-mouse-icon{0%{margin-top:0;opacity:0}30%{opacity:1}100%{margin-top:20px;opacity:0}} #abdoutech-download .count_direct_link .directdownloadlink em:hover i.animated{line-height:140px;-webkit-animation-name:pulse;-moz-animation-name:pulse;-webkit-animation-duration:1s;-moz-animation-duration:1s;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-timing-function:linear} @-webkit-keyframes pulse{0{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);transform:scale(1)}} @-moz-keyframes pulse{0{-moz-transform:scale(1);transform:scale(1)}50%{-moz-transform:scale(1.2);transform:scale(1.2)}100%{-moz-transform:scale(1);transform:scale(1)}} #abdoutech-download h1{color:#ffffff;font-size:25px;font-weight:bold;margin:0 auto 10px;text-align:center;text-shadow:0 1px 0 #000000} #abdoutech-download h2{color:#ffffff;font-size:25px;font-weight:bold;text-align:center;text-shadow:0 1px 0 #000000} #abdoutech-download h3{color:#ffffff;font-size:25px;font-weight:bold;text-align:center;text-shadow:0 1px 0 #000000} #abdoutech-download .anotherserver{background-color:#ffffff;border-radius:5px;margin:20px auto;padding:15px;width:80%;overflow:hidden;display:none} #abdoutech-download .anotherserver ul li{float:right;margin:15px auto;padding:0 15px;width:33.333%} #abdoutech-download .anotherserver ul li a{background-color:#8bc918;color:#ffffff;display:block;font-size:22px;height:45px;line-height:45px;text-align:center} #abdoutech-download .anotherserver ul li a i{background-color:#7cba09;float:right;height:45px;line-height:45px;width:25%} #abdoutech-download .anotherserver ul li a span{float:left;width:75%} #abdoutech-download .anotherserver ul li a:hover{background-color:#7cba09} @media screen and (max-width : 768px) {#abdoutech-download .anotherserver ul li {float: none;width: 100%}} /* End abdoutech-download */ /*]]>*/ </style></b:if>

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

<b:if cond='data:view.isPost'><script type='text/javascript'>/*<![CDATA[*/ // info script var noimg='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9ePGbEGkF20QvAmRZX8Pra6r0g9QSBjwsL_dQS1pulqVsogr0I2HrQIhC2xOC7NPbrkAYnkE0Ygf89uckICP8kuSbivSXyVy5NTbr07m7qJ2gP9V9bEG4ML7y4s8n_Rbt-FxIYTkgcr0/s1600/90.jpg', text='اعد تحميل الصفحة لتحميل الملف مجددا'; // CSS Ready function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); // js Ready !function(){var e=document.createElement("script") e.type="text/javascript",e.async=!0,e.src="//cdn.jsdelivr.net/gh/abdelalilebbihi/abdou_tech/gadget/download-severs.js" var t=document.getElementsByTagName("script")[0] t.parentNode.insertBefore(e,t)}(); /*]]>*/</script></b:if>

احفظ القالب وتابع الشرح 

1. الان في كل تدوينة تريد ضهور فيها ازرار التحميل تضع الكود التالي في الموضوع

<button class='btneffect' type='button'>إضغط هنا لتحميل</button><div id='abdoutech-download'><div class='abdoutech-downloadbg'></div><div class='container'><div class='count_direct_link'><div class='countdownnumber'><div class='circle'><div class='count'>10</div><div class='l-half'></div><div class='r-half'></div></div></div><div class='directdownloadlink'></div></div><h1>جاري تحضير رابط التحميل المباشر بعد 30 ثانية</h1><div class='anotherserver'><ul><!-- روابط التحميل --><li> <a href='#' title='رابط التحميل'> <i aria-hidden='true' class='fa fa-cloud-download'></i> <span>رابط التحميل</span></a></li><li> <a href='#' title='رابط التحميل'> <i aria-hidden='true' class='fa fa-cloud-download'></i><span>رابط التحميل</span></a></li><li> <a href='#' title='رابط التحميل'> <i aria-hidden='true' class='fa fa-cloud-download'></i><span>رابط التحميل</span></a></li><!-- روابط التحميل --></ul><div class='clearfix'></div></div></div></div><button class='btnclose' type='button'><i class='fa fa-window-close'></i></button>



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

seif ahmed November 13, 2018 0 تعليق

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

منذو شهر  ظهر كود غريب يأتي في نهاية كل رابط تم الحصول عليه من الفيسبوك وهيا عبارة عن آلية التتبع الجديدة التي نفذها Facebook. يبدو من المحتمل أن يكون هذا ردًا على الأخبار الأخيرة التي تقول إن المتصفحات مثل Safari ستحظر ملفات تعريف ارتباط التتبع من الجهات الخارجية.

وشكل الرابط يكون على هذا الشكل 

www.abdoutech.com/?fbclid=XXXXXXXXXXXX

حيث المحدد بالاحمر يتغير كل مرة

• كيفية حذف كود التتبع

1. إبحث على <head> 
2. وضع الكود التالي اسفله مباشرة

<script type='text/javascript'>//<,e=c.href}catch(r){var t=RegExp("[?&]"+a+"=.*$") e=location.search.replace(t,""),e=location.pathname+e+location.hash}history.replaceState(null,"",e)}}() //]]></script>

seif ahmed November 11, 2018 0 تعليق

السلام عليكم ومرحبا بكم في مدونة عبدو تكنولوجي شرح اليوم على اداة تم اضافتها في المدونة وتقوم بتحويل خط الويندوز الى خط يستعمل في المواقع 


الشرح مصور لذا شاهد الفيديو كامل

جميع روابط الشرح

• رابط الاداة التي تحول الخط
• رابط الموقع الذي يحول صيغ الملف من ttf الى woff
• رابط الموقع المستعمل في تحميل الخطوط
• رابط شرح كيفية التعامل مع موقع github
• رابط موقع الذي يحول رابط ال github

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

seif ahmed November 10, 2018 0 تعليق

السلام عليكم متتبعي و زوار مدونة عبدو تكنولوجي, في هده التدوينة بحول الله سنطرق الى طريقة تركيب إضافة مشغل الموسيقى الى مدونات بلوجر.

 .مع هده الإضافة الجميلة يمكنك إضافة عدد لا متناهي من الموسيقى و تجعل متابعيك أو أصدقائك يستمعون للمسيقى التي تحبها

.يمكنك معاينة الإضافة قبل إضافتها من هنا

معاينة

و الأن لم يتبقى لنا سوى التعرف على طريقة تركيب هده الإضافة, يمكنك تحميل الأكواد الخاصة بالإضافة مع الشرح من الرابط  التالي

تحميل الأكواد

.أتمنى أن تعجكم تدوينة اليوم ولا تنسو زيارتنا من حين الأخر

seif ahmed November 06, 2018 0 تعليق

السلام عليكم ومرحبا بكم في مدونة عبدو تكنولوجي اليوم اقدم لكم قالب اندرو بلاي النسخة الثانية بعد طرح النسخة السابقة يمكنك تحميلها من هنا اليوم اقدم النسخة الثانية وهيا الاكثر احترافية من قبلها 

مميزات القالب

1. سريع التحميل
2. الوان مريحة للعين
3. اكواد سيو حديثة
4. سكربت بعرض التطبيقات و معلومات عنها
5. صفحة مواضيع احترافية
6. محرك بحث احترافي
7. قائمة جانبية احترافية
8. و المزيد تكتشفه في المعاينة

فيديو شرح القالب

• اشياء لم تذكر في الفيديو

لأضهار المواضيع في الصفحة الرئيسية يجب تغيير التسميات التي ستجدها في التخطيط

<div class="download-posts row" data-label="هنا التسمية" data-num="عدد المواضيع التي تعرض">

معاينة تحميل القالب preview template version english

• ممنوع نشر القالب او حذف حقوق المصمم
• اذا اعجبك القالب لا تنسى وضع تعليق تحفيزي و الاشتراك في المدونة لكي تتوصل بك ما هوا جديد

seif ahmed November 05, 2018 0 تعليق

السلام عليكم ومرحبا بكم في مدونة عبدو تكنولوجي في شرح اليوم اقدم لكم طريقة لتضمين فيديوهات اليوتيوب و الفيمو و الصيغ اخرا مثل ام بي ثري و ال ام بي فور  بمشغل احترافي جدا يمكنك معاينة المشغلات  من زر المعاينة التالي 

معاينة

الان نشرح طريقة التركيب الاضافة

1. اولا تبحث على </head> او /head>
2. وضع هذا الكود فوقه مباشرة

<link href='https://cdn.plyr.io/3.4.4/plyr.css' rel='stylesheet'></link>

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

<script src='//cdn.plyr.io/3.4.4/plyr.js'></script><script>/*<![CDATA[*/const players = Array.from(document.querySelectorAll('.js-player')).map(player => new Plyr(player));/*]]>*/</script>

• الان احفظ القالب 
• و لاضافة فيديو او شئ اخر ضع الاكواد التالية مع التغيير بما يناسبك

<audio class="js-player" controls=""> <source src="رابط الام بي ثري" type="audio/mp3"></source></audio> <video class="js-player" controls="" playsinline="" poster="الصورة المصغرة"><source src="رابط الفيديو ام بي فور" type="video/mp4"></source></video> <div class="js-player" data-plyr-embed-id="معرف الفيديو في اليوتيوب" data-plyr-provider="youtube"></div><div class="js-player" data-plyr-provider="vimeo" data-plyr-embed-id="معرف الفيديو في الفيمو"></div>

إذا اعجبتك اضافة اليوم لا تنسى الاشتراك في المدونة لكي تتوصل بكل ماهوا جديد

seif ahmed October 18, 2018 0 تعليق

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

شرح اليوم على اضافة اداة لازالة مانع الاعلانات عبر رسالة تقوم بحجب الموضوع عن الزائر حتى يزيل الادبلوك من المتصفح

هذه الاضافة تعمل في الصفحات و المواضيع فقط اما في الصفحة الرئيسية و الارشيف لا تعمل 

يمكنك معاينة الاضافة من هنا او من هنا

• لتركيب الاضافة يجب تحميل الكود التالي وضعه فوق ال </head>

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

ثم احفظ القالب و مبروك عليك الاضافة

seif ahmed October 08, 2018 0 تعليق

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

مميزات القالب

1. سريع التحميل
2. سهولة الاستخدام
3. عداد تنازلي يمكنك التحكم فيه
4. شكل جميل و انيق 
5. اداة ازالة مانع الاعلانات اد بلوك
6. شكل ليلي اوتماتيكي حسب المنطقة الزائر
7. و المزيد تكتشفه بنفسك

معاينة

• وكما ذكرت في البداية القالب مجاني لعشرة تعليقات الاخيرة و المدة اربع وعشرين ساعه فقط لذا ضعو تعليق فيه ايميلك لكي يتم ارسال لك القالب
• و لمن يريد شراء القالب يمكنه التفضل هنا

seif ahmed October 06, 2018 0 تعليق

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

قالب اليوم عبارة عن قالب شبيه بقالبي السابق و اردت ان اطرحه عليكم مجانا والقالب لديه مميزات خرافية 

مميزات القالب

1. سريع التحميل
2. خالي من الاخطأ
3. اماكن اعلانية كثيرة
4. شكل مواضيع احترافي
5. قوائم احترافية
6. سلايدر انيق
7. مواضيع ذات صلة بطريقة رائعة

معاينة
تحميل القالب

تم اصلاح مشكل تعليقات في القالب و تم رفعه من جديد

القالب بعد تحميله يطلب تفعيل لذا يجب ان تذهب الى هذه الصفحة لتفعيل القالب بوضع اي دي المدونة

رابط المدونة لتفعيل

seif ahmed September 26, 2018 0 تعليق

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

اقدم لكم قالب لمعاينة القوالب على مدونات بلوجر حيث هذا القالب سوف يكون افضل قالب للمعايانات على منصة بلوجر لانه يمتلك العديد من المميزات التي تجعله الرقم الاول

مميزات القالب

1. سريع التحميل
2. اكواد منضمة
3. سهل الاستخدام
4. يوجد ازرار عديدة خاصة بتجاوب القالب الذي تريد معاينته
5. ازرار اضهار مواضيع مدونتك الاصلية
6. زر يضهر ترتيب المدونة التي تعاينها على الكسا
7. زر اخفاء الاطار 
8. اعادة توجيه لرابط المعاينة في الهواتف
9. و المزيد تكتشفه بنفسك

معاينة
تحميل الملف

• بعد تحميل القالب ضع هذا في كل صفحة معاينة مع التغيير البيانات

<div id='info_data' link-demo='هنا رابط المعاينة' link-download='هنا رابط التحميل' link-buy='هنا رابط شراء القالب إن لم يوجد دعه فارغ سوف يختفي الزر'> </div>

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

seif ahmed September 21, 2018 0 تعليق

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

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

يمكنك معاينة  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 ='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJMACWDMTflyEnBEbahWrOLagCEsNy1Hw_VGFchpFEzl9RF4H7d5qnAQvM_NnKAfJEycdM3NfWuUCM2o9jQ970PAod6IE5S6awrb7VDpyeIBX0JlV_XqUVhAvncp1jqrFsvm3KzGoF5K4/w360-c-h265/742isdrv1.png', noimg ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_d6WcpQ93UUUiVnCIQgjiaxEtHV3n6dHdLV_18o9TwF0fHqWqRCZ6MVcsSQxn4Gf5YLc_s8yjyi7T1yk3jG_aQsVq01UGR6BaVqd3r5ZDYQaB_YCd-bGzCftuMxRsNcdDPJuq6Pzp4fb9/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 ='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJMACWDMTflyEnBEbahWrOLagCEsNy1Hw_VGFchpFEzl9RF4H7d5qnAQvM_NnKAfJEycdM3NfWuUCM2o9jQ970PAod6IE5S6awrb7VDpyeIBX0JlV_XqUVhAvncp1jqrFsvm3KzGoF5K4/w360-c-h265/742isdrv1.png', noimg ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_d6WcpQ93UUUiVnCIQgjiaxEtHV3n6dHdLV_18o9TwF0fHqWqRCZ6MVcsSQxn4Gf5YLc_s8yjyi7T1yk3jG_aQsVq01UGR6BaVqd3r5ZDYQaB_YCd-bGzCftuMxRsNcdDPJuq6Pzp4fb9/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>



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

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

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

seif ahmed September 19, 2018 0 تعليق

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

اضافة سلايدر شو لمدونتك بثلاث اشكال مختلفة في سلايدر واحد فقط يعني لن تتعب نفسك في التغيير يمكنك تبديل الرقم فقط سوف اضهر الشكل الذي تريده انت

الاشكال

معاينة الشكل من هنا

معاينة الشكل من هنا

معاينة الشكل من هنا

الان بعد معاينة جميع الاشكال نبدأ في الشرح

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

<style type='text/css'><b:if cond='data:view.isHomepage'>.fadeOut{opacity:0} *:not(.notr){-webkit-transition:.3s ease-out;-o-transition:.3s ease-out;transition:.3s ease-out} .hide{display:none} /* ==================== * Owl Styles * ==================== */ .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:-webkit-grab;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{-webkit-transition:height .5s ease-in-out;-o-transition:height .5s ease-in-out;transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;-webkit-transition:opacity .4s ease;-o-transition:opacity .4s ease;transition:opacity .4s ease}.owl-carousel .owl-item img.owl-lazy{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;-webkit-transition:-webkit-transform .1s ease;transition:-webkit-transform .1s ease;-o-transition:transform .1s ease;transition:transform .1s ease;transition:transform .1s ease, -webkit-transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);-webkit-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;-webkit-background-size:contain;background-size:contain;-webkit-transition:opacity .4s ease;-o-transition:opacity .4s ease;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} /* ================== * Intro Slider * ================== */ .intro{overflow:hidden;display:none} .Intro-Label{min-height:150px} .intro[data-slides='3'] .Intro-Label:hover .Intro-Thumb{-webkit-transform:translate(0,-70px);-ms-transform:translate(0,-70px);transform:translate(0,-70px)} .intro[data-slides='3'] .Intro-Details{position:absolute;bottom:-20px;padding:20px;width:100%;background-color:#120e28;height:73px} .rtl .intro[data-slides='3'] .Intro-Details{right:0;text-align:right;} .ltr .intro[data-slides='3'] .Intro-Details{left:0;text-align:left;} .intro[data-slides='3'] .Intro-Label:hover .Intro-Details{bottom:0} .intro[data-slides='3'] .Intro-Title{height:calc(100% - 70px);top:120px;margin-bottom:10px} .intro[data-slides='3'] .Intro-Label:hover .Intro-Title{top:0;opacity:1} .intro[data-slides='3'] .Intro-Label .ReadMore{background-color:#242135;color:#aaaaaa;position:absolute;bottom:-20px;font-size:12px;font-family:inherit;padding:10px 15px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden} .rtl .intro[data-slides='3'] .Intro-Label .ReadMore{left:20px;} .ltr .intro[data-slides='3'] .Intro-Label .ReadMore{right:20px;} .intro[data-slides='3'] .Intro-Label:hover .ReadMore{bottom:15px} .intro[data-slides='3'] .Intro-Label .ReadMore:hover{background-color:#9e2f5e;color:#fff} .intro[data-slides='1'] .Intro-Title{bottom:20px;-webkit-border-radius:3px;border-radius:3px;opacity:1;width:auto} .rtl .intro[data-slides='1'] .Intro-Title{right:30px;} .ltr .intro[data-slides='1'] .Intro-Title{left:30px;} .intro[data-slides='1'] .Intro-Label{height:300px;margin-bottom:0} .intro[data-slides='1'] .Intro-Thumb{height:auto;min-height:100%;position:relative;top:0} .intro[data-slides='1'] .Intro-Details,.intro[data-slides='1'] .ReadMore{display:none} .intro[data-slides='1'] .owl-item{padding:0} .intro[data-slides='1'] .Intro-Cate{left:20px} .intro[data-slides='1'] .Intro-Label:after{right:20px} .intro[data-slides='4'] .Intro-Title{max-height:100%;bottom:-100%} .intro[data-slides='4'] .Intro-Label:hover .Intro-Title{bottom:0;opacity:1} .intro[data-slides='4'] .Intro-Details,.intro[data-slides='4'] .ReadMore{display:none} .intro .owl-wrapper,.intro .owl-wrapper-outer{height:100%} #int-two{margin:20px 30px 0} a.Intro-Title:hover {color: #fff;} .Intro-Label{width:100%;overflow:hidden;float:right;height:100%;position:relative;-webkit-border-radius:3px;border-radius:3px} .rtl .Intro-Label{direction:rtl;} .Intro-Cate{position:absolute;top:10px;left:10px;font-family:inherit;font-size:14px;z-index:3;color:#ffffff;opacity:.95;background-color:#9e2f5e;padding:5px 10px;-webkit-border-radius:3px;border-radius:3px} .Intro-Thumb{width:100%;height:100%;position:relative;z-index:2} .Intro-Label:after{content:"\f074";position:absolute;color:rgba(255,255,255,0.3);z-index:2;font-family:FontAwesome;font-size:24px;text-align:center;right:10px;top:3px} .Intro-Label:hover .Intro-Cate,.Intro-Label:hover:after{opacity:0} .Intro-Title{color:#fff;font-family:inherit;display:block;overflow:hidden;width:100%;position:absolute;text-align:center;background-color:rgba(0,0,0,0.8);padding:20px;z-index:2;opacity:0;font-size:19px} .Intro-Date,.Intro-Author{display:block;font-family:inherit;font-size:12px;color:#aaaaaa;line-height:1em} .rtl .Intro-Date, .rtl .Intro-Author{margin-left:20px;} .ltr .Intro-Date, .ltr .Intro-Author{margin-right:20px;} .Intro-Date:before,.Intro-Author:before{display:inline-block;font-family:fontawesome;font-size:14px;color:#aaaaaa;} .rtl .Intro-Date:before, .rtl .Intro-Author:before{margin-left:5px} .ltr .Intro-Date:before, .ltr .Intro-Author:before{margin-right:5px} .Intro-Date{margin-bottom:10px} .Intro-Date:before{content:"\f073"} .Intro-Author:before{content:"\f007"} .Intro-Date:hover,a.Intro-Author:hover{text-decoration:underline} #HTML102 .owl-nav{position:absolute;top:-webkit-calc(50% - 30px);top:calc(50% - 30px);left:0;width:100%} #HTML102 .owl-prev,#HTML102 .owl-next{color:#ffffff;font-family:fontawesome;font-size:25px;background-color:#9e2f5e;padding:8px 15px;top:0;height:39px;line-height:21px;position:absolute;-webkit-border-radius:3px;border-radius:3px;opacity:.3} #HTML102 .owl-next{right:-50px} #HTML102 .owl-prev{left:-50px} #HTML102 .owl-carousel:hover .owl-prev{left:20px;opacity:.9} #HTML102 .owl-carousel:hover .owl-next{right:20px;opacity:.9} .I-toggle i{border:1px solid #dddddd;width:70px;text-align:center;-webkit-border-radius:100px;border-radius:100px;background-color:#ffffff;display:block;margin:-10px auto 0;color:#dddddd;cursor:pointer} .I-toggle{display:none;border-top:1px dashed #dddddd;margin:-6% 30px 10px;} .I-toggle i:hover{background-color:#dddddd;color:#ffffff;border:1px solid #ffffff} #HTML102{min-height:160px;margin-bottom:20px;position:relative;direction:ltr!important} .r-loading{position:absolute;top:-webkit-calc(50% - 31px);top:calc(50% - 31px);left:0;width:100%;text-align:center} .r-loading i{color:#444;font-size:30px} .r-loading span{font-family:inherit;color:#999;margin-top:10px;direction:rtl;display:block} </b:if></style>

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

<b:if cond='data:view.isHomepage'><script src='https://rawgit.com/abdelalilebbihi/abdou_tech/master/OwlCarousel-2.js'/><script src='https://rawgit.com/abdelalilebbihi/abdou_tech/master/gadget/slider-9.js'/></b:if>

1. الان ضع الكود التالي في المكان الذي تريد ضهور فيه السلايدر

<b:if cond='data:view.isHomepage'><b:section class='rtl' id='int-two'> <b:widget id='HTML102' locked='false' title='' type='HTML' version='1'> <b:widget-settings> <b:widget-setting name='content'><![CDATA[<span class='hide'>random</span>]]></b:widget-setting> </b:widget-settings> <b:includable id='main'><style>#HTML102,.I-toggle{display:block;}</style><i class='intro-ch hide'>random</i><div class='r-loading'><i class='fa fa-spin fa-spinner'></i><span>جاري التحميل ...</span></div><div class='widget-content intro owl-carousel' data-slides="4"><data:content/></div><div class="I-toggle"><i class="fa fa-angle-double-down"></i></div></b:includable> </b:widget></b:section> </b:if>

• الان لتنقل بين الاشكال يكفيك تغيير الرقم 4 من هذا الكود data-slides="4"  برقم الذي اعجبك في المعاينة

إذا اعجبتك الاضافة لا تنسى الاشتراك في المدونة لكي تتوصل بكل ماهوا جديد

seif ahmed September 08, 2018 0 تعليق