نافذة منبثقة لروابط تحميل لمدونات بلوجر كتبها: المدون التقني

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

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

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

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

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

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

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

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

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

<b:if cond='data:view.isPost'><script type='text/javascript'>/*<![CDATA[*/ // info script var noimg='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb9o6Y1EkWxoHPTG2xUqTIyP5g4Go-1AgblUYFzXGVLgO1M8URc3w5sm3oTNSUpAplGqGXOFJJrAaHgmKj_x5HUf0Gq-XRwatKGZZ8v7BgC_vBhwbwIoPjnL_279MKZATjPHr_gIS5KT4/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>

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

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

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

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

الكلمات المفتاحية : اضافات بلوجر بلوجر سكربت

Written by you: Technical blogger AMER BACHIR

URL Of Post:
https://ab-expert.blogspot.com/2018/11/blog-post_13.html

HTML Code Of Post:
<a href="https://ab-expert.blogspot.com/2018/11/blog-post_13.html">نافذة منبثقة لروابط تحميل لمدونات بلوجر كتبها: المدون التقني - الخبير عامر بشير</a>

مواضيع ذات صلة

الموضوع من قسم:

اضافات بلوجر بلوجر سكربت

تنويه : الصور والفيديوهات في هذا الموضوع على هذا الموقع مستمده أحيانا من مجموعة متنوعة من المصادر الإعلامية الأخرى. حقوق الطبع محفوظة بالكامل من قبل المصدر. إذا كان هناك مشكلة في هذا الصدد، يمكنك الاتصال بنا من هنا.

عن المدونة

مدونة الخبير عامر بشير للمعلوميات مختصة في مجال التكنلوجيا و التقنيات و كل ما يخص الهواتف الذكية و الحواسيب ، و هدفنا هو تصحيح االأفكار و الدروس الخاطئة في المحتوى العربي عن طريق دروس و حلقات في قناتنا على اليوتيوب ، و يسهر على إشراف و سير الموقع الشاب الجزائري ' عامر بشير' الذي يحيكم و يشجعكم على الزيارة الدائمة و الإشتراك في موقعنا لتتوصل بكل جديد منا .