Cara Membuat Pop Up Email Subscription Box Keren

• Masuk ke Blogger terus pilih Template dan klik Edit HTML. Terus cari kode </body> dan pastein kode yang gw kasi di bawah ini di atasnya gan. 

• Bisa juga dengan cara cuma nambahin widget, cari Layout terus pilih Add a Gadget lalu cari HTML/JavaScript dan pastein kodenya disana. Tapi cara ini gw coba di beberapa template gak bagus posisinya terlalu kesamping kanan gan. Loe coba aja kalo gak berhasil pastein di template aja.

<!-- This Is A Copyrighted "EXE Style POP UP" Widget, Don't Try To Theft It Otherwise... -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="https://raw.github.com/EXEIdeas/JS/master/ColorBox-v1.3.16"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1)
{
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"770px", inline:true, href:"#exestylepopups"});
}
});
</script>
<style type="text/css">
/*
ColorBox v1.3.16
(Copyright (c) 2011 Jack Moore - jack@colorpowered.com)
UpDated By www.exeideas.com
(Copyright (c) 2011 EXEIdeas International - admin@exeideas.tk)
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#cboxOverlay{background:#000;opacity:0.5 !important;}
#cboxTopCenter{height:35px;}
#cboxMiddleRight{width:0px;}
#cboxContent{overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4xYxw61YR-Fc4AQKZySAIRHAUwc-__zo7Vfh5it7lNQVXMApSNAZteVXqqQVPl1h4r9pPuaCKkmLYbds00GYrXCSEscrhO4iUHUS3RzVpLwmeUuYK4ugAymvWH8Hh-iUykPOjBj53xok/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimZGvQ2uEBDk_NIQrGD546NIDkTJxf4k45MbifcjAyth-fYnoOQruVnmbiFA4lXl5uHzC0mqME1BhqcaAW5TmH6jBaHrTO4CPg7HaVG-l0_7cBrh0tYA0A6dEMYWeGbo-w0KnQGRZVvoI/s400/loading.gif) no-repeat center center;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxClose{position:absolute; bottom:338px; right:0; cursor:pointer; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi686xamBVKe4Hm5y_ME3NQvWk356ZpQD28lBTVVMcTOUxRolGXuHV1UjtWZtsHk8lVDusQ_n-x61Gp1G3qVBZGWO_nIfTE-cPK27cRJyiOS3rjABPJkm_EI1gXw77VDSCi6kqHXR2KCg/s40/exestylepopupclosebutton.png) no-repeat; width:40px; height:40px; text-indent:-9999px;}
#cboxClose.hover{opacity:0.8 !important;}
#exestylepopup{overflow:none; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqV96yDkLrlpwumtsCHv0SGRufS4_2hstNVT_elSC1frkHhTx6Eg3aCVMhKKQvCWvEyRdFLmMR2xXLHo7kJv6UUaB416u0T5LyJRoLu6iKpOVZct5-f3NDR34s9k0UYUvse7-HubL7OQ/s748/EXEIdeasBlog.png) ; background-repeat: no-repeat; height: 350px; width: 770px; }
form#exestylepopup{display:block; margin:0;}
form#exestylepopup #exefield{padding:2px; position:absolute; top:162px; left:480px; width:238px; font-size:16px; border:none; background:transparent;}
form#exestylepopup #exebutton{position:absolute; left:474px; top:205px; width:249px; height:42px; border:none; background:transparent;}
</style>
<div style='display:none'>
<div id='exestylepopups' >
<form id="exestylepopup" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Alamat Feed', 'popupwindow', 'scrollbars=yes, width=600, height=550'); return true">
<input type="hidden" value="Alamat Feed" name="uri"/>
<input id='exefield' name='email' onblur='if (this.value == "") {this.value = "Ketik email disini...";}' onfocus='if (this.value == "Ketik email disini...") {this.value = ""}' type='text' value='Ketik email disini...'/>
<input type="hidden" name="loc" value="en_US" />
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="exebutton" />
</form>
</div>
</div>
<!-- This Is A Copyrighted "EXE Style POP UP" Widget, Don't Try To Theft It Otherwise... -->

• Sekarang tinggal ngedit aja gan. Ganti ke 2 Alamat Feed sama alamat feed blog loe. Terus buat tampilannya loe bisa download file PSDnya [ disini ] gan, nanti tinggal di edit sendiri mau kayak gimana tampilan sama kata-katanya. Ngeditnya pake photoshop atau bisa edit online di pixlr gan.

• Jangan pernah ganti ukuran tinggi sama lebar file gambarnya gan, ntar gak cocok sama kodenya. Terus kalo udah jadi gambarnya tinggal ganti aja background-image sama url gambar loe gan. Abis itu tinggal di Save beres. Sekarang loe udah punya pop up email subscription box keren di blog gan.

• Buat setting biar pop up email subscription box ini muncul sekali aja jadi kalo pengunjung buka halaman yang laen pop up box ini gak muncul. Settingan awalnya udah kayak gitu, tapi kalo loe mau ngerubah biar si pop up box selalu muncul setiap pengunjung buka halaman laen tinggal diganti aja visited true jadi false gan.

• Terus buat lamanya ( berapa hari ) biar pop up box ini muncul lagi kalo pengunjung balik lagi ke blog loe, tinggal di rubah aja angka 30 jadi angka antara 1 ampe 30 sesuai jumlah hari gan. Ini buat kalo loe set visitednya true gan.

Peringatan : Sekali lagi gw kasi tau kalo Widget ini ada hak ciptanya gan dan dilindungi sama DMCA jadi jangan coba-coba atau berani ngerubah kodenya.


Ow ya kalo loe mau pasang di Wordpress tinggal add widget aja, gw udah nyoba dan hasilnya sempurna gan. Sekian dulu yang bisa gw share tentang cara membuat pop up email subscription box keren di blog, semoga bermanfaat dan jangan lupa buat ninggalin komentar gan.

Update >>> Mohon maaf agan-agan gw gak tau kalau kode JSnya udah gak berfungsi, buat yang udah pasang tapi gak mau muncul silahkan di copy ulang kode di atas karena udah gw perbaiki. 

Kode Javascript Dan HTML Sederhana Buat Di Blog

1. Anti Klik Kanan

Kode javascript ini buat menonaktifkan klik kanan di blog kalian gan, jadi pengunjung gak bisa klik kanan dan melihat source kode blog loe. Cari kode <body> di template blog kalian lalu ganti dengan kode dibawah ini gan.

<body oncontextmenu="return false;">

2. Kotak Pesan Peringatan ( Alert Box )

Pesan Pembuka

Kode ini buat nampilin pesan saat pengunjung pertama kali membuka atau mengunjungi blog kalian gan. Cari kode </head> di template blog, lalu copy paste kode di bawah ini tepat di bawahnya gan. Tinggal di edit aja kalimat yang di highlight sesuai keinginan kalian gan.

<script type="text/javascript">
 alert("SELAMAT DATANG DI BLOG GAK JELAS INI");
</script>

Pesan Penutup

Kode ini muncul kalau pengunjung mau meninggalkan atau menutup tab blog kalian gan. Cara pasangnya sama dengan pesan pembuka, cari kode </head> lalu copy paste kode berikut di bawahnya gan. Tinggal di edit aja kalimat yang di highlight sesuai keinginan kalian gan.

<script type="text/javascript">
window.onbeforeunload=function(){
return confirm("Yakin Ingin Meninggalkan Blog Ini?? Masih Banyak Yang Menarik Loh Untuk Di Baca!!");
}
</script>

3.Onmouseover Sound

Kode ini buat memberikan backsound musik kalau pengunjung mengarahkan atau mengklik mousenya ke text atau gambar gan. Caranya tinggal copy paste kode di bawah ini ke mode HTML edit post blog kalian.

<script language="javascript" type="text/javascript">
 function playSound(soundfile) {
 document.getElementById("SCsound").innerHTML=
 "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
 }
 </script>

<span id="SCsound"></span>

Lalu copy dan paste kode di bawah ini buat ngemunculin musik/soundnya gan.

<a href="#" onmouseover="playSound('URL-FILE-MUSIK/SOUND');">
Mouseover DISINI Buat Dengerin Musik</a>

Atau 

<a href="#" onclick="playSound('URL-FILE-MUSIK/SOUND');">Klik DISINI Buat Dengerin Musik</a>

Tinggal dipilih aja mau yang onmouseover atau onclick gan. Lalu ganti URL-FILE-MUSIK/SOUND dengan Url file musik/sound kalian. Silahkan di edit sendiri kalimatnya atau bisa juga diganti sama gambar gan. Contoh kayak di bawah ini, silahkan di coba dan mungkin loadnya agak lama karena gw pake file mp3 gan.

Mouseover DISINI Buat Dengerin Musik 

Klik DISINI Buat Dengerin Musik 

4.Show Hide Konten / Spoiler

Kode untuk menampilkan atau menyembunyikan konten, mirip tombol spoiler yang ada  di forum-forum gan. Cara pasangnya gampang, loe cari kode </head> lalu copy paste kode javascript di bawah ini di atasnya gan.

<script language='javascript' type='text/javascript'>
function showHide() {     var ele = document.getElementById("showHideDiv");
 if(ele.style.display == "block") {             ele.style.display = "none";       }
else {         ele.style.display = "block";     } }
</script>

Sekarang tinggal nambahin kode di konten yang pengen di isi tombol buka tutupnya gan. Copy paste kode di bawah ini dan letakan kontenya di tempat yang udah gw kasi tanda gan.

<form action="" method="post">
<input onclick="return showHide();" type="button" value="Show-Hide" />
</form>
<div id="showHideDiv" style="display: none;">

---------> Konten Disini Gan <---------

</div>

Konten bisa apa aja bisa gambar, teks atau apapun. Buat edit tulisan di tombolnya ganti aja Show-Hide sesuai keinginan loe. Contoh seperti di bawah ini di klik aja gan.

5. Teks Berjalan / Marquee

Kode ini bisa kalian gunakan untuk menampilkan teks berjalan gan. Kodenya sangat sederhana bisa juga untuk gambar atau link gan. Tinggal copy kode di bawah ini dan pastekan di manapun kalian suka.

<marquee onmouseover="this.stop()" onmouseout="this.start()" behavior="scroll" direction="left" bgcolor="#FF0000">Teks, Link Atau Gambar Kalian Disini</marquee>

Buat ngerubah arahnya tinggal di ganti aja "left" sesuai keinginan kemana arah yang loe mau gan. Buat behavior bisa juga diganti pake alternate atau slide, untuk bgcolor silahkan ganti warnanya sesuka hati gan.

Contoh :

"scrool" direction="left"

Contoh marquee atau teks berjalan

"alternate"

Contoh marquee atau teks berjalan

"scrool" direction="left" dengan gambar

6. Downloading Progress Bar

Dengan kode ini kita bisa dengan mudah membuat bar proses download yang sederhana gan. Yang ini pake javascript kalau di klik progress barnya bergerak atau berubah otomatis gan. Tinggal copy dan paste kode di bawah ini dimana pun loe mau gan.

<script type="text/javascript">
//current progress
var currProgress = 0;
//is the task complete
var done = false;
//total progress amount
var total = 100;

//function to update progress
function startProgress() {
//get the progress element
var prBar = document.getElementById("prog");
//get the start button
var startButt = document.getElementById("startBtn");
//get the textual element
var val = document.getElementById("numValue");
//disable the button while the task is unfolding
startButt.disabled=true;
//update the progress level
prBar.value = currProgress;
//update the textual indicator
val.innerHTML = Math.round((currProgress/total)*100)+"%";
//increment the progress level each time this function executes
currProgress++;
//check whether we are done yet
if(currProgress>100) done=true;
//if not done, call this function again after a timeout
if(!done)
    setTimeout("startProgress()", 100);
//task done, enable the button and reset variables
else   
{
    document.getElementById("startBtn").disabled = false;
    done = false;
    currProgress = 0;
}
}
</script>
<progress id="prog" value="0" max="100"></progress>
<br />
<input id="startBtn" onclick="startProgress()" type="button" value="start" />
<div id="numValue">
0%</div>

Standarnya progress bar ini kodenya cuma <progress value="0" max="100"></progress> gan. Contoh seperti yang dibawah ini, silahkan di coba gan.
Sumber : http://www.developerdrive.com/2012/07/displaying-the-progress-of-tasks-with-html5/

Progress Bar 

0%

7. Textarea

Fungsi textarea ini bisa buat naruh kode di postingan gan sebagai pengganti blockquote. Cara pasangnya gampang gan tinggal copy paste kode di bawah ini dan ada tiga pilihan gan.

Biasa

<textarea rows="4" cols="50">
Teks atau Kode Disini Gan
</textarea>

Seleksi Otomatis

<textarea rows="4" cols="50" onclick="this.focus();this.select()" readonly="readonly">
Teks atau Kode Disini Gan
</textarea>

Seleksi Dengan Tombol

<form name="selectall">
<textarea name="messageBody" rows="4" cols="50">Teks atau Kode Disini Gan</textarea>
<br />
<input type="button" value="Select Text" onClick="javascript:this.form.messageBody.focus();this.form.messageBody.select();">
</form>

Tinggal di edit aja gan rows buat tinggi dan cols buat lebar. Untuk yang pake tombol kalian bisa ganti tulisan Select Text sesuai keinginan gan. Contoh ada dibawah ini gan silahkan dicoba.


Biasa 


Seleksi Otomatis 


Seleksi Dengan Tombol 

8.Link Dengan Pop Up

Yang terakhir gan, ini kode buat link kalau di klik bakal muncul pop up sesuai dengan target Urlnya. Misal digunakan untuk iklan atau link download gan. Copy paste kode javascript di bawah ini di atas kode </head> atau bisa juga paste langsung di postingan dengan linknya gan.

<script language="javascript" type="text/javascript">
function scpopup(url) {
    newwindow=window.open(url,'name','height=200,width=150');
    if (window.focus) {newwindow.focus()}
    return false;
}
</script>

Buat kode linknya seperti di bawah ini silahkan di copy paste gan.

<a href="Target URL Pop up" onclick="return scpopup('Target URL Pop up')">Contoh Link Popup</a>

Tinggal diganti aja Target URL Pop up dengan link yang kalian inginkan gan. Buat contoh klik aja link di bawah ini gan.


Contoh Link Popup 



Sekian dulu yang bisa gw share kali ini gan semoga kode javascript dan HTML sederhana ini bisa berguna buat di blog kalian. 

CARA MERAWAT KOMPUTER

Heyy Semua Saya akan memberi tahukan cara merawat komputer dengan efektif
Ada 8 langkah yang kalian harus ikuti .. :
            1. Lindungilah komputer dengan firewall. Firewall mampu membuat dinding pelindung antara komputer dan internet, firewall terbagi dalam 2 bentuk, yakni perangkat lunak firewall yang berjalan pada komputer pribadi dan perangkat keras firewall yang melindungi sejumlah komputer pada waktu yang sama. Mengapa menggunakan firewall? Ya, firewall ini berfungsi untuk menyaring file yang tidak sah atau jenis data berbahaya dari internet, jika Anda ingin memakainya, Anda dapat menemukannya di toko-toko komputer.


            2. Jauhilah komputer dari benda cair, karena benda cair ini sangat sensitif sekali terhadap komputer. Seperti minyak, air dan benda cair lainnya. Jika benda cair itu sampai menyentuh alat-alat komputer bisa terjadi konslet otomatis semua perangkat-perangkat yang ada didalam komputer tersebut akan rusak.


            3. Hindarilah komputer dari api, point ke-3 ini sudah jelas harus kita lakukan. Apalagi namanya api jika api tersebut sudah memakan barang-barang elekronika maka sisanya hanya abu buat kita.jadi mari jauhkan dari benda tersebut.


            4. Jauhkan dari benda-benda yang bersifat magnet, sebab akan merusak hardisk kita. Apalagi harga harddisk saat ini cukup mahal harganya. Lebih baik mencegah atau merawat bukan? Daripada memperbaiki.


            5. lama menggunakan komputer  Jangan terlalu sebab semakin lama kita menggunakannya, maka kinerja komputer akan semakin melemah. Dan biasakan restart komputer setelah pemakaian lebih dari 10 jam supaya program-program yang ada didalam komputer dapat bekerja normal.
  

            6. Matikanlah komputer dengan prosedur yang benar, yakni : klik Start lalu shutdown atau restart jika Anda hanya ingin me-restartnya.


            7. Gunakanlah antivirus sebagai langkah mencegah komputer dari berbagai virus yang berbahaya. Alangkah baiknya Anda menggunakan Antivirus dengan kualitas terpercaya dan berkualitas.

  
            8. Bersihkanlah file-file sampah yang terdapat pada komputer. Bagaimana cara membersihkan komputer dari file sampah? Berikut ini adalah langkahnya : Klik logo Windows --> Ketik Run di kolom pencarian --> Ketik cleanmgr lalu OK, lalu Anda tinggal pilih file yang ingin dihapus. Cara lainnya, Anda dapat menggunakan CCleaner, aplikasi pembersih file tidak terpakai yang sangat bagus.

Nah Gan segini yang bias saya bagikan kepada kalian !! ^_^
Terima kasih !!
Salam dari saya Siswa SMKN 2 GARUT