Cara Membuat Tombol Download efek Popup

Ok sobat pada kesempatan ini anisuka.com akan membagikan tentang cara membuat tombol download dengan efek popup. Nah sebenarnya ini juga adalah tentang cara membuat efek popup di blogspot yang digabungkan dengan tombol download. Nah dibawah ini adalah screenshotnya:

Popup berikut ini bukan popup yang muncul secara otomatis tapi adalah popup yang muncul jika diperintah. Jadi cara kerjanya begini, jika tombol download ini ditekan maka akan muncul popup yang telah diisi dengan misal iklan anda. Anda juga dapat mengganti isinya dengan widget anda. Misalnya widget fanspage facebook atau widget google plus.

Nah agar lebih jelasnya lagi silahkan lihat demonya dibawah ini, oh iya tekan tombol demonya nanti akan keluar popup:

DEMO : https://goo.gl/DleQZt

Membuat Efek Popup Pada Tombol Download

Letakan Css/HTML/Script dibawah ini dibawah kode <data:post.body/> ( jika ada lebih dari satu <data:post.body/> silahkan dicoba satu-persatu, biasanaya di kode <data:post.body/> yang kedua ). Berikut ini adalah kodenya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#backgroundPopup { z-index:1; position:fixed; display:none; height:100%; width:100%; background:#000000; top:0; left:0; }
#toPopup { font-family:&quot; lucida grande&quot; ,tahoma,verdana,arial,sans-serif; background:none repeat scroll 0 0 #FFFFFF; border:10px solid #ccc; border-radius:3px 3px 3px 3px; color:#333333; display:none; font-size:14px; left:50%; margin-left:-402px; position:fixed; top:20%; width:650px; z-index:2; }
div.loader { background:url(&quot; ../img/loading.gif&quot; ) no-repeat scroll 0 0 transparent; height:32px; width:32px; display:none; z-index:9999; top:40%; left:50%; position:absolute; margin-left:-10px; }
div.close { background:url(&quot; ../img/closebox.png&quot; ) no-repeat scroll 0 0 transparent; bottom:24px; cursor:pointer; float:right; height:30px; left:27px; position:relative; width:30px; }
span.ecs_tooltip { background:none repeat scroll 0 0 #000000; border-radius:2px 2px 2px 2px; color:#FFFFFF; display:none; font-size:11px; height:16px; opacity:0.7; padding:4px 3px 2px 5px; position:absolute; right:-62px; text-align:center; top:-51px; width:93px; }
span.arrow { border-left:5px solid transparent; border-right:5px solid transparent; border-top:7px solid #000000; display:block; height:1px; left:40px; position:relative; top:3px; width:1px; }
div#popup_content { margin:4px 7px; }
</style>
<script src='https://popupanisuka.googlecode.com/svn/anisukapopup' type='text/javascript'/>
<script src='https://anisukaokbanget.googlecode.com/svn/popupwidget.js' type='text/javascript'/>
<center>
<a class='topopup' href='#'><img src='https://2.bp.blogspot.com/-Nn8vYiDrSsY/U8ThMLJEiqI/AAAAAAAAAZ0/hhoSSnV2SsI/s230/download2.gif'/></a> </center>
 
    <div id='toPopup'>
            <div class='close'/>
        <span class='ecs_tooltip'>Press Esc to close <span class='arrow'/></span>
<div id='popup_content'> <!--your content start-->
            <p>
LETAKAN SCRIPT MISALNYA IKLAN ANDA DISINI
<div style='margin-left:0px;text-align:center;font-size:5px'>
    Widget by : <a class='widgetku' href='https://www.anisuka.com' id='widgetku' target='blank'>anisuka</a>
</div>  
 </p>    
            <p align='center'><a class='livebox' expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></p>           </div> <!--your content end-->
    </div> <!--toPopup end-->
    <div class="loader"></div>
       <div id="backgroundPopup"></div>
 </b:if>

Ganti tulisan berwarna merah diatas dengan iklan anda atau apasaja yang ingin anda letakan disitu. Oklah kawan sekian untuk tutorial kali ini semoga trik Cara Membuat Tombol Download efek Popup bermanfat untuk anda. sekian.

Diposkan oleh

Brando Mewo

You Might Also Like: