Cara Membuat Tombol Pop UP

Ardi21_ansyah

Blogger, Tips N' Trick Blogger

Jumat, 13 Februari 2015

Belum ada komentar

Mungkin kalian sering bertanya bagaimana cara membuat tombol pop up

yang ketika kita klik gambar atau tombol download seperti di blog ini muncul pop up.

Pada kesempatan kali ini saya akan memberikan Tips N' Trick Cara Membuat Tombol Pop UP

cara kerja pop upnya seperti ini:

ketika kalian meng klik gambar dibawah ini

nanti akan muncul penampakan seperti gambar dibawah ini

atau kalian dapa mengubahnya sengan hal lain.

Jika kalian tertarik untuk mencobanya silahkan iktu tips dibawah ini:

First, kalian kopikan CSS dibawah ini diatas ]]></b:skin> atau </style>

/* CSS POP UP by BLOGGER ANDROID 21™

------------------------------------------------------------ */

#backgroundPopup { z-index:1; position:fixed; display:none; height:100%; width:100%; background:#000000; top:0; left:0; }

#toPopup { font-family:" lucida grande" ,tahoma,verdana,arial,sans-serif; background:none repeat scroll 0 0 #FFFFFF; border:10px solid #2aa3f3; 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(" ../img/loading.gif" ) 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6kY5FJJxgviJqfIcMqELXx_2dRdYRmyHa7OCUtePumV2f64i7PmBqXsw6GTyYOu7lIXgPtI0Q767mAyEl3PoMll2KnakFVpJyOT242GXBdTlY8CSeG5xDdzKFKpXfDSWJsU0Gy_PHIPch/s1600/x-mark-4-512.png" ) 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; }

Second, Kopikan Kode HTML ini pada link yang ingin kalian pasangi Pop UP

<center>

<a class='topopup' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhswNOW7W6PDXK5DB3yiubvG4mZ44FFHRHBjD50QivdERpflO0qyzwLOW_3d1cZOUwRQovCIFd_USaEJb2fmW52fyg7wHqi1Q2yJOzVkA_QLpaaQTfuIX3QZTrupdtNjiEGVuce3Bh5QS4/s230/download2.gif' title='Download Game Eroge FUll Version'/></a>

</center>

<div id='toPopup'>

<div class='close'></div>

<span class='ecs_tooltip'>Press Esc to close <span class='arrow'></span></span>

<div id='popup_content'>

<p><center><a href='http://filannime.blogspot.com' title='Film Anime 21™'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsK6dFivy_hO_PqbS27BB6fEAmJ-syfC5c4E2PFuU8jD_taFvnGI6uZciZwNHpMocgCnpHLMWqCJFGMDoJ50_G-5AKjQPbSuNPGi7fhniF8TEcSIRMNtkurUvydXF257bttRhEl9YXnYPN/s1600/Banner+Film+Anime+21%E2%84%A2.gif'/></a></center></p>

<p align='center'><a class='livebox' href='URL_DL' title='Download Game Eroge FUll Version'>Download Game Eroge FUll Version</a></p>

</div>

</div>

<div class='loader'></div>

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

Merah: URL Gambar untuk memunculkan Pop UP,

kalian bisa mengubahnya dengan Tulisan atau Tombol

Orange: Judul Link

Kuning: Yang warna kuning bisa kalian ganti dengan Iklan

Hijau: Yang Hijau bisa kalian ganti dengan Link Downloadnya

Biru: Tulisan Untuk Downloadan

Last, kalian kopikan Script JS ini di atas kode </head>

<script src='https://googledrive.com/host/0B5JXgBc-xBGTZzF0ZVJSTUVBekU/POP UP by Blogger Android 21™.js' type='text/javascript'></script>