السلام عليكم ورحمة الله وبركاته
أهلا وسهلا بكم متابعي مدونة اسمعنى اون لاين ، اليوم سوف نعرض لكم نافذة منبثقة لروابط تحميل لمدونات بلوجر وهي إضافة مميزة جداً حيث يعرض لك الأداة روابط تحميل خاصة بيك .ومن مميزات الأداة أنه يوجد بع عداد تحميل يمكن من تغيره وأيضا زرق الإغلاق
معاينة الإضافة
طريقة التركيب
ابحث عن /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>
قوم بوضع الكود التالي فوقه
<b:if cond='data:view.isPost'>
<script type='text/javascript'>/*<![CDATA[*/
// info script
var noimg='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil2hjQ2GLdSh086CmwyMFgaJrYp8EevkghUjRRJ9AJ-GjX5S-5RXfmj9vs1-5hj3gpzwYR-yiyVnc5eto8-UDRV0fOseDEPtJSzG_WX6i3KZxnCQV7wSnjNzwcSu54zkoMInzwdOhfs1s/s1600/90.jpg',
text_reload='اعد تحميل الصفحة لتحميل الملف مجددا';
// 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>
الأن قوم بحفظ القالب وتوجه إلى المقالة ثم اضغط على تحرير المقالة
بعد ذلك سوف نتنقل إلى وضع HTML
وتقوم بوضع هذه الأكواد مع تغيير روابط التحميل
<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>