M-S Blog: Javascript

Showing posts with label Javascript. Show all posts

Cara Membuat Jam, Hari dan Tanggal dengan Javascript di Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha4qUpV3EM_AXmQibmohC4lJL07Hg2PHXJrrSMBmC06okjXruyWhVTvle3Zil7xitL58N-2PAFTI2ea2UvO7xqDEVD23C4aK7ENtzeE6ogv4tPFyzVzUJ5g7n8OEbI7Tc86IagMnzkcYeb/s1600/images+(2).jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Jam, Hari dan Tanggal dengan Javascript di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha4qUpV3EM_AXmQibmohC4lJL07Hg2PHXJrrSMBmC06okjXruyWhVTvle3Zil7xitL58N-2PAFTI2ea2UvO7xqDEVD23C4aK7ENtzeE6ogv4tPFyzVzUJ5g7n8OEbI7Tc86IagMnzkcYeb/s1600/images+(2).jpg" title="Cara Membuat Jam, Hari dan Tanggal dengan Javascript di Blog" /></a></div>
 
Cara Membuat/Menampilkan Jam, Hari & Tanggal dengan Javascript - Jam, Hari dan Tanggal (Waktu) tidak lepas dari kehidupan, Pada kesempatan kali ini saya ingin berbagi pengetahuan tentang "Bagaimana Cara Membuat/Menampilkan Jam dan Tanggal dan Hari dengan JavasScript" .. 
 
CEKIDOT...... 
<div style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">
 
Berikut Pilihan Javascript untuk Menampilkan Jam / Tanggal / Hari , sesuai dengan kebutuhan sobat : </div>
<h2 style="border-top-color: rgb(51, 51, 51); border-top-style: dashed; border-top-width: 1px; color: #222222; font-family: Coda, cursive; font-size: 20px; line-height: 1.2em; margin: 0em 0px 0px; padding-top: 10px;">
Cara Menampilkan Tanggal dengan Javascript :</h2>
<blockquote style="background-color: #f0f0f0; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(51, 51, 51); border-style: solid; border-width: 1px 1px 1px 4px; color: #111111; font-family: Coda, cursive; font-size: 17px; line-height: 23.09375px; margin: 10px 0px; padding: 10px 50px; position: relative;">
<pre style="white-space: pre-wrap; width: 645px; word-wrap: break-word;"><code class="xml" style="color: black; display: block; font-family: Coda, cursive; padding: 0.5em;">
<script type='text/javascript'>

</script></code></pre>
</blockquote>
<center style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">
Hasilnya :  
<div style="background-color: #fbfbfb; border: 5px solid rgb(255, 255, 255); box-shadow: rgb(204, 204, 204) 1px 1px 5px; font-weight: bold; padding: 5px; width: 525px;">
<script type="text/javascript">

</script></div>
</center>
 
<h2 style="border-top-color: rgb(51, 51, 51); border-top-style: dashed; border-top-width: 1px; color: #222222; font-family: Coda, cursive; font-size: 20px; line-height: 1.2em; margin: 0em 0px 0px; padding-top: 10px;">
Cara Menampilkan Hari dan Tanggal dengan Javascript :</h2>
<blockquote style="background-color: #f0f0f0; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(51, 51, 51); border-style: solid; border-width: 1px 1px 1px 4px; color: #111111; font-family: Coda, cursive; font-size: 17px; line-height: 23.09375px; margin: 10px 0px; padding: 10px 50px; position: relative;">
<pre style="white-space: pre-wrap; width: 645px; word-wrap: break-word;"><code class="xml" style="color: black; display: block; font-family: Coda, cursive; padding: 0.5em;"><script type='text/javascript'>

</script></code></pre>
</blockquote>
<center style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">
Hasilnya :  
<div style="background-color: #fbfbfb; border: 5px solid rgb(255, 255, 255); box-shadow: rgb(204, 204, 204) 1px 1px 5px; font-weight: bold; padding: 5px; width: 525px;">
<script type="text/javascript">

</script></div>
</center>
 
<h2 style="background-color: #fbfbfb; border-top-color: rgb(51, 51, 51); border-top-style: dashed; border-top-width: 1px; color: #222222; font-family: Coda, cursive; font-size: 20px; line-height: 1.2em; margin: 0em 0px 0px; padding-top: 10px;">
Cara Menampilkan Jam saat ini! dengan Javascript ( Pasif ) :</h2>
<blockquote style="background-color: #f0f0f0; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(51, 51, 51); border-style: solid; border-width: 1px 1px 1px 4px; color: #111111; font-family: Coda, cursive; font-size: 17px; line-height: 23.09375px; margin: 10px 0px; padding: 10px 50px; position: relative;">
<pre style="white-space: pre-wrap; width: 645px; word-wrap: break-word;"><code class="xml" style="color: black; display: block; font-family: Coda, cursive; padding: 0.5em;"><script type="text/javascript">

</script></code></pre>
</blockquote>
<center style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">
Hasilnya :  
<div style="background-color: #fbfbfb; border: 5px solid rgb(255, 255, 255); box-shadow: rgb(204, 204, 204) 1px 1px 5px; font-weight: bold; padding: 5px; width: 525px;">
<script type="text/javascript">

</script></div>
</center>
 Dengan Format AM/PM :  
<blockquote style="background-color: #f0f0f0; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(51, 51, 51); border-style: solid; border-width: 1px 1px 1px 4px; color: #111111; font-family: Coda, cursive; font-size: 17px; line-height: 23.09375px; margin: 10px 0px; padding: 10px 50px; position: relative;">
<pre style="white-space: pre-wrap; width: 645px; word-wrap: break-word;"><code class="xml" style="color: black; display: block; font-family: Coda, cursive; padding: 0.5em;">
<script type="text/javascript">
<!--
var a_p = "";
var d = new Date();
var curr_hour = d.getHours();
if (curr_hour < 12) {
 a_p = "AM";
} else {
 a_p = "PM";
}
if (curr_hour == 0) {
 curr_hour = 12;
}
if (curr_hour > 12) {
 curr_hour = curr_hour - 12;
}

function checkTime(i) {
 if (i < 10) {
 i = "0" + i;
 }
 return i;
}
setInterval(showTime, 500);
//-->
</script></div>
</div>
</center>
 
Silahkan berikan komentar jika ada pertanyaan :)</div>

Cara Membuat Jam, Hari dan Tanggal dengan Javascript di Blog

Cara Membuat/Menampilkan Jam, Hari & Tanggal dengan Javascript - Jam, Hari dan Tanggal (Waktu) tidak lepas dari kehidupan, Pada kes...

07:08 +

Cara membuat polling atau voting dengan PHP

<div dir="ltr" style="text-align: left;" trbidi="on"><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6oa2M9cdY-h6mXrCQUnYO5a4KFkFvE6_Yvw7qup04OE94h4SOZa5Ra4EOuNDKHE6qggv0Qlcgt9tIzdrv0OBBFwL-KBRkX0s88Q6P0tqy2mVtEeh3uiLJRXFEN9l9ohMFZtwAwEATdcM/s1600/voting.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Membuat Voting atau Polling dengan PHP" border="0" height="286" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6oa2M9cdY-h6mXrCQUnYO5a4KFkFvE6_Yvw7qup04OE94h4SOZa5Ra4EOuNDKHE6qggv0Qlcgt9tIzdrv0OBBFwL-KBRkX0s88Q6P0tqy2mVtEeh3uiLJRXFEN9l9ohMFZtwAwEATdcM/s1600/voting.png" title="voting" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Membuat Voting atau Polling dengan PHP</td></tr>
</tbody></table> 
 
Kali ini saya bahas tentang Membuat Voting dengan PHP, voting biasanya digunakan oleh admin web dengan menyodorkan sebuah pertanyaan dengan beberapa sebuah pilihan kemudian pengunjung web disuruh memilih mana yang terbaik menurutnya. 
 
 
 
Okee Simak Baik-baik..... 
 
 
 
<div id="tabmenu"><ul id="nar"><li><a class="active" href="#"">Database</a></li>
<li><a href="#">Style.css</a></li>
<li><a href="#">Index.php</a></li>
<li><a href="#">voting.php</a></li>
<li><a href="#">View-voting.php</a></li>
<li><a href="#">koneksi.php</a></li>
</ul><div id="tab-konten"><div id="tab1">Buatlah database dengan nama voting, berikut struktur databasenya: 
 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6CDJPf1IfAjZz0nrVWj3YQ70bdiP3ZQV5Vzck4Q1bk7_3MQFpOvUhlwooDxrAgQy3Phc0BgoVqQxx7mn_Q_ed_C5Rk3BLTpz9kJKRhE3ZbE2Jfto63XDU3fcDdjoHqXhJolKwA0KtbwE/s1600/db.png" /></div><div id="tab2"> 
 
 
 
body { 
 
 margin:0; 
 
 background-color:#fff; 
 
 
 
} 
 
 
 
#sidebar{ 
 
 background-color:#f3f1e7; 
 
 margin-left:30%; 
 
 margin-right:30%; 
 
 margin-top:5%; 
 
 border-radius:5px; 
 
 box-shadow:5px 0px 5px #999; 
 
 border-color:#C4E0AF; 
 
 border-style:solid; 
 
 border-width:thin; 
 
} 
 
 
 
 #sidebar .body { 
 
 margin: 20px 5px 20px 5px; 
 
 } 
 
 
 
 #sidebar .judul { 
 
 margin:-13px auto 0; 
 
 width:98%; 
 
 height:35px; 
 
 background-color:#96b74b; 
 
 background-repeat:repeat-x; 
 
 border-radius:5px; 
 
 } 
 
 
 
 #sidebar .judul h4{ 
 
 color:#ffffff; 
 
 text-shadow:0px 0px 5px #666666; 
 
 padding-left:10px; 
 
 padding-top:5px; 
 
 } 
 
 
 
 #sidebar li{ 
 
 list-style-type:none; 
 
 display:block; 
 
 padding-top:8px; 
 
 padding-bottom:8px; 
 
 margin-left:-40px; 
 
 border-bottom:1px solid; 
 
 border-color:#C4E0AF; 
 
 
 
 } 
 
 
 
 #sidebar li a{ 
 
 color:#2e776a; 
 
 text-decoration:none; 
 
 padding-left:5px; 
 
 } 
 
 
 
 #sidebar li:hover{ 
 
 color:#ffffff; 
 
 background-color:#b2df8e; 
 
 padding-left:-80px; 
 
 } 
 
 </div><div id="tab3"><?php 
 
include "koneksi.php"; 
 
?> 
 
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/> 
 
<title>Demo Voting - Masholeh</title> 
 
<link href="style.css" rel="stylesheet" type="text/css" /> 
 
<script type="text/javascript"> 
 
function voting(){ 
 
 
 
 alert('Terima Kasih Anda telah mengikuti Voting'); 
 
 return false; 
 
 
 
} 
 
</script> 
 
 
 
</head> 
 
 
 
<body> 
 
<div id="isi"> 
 
 
 
<div id="sidebar"><div class="judul"><h4>Tentukan Pilihan Anda</h4></div> 
 
<div class="body"> 
 
 Apakah Tutorial WWW.BLOG.MASHOLEH.WEB.ID Bermanfaat Bagi Anda? 
 
 <form method="post" action="voting.php"> 
 
 
 
 <table> 
 
 <tr><td width="20"><input type="Radio" name="polling" value="sangat" checked></td> 
 
 <td>Sangat Bermanfaat</td></tr> 
 
 <tr><td width="20"><input type="Radio" name="polling" value="bermanfaat"></td> 
 
 <td>Bermanfaat</td></tr> 
 
 <tr><td width="20"><input type="Radio" name="polling" value="biasa"></td> 
 
 <td>Biasa Saja</td></tr> 
 
 <tr><td width="20"><input type="Radio" name="polling" value="tidak"></td> 
 
 <td>Tidak Bermanfaat</td></tr> 
 
 <tr><td width="20"><input type="Radio" name="polling" value="sangattidak"></td> 
 
 <td>Sangat Tidak Bermanfaat</td></tr> 
 
 <tr><td width="20"></td><td><input type="submit" name="polling2" value="Vote" onClick="voting();"></tr> 
 
 </table> 
 
 
 
 </form> 
 
 
 
</div> 
 
</div> 
 
 
 
 
 
</div> 
 
</body> 
 
</html></div><div id="tab4"><? 
 
if (isset($_POST['polling'])) 
 
{ 
 
 include "koneksi.php"; 
 
 $pilihan=$_POST['polling']; 
 
 $tanggal; 
 
 
 
 $polling=mysql_db_query($db,"select * from voting",$koneksi); 
 
 $baris=mysql_fetch_row($polling); 
 
 list($sangat,$bermanfaat,$biasa,$tidak,$sangattidak)=$baris; 
 
 
 
 $array1=$sangat+1; 
 
 $array2=$bermanfaat+1; 
 
 $array3=$biasa+1; 
 
 $array4=$tidak+1; 
 
 $array5=$sangattidak+1; 
 
 
 
 
 
 switch($pilihan) 
 
 { 
 
 case "sangat"; 
 
 echo " "; 
 
 $update=mysql_db_query($db,"update voting set sangat='$array1', tanggal='$tanggal'",$koneksi); 
 
 echo "<script> document.location.href='view-voting.php'; </script>"; 
 
 break; 
 
 
 
 case "bermanfaat"; 
 
 echo " "; 
 
 $update=mysql_db_query($db,"update voting set bermanfaat='$array2', tanggal='$tanggal'",$koneksi); 
 
 echo "<script> document.location.href='view-voting.php'; </script>"; 
 
 break; 
 
 
 
 case "biasa"; 
 
 echo " "; 
 
 $update=mysql_db_query($db,"update voting set biasa='$array3', tanggal='$tanggal'",$koneksi); 
 
 echo "<script> document.location.href='view-voting.php'; </script>"; 
 
 break; 
 
 
 
 case "tidak"; 
 
 echo " "; 
 
 $update=mysql_db_query($db,"update voting set tidak='$array4', tanggal='$tanggal'",$koneksi); 
 
 echo "<script> document.location.href='view-voting.php'; </script>"; 
 
 break; 
 
 
 
 case "sangattidak"; 
 
 echo " "; 
 
 $update=mysql_db_query($db,"update voting set sangattidak='$array5', tanggal='$tanggal'",$koneksi); 
 
 echo "<script> document.location.href='view-voting.php'; </script>"; 
 
 break; 
 
 
 
 } 
 
 
 
}</div><div id="tab5"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/> 
 
<title>Demo Voting - Masholeh</title> 
 
<link href="style.css" rel="stylesheet" type="text/css" /> 
 
</head> 
 
 
 
<body> 
 
 
 
<? 
 
 include "inc/koneksi.php"; 
 
 $hasil=mysql_db_query($db,"select * from voting",$koneksi); 
 
 $row=mysql_fetch_row($hasil); 
 
 list($sangat,$bermanfaat,$biasa,$tidak,$sangattidak,$megah,$masih)=$row; 
 
 $total=(int)$sangat+(int)$bermanfaat+(int)$biasa+(int)$tidak+(int)$sangattidak; 
 
 
 
 //menampilkan persentase 
 
 $persen_sangat =round(((int)$sangat/(int)$total)*100,2); 
 
 $persen_bermanfaat =round(((int)$bermanfaat/(int)$total)*100,2); 
 
 $persen_biasa =round(((int)$biasa/(int)$total)*100,2); 
 
 $persen_tidak =round(((int)$tidak/(int)$total)*100,2); 
 
 $persen_sangattidak =round(((int)$sangattidak/(int)$total)*100,2); 
 
 $persen_megah =round(((int)$megah/(int)$total)*100,2); 
 
 $persen_masih =round(((int)$masih/(int)$total)*100,2); 
 
 
 
 //mengkonversi persentasi menjadi ukuran pada diagram batang dengan mengalikan faktor 2, karena jika 100% artinya lebar maksimum digram adalah 100pt 
 
 $lebar_sangat=$persen_sangat*2; 
 
 $lebar_bermanfaat=$persen_bermanfaat*2; 
 
 $lebar_biasa=$persen_biasa*2; 
 
 $lebar_tidak=$persen_tidak*2; 
 
 $lebar_sangattidak=$persen_sangattidak*2; 
 
 
 
 
 
?> 
 
 
 
<div id="sidebar"><div class="judul"><h4>Hasil Voting</h4></div> 
 
 
 
<center>Apakah Tutorial WWW.BLOG.MASHOLEH.WEB.ID Bermanfaat Bagi Anda?</center> 
 
<table width="100%" border="0" cellspacing="2" cellpadding="2"> 
 
<tr> 
 
 <td><table border="0" width="100%"> 
 
    
 
      <tr> 
 
        <td width="30%" align="left">Sangat Bermanfaat</td> 
 
        <td width="5%" align="right"><? echo $sangat;?></td> 
 
        <td width="1%">&nbsp;</td> 
 
        <td width="20%" align="left"><img src="images/stat.jpg" border="1" width="<? echo $lebar_sangat ?>" height="12"> 
 
 <? echo $persen_sangat."%"; ?></td> 
 
      </tr> 
 
      <tr> 
 
        <td align="left">Bermanfaat</td> 
 
        <td align="right"><? echo $bermanfaat;?></td> 
 
        <td>&nbsp;</td> 
 
        <td align="left"><img src="images/stat.jpg" border="1" width="<? echo $lebar_bermanfaat ?>" height="12"> 
 
 <? echo $persen_bermanfaat."%";?> </td> 
 
      </tr> 
 
      <tr> 
 
        <td align="left">Biasa Saja</td> 
 
        <td align="right"><? echo $biasa;?></td> 
 
        <td>&nbsp;</td> 
 
        <td align="left"><img src="images/stat.jpg" border="1" width="<? echo $lebar_biasa ?>" height="12"> 
 
 <? echo $persen_biasa."%";?></td> 
 
      </tr> 
 
  <tr> 
 
        <td align="left">Tidak Bermanfaat</td> 
 
        <td align="right"><? echo $tidak;?></td> 
 
        <td>&nbsp;</td> 
 
        <td align="left"><img src="images/stat.jpg" border="1" width="<? echo $lebar_tidak ?>" height="12"> 
 
 <? echo $persen_tidak."%"; ?></td> 
 
      </tr> 
 
      <tr> 
 
        <td align="left">Sangat Tidak Bermanfaat</td> 
 
        <td align="right"><? echo $sangattidak;?></td> 
 
        <td>&nbsp;</td> 
 
        <td align="left"><img src="images/stat.jpg" border="1" width="<? echo $lebar_sangattidak ?>" height="12"> 
 
 <? echo $persen_sangattidak."%";?> </td> 
 
      </tr> 
 
    </table> 
 
 </td> 
 
</tr> 
 
<tr> 
 
 <td align="center"><? echo 'Total Voting : ',$total; ?></td> 
 
</tr> 
 
</table> 
 
 
 
<a href="index.php">Back To Home</a> 
 
</div> 
 
 
 
 
</div><div id="tab6"><?php 
 
ini_set('display_errors',FALSE); 
 
 $server="localhost"; 
 
 $user_db="root"; 
 
 $pass_db=""; 
 
 $db="voting"; 
 
 
 
$koneksi=mysql_connect($server,$user_db,$pass_db) or die("Gagal Koneksi DB!"); 
 
mysql_select_db($db) or die ("DB tidak ada!"); 
 
$tanggal=date("Y-m-d"); 
 
 
 
?></div></div></div><div style="text-align: center;">Sekian dari saya, banyak lebihnya Terimakasih !!! 
 
 
</div><div style="text-align: center;"><a class="kr_button rounded" href="http://www.masholeh.web.id/blog/demo/voting" target="_blank"> Demo </a><a class="kr_button rounded" href="http://www.masholeh.web.id/blog/download/voting.zip" target="_blank"> Download</a></div></div>

Membuat Voting atau Polling dengan PHP Kali ini saya bahas tentang Membuat Voting dengan PHP, voting biasanya digunakan oleh admin web ...

06:05 +

Cara membuat dan mendesain progress bar sendiri dengan CSS

<div dir="ltr" style="text-align: left;" trbidi="on">
 
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbycWttad63chJLujRQh_UiPox6zIoastQQij9JCZLRpdikLacMtsXtBB4nXCbeeXZGb_ngluWeXO7RaPl5SMj2TydKYsXxgGfr_-i2UwUEV_3Gc98bCBeW1AopPrJUMKD6j8IIzZwBhM/s1600/5387e_21-35-gorgeous-progress-bars.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Cara membuat dan mendesain progress bar sendiri dengan CSS" border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbycWttad63chJLujRQh_UiPox6zIoastQQij9JCZLRpdikLacMtsXtBB4nXCbeeXZGb_ngluWeXO7RaPl5SMj2TydKYsXxgGfr_-i2UwUEV_3Gc98bCBeW1AopPrJUMKD6j8IIzZwBhM/s1600/5387e_21-35-gorgeous-progress-bars.png" title="progress bar " width="320" /></a></div>
 
Wah gak terasa udah tahun 2015 dan baru update ne gara-gara di kul 
banyak tugas, (curhat dulu, hehhee). Setelah tugas dan UAS selesai admin
 duduk-duduk dan minum secangkir kopi sambil muter otak kira-kira mau 
update apa ya, emm, dan ahirnya saya tetapkan untuk buat tutorial desain
 progress. Untuk hal ini anda wajib ne mengenal siapa tu mbah jquery 
(library javascript),hahaha bagi yang belum sapa dulu, kenalan gitu sama
 mbah jquery. dan tentunya Css juga harus wajib mengerti, setidaknya 
basicnya.

Lanjut ke tutorial ya, siapkan editor kesayangan anda, apakah wajib? ya 
donk, lah kalau egak mau pake apa? maksudnya kesayangan? ya kalau gak 
sayang gak mood ngerjainnya nanti. 
Setelah itu buat halaman utamanya, masukkan kode HTML di bawah ini, dan 
jangan lupa library javascriptnya itu di atur dimana anda menaruhkan 
library.

<div id="kotakKode">
index.php
<div>
<pre class="prettyprint lang-html linenums prettyprinted"><ol class="linenums">
<li class="L0"><!DOCTYPE HTML></li>
<li class="L1"><head></li>
<li class="L2"> <meta http-equiv="content-type" content="text/html" /></li>
<li class="L3"> <meta name="author" content="mmlpro" /></li>
<li class="L4"> </li>
<li class="L5"> <script type="text/javascript" src="jquery-1.10.2.js"></script></li>
<li class="L6"> </li>
<li class="L7"> <title>desain progress</title></li>
<li class="L8"></head></li>
<li class="L9"> </li>
<li class="L0"><body></li>
<li class="L1"> </li>
<li class="L2"><h1>design progress by:mmlpro</h1></li>
<li class="L3"> </li>
<li class="L4"><div id="konten"></li>
<li class="L5"> <button value="25">25%</button></li>
<li class="L6"> <button value="50">50%</button></li>
<li class="L7"> <button value="75">75%</button></li>
<li class="L8"> <button value="100">100%</button></li>
<li class="L9"> <a class="run">Run</a></li>
<li class="L0"> </li>
<li class="L1"> <div id="progress">0%</div></li>
<li class="L2"></div></li>
<li class="L3"> </li>
<li class="L4"></body></li>
<li class="L5"></html></li>
</ol>
</pre>
</div>
</div>
Udah? cepet banget, padahal aku nulisnya aja lumayan beberapa menit. hehehe 
Sekarang cssnya silahkan dicopy. Simpan dengan nama style.css dan 
panggil css dengan cara external, taruh di dalam element head. Manggil 
cssnya seperti ini. 
<link href="style.css" rel="stylesheet"/>

<div id="kotakKode">
style.css
<div>
<pre class="prettyprint lang-css linenums prettyprinted"><ol class="linenums">
<li class="L0">body{margin:0;padding:0;background:#eeeeee;font-family: 'lucida grande',sans,verdana,arial,sans-serif;font-size:14px;color:#555555;}</li>
<li class="L1">h1{</li>
<li class="L2"> font-weight: normal;</li>
<li class="L3"> text-align: center;</li>
<li class="L4"> position: relative;</li>
<li class="L5">}</li>
<li class="L6">h1 sub{</li>
<li class="L7"> font-size: 12px;</li>
<li class="L8"> position: absolute;</li>
<li class="L9"> bottom:3px;</li>
<li class="L0">}</li>
<li class="L1">#konten{</li>
<li class="L2"> background-color: #ffffff;</li>
<li class="L3"> padding:10px 5px;</li>
<li class="L4"> width:400px;</li>
<li class="L5"> margin: 0 auto;</li>
<li class="L6">}</li>
<li class="L7">a{</li>
<li class="L8"> border:1px solid #bbb;</li>
<li class="L9"> background-color: #eeeeee;</li>
<li class="L0"> cursor: pointer;</li>
<li class="L1"> padding:0px 5px;</li>
<li class="L2"> position: relative;</li>
<li class="L3">}</li>
<li class="L4">a:after{</li>
<li class="L5"> content:"";</li>
<li class="L6"> position: absolute;</li>
<li class="L7"> top:0px;</li>
<li class="L8"> bottom:0px;</li>
<li class="L9"> right:-10px;</li>
<li class="L0"> border-left:10px #eeeeee solid;</li>
<li class="L1"> border-top:7px solid transparent;</li>
<li class="L2"> border-bottom:7px solid transparent;</li>
<li class="L3">}</li>
<li class="L4">a:before{</li>
<li class="L5"> content:"";</li>
<li class="L6"> position: absolute;</li>
<li class="L7"> top:-1px;</li>
<li class="L8"> bottom:-1px;</li>
<li class="L9"> right:-11px;</li>
<li class="L0"> border-left:11px #bbb solid;</li>
<li class="L1"> border-top:7px solid transparent;</li>
<li class="L2"> border-bottom:7px solid transparent;</li>
<li class="L3">}</li>
<li class="L4">button{</li>
<li class="L5"> border:1px solid #ccc;</li>
<li class="L6"> background-color: #eeeeee;</li>
<li class="L7"> cursor: pointer;</li>
<li class="L8">}</li>
<li class="L9">#progress{</li>
<li class="L0"> background-color: #f5f5f5;</li>
<li class="L1"> border:1px solid #ccc;</li>
<li class="L2"> margin: 10px 0px;</li>
<li class="L3"> border-radius: 7px;</li>
<li class="L4"> -webkit-border-radius: 7px;</li>
<li class="L5"> -moz-border-radius: 7px;</li>
<li class="L6"> border-radius: 7px;</li>
<li class="L7">}</li>
<li class="L8">#progress p{</li>
<li class="L9"> text-align: center;</li>
<li class="L0"> font-weight: bold;</li>
<li class="L1"> margin:0;</li>
<li class="L2"> padding:3px 0px;</li>
<li class="L3"> width:0;</li>
<li class="L4"> max-width: 100%;</li>
<li class="L5"> -webkit-border-radius: 7px;</li>
<li class="L6"> -moz-border-radius: 7px;</li>
<li class="L7"> border-radius: 7px;</li>
<li class="L8">}</li>
<li class="L9">.bgColor1{</li>
<li class="L0"> background-color: #DF8E84;</li>
<li class="L1"> color:#ffffff;</li>
<li class="L2">}.bgColor2{</li>
<li class="L3"> background-color: #C6DF84;</li>
<li class="L4"> color:#222;</li>
<li class="L5">}.bgColor3{</li>
<li class="L6"> background-color: #7ED777;</li>
<li class="L7"> color:#ffffff;</li>
<li class="L8">}</li>
</ol>
</pre>
</div>
</div>
Tambahkan script jquerynya seperti ini, taruh di file utama dan didalam element head seperti saat manggil css tadi.

<div id="kotakKode">

<div>
<pre class="prettyprint lang-javascript linenums prettyprinted"><ol class="linenums">
<li class="L0"> <script type="text/javascript"></li>
<li class="L1"> $(function(){</li>
<li class="L2"> var progress=$("#progress");</li>
<li class="L3"> var kontentProgress=$("#progress p");</li>
<li class="L4"> var button=$("button");</li>
<li class="L5"> var runaway=$(".run");</li>
<li class="L6"> var timer=null;</li>
<li class="L7"> </li>
<li class="L8"> //jalankan otomatis</li>
<li class="L9"> runaway.click(function(){</li>
<li class="L0"> var i;</li>
<li class="L1"> i=0;</li>
<li class="L2"> function tambahProgress(){</li>
<li class="L3"> i++;</li>
<li class="L4"> kontentProgress.css({"width":i+"%"}).text(i+"%");</li>
<li class="L5"> bgcolor(i);</li>
<li class="L6"> timer=setTimeout(tambahProgress, 50);</li>
<li class="L7"> if(i==100){</li>
<li class="L8"> clearTimeout(timer);</li>
<li class="L9"> kontentProgress.text("Loading selesai");</li>
<li class="L0"> }</li>
<li class="L1"> }</li>
<li class="L2"> timer=setTimeout(tambahProgress, 50);</li>
<li class="L3"> });</li>
<li class="L4"> </li>
<li class="L5"> //jika button diklik</li>
<li class="L6"> button.click(function(){</li>
<li class="L7"> clearTimeout(timer);</li>
<li class="L8"> var nilaiPersen=$(this).val();</li>
<li class="L9"> kontentProgress.css({"width":nilaiPersen+"%"}).text(nilaiPersen+"%");</li>
<li class="L0"> bgcolor(nilaiPersen);</li>
<li class="L1"> });</li>
<li class="L2"> </li>
<li class="L3"> </li>
<li class="L4"> //pengaturan bacground dan warna</li>
<li class="L5"> function bgcolor(nilai){</li>
<li class="L6"> if(nilai<35){</li>
<li class="L7"> kontentProgress.removeClass();</li>
<li class="L8"> kontentProgress.addClass("bgColor1");</li>
<li class="L9"> }else if(nilai>35 && nilai<60){</li>
<li class="L0"> kontentProgress.removeClass();</li>
<li class="L1"> kontentProgress.addClass("bgColor2");</li>
<li class="L2"> }else if(nilai>60 && nilai<=100){</li>
<li class="L3"> kontentProgress.removeClass();</li>
<li class="L4"> kontentProgress.addClass("bgColor3");</li>
<li class="L5"> }</li>
<li class="L6"> }</li>
<li class="L7"> });</li>
<li class="L8"> </li>
<li class="L9"> </script></li>
</ol>
</pre>
</div>
</div>
Nah coba di jalankan file uatamanya dengan browser kesayangan anda. 
Kalau aku sih pas buatnya makek google chrome (udah kebiasaan pakai 
google chrome) 
Gimana? Jalan atau tidak? jika ada yang eror bisa di tanyakan kok. iya, silahkan saja.

Keterangan :

Disini saya membuatnya untuk simulasi saja. Silahkan atur sendiri dari 
mana progress ini mendapatkan nilai, entah dengan cara eksekusi waktu 
ataupun dengan mendeteksi saat eksekusi file. Kalau di tutorial ini saya
 mengatur nilai progress dari value button dan juga dari looping di 
setTimout. 
Untuk bagian mendapatkan nilai dengan cara klik button, nilai persen di 
ambil dari value button yang di klik. Coba anda lihat discript jquery 
bagian button click. terdapat deklarasi variable seperti ini. 
var nilaiPersen=$(this).val();
 
Itu untuk mendapatkan nilai(value) dari button yang di klik. Nah untuk 
memasukkan nilai persen ke progressnya dan juga nilai panjangnya 
progress berjalan saya gunakan ini.
 
kontentProgress.css({"width":nilaiPersen+"%"}).text(nilaiPersen+"%");
 
Maksud dari script code di atas adalah mengatur panjang element p yang berada di dalam selector #progress menggunakan properti css width, dan megatur text di dalam element p.
 
Anda melihat ini? bgcolor(nilaiPersen);, itu saya gunakan untuk mengeksekusi Function bgcolor
 dan mengirimkan nilainya. Function ini saya gunakan untuk mengatur 
warna background dan text dan didalamnya terdapat if else statement yang
 akan menerima nilai progress dan mengubah warna progress setiap nilai 
yang sudah di tentukan di if else. Pengambilan/pengaturan warna dari 
progress saya gunakan teknik addClass dan removeClass yang nantinya akan
 menambah class keelement dan menghapus class dielement.

Di element run jika diklik progressnya akan berjalan sendiri saya 
gunakan setTimeout. Untuk memasukkan nilai ke progress tekniknya sama 
seperti tadi, cuma bedanya disini mendapatkan nilainya dari looping dan 
nantinya akan menghentikan setTimeout bila variable i sudah mencapai nilai 100 dengan tekik if statement condisi itu.
 
clearTimeout(timer); 
code inilah yang untuk menghentikan setTimeoutnya. Perhatikan deklarasi 
var yang di buat diatas sendiri, semua berhubungan dengan setTimoutnya 
kan maka clear timoutnya ditujukan ke timer.
 
Untuk perubahan warna sama seperti button klik tadi, memanggil function bgcolor(i); dan mengirimkan nilainya dari looping.

Yah, segitu aja yang diterangkan, jika ada yang kurang jelas bisa 
ditanyakan. Lewat facebook atau kontak lainnya. Terimakasih sudah 
berkunjung. 
 
<a href="https://app.box.com/s/lpd8bej8gij78956qscnyakj9c404zt6">DOWNLOAD </a> 
 
 
re-post from http://mmlpro.com/23/-membuat-dan-mendesain-progress-bar-sendiri.html 
</div>

Cara membuat dan mendesain progress bar sendiri dengan CSS

Wah gak terasa udah tahun 2015 dan baru update ne gara-gara di kul banyak tugas, (curhat dulu, hehhee). Setelah tugas dan UAS se...

05:40 +

Cara Membuat Read More Otomatis

<div dir="ltr" style="text-align: left;" trbidi="on">
M-S Blog || Cara Membuat Read More Otomatis, Sebernarnya sudah banyak blogger yang mempostingkan tips ini, saya menulis artikel ini juga supaya saya tidak lupa cara membuat Read More, 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI19KfgnjHFpitO0RowwjrCOtrWszAcGmFJnqS6z8oToUY5ZDfOu8x_eEhuag5Yd2ir0rzqiFpB-lazYKG4XzHYc3O4UyeJWxDgYCRYh3L9xJWq7k6jfLjFBoAOAfcIfXJG1cXwH6wyBM/s1600/images.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Read More Otomatis" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI19KfgnjHFpitO0RowwjrCOtrWszAcGmFJnqS6z8oToUY5ZDfOu8x_eEhuag5Yd2ir0rzqiFpB-lazYKG4XzHYc3O4UyeJWxDgYCRYh3L9xJWq7k6jfLjFBoAOAfcIfXJG1cXwH6wyBM/s1600/images.jpg" title="Cara Membuat Read More Otomatis" /></a></div>
 
 
Langsung saja berikut langkah-langkahnya : 
1.Masuk ke blog dan pilih template >> Edit HTML. 
2.Centang kotak Expand Widgets Template. 
3.Cari kode </head>, agar lebih cepat tekan ctrl+f pada keyborad dan tulis </head>. 
4.Tempatkan kode di bawah ini di atas kode </head>. 
<pre style="background-color: white; font-size: 15px; line-height: 21px;"><code class="xml" style="background-color: #292e34; border-left-color: rgb(188, 185, 167); border-left-style: solid; border-left-width: 4px; color: #bfbf90; display: block; font-family: Coda; font-size: 13px; letter-spacing: 0.2px; line-height: 18px; margin: 0.5em 0px; max-height: 250px; overflow: auto; padding: 0.8em; text-shadow: none;"><script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 290; summary_img = 260; img_thumb_height = 76; img_thumb_width = 86; </script> <script src='http://autoinvitemazwaone.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/></code></pre>
5.Cari kode <data:post.body/> dan ganti dengan kode dibawah ini : 
<pre style="background-color: white; font-size: 15px; line-height: 21px;"><code class="xml" style="background-color: #292e34; border-left-color: rgb(188, 185, 167); border-left-style: solid; border-left-width: 4px; color: #bfbf90; display: block; font-family: Coda; font-size: 13px; letter-spacing: 0.2px; line-height: 18px; margin: 0.5em 0px; max-height: 250px; overflow: auto; padding: 0.8em; text-shadow: none;"><b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script><span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;Read More...</a></span>
</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></code></pre>
<div style="background-color: white; line-height: 21px; margin: 0px; padding: 0px;">
<div style="font-family: Coda; font-size: 15px; margin: 0px; padding: 0px;">
Keterangan :</div>
<div style="font-family: Coda; font-size: 15px; margin: 0px; padding: 0px;">
<blockquote class="tr_bq" style="background-color: #333333; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(238, 238, 238); color: white; font-family: 'Courier New', Courier, monospace; font-size: 0.923077em; margin: 6px 0px; max-height: 200px; overflow: auto; padding: 0.5em 0.5em 0.5em 1em; text-shadow: none; white-space: nowrap; word-wrap: break-word;">
Read More : bisa diganti sesuai selera 
summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar, bisa diganti sesuai selera 
summary_img = 340; adalah tinggi potongan artikel dengan gambar, bisa diganti sesuai selera 
img_thumb_height = 100; adalah ukuran tinggi thumbnail, bisa diganti sesuai selera 
img_thumb_width = 120; adalah ukuran lebar thumbnail, bisa diganti sesuai selera</blockquote>
</div>
<div style="font-family: Coda; font-size: 15px; margin: 0px; padding: 0px;">
6. Save template dan lihat hasilnya</div>
<div style="margin: 0px; padding: 0px; text-align: center;">
Selamat mencoba ^_^ semoga brehasil</div>
</div>
</div>

M-S Blog || Cara Membuat Read More Otomatis , Sebernarnya sudah banyak blogger yang mempostingkan tips ini, saya menulis artikel ini jug...

19:01 +

Cara Menambahkan "EMOTICON" Pada Postingan dengan javascript

<div dir="ltr" style="text-align: left;" trbidi="on">
M-S Blog || Cara Menambahkan "EMOTICON" Pada Postingan dengan javascript, Pasang "Emoticon" di komentar blog mungkin itu sudah biasa, Tapi bagaimana jika "Emoticon" itu ditambahkan pada postingan?? mungkin akan terlihat lebih keren...?  
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj__nZBleJfQrrYKGqno8P00ANib9bopPv1tLPMqDqwzQ3k4TPppgWYq5RyUS6-ZgqxN1MvFW7r_4jOJNt33FxKKb_fpUZDGwZly2HUyqA1tCn9ubMnOtaTId8s07f0qo4RnitJqQ5FFKg/s1600/emotiondalampostingan.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Menambahkan "EMOTICON" Pada Postingan dengan javascript" border="0" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj__nZBleJfQrrYKGqno8P00ANib9bopPv1tLPMqDqwzQ3k4TPppgWYq5RyUS6-ZgqxN1MvFW7r_4jOJNt33FxKKb_fpUZDGwZly2HUyqA1tCn9ubMnOtaTId8s07f0qo4RnitJqQ5FFKg/s400/emotiondalampostingan.png" title="Cara Menambahkan "EMOTICON" Pada Postingan dengan javascript" width="400" /></a></div>
 
 Kebanyakan orang ingin menulis postingan yang disertakan dengan ekspresi - ekspresi. Nah sekarang anda bisa menambahkan "Emoticon" itu hanya dengan kode script. 
 
<center style="background-color: white; font-family: Coda; font-size: 15px; line-height: 21px;">
<a class="tombol" href="http://rawamangun18.blogspot.com/2012/03/emoticon-post-blogger.html" style="-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 1px; -webkit-transition: background-color 1s ease-out 0s; background-color: #248ab0; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(102, 102, 102); box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 1px; color: #3b5998; cursor: pointer; font-family: Arial, sans-serif; font-size: 11px; font-weight: bold; line-height: normal; margin: 0px 0.2em; padding: 6px 14px; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.298039) 0px -1px 0px; text-transform: uppercase; transition: background-color 1s ease-out 0s; white-space: nowrap;">DEMO</a></center>
 
<copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*hehe</copas> <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*sweet</copas> <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*gakmau</copas> <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*ingusan</copas> <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*hai</copas> <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">*ketawa</copas> <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*omg</copas>  <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*no</copas> <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*panas</copas> <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*woe</copas> 
 
<copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*berguling</copas> <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*XD</copas> <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*hipnotis</copas>  <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*bye</copas> <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*sedih</copas> 
 
Hilangkan tanda "*"  
Bukan hanya "Emoticon" tersebut anda juga bisa menambahkan "Emoticon" seperti <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">:D</copas>  <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">:)</copas> dan masih banyak lagi. 
 
Cukup dengan menambahkan kode script dibawah ini diatas kode <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;"></head></copas> 
<pre style="background-color: white; font-size: 15px; line-height: 21px;"><code class="xml" style="background-color: #292e34; border-left-color: rgb(188, 185, 167); border-left-style: solid; border-left-width: 4px; color: #bfbf90; display: block; font-family: Coda; font-size: 13px; letter-spacing: 0.2px; line-height: 18px; margin: 0.5em 0px; max-height: 250px; overflow: auto; padding: 0.8em; text-shadow: none;"><script src='https://first-secondary.googlecode.com/svn/trunk/Emoticondalampostingan.js' type='text/javascript'/></code></pre>
Cara menggunakannya gunakan Editor mode "EDIT HTML" bukan "Compose". 
Tambahan : Jika anda kurang suka dengan gambar emoticon-nya anda bisa menggantinya. 
 
1. Silahkan kunjungi <a href="http://emoticoner.com/" style="background-color: white; color: #3b5998; font-family: Coda; font-size: 15px; line-height: 21px; text-decoration: none;">http://emoticoner.com/</a> dan silhakan pilih emoticon yang anda suka. 
2. Silahkan anda download file.js dibawah kemudian edit dengan notepad dan ganti url gambar pada kode tersebut dengan url gambar emoticon yang anda pilih. 
 
<center style="background-color: white; font-family: Coda; font-size: 15px; line-height: 21px;">
<a class="tombol" href="http://sites.google.com/site/zyztem33/js/emoticon.js" style="-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 1px; -webkit-transition: background-color 1s ease-out 0s; background-color: #248ab0; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(102, 102, 102); box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 1px; color: #3b5998; cursor: pointer; font-family: Arial, sans-serif; font-size: 11px; font-weight: bold; line-height: normal; margin: 0px 0.2em; padding: 6px 14px; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.298039) 0px -1px 0px; text-transform: uppercase; transition: background-color 1s ease-out 0s; white-space: nowrap;">DOWNLOAD</a></center>
 
3. Jika sudah save file tersebut dengan extensi "js" seperti file.js, kemudian anda upload di google.code atau tempat hosting lainnya. 
4. Tambahkan kode diatas kode <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;"></head></copas> 
<pre style="background-color: white; font-size: 15px; line-height: 21px;"><code class="xml" style="background-color: #292e34; border-left-color: rgb(188, 185, 167); border-left-style: solid; border-left-width: 4px; color: #bfbf90; display: block; font-family: Coda; font-size: 13px; letter-spacing: 0.2px; line-height: 18px; margin: 0.5em 0px; max-height: 250px; overflow: auto; padding: 0.8em; text-shadow: none;"><script src='https://first-secondary.googlecode.com/svn/trunk/Emoticondalampostingan.js' type='text/javascript'/></code></pre>
text berwarna merah ganti dengan url dimana anda meng-upload file.js yang telah anda edit tadi. </div>

M-S Blog || Cara Menambahkan "EMOTICON" Pada Postingan dengan javascript , Pasang " Emoticon " di komentar blog mungk...

03:05 +

M-S Blog

M-S Blog

M-S Blog

Cara Membuat Jam, Hari dan Tanggal dengan Javascript di Blog

Cara membuat polling atau voting dengan PHP

Cara membuat dan mendesain progress bar sendiri dengan CSS

Cara Membuat Read More Otomatis

Cara Menambahkan "EMOTICON" Pada Postingan dengan javascript

Popular Posts

Blog Archive