نافذة منبثقة لروابط تحميل لمدونات بلوجر
السلام عليكم ومرحبا بكم شرح اليوم على تركيب اضافة نافذة منبثقة تعرض روابط التحميل بطريقة عصرية
اولا الاضافة تتكون من زر يتم الضغط عليه فتنبثق نافذة فيها عداد تختار انتا مدته بتغيير العدد فقط وبعد الانتهاء يظهر روابط التحميل ويوجد زر اسفل و هوا زر اغلاق كل شئ وينتج زر اعادة تحميل الصفحة لكي يتم التحميل مجددا وهذا يزيد نسبة الزوار للمدونة
يمكنك معاينة الاضافة من هنا
طريقة التركيب
- إبحث على </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>
0 comments: