Informasi Tanggamus: Blogger Decoration

@keyframes, pernah lihat tulisan itu sebelumnya? Menurut saya sediri @keyframes itu didefinisikan sebagai bingkai atau tempat yang memperlihatkan beberapa gerakan atau animasi suatu objek dengan transisi yang mulus/smooth. Satu Gerakan atau Animasi itu bisa juga disebut Frame. Mungkin jika kurang atau bahkan keliru, sobat bisa menambahkannya hihi.

Yang saya bicarakan hari ini disini adalah @keyframes tentang Css3 yang sedang nge-trend saat ini. @keyframes ini musuh bebuyutannya Jquery Animation menurut saya :P haha. Banyak keluhan sebagian masyarakat tentang Jquery Animation "kalau pakai Jquery lambat gak bro?", "wah jquery, lambat gak nih sob?" dan lain lain.

Kembali ke Topic @keyframes ini. @keyframes ini hanya support pada web Browser tertentu. Ada beberapa yang tidak bisa sama sekali web browser menggunakan Css3 @keyframes ini, diantaranya Internet Explorer dan Opera. Entah kenapa Web Browser itu tidak support css3 @keyframes ini. Untuk Mozilla Firefox bisa di bantu dengan bantuan alternatif @-moz- sedangkan Safari dan Google Chrome dibantu dengan menggunakan @-webkit-.

Lihat contoh dan langsung kodenya berikut ini :

Animasi menggunakan From dan To

Code Css

div#divid{
width:50px;
height:50px;
background:black;
border:1px solid #fff;
box-shadow:0 0 3px #000;
position:relative;
animation:keyname 5s infinite;
-moz-animation:keyname 5s infinite;
-webkit-animation:keyname 5s infinite;
}

@keyframes keyname
{
from {left:0px;}
to {left:200px; background:red; width:100px;}
}

@-moz-keyframes keyname
{
from {left:0px;}
to {left:200px; background:red; width:100px;}
}

@-webkit-keyframes keyname
{
from {left:0px;}
to {left:200px; background:red; width:100px;}
}

HTML Code

<div id="divid"></div>

Preview

Animasi Menggunakan Persen [%]

div#divid{
width:50px;
height:50px;
background:black;
border:1px solid #fff;
box-shadow:0 0 3px #000;
position:relative;
animation:keyname 5s infinite;
-moz-animation:keyname 5s infinite;
-webkit-animation:keyname 5s infinite;
}

@keyframes keyname
{
0% {left:0px;}
25% {left:200px; background:#fc0;}
50% {left:50px; background:#de0101;}
75% {left:100px; background:#fff;}
100% {left:0px; background:#000;}
}

@-moz-keyframes keyname
{
0% {left:0px;}
25% {left:200px; background:#fc0;}
50% {left:50px; background:#de0101;}
75% {left:100px; background:#fff;}
100% {left:0px; background:#000;}
}

@-webkit-keyframes keyname{
0% {left:0px;}
25% {left:200px; background:#fc0;}
50% {left:50px; background:#de0101;}
75% {left:100px; background:#fff;}
100% {left:0px; background:#000;}
}

HTML Code

<div id="divid"></div>

Penjelasan

Warna Unggu adalah ID dari Animasi
Warna Biru adalah style dari Object yang diatas membentuk Kotak
Warna Oranye adalah Nama keyframe
Warna Merah adalah Properti animasi → infinite artinya Animasi berjalan berulang-ulang tak terhingga. Bisa di ganti dengan Angka saja, 10s artinya sepanjang perubahan animasi berjalan 10 Secon atau Detik.
Warna Hijau adalah kode css sebelum animasi berjalan
Warna Biru muda adalah css effect animasi
Kode Persen [%] adalah jalannya cerita Animasi
Kode Berkedip tidak harus dalam bentuk DIV bisa tag lainnya seperti Span, P, li, ul, ol dan lain lain

Preview

Bisa di terapkan di blog kira kira? hehehe @keyframes ini berfungsi banyak lho, seperti animasi munculnya sesuatu atau pop-up gitu :) tapi disini hanya menyediakan trik dasar @keyframes saja :) kurang lebihnya mohon maaf, wassalam :)

Kalian tau Hirarki Menu (Hierarchy)? Beberapa list menu yang keluar ketika satu list menu itu di Klik kalau di sebutkan seperti Folder/akar ← Pengertian simple dari Hierarchy Menu. Jadi andai kata 'kamu punya anak 4, Adi, Beni, Edo, dan Eko. Eko melahirkan 3 anak, Anita, Jupe (hahaha), dan Kristi. Kristi Punya 3 anak lagi namanya, bla, bla, dan bla. Dan seterusnya'. Seperti Folder/akar bukan?

Sepertinya cukup untuk pengertian Hierarchy Menu itu :). Bagaimana jika diteruskan dengan cara penggunaan yang simple. Bisa saja, seperti sobat mau buat Blog Archive [Dashboard → Layout → Add a Gadget → Blog Archive → Pilih Hierarchy] di blog. Tetapi kali ini berbeda seperti halnya cara tadi, sobat bisa Edit Style sendiri, Element Bebas [Elemen Bebas maksudnya adalah isi Hierarchy Menu tidak harus Blog Archive, tetapi bisa di Isikan Link atau Daftar List lain].

Sebagai Contoh sobat bisa lihat di Bawah ini :

Hide All
Show All
10 Blog Deal
Amazing Website!
- Youtube
- Javascriptkit
- Blogger
- Farixsantips :D
- Search Engines
  - Google
  - Yahoo
  - Bing

Lihat kan? Penuh Style dan Warna. Pengeditan tidak berhenti sampai situ aja sob, bisa kalian edit sendiri. Mau di terapkan contoh diatas sebagai Gadget sobat? Ikuti di bawah ini :

Buka Blogger.com beserta Email dan Passwordnya sobat masukan
Saat di Dashboard klik Layout → Add a Gadget → Javascript/HTML
Isi Kotak Kosong Javascript/HTML dengan kode Berikut :
<script src="https://sites.google.com/site/farixsantips/scripts/flipmenujavscript.js"></script>
<ul class="flipMenu">
<li><a href="javascript:closeAllFlips()">Hide All</a></li>
<li><a href="javascript:openAllFlips()">Show All</a></li>
<li>10 Blog Deal
<ul>
<li><a href="javascript:void(0)">Aku Mau Gratisan</a></li>
<li><a href="javascript:void(0)">Cek Info</a></li>
<li><a href="javascript:void(0)">HaViZ's Blog</a></li>
<li><a href="javascript:void(0)">Mbah Qopet's Blog</a></li>
<li><a href="javascript:void(0)">Musa Khairul Umam</a></li>
<li><a href="javascript:void(0)">Rama 88</a></li>
<li><a href="javascript:void(0)">Shinobi Caemk</a></li>
<li><a href="javascript:void(0)">Tangerang Blogs</a></li>
<li><a href="javascript:void(0)">Tutorial Photoshop</a></li>
<li><a href="javascript:void(0)">Zona Download Gratis</a></li>
</ul>
</li>
<li>Amazing Website!
<ul>
<li><a href="javascript:void(0)">Youtube</a></li>
<li><a href="javascript:void(0)">Javascriptkit</a></li>
<li><a href="javascript:void(0)">Blogger</a></li>
<li><a href="http://farixsantips.blogspot.com">Farixsantips :D</a></li>
<li>Search Engines
<ul>
<li><a href="javascript:void(0)">Google</a></li>
<li><a href="javascript:void(0)">Yahoo</a></li>
<li><a href="javascript:void(0)">Bing</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Kode Unggu : Kode Javascript yang wajib di letakan disitu
Kode Biru : Tombol Cepat Saji untuk membuka semua Folder/Akar
Kode Merah : Nama Category yang mengkatagorikan Kumpulan List
Kode Oranye : Nama Category yang mengkatagorikan Kumpulan List yang terletak di Kumpulan List juga (bingung ya)
Kode Hijau Terang : Kumpulan List dari Sebuah Category/Merah
Kode Hijau Gelap : Kumpulan List dari Sebuah Category yang Category-nya terletak di Kumpulan List/Hijau Terang
Oh iya kalau kode javascript:void(0) itu tolong di ganti dengan link yang di perlukan :)
Kalau Pusing mohon dilihat lagi Contoh Preview Hierarchy List Menunya di atas ↑
Setelah Itu Save dan Jadi!

Nah, bagus bukan Hierarchy List Menunya? Hehe kalau ada kesalahan dalam pengucapan mohon di maafkan dan di maklumi :) kurang lebihnya Mohon maaf :)

Seperti yang saya jelaskan ketika saya posting tentang Tooltips juga disini [baca : Bubble Tooltips]. Tooltips adalah sebuah object yang menandai object lain dengan cara mengeluarkan sebuah tulisan lain yang bisa diartikan deskripsi dari sebuah object. Ini adalah postingan kedua tentang Tooltips Jquery. Yaitu Easy Tooltips. Tooltips kali ini berbeda dengan sebelumnya yaitu mengikuti kearah cursor pindah.

Perhatikan itu, gerakan kursor di Link itu. Rasakan dan Lihatlah apa yang akan terjadi. Rupanya link mengeluarkan kata kata ajaibnya yaitu title="Ini adalah contoh Easy Tooltips Jquery" . Title sebagai deskripsi/tulisan yang keluar dari sebuah link atau object lain. Tapi bagai mana bisa mengeluarkan Deskripsi yang berbeda tampilan itu? Kuncinya ada di bawah ini :

Buka Akun blogger.com dengan password dan ID tentunya
Saat di dasboard klik Layout/Design → Edit HTML → Cari kode <head>
Letakan kode berikut tepat di bawah kode Head :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/farixsantips/scripts/vtip.js"></script>

<style type="text/css">
p#vtip { display: none; position: absolute; padding: 10px; left: 5px; font-size: 0.8em; background-color: white; border: 1px solid #a6c9e2; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 9999 }
p#vtip #vtipArrow { position: absolute; top: -10px; left: 5px }
</style>
Kata bercetak tebal adalah kode Css/tampilan Easy Tooltips ini
Berikutnya tinggal dimana sobat meletakan Object apapun dengan di tambah Class="vtip". Sebagai Contoh :
1. Link →
  <a href="http:farixsantips.blogspot.com" class="vtip" title="Berikut adalah Blog tutorial">Farixsantips</a>
  Tulisan Merah adalah Url Link, Tulisan Biru adalah Class yang harus vtip, sedangkan Tulisan Unggu adalah Deskripsi dari sebuah Object itu.
2. Gambar →
  <img src="URL_GAMBAR" class="vtip" title="Deskripsi dari sebuah gambar"/>
  Tulisan Merah adalah Url Gambar, Tulisan Biru adalah Class yang harus vtip, sedangkan Tulisan Unggu adalah Deskripsi dari sebuah Object itu.

Selesai.

Semoga Easy Tooltipsnya bisa membantu dalam perawatan blogger sobat :), kurang lebihnya mohon maaf saya akhiri dengan wassalam :)

Kembali kita berbincang mengenai Jquery. Kali ini perbincangan kita sejalur dengan Menu Navigasi Jquery. Yaitu kumpulan link yang akan di satukan dan membuatnya menjadi Menu Utama dengan berbagai Style tentunya. Kali ini menu yang saya akan tunjukan adalah menu yang Floating/melayang di bagian atas meskipun sudah di scroll kebawah keatas karna Posisinya adalah Fixed.

Pengertian lain Position:Fixed : Merupakan properti untuk memposisikan suatu blok element secara tetap di atas layar browser walaupun user melakukan scroll dokumen. Mengingat tentang Fixed [bukan Fixie, kalau Fixie mah trend Sepeda sekarang :P] sepertinya saya telah membuat artikel yang memanfaatkan kode Position:Fixed tersebut [baca : back to Top Jquery].

Kembali ke Topic perbincangan yaitu Jquery - Fixed Sliding Menu. Bingung ya maksud dari keterangan diatas ↑ ? Lihat contohnya seperti di bawah ini :

Kotak diatas adalah kotak IFRAME dari weblog : http://demo-ifnumber4-fqbis.blogspot.com/. Didalam kotak tersebut terdapat 7 Menu yang mana sobat bisa ganti sendiri Tulisan, gambar, maupun Style kotak menu tersebut. Kotak tersebut melambangkan LAYAR dari BROWSER. Bagaimana? bagus bukan? Kalau mau pasang di blog silahkkan ikuti cara di bawah ini :

1. Buka Blogger.com dengan password dan akun masing masing

2. Saat di dashboard klik Layout/Design kemudian klik Edit HTML pada Tab diatas.

3. Kemudian Cari kode <head> dengan CTRL + F

4. Kemudian letakan kode berikut tepat di bawah kode <Head> tadi :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script src='https://sites.google.com/site/farixsantips/scripts/slidemenu.js'></script>
<script type='text/javascript'>
$(function() {
var d=300;
$('#floatmenu a').each(function(){
$(this).stop().animate({
'marginTop':'-78px'
},d+=150);
});

$('#floatmenu > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-78px'
},200);
}
);
});
</script>

5. Kemudian Cari kode ]]></b:skin> dengan CTRL + F. Letakan kode berikut tepat diatasnya kode ]]></b:skin> tadi :

ul#floatmenu {
list-style:none;
margin:0;
padding:0;
position:fixed;
right:10px;
top:0;
width:721px;
z-index:999999
}
ul#floatmenu .tools a{background-image:url(http://icons.iconarchive.com/icons/apathae/wren/64/Utilities-icon.png)}
ul#floatmenu .gallery a{background-image:url(http://icons.iconarchive.com/icons/iconshock/cms/64/gallery-icon.png)}
ul#floatmenu .video a{background-image:url(http://icons.iconarchive.com/icons/babasse/old-school/64/bobines-video-icon.png)}
ul#floatmenu .rssfeed a{background-image:url(http://icons.iconarchive.com/icons/untergunter/leaf-mimes/64/app-rss-plus-xml-icon.png)}
ul#floatmenu .musics a{background-image:url(http://icons.iconarchive.com/icons/itzikgur/my-seven/64/Music-Piano-Chello-icon.png)}
ul#floatmenu .contact a{background-image:url(http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/64/Actions-contact-new-icon.png)}
ul#floatmenu .home a{background-image:url(http://icons.iconarchive.com/icons/iconshock/sigma-general/64/home-icon.png)} /*Gambar Bisa di Ganti sesuai kemauan */
ul#floatmenu li {
display:inline;
float:left;
width:103px
}
ul#floatmenu li a {
background-color:#fff;
background-position:50% 10px;
background-repeat:no-repeat;
border:1px solid #777;
box-shadow:0 0 2px #ccc;
box-shadow:inset 0 0 5px #eee;
text-shadow:0 0 3px #ccc;
display:block;
float:left;
height:25px;
margin-top:-2px;
padding-top:80px;
text-align:center;
text-decoration:none;
width:100px
}
ul#floatmenu li a span {
color:#000;
font-size:12px;
font-family:comic sans ms;
}
ul#floatmenu li a:hover {
background-color:#ffcc00
}

Kode berkedap kedip adalah kode yang berfungsi meletakan MENU FIXED di kanan atau di kiri.
6. Pertunjukan belum selesai kita lanjutkan dengan meletakan kode berikut di bawah kode <body> :

<ul id='floatmenu'>
<li class='home'><a href='#'><span>Home</span></a></li>
<li class='tools'><a href='#'><span>Tools</span></a></li>
<li class='gallery'><a href='#'><span>Gallery</span></a></li>
<li class='video'><a href='#'><span>Video</span></a></li>
<li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li>
<li class='musics'><a href='#'><span>Musics</span></a></li>
<li class='contact'><a href='#'><span>Contact Me</span></a></li>
</ul>

Kode merah dan Biru terserah mau diganti menjadi apa.

7. Kemudian Save Template.

Kemudia lihat hasilnya :) Sudah dulu ya tutorial saya kali ini, saya akhiri dengan wassalam :) dadaaa

Ada jam ada Timer. Itulah lawan kata benda penghitung waktu di dunia ini [sebagian]. Script ini bertujuan menghitung waktu dengan cara menghitung mundur. Andai kata bisa menhitung mundur kematian, alamak!! Hehe, itu andai kata. Kalau mengitung mundur kiamat 2012 itu bisa haha [jangan percaya ya], maksudnya tahun depan kelulusan saya pada tahun 2012 haha.

Kembali ke Topic kita hari ini tentang Javascript Time Countdown ini. Waktu tentu bisa di ubah ubah sesuai kemauan dan keinginan kita. Bisa tahun 3000 atau 10000 bisa saja haha tapi ngapain! Lebih baik yang sebentar sebentar saja ya haha.

Contoh Script akan muncul seperti tanda berikut ini :

Nah itulah contohnya. Jika kamu ingin memasang script Time Countdown, ikuti langkah langkah di bawah ini. Jangan sampai ada yang ketinggalan ya scriptnya.

• Buka Blogger.com dengan password dan ID blogger sobat.

• Saat di dashboard, klik Design → Element Page → Add a Gadget → Javascript/HTML

• Pada lembar kotak Javascript yang kosong isi dengan Javascript di bawah ini :

<script>
CountActive = true;
CountStepper = -1;
LeadingZero = true;
TargetDate = "11/06/2011 07:00 AM";
BackColor = "#000000";
ForeColor = "#ffffff";
DisplayFormat = "Hari Raya Idhul Adha Tinggal %%D%% Hari, %%H%% Jam, %%M%% Menit, %%S%% Detik Lagi !!";
FinishMessage = "MBEEEEEE!!!!";
</script>
<script src="http://yourjavascript.com/53106117341/Countdown.js"></script>

Kode merah tolong di rubah sesuai keinginan, sedangkan kode Unggu adalah jika waktu tersebut habis dan langsung mengeluarkan Kode Unggu.

• Save Gadget!

Silahkan lihat hasilnya di blog kalian sendiri ya :) Selamat berkarya :)

Color HEX atau sering kita sebut dengan Kode Warna HTML.

Sebelum mengarah kesitu bagaimana jika saya ingin menyampaikan arti dari HEX itu. Didunia ini terdapat berjuta-juta warna yang tidak kalian ketahui. Berjuta juta warna tersebut adalah hasil kombinasi dari 3 warna sekunder saja. Apa saja itu? Merah, Biru, dan Kuning. Seperti : Biru >< Kuning = Hijau, Merah >< Kuning = Orange, Merah >< Biru = Unggu, dan seterusnya. Karna Warna tersebut sebenarnya sangat Banyak seperti yang tadi barusan saya katakan, maka dari itu untuk menyebutkan warna tersebut menggunakan Kode Heksadesimal atau HEX.

Contoh pada Pelangi. Di pelangi Bisa disebutkan me,ji,ku,hi,bi,ni,u atau Merah Jingga Kuning Hijau Biru Nilla Unggu. Sebenarnya tidak hanya warna warna itu saja lho. Diantaranya masih banyak banget. Nah, kerja Color HEX itu adalah mengkodekan warna dengan 6 Digit 16 Karakter (0 1 2 3 4 5 6 7 8 9 A B C D E F). Selengkapnya cari di Google ya :P

Nah disini kita akan membuat Color Pickler atau Membuat keseluruhan Warna dilengkapi dengan kode HTMLnya (HEX). Bagaimana Contohnya?

Lengkap Bukan dengan kode kodenya? Bagi saya sih Keren banget, coz saya pakai untuk Kode Warna HTML di blogku ^^ Bagaimana sih Cara membuatnya dan meletakannya di Blog? Ada kok caranya di bawah ini.

• Buka Blogger.com Account kamu dengan Password dan Email tentunnya.

• Saat di Dashboard klik Design

• Kemudian Klik Edit HTML

• Kemudian Letakan kode Berikut tepat di Bawah Kode <HEAD> :

<script src='http://www.color-hex.com/jscolor.js' type='text/javascript'/><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'/>

• Kemudian Klik Save Template

• Lanjutkan saat Dashboard klik

pada Halaman itu.

• Pada lembar Posting yang kosong isi dengan Script berikut :

<div id="contents"><form>
# <input name="color" maxlength="6" class="color" title="Tulis Kode Warna Disini"></form></div>

• Klik Publish post

Selesai. Silahkan dicoba, kurang lebih mohon maaf ya

Kembali lagi bersama saya di Blog ini. Disini saya akan menerangkan Bagaimana cara membuat Show/Hide pada Komentar Blog. Sebelum kita bahas bagaimana cara membuatnya, akan lebih baik mengetahui apa itu Show/Hide? Show/Hide atau Tombol Show (mengeluarkan) dan Hide (menyembunyikan) dalam Kode Script adalah Tombol dimana jika di Event-kan (di klik, mouseover, mouseout, dan lain lain) baik akan mengeluarkan maupun menyembunyikan OBJECT.

Nah, disini saya berbicara mengenai Bagaimana cara Show/Hide Object yang Objectnya itu adalah Komentar² blog dengan bantuan JQuery. Bagaimana sih contoh dari Show/Hide tersebut? Saksikan Review di bawah ini. Contoh untuk Show/Hide kotak Komentar adalah Di Blog ini. Bagaimana cara membuat Show/Hide di komentar? Yuk ikuti cara berikut ini.

• Pertama tama Buka masing masing Account blog kamu!

• Pilih Layout/Design → Edit HTML

• Pastekan kode berikut tepat di bawah kode <head> :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();});});
</script>

• Kemudian Pastekan CSS nya Tepat diatas kode ]]></b:skin> :

.slidingDiv {
background-color:none;
padding:20px;
margin-top:10px;
}
.show_hide {
display:none;
color:#000;
}

Bisa di Edit Seperlunya.

• Kemudian cari kode yang mirip dengan kode berikut :

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:20px;' width='16px'/>
</b:if>
<b:if cond='data:comment.favicon'>
.......
</dl>

• Paste kan kode berikut dan letakan menjadi kode berikut :

<a href="javascript:void(0)" class="show_hide">Show/hide</a>
<div class="slidingDiv"></div>

Dan letakan kode diatas kedalam kode sebelumnya menjadi

<a href="javascript:void(0)" class="show_hide">Show/hide</a>
<div class="slidingDiv">
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:20px;' width='16px'/>
</b:if>
<b:if cond='data:comment.favicon'>
.......
</dl>
</div>

Kode TITIK² merah adalah kode SKIP karna kode yang banyak itu terlalu panjang.

• Kemudian Save dan Walaaaa, Jadi!
Sekian dulu ya dari posting ini, semoga memberikan yang terbaik :) Jika ada keluhan silahkan berkomentar di bawah ini :)

Halo kawan semua :) kembali lagi bersama saya. Hehehe udah lama banget sepertinya saya tidak mempostingkan sebutir tulisan di blog hehe :D. Begini, setelah liburan usai dari hari lebaran kemaren saya kejatuhan berjibun-jibun Pekerjaan Rumah (PR). Terpaksa mau gimana lagi harus mengerjakan beberapa PR tersebut :D. Hehe

Nah berikut adalah sebuah tulisan-tulisan kecil tentang membuat data mengenai kunjungan terakhir di blog tersebut. Tentunya dengan menggunakan keterangan Waktu (dd mm yyyy hh mm) bagaimana? Lengkap bukan, ada Hari, Bulan, Tahun, Jam, Menit, dan sebenarnya bisa ditambahin Detik tapi ngapain, jangan berlebihan :). Semua itu membuat dengan sebuah Script yang tidaklah simple hehe.
Fungsi dari Script ini adalah mengetahui kapan Terakhir kita berkunjung ke Blog tersebut (yang menggunakan Script ini).

Mau contohnya? Saya Preview-kan

NB : Setelah Beberapa Menit TOLONG REFRESH Situs ini, Otomatis Keterangan Waktu akan memperlihatkan Kebenaran
Info : Kotak Kuning tidak termasuk Script.

Nah bagaimana kawan? Udah bisa melihat kehebatan dari Script ini?
Mari kita Simak cara pemuatannya untuk di Page Blog!

• Buka Blogger.com setelah itu Login/masuk di situ.

• Klik Design/Layout setelah masuk.

• Klik Add a Gadget kemudian pilih HTML/Javascript

• Pada kotak yang kosong Javascript tersebut, isi dengan Kode Berikut :

<script type = "text/javascript">
var days = 730; // days until cookie expires = 2 years.
var lastvisit=new Object();
var firstvisitmsg="<i>Selamat Datang! :D</i>";
lastvisit.subsequentvisitmsg="<i>Selamat Datang Lagi! Terakhir Datang Hari</i> <b>[displaydate]</b>";
lastvisit.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i");
if (document.cookie.match(re))
return document.cookie.match(re)[0].split("=")[1];
return'';
}
lastvisit.setCookie=function(name, value, days){
var expireDate = new Date();
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days));
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}
lastvisit.showmessage = function() {
var wh = new Date();
if (lastvisit.getCookie("visitc") == "") {
lastvisit.setCookie("visitc", wh, days);
document.write(firstvisitmsg);
}
else {
var lv = lastvisit.getCookie("visitc");
var lvp = Date.parse(lv);
var now = new Date();
now.setTime(lvp);
var day = new Array("Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu");
var month = new Array ("Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "Desember");
var dd = now.getDate();
var dy = now.getDay();
dy = day[dy];
var mn = now.getMonth();
mn = month[mn];
yy = now.getFullYear();
var hh = now.getHours();
var ampm = "AM";
if (hh >= 12) {ampm = "PM"}
if (hh >12){hh = hh - 12};
if (hh == 0) {hh = 12}
if (hh < 10) {hh = "0" + hh};
var mins = now.getMinutes();
if (mins < 10) {mins = "0"+ mins}
var secs = now.getSeconds();
if (secs < 10) {secs = "0" + secs}
var dispDate = dy + ", " + mn + " " + dd + ", " + yy + " " + hh + ":" + mins + " " + ampm
document.write(lastvisit.subsequentvisitmsg.replace("[displaydate]", dispDate))
}
lastvisit.setCookie("visitc", wh, days);
}
lastvisit.showmessage();
</script>

Kode Merah adalah Kalimat Pertama (Ucapan Selamat Datang)
Kode Kuning adalah Kalimat Setelah Selamat Datang dan seterusnya.

• Setelah selesai meletakan Kode Tersebut, Save Gadget

Lihat hasilnya deh :) Semoga Tidak mengecewakan Anda :D hehehe, Sampai Jumpa di lain waktu :)

Pages

Informasi Tanggamus

Slider

Adsense Banner 970 x 90

Blog Archive

Footer W 2

Footer W 1

Footer W 3

Travel

Performance

Cute

My Place

Slider

Racing

Popular Posts

Videos

Basis Trick - Blogger Decoration - CSS - Special

Blogger Decoration - Javascript - Special - Tutorial

Blogger Decoration - Hover Object - Javascript - Jquery - Tutorial

Blogger Decoration - CSS - Javascript - Jquery - Tutorial

Blogger Decoration - Javascript - Tutorial

Blogger Decoration - Javascript - Tutorial

Blogger Decoration - Javascript - Jquery - Tutorial

Blogger Decoration - Javascript - Tutorial

Popular Posts

Flickr Stream

Recent Comments

About Me