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

السلام عليكم ... 😍

مرحبا بكم في مدونة ميريا ويب الأعزاء

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

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

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

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

إبحث على </head> او بهذا الشكل </head

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

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

ابحث على </body>

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

@@@

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

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

@@@
يمكنك تحميل الاكواد من هنا
طريقة الشرح مرفقه مع الاكواد

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

مصدر الموضوع مدونة عبدو تكنولوجي

إرسال تعليق

ترافل فلاش3/03/2019 01:44:00 م
هل يمكنني وضع اعلانات عليها من فضلك
ردحذف
الردود
ميريا مصطفى3/06/2019 05:13:00 م
<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>

ردحذف
الردود