پاپ آپ دعوت به امضای فراخوان آزادی رهبران سبز

همانطور که می دانید کمپین اعتراض سبز با انتشار بیانیه ای خواستار آزادی رهبران سبز شده است ، این فراخوان تا تاریخ دهم سپتامبر ۲۰۱۱ برای کسب امضای علاقمندان در دسترس عموم خواهد بود، می توانید متن این خبر را از اینجا بخوانید.
با این اوصاف ، تصمیم گرفتم ترفندی را آمورش دهم که به وسیله آن شما می توانید از همه خوانندگان وبلاگ خود درخواست کنید تا این فراخوان را امضا کنند. برای این کار شما باید مراحل زیر را به دقت انجام دهید:
 
توجه: این آموزش برای سرویس بلاگ اسپات طراحی شده است ، برای استفاده از این ترفند در سرویس بلاگفا ، به پایین صفحه مراجعه کنید.
یک: از قسمت "طرح" وارد بخش "ویرایش HTML" وبلاگ خود شوید
دو: از قالب خود پشتیبان بگیرید
سه: تیک گزینه "گسترش الگوهای عناصر صفحه" را قرار دهید
چهار: در قالب وبلاگ خود کد زیر را پیدا کنید: (با استفاده از Ctrl+F)
]]></b:skin>


پنج: کدهای زیر را قبل از کد بالا قرار دهید:
#popupContactClose{
cursor: pointer;
text-decoration:none;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:484px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:center;
font-family: Arial, times, tahoma, sans-serif !important;
color:#2b8f29;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}

.petbackground {
font-family:tahoma,arial,times;
color:#ffffff;
}

.gleaders {
text-align:center;
height: 220px;
width: 300px;
font-family: Tahoma, Verdana, Arial, sans-serif !important;
padding: 35px 15px 0px;
color:#ffffff;
font-size:14px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: #b4e391; /* Old browsers */
background: -moz-linear-gradient(top, #b4e391 0%, #61c419 50%, #b4e391 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4e391), color-stop(50%,#61c419), color-stop(100%,#b4e391)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#b4e391',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%); /* W3C */
}

.gleaders2 {
text-align:center;
height: 30px;
width: 300px;
font-family: Tahoma, Verdana, Arial, sans-serif !important;
padding: 5px 15px 0px;
color:#ffffff;
font-size:14px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: #b4e391; /* Old browsers */
background: -moz-linear-gradient(top, #b4e391 0%, #61c419 50%, #b4e391 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4e391), color-stop(50%,#61c419), color-stop(100%,#b4e391)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#b4e391',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%); /* W3C */
}

شش: کدهای مرحله بعد را بالای کد زیر قرار دهید:
</body>

کدهای اصلی این مرحله:
<div id='popupContact'>
         <a id='popupContactClose'>x</a>
<h1>نامه در خواست برای آزادی موسوی&#1548; کروبی و همسرانشان را امضا کنید </h1>    
         <p id='contactArea'>
<div class='petbackground'>
<center>
<div class='gleaders'>کمپین اعتراض سبز در راستای دفاع از خواست عمومی مردم ایران پیرامون آزادی یاران همیشگی جنبش سبز و با همکاری جمعی از هموطنان در مرداد ماه ۱۳۹۰ اقدام به راه اندازی کارزاری برای شکست حصر غیر قانونی اقایان میر حسین موسوی و مهدی کروبی و خانم ها زهرا رهنورد و فاطمه کروبی نموده است. این فراخوان تا تاریخ دهم سپتامبر ۲۰۱۱ برای کسب امضای علاقمندان در دسترس عموم خواهد بود.
<br>شما نیز می توانید با امضای خود گامی مثبت در جهت شکست حصر رهبران جنبش سبز بردارید</br>

</div>
<br/>
<div class='gleaders2'>
<b>برای امضای این فراخوان <a href='http://www.gopetition.com/petitions/%D9%86%D8%A7%D9%85%D9%87-%D8%A7%DB%8C-%D8%B3%D8%B1%DA%AF%D8%B4%D8%A7%D8%AF%D9%87-%D8%AF%D8%B1-%D8%AE%D9%88%D8%A7%D8%B3%D8%AA-%D8%A8%D8%B1%D8%A7%DB%8C.html ' title='here'><span>اینجا</span></a> کلیک کنید</b>
<br><p align='left'><small><a href='http://sabzintan.blogspot.com/2011/08/blog-post_20.html' title='grab this widget'><span>دریافت این قابلیت</span></a></small></p></br>

</div>
</center>
</div>
         </p>
     </div>
     <div id='backgroundPopup'/>

هفت: کدهای زیر را در یک گجت HTML/JavaScript قرار دهید :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script> 
<script src="http://dinhquanghuy.110mb.com/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
         var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
    centerPopup();
    //loads popup only if it is disabled
    if(popupStatus==0){
        $("#backgroundPopup").css({
            "opacity": "0.7"
        });
        $("#backgroundPopup").fadeIn("slow");
        $("#popupContact").fadeIn("slow");
        popupStatus = 1;
    }
}

//disabling popup with jQuery magic!
function disablePopup(){
    //disables popup only if it is enabled
    if(popupStatus==1){
        $("#backgroundPopup").fadeOut("slow");
        $("#popupContact").fadeOut("slow");
        popupStatus = 0;
    }
}

//centering popup
function centerPopup(){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var windowscrolltop = document.documentElement.scrollTop;
    var windowscrollleft = document.documentElement.scrollLeft;
    var popupHeight = $("#popupContact").height();
    var popupWidth = $("#popupContact").width();
    var toppos = windowHeight/2-popupHeight/2+windowscrolltop;
    var leftpos = windowWidth/2-popupWidth/2+windowscrollleft;
    //centering
    $("#popupContact").css({
        "position": "absolute",
        "top": toppos,
        "left": leftpos
    });
    //only need force for IE6
  
    $("#backgroundPopup").css({
        "height": windowHeight
    });
  
}


//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
    if ($.cookie("anewsletter") != 1) {  
      
        //load popup
        setTimeout("loadPopup()",5000);  
    }      
    //CLOSING POPUP
    //Click the x event!
    $("#popupContactClose").click(function(){
        disablePopup();
        $.cookie("anewsletter", "1", { expires: 7 });
    });
    //Click out event!
    $("#backgroundPopup").click(function(){
        disablePopup();
        $.cookie("anewsletter", "1", { expires: 7 });
    });
    //Press Escape event!
    $(document).keypress(function(e){
        if(e.keyCode==27 && popupStatus==1){
            disablePopup();
            $.cookie("anewsletter", "1", { expires: 7 });
        }
    });

});
</script>

مراحل افزودن این ترفند به پایان رسید ، برای مشاهده نمونه این روش می توانید به این لینک مراجعه کنید

آموزش این ترفند برای استفاده در سرویس بلاگفا:
برای این منظور درمرحله پنج ، کدهای مربوطه را قبل از کد زیر قرار دهید:
</style>

همچنین در مرحله هفت ، کدهای مربوطه را در مکانی مناسب در وبلاگ خود قرار دهید (این کدها در وبلاگ نمایش داده نمی شوند اما شما می توانید از آنها همچون کدهای جاوا اسکریپت در وبلاگ خود استفاده کنید)

0 نظر

» لطفا در نظرات خود از الفاظ رکیک استفاده نکنید
» لطفا نظرات خود را به زبان فارسی تایپ کنید