تحميل واتساب النجم AQWhatsApp الازرق، الوردي، العنابي أخر إصدار V23.55

يعد زر تنزيل بلوجر إضافة تزيد من الأرباح ، وذلك من خلال عوامل إبقاء الزائر لفترة أطول في الموقع؛ سنشرح لكم أكثر ونوضح لكم كيفية عمل الز، وأيضاً شرح إضافة زر التحميل مع عدادا الانتظار.

أحصل على زر تحميل مع عداد بلوجر مجاني وبشكل رائع

تم تصميم زر تحميل بلوجر مع عداد لمساعدتك على إبقاء الزوار في المقال لفترة أطول؛ في الوقت الحاضر ، من أهم الأشياء في مدونتك التأكد من قيام جميع زوارك بالتحميل بعد قراءة كل محتوى مدونتك. لهذا السبب ، يُنصح بإضافة زر مؤقت للتنزيل أو عداد تنزيل.

كيفية إضافة زر تحميل مع عداد بلوجر؟

سيوضح لك هذا الشرح كيفية وضع زر مؤقت التنزيل على مدونتك . 

كيفية إضافة زر تحميل في مقالات Blogger؟

إذا كنت ترغب في تنزيل زر المؤقت ، فعليك اتباع بعض هذه الخطوات الست.

طريقة إضافة زر تحميل مع عداد لمدونات بلوجر

الخطوة 1) أولاً ، انتقل إلى  لوحة تحكم Blogger.com

الخطوة 2) الآن عليك الذهاب إلى قسم المظهر 

الخطوة 3) في قسم المظهر ، انتقل إلى تخصيص ثم حدد تحرير HTML

الخطوة 4) الآن ابحث]]> </ b: skin> tag عبر Ctrl + F & الصق كود css هذا  قبل]]> </ b: skin> tag

<.modal {
            display: none;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            text-align: left;
            background: rgba(0, 0, 0, .9);
            transition: opacity .25s ease;
            z-index: 999;
        } 
        btn-at {
            cursor: pointer;
        }
        .at-pop__bg {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            cursor: pointer;
        }
        .at-pop {
            display: none;
        } 
        .at-pop__inner {
            transition: top .25s ease;
            position: absolute;
            top: -20%;
            right: 0;
            bottom: 0;
            left: 0;
            width: 50%;
            margin: auto;
            overflow: auto;
            background: #fff;
            border-radius: 5px;
            padding: 1em 2em;
            height: 50%;
        }
        .at-pop__close {
            position: absolute;
            right: 1em;
            top: 1em;
            width: 1.1em;
            height: 1.1em;
            cursor: pointer;
        }
        .at-pop__close:after,
        .at-pop__close:before {
            position: absolute;
            width: 2px;
            height: 1.5em;
            background: #333;
            display: block;
            transform: rotate(45deg);
            left: 50%;
            margin: -3px 0 0 -1px;
            top: 0;
        }
        .at-pop__close:hover:after,
        .at-pop__close:hover:before {
            background: #aaa;
        }
        .at-pop__close:before {
            transform: rotate(-45deg);
        }
        @media screen and (max-width: 768px) {
            .at-pop__inner {
                width: 90%;
                box-sizing: border-box;
            }
        }
        .adpop-top {
            height: 40px;
            width: 100%;
            border-bottom: 1px #E5E5E5 solid;
        }
        .adhtml {
            margin: 14px 0 4px;
            min-height: 260px;
        }    
        .adpop-content {
            height: 330px;
        }     
        #at-downloadx {
            display: inline-block;
            height: 30px;
            line-height: 30px;
            width: 140px;
            text-align: center;
            background-color: lightskyblue;
            color: #fff;
            padding: 5px;
            font-size: 19px;
            border-radius: 8px;
            text-transform: capitalize;
            text-decoration: none;
            border: 1px solid #212121 !important;
            margin-top: 1px;
        }
        .download-pop {
            line-height: 16px;
            margin: 15px;
            font-size: 19px;
            text-align: center;
            position: relative;
        }  
        .btn-at {
            display: block;
            height: 50px;
            color: #fff;
            font-size: 24px;
            text-transform: uppercase;
            background: #f3a;
            text-align: center;
            line-height: 50px;
            width: 200px;
            margin: auto;
            transition: all 0.4s ease-in;
            cursor: pointer;
        }
        .adpop-top h2 {
            margin: 0
        }>

الخطوة 5) الآن ابحث عن علامة </body> عبر Ctrl + F  والصق كود JAVASCRIPT التالي

<.modal {
            display: none;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            text-align: left;
            background: rgba(0, 0, 0, .9);
            transition: opacity .25s ease;
            z-index: 999;
        } 
        btn-at {
            cursor: pointer;
        }
        .at-pop__bg {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            cursor: pointer;
        }
        .at-pop {
            display: none;
        } 
        .at-pop__inner {
            transition: top .25s ease;
            position: absolute;
            top: -20%;
            right: 0;
            bottom: 0;
            left: 0;
            width: 50%;
            margin: auto;
            overflow: auto;
            background: #fff;
            border-radius: 5px;
            padding: 1em 2em;
            height: 50%;
        }
        .at-pop__close {
            position: absolute;
            right: 1em;
            top: 1em;
            width: 1.1em;
            height: 1.1em;
            cursor: pointer;
        }
        .at-pop__close:after,
        .at-pop__close:before {
            position: absolute;
            width: 2px;
            height: 1.5em;
            background: #333;
            display: block;
            transform: rotate(45deg);
            left: 50%;
            margin: -3px 0 0 -1px;
            top: 0;
        }
        .at-pop__close:hover:after,
        .at-pop__close:hover:before {
            background: #aaa;
        }
        .at-pop__close:before {
            transform: rotate(-45deg);
        }
        @media screen and (max-width: 768px) {
            .at-pop__inner {
                width: 90%;
                box-sizing: border-box;
            }
        }
        .adpop-top {
            height: 40px;
            width: 100%;
            border-bottom: 1px #E5E5E5 solid;
        }
        .adhtml {
            margin: 14px 0 4px;
            min-height: 260px;
        }    
        .adpop-content {
            height: 330px;
        }     
        #at-downloadx {
            display: inline-block;
            height: 30px;
            line-height: 30px;
            width: 140px;
            text-align: center;
            background-color: lightskyblue;
            color: #fff;
            padding: 5px;
            font-size: 19px;
            border-radius: 8px;
            text-transform: capitalize;
            text-decoration: none;
            border: 1px solid #212121 !important;
            margin-top: 1px;
        }
        .download-pop {
            line-height: 16px;
            margin: 15px;
            font-size: 19px;
            text-align: center;
            position: relative;
        }  
        .btn-at {
            display: block;
            height: 50px;
            color: #fff;
            font-size: 24px;
            text-transform: uppercase;
            background: #f3a;
            text-align: center;
            line-height: 50px;
            width: 200px;
            margin: auto;
            transition: all 0.4s ease-in;
            cursor: pointer;
        }
        .adpop-top h2 {
            margin: 0
        }>

الخطوة 6) الآن قم بإنشاء منشورات جديدة وانتقل إلى عرض html حيث يتعين عليك إضافة كود إظهار صندوق التحميل في المقال.

<div class="btn-at" id="btn-at">Download</div>
    <div class="modal" id='my-modal'>
        <div class="at-pop__bg"></div>
        <div class="at-pop__inner">
            <div class="adpop-top">
                <label class="at-pop__close at-btnclose"><i class="fa fa-close" style="font-size:20px;"></i></label>
                <h2 style="margin: 0px;">Download Your file</h2>
            </div>
            <div class="download-pop">
                <a class="button" download href="https://drive.google.com/file/d/1KjJTnv2_N9yVdYLJ3Hp1pVzK7Agfdvr6/view?usp=sharing" id="at-downloadx">Download File</a>
            </div>
            <div class="adpop-content">
                <div class="adhtml">
                    <ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxxxxxxxx" data-ad-format="auto" data-ad-slot="8671274899" data-full-width-responsive="true" style="display: block;"></ins>
                    <script>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>
            </div>
        </div>
    </div> <div class="btn-at" id="btn-at">Download</div>
    <div class="modal" id='my-modal'>
        <div class="at-pop__bg"></div>
        <div class="at-pop__inner">
            <div class="adpop-top">
                <label class="at-pop__close at-btnclose"><i class="fa fa-close" style="font-size:20px;"></i></label>
                <h2 style="margin: 0px;">Download Your file</h2>
            </div>
            <div class="download-pop">
                <a class="button" href="https://drive.google.com/file/d/1KjJTnv2_N9yVdYLJ3Hp1pVzK7Agfdvr6/view?usp=sharing" id="at-downloadx">Download File</a>
            </div>
            <div class="adpop-content">
                <div class="adhtml">
                    <ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxxxxxxxx" data-ad-format="auto" data-ad-slot="8671274899" data-full-width-responsive="true" style="display: block;"></ins>
                    <script>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>
            </div>
        </div>
</div>

الخطوة 7) الآن انقر فوق حفظ 

تعديل المقال