Untuk bisa mendapatkan emoticon di kotak komentar, silahkan ikuti langkah-langkah berikut ini :
1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari di dalam template anda kode </body>
6. Persis sebelum kode tersebut, pastekan script di bawah ini:
<script src='http://h1.ripway.com/pinginbelajar/042009/comment_emoticon.js' type='text/javascript'/>
7. Silahkan cari lagi di dalam template anda kode <b:if cond='data:post.embedCommentForm'>
8. Persis sebelum kode tersebut, pastekan script di bawah ini:
<div style='overflow:auto; width:100%px; height:200px; padding:5px 5px 5px 5px; background:#FFFFFF;'>
<center><b>
<img border='0' src='http://img7.imageshack.us/img7/5660/pinginbelajar1.gif'/>:10
<img border='0' src='http://img162.imageshack.us/img162/9828/pinginbelajar2.gif'/>:11
<img border='0' src='http://img338.imageshack.us/img338/2876/pinginbelajar5.gif'/>:12
<img border='0' src='http://img178.imageshack.us/img178/4784/pinginbelajar6.gif'/>:13
<br/>
<img border='0' src='http://img15.imageshack.us/img15/5646/pinginbelajar7.gif'/>:14
<img border='0' src='http://img54.imageshack.us/img54/9709/pinginbelajar8.gif'/>:15
<img border='0' src='http://img228.imageshack.us/img228/2490/pinginbelajar9.gif'/>:16
<img border='0' src='http://img254.imageshack.us/img254/9241/pinginbelajar10.gif'/>:17
<br/>
<img border='0' src='http://img249.imageshack.us/img249/715/pinginbelajar16.gif'/>:18
<img border='0' src='http://img19.imageshack.us/img19/8225/pinginbelajar20.gif'/>:19
<img border='0' src='http://img249.imageshack.us/img249/368/pinginbelajar21.gif'/>:20
<img border='0' src='http://img249.imageshack.us/img249/3122/pinginbelajar23.gif'/>:21
<br/>
<img border='0' src='http://img8.imageshack.us/img8/7082/pinginbelajar24.gif'/>:22
<img border='0' src='http://img249.imageshack.us/img249/9643/pinginbelajar25.gif'/>:23
<img border='0' src='http://img3.imageshack.us/img3/9077/pinginbelajar26.gif'/>:24
<img border='0' src='http://img249.imageshack.us/img249/5254/pinginbelajar27.gif'/>:25
<br/>
<img border='0' src='http://img8.imageshack.us/img8/4191/pinginbelajar28.gif'/>:26
<img border='0' src='http://img13.imageshack.us/img13/3637/pinginbelajar29.gif'/>:27
<img border='0' src='http://img167.imageshack.us/img167/1944/pinginbelajar32.gif'/>:28
<img border='0' src='http://img53.imageshack.us/img53/61/pinginbelajar33.gif'/>:29
<br/>
<img border='0' src='http://img186.imageshack.us/img186/7215/pinginbelajar35.gif'/>:30
<img border='0' src='http://img106.imageshack.us/img106/7729/pinginbelajar36.gif'/>:31
<img border='0' src='http://img106.imageshack.us/img106/700/pinginbelajar17.gif'/>:32
<img border='0' src='http://img231.imageshack.us/img231/4497/pinginbelajar34.gif'/>:33
<br/>
<img border='0' src='http://img4.imageshack.us/img4/1805/pinginbelajar31.gif'/>:34
<img border='0' src='http://img72.imageshack.us/img72/7403/pinginbelajar30.gif'/>:35
<img border='0' src='http://img249.imageshack.us/img249/5619/pinginbelajar22.gif'/>:36
<img border='0' src='http://img249.imageshack.us/img249/9919/pinginbelajar15.gif'/>:37
<br/>
<img border='0' src='http://img254.imageshack.us/img254/9607/pinginbelajar14.gif'/>:38
<img border='0' src='http://img19.imageshack.us/img19/6241/pinginbelajar13.gif'/>:39
<img border='0' src='http://img19.imageshack.us/img19/2213/pinginbelajar12.gif'/>:40
<img border='0' src='http://img249.imageshack.us/img249/2448/pinginbelajar11.gif'/>:41
<br/>
<img border='0' src='http://img162.imageshack.us/img162/6028/pinginbelajar3.gif'/>:42
<img border='0' src='http://img162.imageshack.us/img162/1236/pinginbelajar4.gif'/>:43
<img border='0' src='http://img254.imageshack.us/img254/50/pinginbelajar19.gif'/>:44
<img border='0' src='http://img19.imageshack.us/img19/464/pinginbelajar18.gif'/>:45
</b></center>
</div>
9. Klik Simpan Template
10. Selesai
Jumat, 12 Juni 2009
Menambah Smile Cbox Dan Shoutmix
Cbox dan Shoutmix merupakan fasilitas yang bisa anda letakkan pada site yang berfungsi menampung pesan dari visitor yang berkunjung ke site anda. Banyak pengaturan yang bisa anda lakukan pada kedua Comment Box tersebut, tetapi untuk kali ini saya akan membahas cara menambah smile pada Cbox dan Shoutmix.
Sekarang kita akan bahas satu per satu, silahkan ikuti langkah-langkahnya :
Menambah smile pada Cbox :
1. Silahkan login ke Cbox anda
2. Klik Tab Options
3. Klik pilihan menu Smilies
4. Pada kolom URL, silahkan anda pastekan URL dari smile pilihan anda
5. Pada kolom Code, silahkan ketik kode yang anda inginkan. Jika ada yang mengetik kode ini maka secara otomatis smile tersebut akan tampil pada Cbox anda.
6. Pada kolom Alt. Code, silahkan ketik kode alternatif anda. Fungsinya sama seperti no. 5
7. Silahkan tambahkan smile tersebut sesuka anda di Cbox yang anda miliki. Inilah salah satu kelebihan Cbox, bagi para sobat yang berlangganan secara Basic Box ataupun Premium Box mempunyai fasilitas yang sama yakni sama-sama diberikan fasilitas unlimited smiles.
8. Klik Save
9. Selesai
Menambah smile pada Shoutmix
1. Silahkan login ke Shoutmix anda
2. Klik pilihan menu smileys pada Tab Display
3. Pada kolom smiley image URL, silahkan anda pastekan URL dari smile pilihan anda
4. Pada kolom Code, silahkan ketik kode yang anda inginkan. Jika ada yang mengetik kode ini maka secara otomatis smile tersebut akan tampil pada Shoutmix anda.
5. Pada kolom (optional), silahkan ketik kode alternatif anda. Fungsinya sama seperti no. 4
6. Silahkan tambahkan smile tersebut hingga 10 smile bagi yang berlangganan secara Basic Account, dan bagi sobat yang berlangganan secara Premium Account, anda bisa menambahkan smile tersebut hingga 500 smile.
7. Klik Save settings
8. Selesai
Sekarang kita akan bahas satu per satu, silahkan ikuti langkah-langkahnya :
Menambah smile pada Cbox :
1. Silahkan login ke Cbox anda
2. Klik Tab Options
3. Klik pilihan menu Smilies
4. Pada kolom URL, silahkan anda pastekan URL dari smile pilihan anda
5. Pada kolom Code, silahkan ketik kode yang anda inginkan. Jika ada yang mengetik kode ini maka secara otomatis smile tersebut akan tampil pada Cbox anda.
6. Pada kolom Alt. Code, silahkan ketik kode alternatif anda. Fungsinya sama seperti no. 5
7. Silahkan tambahkan smile tersebut sesuka anda di Cbox yang anda miliki. Inilah salah satu kelebihan Cbox, bagi para sobat yang berlangganan secara Basic Box ataupun Premium Box mempunyai fasilitas yang sama yakni sama-sama diberikan fasilitas unlimited smiles.
8. Klik Save
9. Selesai
Menambah smile pada Shoutmix
1. Silahkan login ke Shoutmix anda
2. Klik pilihan menu smileys pada Tab Display
3. Pada kolom smiley image URL, silahkan anda pastekan URL dari smile pilihan anda
4. Pada kolom Code, silahkan ketik kode yang anda inginkan. Jika ada yang mengetik kode ini maka secara otomatis smile tersebut akan tampil pada Shoutmix anda.
5. Pada kolom (optional), silahkan ketik kode alternatif anda. Fungsinya sama seperti no. 4
6. Silahkan tambahkan smile tersebut hingga 10 smile bagi yang berlangganan secara Basic Account, dan bagi sobat yang berlangganan secara Premium Account, anda bisa menambahkan smile tersebut hingga 500 smile.
7. Klik Save settings
8. Selesai
Emoticon Yahoo Di Kotak Komentar
Silahkan ikuti langkah-langkah berikut ini :
1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari di dalam template anda kode </body>
6. Persis sebelum kode tersebut, pastekan scirpt di bawah ini:
<script src='http://h1.ripway.com/pinginbelajar/042009/emoticon_yahoo.js' type='text/javascript'/>
7. Silahkan cari lagi di dalam template anda kode <b:if cond='data:post.embedCommentForm'>
8. Persis sebelum kode tersebut, pastekan script di bawah ini
<div style='overflow:no; width:100%px; height:100%px; padding:5px 5px 5px 5px; background:#FFFFFF;'>
<center><b>
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>:|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>=))
</b></center>
</div>
9. Klik Simpan Template
10. Selesai
1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari di dalam template anda kode </body>
6. Persis sebelum kode tersebut, pastekan scirpt di bawah ini:
<script src='http://h1.ripway.com/pinginbelajar/042009/emoticon_yahoo.js' type='text/javascript'/>
7. Silahkan cari lagi di dalam template anda kode <b:if cond='data:post.embedCommentForm'>
8. Persis sebelum kode tersebut, pastekan script di bawah ini
<div style='overflow:no; width:100%px; height:100%px; padding:5px 5px 5px 5px; background:#FFFFFF;'>
<center><b>
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>:|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>=))
</b></center>
</div>
9. Klik Simpan Template
10. Selesai
Jumat, 29 Mei 2009
Masih bersikeras untuk menghilangkan navbar blogger? jika masih akan saya beritahu, akan tetapi resiko di tanggung masing-masing, saya tidak bertanggung jawab jika di kemudian hari terjadi sesuatu dengan blog sobat.
Untuk menghilangkan navbar blogger, sobat tinggal menambahkan kode di bawah ini pada style sheet CSS :
/* hilangkan navbar
----------------------------- */
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
Atau bisa juga menaruh kode berikut persis di bawah kode <body>
<style type='text/css'>
#navbar-iframe {display:none;}
</style>
# Untuk template klasik
1. Sign in di blogger
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kode yang ada lalu save di komputer sobat sebagai backup data agar aman
5. Copy kode berikut lalu paste di atas kode </style>
/* hilangkan navbar
----------------------------- */
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
# Klik tombol Simpan Perubahan Template
# Selesai.
# Untuk template baru
1. Sign in di blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik link bertuliskan Download Template Seluruhnya, silahkan save dulu untuk backup data
5. Copy kode berikut lalu paste di atas kode ]]></b:skin>
/* hilangkan navbar
----------------------------- */
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
6. Klik tombol Simpan Template
7. Selesai.
Selamat menikmati blog tanpa navbar !
Untuk menghilangkan navbar blogger, sobat tinggal menambahkan kode di bawah ini pada style sheet CSS :
/* hilangkan navbar
----------------------------- */
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
Atau bisa juga menaruh kode berikut persis di bawah kode <body>
<style type='text/css'>
#navbar-iframe {display:none;}
</style>
# Untuk template klasik
1. Sign in di blogger
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kode yang ada lalu save di komputer sobat sebagai backup data agar aman
5. Copy kode berikut lalu paste di atas kode </style>
/* hilangkan navbar
----------------------------- */
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
# Klik tombol Simpan Perubahan Template
# Selesai.
# Untuk template baru
1. Sign in di blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik link bertuliskan Download Template Seluruhnya, silahkan save dulu untuk backup data
5. Copy kode berikut lalu paste di atas kode ]]></b:skin>
/* hilangkan navbar
----------------------------- */
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
6. Klik tombol Simpan Template
7. Selesai.
Selamat menikmati blog tanpa navbar !
Senin, 25 Mei 2009
MENU HORIZONTAL
ini adalah salah satu caranya, tapi sebelumnya apasih menu horizontal itu? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping).
Untuk membuatnya ikuti cara berikut ini:
1. Login ke blogger terus pilih Layout --> Edit HTML, jangan lupa template di backup dulu atau centang pada Expand Template Widget.
2. kemudian Cari script seperti ini ]]></b:skin>, kalo belum ketemu Ctrl+F lalu ketik ]]></b:skin> trs tekan enter,kalo udah ketemu copy script dibawah ini
/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}
Tulisan blackleft.gif (tulisan warna merah) bisa kamu ganti dengan yang lain
Misalnya, jika kamu pilih yang warna ungu maka scriptnya menjadi seperti ini;
background: url("http://kendhin.890m.com/menu/unguright.gif") no-repeat left top;
background: url("http://kendhin.890m.com/menu/unguright.gif") no-repeat right top;
atau dengan macam-macam warna seperti di bawah ini
blackright.gif adalah warna hitam
greenright.gif adalah warna hijau
redright.gif adalah warna merah
unguright.gif adalah warna ungu
yellowright.gif adalah warna kuning
blueright.gif adalah warna biru
3. kalau sudah paste di sebelum script ]]></b:skin>, trus simpan
4. kalau sudah Copy script berikut ini
<div id="tabshori">
<ul>
<li><a href="http://tutorial-buditkj.blogspot.com"><span>Home</span></a></li>
<li><a href="http://tutorial-buditkj.blogspot.com"><span>Tutorial</span></a></li>
<li><a href="http://buditkj.blogspot.com"><span>Free tugas tkj </span></a></li>
</ul>
</div >
5. Ganti http://tutorial-buditkj.blogspot.com dengan link yang kamu tuju. Link tersebut bisa berupa alamat blog lain atau link postingan km. Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).
6.setelah itu pilih tata letak pilih tambah gadget kemudian beri judul dan pastekan script tadi
Simpan hasil pengeditan.
7. Lihat hasilnya.
ini adalah salah satu caranya, tapi sebelumnya apasih menu horizontal itu? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping).
Untuk membuatnya ikuti cara berikut ini:
1. Login ke blogger terus pilih Layout --> Edit HTML, jangan lupa template di backup dulu atau centang pada Expand Template Widget.
2. kemudian Cari script seperti ini ]]></b:skin>, kalo belum ketemu Ctrl+F lalu ketik ]]></b:skin> trs tekan enter,kalo udah ketemu copy script dibawah ini
/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}
Tulisan blackleft.gif (tulisan warna merah) bisa kamu ganti dengan yang lain
Misalnya, jika kamu pilih yang warna ungu maka scriptnya menjadi seperti ini;
background: url("http://kendhin.890m.com/menu/unguright.gif") no-repeat left top;
background: url("http://kendhin.890m.com/menu/unguright.gif") no-repeat right top;
atau dengan macam-macam warna seperti di bawah ini
blackright.gif adalah warna hitam
greenright.gif adalah warna hijau
redright.gif adalah warna merah
unguright.gif adalah warna ungu
yellowright.gif adalah warna kuning
blueright.gif adalah warna biru
3. kalau sudah paste di sebelum script ]]></b:skin>, trus simpan
4. kalau sudah Copy script berikut ini
<div id="tabshori">
<ul>
<li><a href="http://tutorial-buditkj.blogspot.com"><span>Home</span></a></li>
<li><a href="http://tutorial-buditkj.blogspot.com"><span>Tutorial</span></a></li>
<li><a href="http://buditkj.blogspot.com"><span>Free tugas tkj </span></a></li>
</ul>
</div >
5. Ganti http://tutorial-buditkj.blogspot.com dengan link yang kamu tuju. Link tersebut bisa berupa alamat blog lain atau link postingan km. Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).
6.setelah itu pilih tata letak pilih tambah gadget kemudian beri judul dan pastekan script tadi
Simpan hasil pengeditan.
7. Lihat hasilnya.
Rabu, 20 Mei 2009
Pada postingan sebelumnya saya telah membuat artikel tentang efek salju yang berterbangan di halaman blog. Sekarang saya akan coba lagi membuat postingan yang intinya tidak jauh-jauh dari efek salju tersebut untuk memperindah halaman blog anda.
Jika anda tertarik untuk menambah efek tersebut pada halaman site anda, silahkan ikuti langkah-langkah berikut ini :
1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilihan HTML/JavaScript
6. Pastekan salah satu script di bawah ini ke kolom Konten
Efek daun berguguran, dengan jumlah 20 buah daun kering
<script src="http://h1.ripway.com/pinginbelajar/daunberguguran/20.js" type="text/javascript"></script>
Efek daun berguguran, dengan jumlah 30 buah daun kering
<script src="http://h1.ripway.com/pinginbelajar/daunberguguran/30.js" type="text/javascript"></script>
Efek bintang berjatuhan, dengan jumlah 20 buah bintang
<script src="http://h1.ripway.com/pinginbelajar/bintangberjatuhan/20.js" type="text/javascript"></script>
Efek bintang berjatuhan, dengan jumlah 30 buah bintang
<script src="http://h1.ripway.com/pinginbelajar/bintangberjatuhan/30.js" type="text/javascript"></script>
7. Klik Simpan
8. Selesai
Jika anda tertarik untuk menambah efek tersebut pada halaman site anda, silahkan ikuti langkah-langkah berikut ini :
1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilihan HTML/JavaScript
6. Pastekan salah satu script di bawah ini ke kolom Konten
Efek daun berguguran, dengan jumlah 20 buah daun kering
<script src="http://h1.ripway.com/pinginbelajar/daunberguguran/20.js" type="text/javascript"></script>
Efek daun berguguran, dengan jumlah 30 buah daun kering
<script src="http://h1.ripway.com/pinginbelajar/daunberguguran/30.js" type="text/javascript"></script>
Efek bintang berjatuhan, dengan jumlah 20 buah bintang
<script src="http://h1.ripway.com/pinginbelajar/bintangberjatuhan/20.js" type="text/javascript"></script>
Efek bintang berjatuhan, dengan jumlah 30 buah bintang
<script src="http://h1.ripway.com/pinginbelajar/bintangberjatuhan/30.js" type="text/javascript"></script>
7. Klik Simpan
8. Selesai
Membuat efek salju adalah salah satu hiasan blog yang paling digemari saat ini, karena efek ini sungguh sangat bagus bagi para peblogger yang ingin menghiasi blognya dengan fariasi yang bagus. Langsung saja ke cara pembuatan efek salju.
Langkah pertama :
* Masuk ke blogger
* Klik Tata Letak
* Dalam menu elemen halaman, silahkan tambahkan sebuah elemen Html/Javascript
* Silahkan tambahkan kode html ini ke dalam elemen halaman tersebut
Kode ini untuk efek salju dengan jumlah 20 buah salju berjatuhan
<script src=" http://h1.ripway.com/syarung/epek salju.txt " type="text/javascript"></script>
dan Kode ini untuk efek salju dengan jumlah 30 buah salju berjatuhan
<script src=" http://h1.ripway.com/syarung/epek salju2.txt " type="text/javascript"></script>
setelah selesai simpan deh!!
mudah kan ???
Langkah pertama :
* Masuk ke blogger
* Klik Tata Letak
* Dalam menu elemen halaman, silahkan tambahkan sebuah elemen Html/Javascript
* Silahkan tambahkan kode html ini ke dalam elemen halaman tersebut
Kode ini untuk efek salju dengan jumlah 20 buah salju berjatuhan
<script src=" http://h1.ripway.com/syarung/epek salju.txt " type="text/javascript"></script>
dan Kode ini untuk efek salju dengan jumlah 30 buah salju berjatuhan
<script src=" http://h1.ripway.com/syarung/epek salju2.txt " type="text/javascript"></script>
setelah selesai simpan deh!!
mudah kan ???
Minggu, 17 Mei 2009
bintang bertaburan pada cursor
Pernah lihat tongkatnya Peri yang bertaburan bintang-bintang dalam cerita komik. Kamu juga dapat membuat/meniru taburan bintang tersebut kedalam blog kamu. Untukmembuatnya kamu hanya perlu menambahkan kode html/javascript.
ikuti langkah berikut ini:
Log in ke blogger
Klik menu Tata Letak
Pada Elemen Halaman tambahkan sebuah elemen halaman html/javascript
Lalu masukkan kode di bawah ini:
<script src=" http://h1.ripway.com/syarung/biru.txt " type="text/javascript"></script>
Tulisan biru bisa diganti dengan warna yang sobat suka yang ada di bawah ini
abu2 ==> untuk menjadikan bintangnya berwarna abu-abu
biru ==> untuk menjadikan bintangnya berwarna biru
hijau ==> untuk menjadikan bintangnya berwarna hijau
item ==> untuk menjadikan bintangnya berwarna hitam
merah ==> untuk menjadikan bintangnya berwarna merah
orens ==> untuk menjadikan bintangnya berwarna oranye
putih ==> untuk menjadikan bintangnya berwarna putih
ungu ==> untuk menjadikan bintangnya berwarna ungu
Jika sudah, klik Simpan >> Lalu lihat apakah sudah cocok dengan keinginan kamu
ikuti langkah berikut ini:
Log in ke blogger
Klik menu Tata Letak
Pada Elemen Halaman tambahkan sebuah elemen halaman html/javascript
Lalu masukkan kode di bawah ini:
<script src=" http://h1.ripway.com/syarung/biru.txt " type="text/javascript"></script>
Tulisan biru bisa diganti dengan warna yang sobat suka yang ada di bawah ini
abu2 ==> untuk menjadikan bintangnya berwarna abu-abu
biru ==> untuk menjadikan bintangnya berwarna biru
hijau ==> untuk menjadikan bintangnya berwarna hijau
item ==> untuk menjadikan bintangnya berwarna hitam
merah ==> untuk menjadikan bintangnya berwarna merah
orens ==> untuk menjadikan bintangnya berwarna oranye
putih ==> untuk menjadikan bintangnya berwarna putih
ungu ==> untuk menjadikan bintangnya berwarna ungu
Jika sudah, klik Simpan >> Lalu lihat apakah sudah cocok dengan keinginan kamu
Cara Membuat Search Engine
Login ke blogger terus klik Layout terus pilih page elements nha disitu kan banyak tulisan Add a page elements klik link tersebut dan sesuaikan dimana tempatnya menaruh search engine
2. kemudian pada layar baru yang muncul pilih HTML/Javascript kemudian copy/paste script/kode berikut ini di dalam kolom content.
<form action="http://nama-blogmu.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>
Ganti nama-blogmu dengan nama blog kamu. Aangka 30 menunjukkan panjang kotak (text box) semakin banyak angkanya maka semakin panjang textbox-nya
kemudian simpan
2. kemudian pada layar baru yang muncul pilih HTML/Javascript kemudian copy/paste script/kode berikut ini di dalam kolom content.
<form action="http://nama-blogmu.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>
Ganti nama-blogmu dengan nama blog kamu. Aangka 30 menunjukkan panjang kotak (text box) semakin banyak angkanya maka semakin panjang textbox-nya
kemudian simpan
Minggu, 03 Mei 2009
ingin mengganti gambar pada pada address bar
anda dengan gambar animasi yang anda inginkan
caranya mudah kok,ikuti langkah berikut ini
1. masuk ke blogger anda
2. kemudian masuk ke "Layout" kemudian pilih "Edit HTML" lalu cari kode </head> kalo belum ketemu klik Ctrl+F lalu akan muncul Find,pada kolom Find ketik </head> kemudian tekan enter pasti akan muncul </head>,
3. nah,setelah ketemu script </head> tadi, copy script dibawah ini:
<link href='http://www.gifs.net/Animation11/Creatures_and_Cartoons/Anime/Anime_runner_2.gif' rel='SHORTCUT ICON'/>
4.dan paste sebelum code </head>
5. setelah itu dimpan dan lihat hasilnya
jika ingin gambar yang yg lain ganti link "http://www.gifs.net/Animation11/Creatures_and_Cartoons/Anime/Anime_runner_2.gif" dengan gambar yang kamu suka
cukup jelas kan???
selamat mencoba....semoga berhasil........
anda dengan gambar animasi yang anda inginkancaranya mudah kok,ikuti langkah berikut ini
1. masuk ke blogger anda
2. kemudian masuk ke "Layout" kemudian pilih "Edit HTML" lalu cari kode </head> kalo belum ketemu klik Ctrl+F lalu akan muncul Find,pada kolom Find ketik </head> kemudian tekan enter pasti akan muncul </head>,
3. nah,setelah ketemu script </head> tadi, copy script dibawah ini:
<link href='http://www.gifs.net/Animation11/Creatures_and_Cartoons/Anime/Anime_runner_2.gif' rel='SHORTCUT ICON'/>
4.dan paste sebelum code </head>
5. setelah itu dimpan dan lihat hasilnya
jika ingin gambar yang yg lain ganti link "http://www.gifs.net/Animation11/Creatures_and_Cartoons/Anime/Anime_runner_2.gif" dengan gambar yang kamu suka
cukup jelas kan???
selamat mencoba....semoga berhasil........
ingin memberi animasi pada blog anda
caranya sangat mudah???
ikuti langkah berikut ini....
1. Login ke blogger trus klik "Layout -->> Edit HTML
2. Cari kode ini ]]></b:skin> kalo dah ketemu taru kode berikut ini di atasnya.
#trik_pojok {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
3. Text yang dicetak miring adalah posisinya, kalo pingin ganti di posisi pojok kanan bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "bottom", jika pingin di posisi atas bisa diganti dengan "top".
4. Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode </body>
<div id="trik_pojok">
<a href="http://buditkj.blogspot.com">
<img src="http://kendhin.890m.com/soniclari.gif" border="0" /></a>
</div>
"http://buditkj.blogspot.com" adalah link. ganti dengan link kamu.
"http://kendhin.890m.com/soniclari.gif" adalh lokasi gambarmu. ganti dengan lokasi gambar kamu.
5. Jika kamu pingin yang ada disitu bukan gambar tetapi jam/kalender/hit counter/widget-widget yg lain, maka ganti text yang berwarna merah dengan script widget-widget tersebut.
6. Simpan hasil kerja kamu dan lihat hasilnya.
caranya sangat mudah???
ikuti langkah berikut ini....
1. Login ke blogger trus klik "Layout -->> Edit HTML
2. Cari kode ini ]]></b:skin> kalo dah ketemu taru kode berikut ini di atasnya.
#trik_pojok {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
3. Text yang dicetak miring adalah posisinya, kalo pingin ganti di posisi pojok kanan bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "bottom", jika pingin di posisi atas bisa diganti dengan "top".
4. Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode </body>
<div id="trik_pojok">
<a href="http://buditkj.blogspot.com">
<img src="http://kendhin.890m.com/soniclari.gif" border="0" /></a>
</div>
"http://buditkj.blogspot.com" adalah link. ganti dengan link kamu.
"http://kendhin.890m.com/soniclari.gif" adalh lokasi gambarmu. ganti dengan lokasi gambar kamu.
5. Jika kamu pingin yang ada disitu bukan gambar tetapi jam/kalender/hit counter/widget-widget yg lain, maka ganti text yang berwarna merah dengan script widget-widget tersebut.
6. Simpan hasil kerja kamu dan lihat hasilnya.
Jumat, 01 Mei 2009
Membuat Label Menjadi Flash Animasi
Caranya Gimana y??
masa ga tau??
gampang cuy? ikuti saya ya???
Pertama, pilih Tata Letak > Edit HTML
Kedua, centang Expand Template Widget
Ketiga, cari kode di bawah ini:
<b:section class='sidebar' id='sidebar' preferred='yes'>
Kalau sudah ketemu pake cara keempat
taruh script berikut ini di bawah kode yang tadi:
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blog by <a href='http://www.buditkj.blogspot.com/'>cah tkj </a> and <a href='http://www.tutorial-buditkj.blogspot.com'>smk3 tegal</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "220", "200", "7", "#666666");
// 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>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Nah sekarang kamu bisa ubah ukuranya
220 adalah lebar flash animasi
200 adalah tinggi flash animasi
kalo sudah selesai jangan lupa disimpan ya?
semoga berhasil!!!!
masa ga tau??
gampang cuy? ikuti saya ya???
Pertama, pilih Tata Letak > Edit HTML
Kedua, centang Expand Template Widget
Ketiga, cari kode di bawah ini:
<b:section class='sidebar' id='sidebar' preferred='yes'>
Kalau sudah ketemu pake cara keempat
taruh script berikut ini di bawah kode yang tadi:
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blog by <a href='http://www.buditkj.blogspot.com/'>cah tkj </a> and <a href='http://www.tutorial-buditkj.blogspot.com'>smk3 tegal</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "220", "200", "7", "#666666");
// 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>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Nah sekarang kamu bisa ubah ukuranya
220 adalah lebar flash animasi
200 adalah tinggi flash animasi
kalo sudah selesai jangan lupa disimpan ya?
semoga berhasil!!!!
Membuat judul berjalan
1.masuk ke account blogger anda
2.setelah sampai di Dasbor klik tab [layout] kemudian pilih [Edit Html] untuk memulai pengeditan.
3.copy script berikut ini :
<script type='text/javascript'>
//<![CDATA[
msg = " ---ALAMAT BLOG ANDA--- ";
msg = "JUDUL BLOG ANDA" + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>
4.kemudian pastekan kode tadi diatas kode <head> yang ada dikotak Edit Html.kemudian tukar tulisan yang berwarna merah diatas dengan URL blog dan Judul blog anda ( boleh juga dengan tulisan lainnya yang anda mau )
5.simpan perubahan yang telah anda lakukan tadi dengan mengklik tombol [save template] yang ada, kemudian untuk melihat hasilnya refresh jendela blog anda atau buka ditab baru dengan mengklik link View Blog yang ada.
6.Selamat Mencoba
2.setelah sampai di Dasbor klik tab [layout] kemudian pilih [Edit Html] untuk memulai pengeditan.
3.copy script berikut ini :
<script type='text/javascript'>
//<![CDATA[
msg = " ---ALAMAT BLOG ANDA--- ";
msg = "JUDUL BLOG ANDA" + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>
4.kemudian pastekan kode tadi diatas kode <head> yang ada dikotak Edit Html.kemudian tukar tulisan yang berwarna merah diatas dengan URL blog dan Judul blog anda ( boleh juga dengan tulisan lainnya yang anda mau )
5.simpan perubahan yang telah anda lakukan tadi dengan mengklik tombol [save template] yang ada, kemudian untuk melihat hasilnya refresh jendela blog anda atau buka ditab baru dengan mengklik link View Blog yang ada.
6.Selamat Mencoba
Langganan:
Postingan (Atom)