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

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

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

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

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

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

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

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

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

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

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

Abdou Technologie|عبدو تكنولوجي

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