Trik Komputer: The Interest Javascript Collected

Kemarin sudah berbagi 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 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.

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 ;)

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

Gantilah tulisan yg diberi warna sesuai kebutuhan.

Pilihan berikutnya jatuh pada welcome message with jQuery.

Klik buat mengambil link demo!
Structure

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 .
Dah ah capek, sok diacak-acak saja sumbernya ama agan <--- lagi ultah webnyah <:-P
Happy blogging \m/

Trik Komputer

Rabu, 20 Juli 2011

The Interest Javascript Collected

Rotate message with JavaScript

Splash Page with JavaScript

Flip The Page Simple with jQuery

Tidak ada komentar:

Posting Komentar