القائمة الرئيسية

الصفحات

أخر المشاركات

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


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

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


توجه إلى قالب ثم >> تحرير HTML
ابحث عن الوسم<head/> و اضف الكود التالي فوقه:

 <b:if cond="data:view.isPost"> <style type="text/css"> /*<![CDATA[*/ /* th3protk-download */ #th3protk-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,#133a5d 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,#ad0ee0 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:100%;line-height:0;left:0;right:0;bottom:500%;transition:all .2s ease;margin:0 auto;background:#fff;border:0;border-bottom:0;cursor:pointer} .btnclose i{font-size: 23px;color:#1e52b7} #th3protk-download.open{padding-top: 100px;transition:all .2s ease;opacity:1;top:0} .btnclose.open{transition:all .2s ease;opacity:1;bottom:0} #th3protk-download .th3protk-downloadbg{background-position:center center;background-size:cover;height:100%;opacity:0.05;position:absolute;right:0;top:0;width:100%;z-index:-1} #th3protk-download .count_direct_link .directdownloadlink,#th3protk-download .count_direct_link.paused .countdownnumber{display:none} #th3protk-download .count_direct_link .countdownnumber,#th3protk-download .count_direct_link.paused .directdownloadlink{display:block} #th3protk-download .count_direct_link .directdownloadlink{margin:0 auto 10px;text-align:center} #th3protk-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}} #th3protk-download .count_direct_link .directdownloadlink em{border-radius:100%;color:#f54017;display:block;height:150px;margin:0 auto;width:150px} #th3protk-download .count_direct_link .directdownloadlink em:hover{background-color:#f54017;color:#ffffff} #th3protk-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}} #th3protk-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)}} #th3protk-download h1{color:#ffffff;font-size:25px;font-weight:bold;margin:0 auto 10px;text-align:center;text-shadow:0 1px 0 #000000} #th3protk-download h2{color:#ffffff;font-size:25px;font-weight:bold;text-align:center;text-shadow:0 1px 0 #000000} #th3protk-download h3{color:#ffffff;font-size:25px;font-weight:bold;text-align:center;text-shadow:0 1px 0 #000000} #th3protk-download .anotherserver{background-color:#ffffff;border-radius:5px;margin:20px auto;padding:15px;width:80%;overflow:hidden;display:none} #th3protk-download .anotherserver ul li{float:right;margin:15px auto;padding:0 15px;width:33.333%} #th3protk-download .anotherserver ul li a{background-color:#f54017;color:#ffffff;display:block;font-size:22px;height:45px;line-height:45px;text-align:center} #th3protk-download .anotherserver ul li a i{background-color:#b12f12;float:right;height:45px;line-height:45px;width:25%} #th3protk-download .anotherserver ul li a span{float:left;width:75%} #th3protk-download .anotherserver ul li a:hover{background-color:#b12f12} @media screen and (max-width : 768px) {#th3protk-download .anotherserver ul li {float: none;width: 100%}} /* End alwalednet-download */ /*]]>*/ </style> </b:if>


ابحث عن الوسم<body/> و اضف الكود التالي فوقه:

 <b:if cond='data:view.isPost'> <script type='text/javascript'>/*<![CDATA[*/ // info script var noimg='', 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='th3protk-download'> <div class='th3protk-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>


reaction:

تعليقات