SCRIPT KHUSUS

1. 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.

2. 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.

3. 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%

4.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>

5.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

5.Cara Membuat Tombol Spoiler Pada Postingan Blog (buka-tutup)
 

<div align="left" style="margin: 5px 10px 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="color: red; margin: 0px; padding: 5px; text-align: left; width: 100%;" type="button" value="Buka" /></div>
<div class="alt2">
<div style="display: none;">
<div style="border: medium none; padding: 10px; text-align: left;">
Silahkan letakan kalimat atau HTML disini
</div>
</div>
</div>

6.Tex Box CSS Keren

1. Seperti biasa sobat login dulu ke akun blog sobat.
2. Kemudian pilih menu Template dan pilih Edit HTML
3. Centang dulu kotak kecilnya ( Expand Widget Template)
4. Cari Kode ]]></b:skin> kemudian letakan kode CSS di bawah tepat di atas kode ]]></b:skin>.

.code1 {
overflow:auto;width:503px;height:200px;
font-family: "Consolas", "Courier New", Courier, mono, serif; color:#848176;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
list-style-type : none;
background : #000000 url(http://1.bp.blogspot.com/-nic37VqULoA/UDdTubWtwcI/AAAAAAAABbs/zv-i-PbnWHQ/s1600/labstrike-1.png) repeat-y top left;
border : 1px solid #000000;
border-left:20px solid #ccc;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.code1:hover{
background : #000000 url(http://1.bp.blogspot.com/-alUx-JlZsZw/UDdT4qYXglI/AAAAAAAABb0/7ili3p2WHa4/s1600/
labstrike-2.png) repeat-y top left;
color:#FEF9BF;
border : 1px solid #000;
border-left:20px solid #ccc;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 10px 10px 5px #888888;
}

kemudian Simpan Template.

Keterangan

Untuk penulisan dalam postingan bisa sobat gunakan script text area di bawah ini

<div class="code1"> Your Code Here </div>

 

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: