◄ Min  Size Fonts: + | - | ± Color: Max ►

The Interest Javascript Collected

mistonline.inKemarin sudah berbagi blogger dengan postingan edan eling. Sekarang merambah sharing web dengan article sarap punya. Adapun kategori yang diceritakan pada web tersebut meliputi: Ajax, Apache, Css, htaccess, Html, JavaScripts, Mysql, perl, and PHP.
Silahkan dipilih category diatas jika memang mencari hal yg ada sangkut pautnya dengan 'ntuh :) Kalau Beben Koben si Bloglang anu ganteng kalem tea baca yg ngertinya saja sob :D Abisnya tidak mengerti semuanya ;)) Coba tengok sama agan sekalian kategori Javascript di web tersebut! Nama webnya...eit nanti dulu atuh ah, kepengen buru-buru saja :-" Contoh artikel maknyus mengenai "Visitor counter using cookies and javascript"

Biasanya para blogger menggunakan jasa online counter guna mendapatkan fitur berapa kali artikel pada satu blog/web dibaca. Dengan javascript ternyata bisa juga, dan enaknya lagi bisa direset juga cookiesnya :D Struktur javascript create cookies like this

<script type='text/javascript'>
//<![CDATA[

function GetCookie(name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg) return getCookieVal(j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}

function SetCookie(name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape(value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : "");
}

function DeleteCookie(name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = GetCookie(name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
var expDays = 30;
var exp = new Date();
exp.setTime(exp.getTime() + (expDays * 24 * 60 * 60 * 1000));

function amt() {
var count = GetCookie('count')
if (count == null) {
SetCookie('count', '1')
return 1
} else {
var newcount = parseInt(count) + 1;
DeleteCookie('count')
SetCookie('count', newcount, exp)
return count
}
}

function getCookieVal(offset) {
var endstr = document.cookie.indexOf(";", offset);
if (endstr == -1) endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
//]]>
</script>
Letakin script diatas tag </head> Script pemanggil (warna biru) dibawah ini disimpan dalam tag body template sobat.
<script type='text/javascript'>
<!-- Begin
document.write("Halaman ini sudah dibaca <b>" + amt() + " kali.")
// End -->
</script>

<a href="#" onclick="DeleteCookie('count')" value="Reset Cookies">Reset Cookies</a>

Kode warna merah buat ngereset. Kalo bisa jangan dipasang atau sembunyikan saja penempatannya supaya gak direset-reset :P Satu artikel maknyus punya sudah Koben sharing. Mau lagi!!!
Bagi sobat yang background blognya default (tanpa warna = putih) script simple ini mungkin bisa menambah gaya dalam menggantikan warna latar belakang blog kalian.
<script language="javascript">
function chngebg (id)
{
switch (id)
{
case 'b1':
document.body.bgColor = "red";
break;

case 'b2':
document.body.bgColor = "yellow";
break;

case 'b3':
document.body.bgColor = "green";
break;

case 'b4':
document.body.bgColor = "blue";
break;
}
}
</script>
<input type="button" id="b1" onclick="chngebg(this.id)" value="1"/>
<input type="button" id="b2" onclick="chngebg(this.id)" value="2"/>
<input type="button" id="b3" onclick="chngebg(this.id)" value="3"/>
<input type="button" id="b4" onclick="chngebg(this.id)" value="4"/>
Masukin bumbu dengan tehnik Add a Gadget ► HTML/Javascript :D Ganti dah warna dengan selera masing² Atribut value bisa diganti dengan judul bebas. Kalau masih mau disini juga ada change background color for blogger ;)

Rotate message with JavaScript

Klik buat mengambil link demo!

Ramuan masukin dengan cara Add a Gadget ► HTML/Javascript
<form name="slideshow"><div align="center"><center><b>Update</b><br /><textarea rows="1" name="S1" cols="50" wrap="virtual" readonly style="border-style:solid;border-color:red green blue black;border-width:3px"></textarea><br /><input type="button" value="GoTo That Link" name="B1" onClick="window.location=messagelinks[curmsg]"/></center></div></form>

<script type="text/javascript">
//<![CDATA[
var curmsg=-1
var messages=new Array()
messages[0]="Script keren-keren punya, yang hanya ada disini!"
messages[1]="Template pilihan edan eling, sampe capek ngubek2nya!"
messages[2]="Trik dan tips seleksi high class dan full stylish!"
//add more messages as desired

var messagelinks=new Array()
messagelinks[0]="http://beben-koben.blogspot.com/search/label/Javascript"
messagelinks[1]="http://beben-koben.blogspot.com/search/label/Template"
messagelinks[2]="http://beben-koben.blogspot.com/search/label/Trik%20dan%20Tips"
//add more links as indicated by the number of messages

function slidemessage(){
if (curmsg<messages .length-1)
curmsg++
else
curmsg=0
document.slideshow[0].value=messages[curmsg]
setTimeout("slidemessage()",3000)
}
slidemessage()
//]]>
</script>
Tulisan berwarna silahkan ganti sesuai kebutuhan :)

Splash Page with JavaScript

Klik buat mengambil link demo!

Bumbu-bumbunya
<script type="text/javascript">
<!-- Begin
var background = "black";
var text = "white";
var URL = "http://LINK-TUJUAN-KALIAN.com";
var speed = 3000; // time in milliseconds (4000 = 4 secs)
var msgcount = 5;
var i = 1;
var blank = " ";
function StringArray (n) {
this.length = n;
for (var x = 1; x <= n; x++) {
this[x] = ' ';
}
}
message = new StringArray(msgcount);
message[1] = "YOUR MESSAGE 1 HERE!";
message[2] = "YOUR MESSAGE 2 HERE...";
message[3] = "YOUR MESSAGE 3 HERE.";
message[4] = "YOUR MESSAGE 4 HERE?";
message[5] = "YOUR MESSAGE 5 HERE!";

function SplashPage() {
SplashPagepage = '<body bgcolor='+background+'>'
+ '<center><table border=0 '
+ 'height=100%><tr><td><center><b><font '
+ 'color='+text+' size=6>'+message[i]+'</font></b>'
+ '</center></td></tr></table></center><font size=1 color="white">'
+ '<div style="position: absolute; right: 10px; bottom: 10px;" id=copy>Script From Mistonline.in</div></font></body>';

if (i == message.length + 1) parent.location = URL;

if (i < message.length + 1) {
frames['SplashPageshow'].location = "javascript:parent.SplashPagepage";
i++;
setTimeout("SplashPage()",speed);
}
}
// End -->
</script>
<iframe width="100%" height="96%" name="SplashPageshow" src="javascript:parent.blank"></iframe>
<script type="text/javascript">SplashPage();</script>
Gantilah tulisan yg diberi warna sesuai kebutuhan.

Pilihan berikutnya jatuh pada welcome message with jQuery.

Klik buat mengambil link demo!

Structure
<style>
#info{
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
position:relative;
color: #00529B;
background-color: #FBE5F8;
background-image: url('http://LINK-YOUR-IMAGE-RESOLUTION-32x32.png');
}
</style>

<!-- Dont Delete This Notice, This code is from http://mistonline.in, the one stop reference for all web developers.
Please keep this above notice for our promotion purpose.Thank you very much -->

<script type="text/javascript">
$(document).ready(function(){
$(".close").click(function(){
$("#info").animate({left:"+=10px"}).animate({left:"-5000px"});
});

$("#info").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400)
.fadeOut(400).fadeIn(400);
});
</script>

<div id="info">
<a class="close" href="#" style="float: right;"><img border="0" src="http://LINK-YOUR-IMAGE-RESOLUTION-12x12.png" alt="X" /></a>

!!! YOUR MESSAGE HERE !!!

</div>

Flip The Page Simple with jQuery

Klik buat mengambil link demo!

Bumbu-bumbune
<style>
/* flip */
img { behavior: url(iepngfix.htc) }
#flipthepage {
position: relative;
right: 0; top: 0;
float: right;
border:0px;
}
#flipthepage img {
border:0px;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;

}
#flipthepage .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://YOUR-LINK-IMAGE-SUBSCRIBES.png) no-repeat right top;
}
</style>

<div id="flipthepage">

<a href="http://feedburner.google.com/fb/a/mailverify?uri=YOUR-ACCOUNT">
<img src="http://YOUR-LINK-IMAGE-RSS.png" alt="" />
</a>
<div class="msg_block"></div>

</div>

<script type="text/javascript">
$(document).ready(function(){

//Page Flip on hover
$("#flipthepage").hover(function() {
$("#flipthepage img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#flipthepage img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
</script>
Disana ada 2 buah image, sikat terlebih dahulu imagenya Image Flip Page.
Dah ah capek, sok diacak-acak saja sumbernya ama agan MistonLine <--- lagi ultah webnyah <:-P
Happy blogging \m/
Loading...
XThe Interest Javascript Collected

Subscribe my posts Register For Free!

4 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE