اضافة صندوق منبثق للاشتراك بمدونتك

بسم الله الرحمان الرحيم

ام يعد متتبعي ومتتبعات مدونة حاسوبي Astuce

في درس جديد من دروس واضافات بلوجر

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

معاينة
تركيب الكود
قم بالتوجه الى لوحة التحكم في مدونتك ثم الى القالب ثم تحرير

ابحث عن الوسم التالي

</body>

ثم قم بلصق كود الاضافة فوقه مباشرة

<style type="text/css">
* html #exestylepopupdiv {position:absolute;}
#exestylepopupdiv {z-index: 999999;display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK4vH2EuHRAaXmAhPjmqal2izpzHl49_2SxGnmrtFiTqDrw93qphQ9Rp6AG9Um3-jtImCAxaJrny9elcMwlexTJdCXhuNoEAW9VtvZRDjRPD7ZYyQhrUTuQqC0qRX9bKtd6h-8jdwj-w/s128/exeideasopacity0.5.png');margin:0; overflow-y:auto;}
#exestylepopup {background-color: #fff; overflow:none;}
.exestylepopup {width:310px; height:325px; position:fixed; top:50%; left:50%; margin-top:-150px; margin-left:-200px;border:3px solid}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
<div id="exestylepopupdiv">
<div id="exestylepopup" class="exestylepopup">
<center style="color:#000;cursor:pointer;float:right;margin-right:-20px;margin-top:-20px;" onmouseup="document.getElementById('exestylepopupdiv').style.display='none'">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRwZyOsx9SCL2nGihdXlrLi5NNxEsnw4QsTIIVuCgZHBVmiWQ1Efc0cfRa0caaZaxxTj25-OX-gpk9zeoXF-_YKUAuOPVUEaDm2nwILra7hNw7wedo9_3MQc7G0OXO6YOBtki4f7-zrw/s40/exeideasclose.png"/>
</center>
<div id="exestylepopup" class="exestylepopup">
<center style="color:#000;cursor:pointer;float:right;margin-right:-20px;margin-top:-20px;" onmouseup="document.getElementById('exestylepopupdiv').style.display='none'">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRwZyOsx9SCL2nGihdXlrLi5NNxEsnw4QsTIIVuCgZHBVmiWQ1Efc0cfRa0caaZaxxTj25-OX-gpk9zeoXF-_YKUAuOPVUEaDm2nwILra7hNw7wedo9_3MQc7G0OXO6YOBtki4f7-zrw/s40/exeideasclose.png" />
</center>
<center>
<div class="vidvid" id='hassoubi-emailsubsocial'>
<div class='heading'>
القائمة البريدية

            </div>
<h4>
سجل الان وتوصل بجديد مدونتنا</h4>
<div class='emailsub'>
<form action='https://feedburner.google.com/fb/a/mailverify?uri=blogspot/dNQSIL' method='post' target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=blogspot/dNQSIL', 'popupwindow', scrollbars=yes,width=550,height=520');return true">
<input type='text' name='name' placeholder='ضع اسمك ...' />

            <input type='text' name='email' placeholder='ضع اميلك ...' />

            <input type="hidden" value="حاسوبي Astuce" name="uri"/>

            <input type="hidden" name="loc" value="en_US"/>

                        <input value="تسجيل الان" class="button" type="submit" />

<h6>
Widget by <a href="http://astuce-hassoubi.blogspot.com/">حاسوبي Asctue</a></h6>
</form>
</div>
</div>
<style type='text/css'>

     #hassoubi-emailsubsocial {

      width: 300px;

      height: 300px;

        

     }

     #hassoubi-emailsubsocial .heading {

padding: 15px 25px;

line-height: 35px;

font-size: 26px;

color: Green;

text-align: center;

text-shadow: 0px 1px rgba(255, 255, 255, 0.75);

background: none repeat scroll 0% 0% rgb(247, 247, 247);

     }

   #hassoubi-emailsubsocial p {

    font-size: 13px;

    color: black;

    line-height: 25px;

    padding: 10px 20px 0 20px;

    margin: 0;

   }

   #hassoubi-emailsubsocial .emailsub {

    padding: 0px 20px 10px 20px;

   }

   #hassoubi-emailsubsocial .emailsub input {

    color: black;

    padding: 10px;

    margin-top: 10px;

    font-size: 15px;

    width: 92%;

    border: 1px solid #ccc;

    border-bottom: 2px solid #ccc;

    border-radius: 5px;

    transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

   }

   #hassoubi-emailsubsocial .emailsub input:focus {

    border-color:#F4836A;

    outline: none;

    box-shadow: 0 0 2px 1px #F4836A;

   }

   #hassoubi-emailsubsocial .emailsub .button {

    background: #fff;

    color: black!important;

    border:none;

    outline: none;

    transition:background .5s linear;

    width: 90%;
 border-style: solid;
 
    border-width: 1px;
 
 border-color: red;
 
    margin-right: 5%;
 
    margin-left: 5%;
 
    cursor:pointer;

   }

   #hassoubi-emailsubsocial .emailsub .button:hover{
    color: #fff!important;
    background: black;
   }


     </style>
  </center>
</div>
</div>
</div>

تحديد الكل

لاتنسى تغيير هذا الجزء الملون بالاحمر الى كود رابط الخلاصة الخاصة بك في مرتين

https://feedburner.google.com/fb/a/mailverify?uri=blogspot/dNQSIL  كما يمكنك التحكم في ظهور الاضافة  مثلا اذا كنت تريد ان تظهر الاضافة فقط  على الصفحة الرئيسية للمدونة اضف الكود التالي في اول الاضافة <b:if cond='data:blog.url == data:blog.homepageUrl'> وهذا في الاخر  </b:if>  ام لاظهارها على صفحة مححدة اضف هذا الكود في الاول

<b:if cond='data:blog.url == " أدخل رابط الصفحة المحددة "'>

غير رابط صفحتك وهذا في الاخر  </b:if> 

• غرّد
• شارك
• شارك
• شارك
• شارك