Tips Mempercantik Blog

Trik agar bisa Upload Gambar Ukuran besar di blogger

2009-08-13T18:03:00.000-07:00

Trik agar bisa upload gambar ukuran besar di blogger - Dalam postring kemarin sudah di tulis bagaimana mendapatkan hosting gambar yang unlimited bandwidth, yaitu dengan memakai blogger. Namun, ada sedikit yang membuat tidak nyaman yaitu kita tidak bisa posting atau upload gambar yang ukurannya lebih dari 400 pixel, karena apabila kita upload gambar yang ukurannya lebih besar dari 400 pixel maka secara otomatis gambar tersebut akan di perkecil menjadi 400 pixel.

Apakah ada trik agar bisa upload gambar ukuran besar di blogger? jawabannya ada dan terbilang sangat mudah. Penasaran? begini caranya :

* Silahkan upload gambar yang berukuran lebih dari 400 pixel ke blogger.
* Jika gambar sudah tampil di blog anda, klik kanan pada gambar tersebut lalu pilih Copy Image Location untuk mendapatkan alamat gambar tersebut.
* Paste pada program text editor seperti "Notepad", "WordPad' atau text editor lainnya. Contoh : alamat gambar yang kang Rohman dapatkan seperti ini :

http://2.bp.blogspot.com/_pt7i0nbIOCY/SoFBbCzWTcI/AAAAAAAACNY/03Pe9qqm320/s400/blog-aing.jpg
* Perhatikan kode yang saya cetak merah, kode tersebutlah yang membatasi gambar besar yang kita upload menjadi kecil. Agar gambar bisa tampil maksimal, maka kita hanya cukup mengubah nilainya menjadi s800 ( jika gambar yang di upload kurang dari 800 pixel ) atau di ganti dengan s1600 ( jika gambar yang di upload melebihi 800 pixel ). Contoh, kodenya jadi seperti ini :

http://2.bp.blogspot.com/_pt7i0nbIOCY/SoFBbCzWTcI/AAAAAAAACNY/03Pe9qqm320/s800/blog-aing.jpg

http://2.bp.blogspot.com/_pt7i0nbIOCY/SoFBbCzWTcI/AAAAAAAACNY/03Pe9qqm320/s1600/blog-aing.jpg

Mudah sekali bukan? mau bukti, silahkan klik link di bawah ini :

http://2.bp.blogspot.com/_pt7i0nbIOCY/SoFBbCzWTcI/AAAAAAAACNY/03Pe9qqm320/s400/blog-aing.jpg

Coba bandingkan dengan yang ini :

http://2.bp.blogspot.com/_pt7i0nbIOCY/SoFBbCzWTcI/AAAAAAAACNY/03Pe9qqm320/s800/blog-aing.jpg

Bandingkan juga dengan yang ini :

http://2.bp.blogspot.com/_pt7i0nbIOCY/SoFBbCzWTcI/AAAAAAAACNY/03Pe9qqm320/s1600/blog-aing.jpg

Format kode gambar di atas adalah apabila anda mengupload gambar langsung melalui post edtor blogger. Apabila anda mengupload melalui Windows Live Writer seperti yang biasa kang Rohman lakukan, maka format gambar yang di hasilkan adalah seperti ini :

http://lh4.ggpht.com/_pt7i0nbIOCY/SoFHgGjyQ8I/AAAAAAAACNk/FmS36kH8k3U/blog-aing_thumb%5B2%5D.jpg?imgmax=800

Terlihat bahwa gambar yang di tampilkan di batasi hanya 800 pixel, agar mendapatkan gambar yang maksimal, cukup dengan mengubah angka 800 dengan angka 1600, sehingga kodenya jadi seperti ini :

http://lh4.ggpht.com/_pt7i0nbIOCY/SoFHgGjyQ8I/AAAAAAAACNk/FmS36kH8k3U/blog-aing_thumb%5B2%5D.jpg?imgmax=1600

Trik mengubah nilai pixel ini berlaku juga untuk posting gambar secara umum, anda hanya perlu masuk dulu ke edit HTML, lalu ubah kode pixelnya.

Ternyata kita bisa upload gambar dalam ukuran besar ke blogger bukan?

Membuat Kotak Pesan Diblog

2009-05-20T00:26:00.000-07:00

Kotak Pesan,jejak pengunjung atau istilah lainnya shout box, Say Box, Tag Board, dan Chatter Box adalah suatu kotak yang berfungsi untuk mengirimkan pesan-pesan pendek, namun bisa juga berfungsi sebagai tempat ngobrol (chatting). Dengan shoutbox, kita juga bisa mempromosikan blog kita, misalnya nih, kita datangi blog orang yang menyediakan kotak ini kemudian kita kasih komentar atau cuma sekedar salam di shoutbox mereka, lalu yang punya blog akan melihat di shoutbox, biasanya meraka akan balas mengunjungi blog kita. Nha gitu ceritannya. Biasanya kotak ngoceh diselipkan kedalam halaman web/blog dengan bahasa java Script. Bagi kamu yang jago pemrograman java script mungkin bisa membuatnya sendiri dengan membuat kode-kode yang memusingkan kepala. Namun buat kamu yang nggak jago nggak usah kuatir karena sekarang ini banyak situs internet yang menyediakan layanan ini, salah satunya yaitu Shoutmix . Caranya adalah sebagai berikut :

1. Buka situs Shoutmix Kamu harus mendaftar di situs tersebut, cara daftarnya gampang kok, yaitu masukan email kamu dan pasword yang kamu kehendaki.
2. Jika pendaftarannya berhasil kamu langsung disuruh milih type shoutbox yang disediakan, terserah kamu milih bentuknya yang gimana. Klik tombol Continue
3. Setelah itu kamu akan mendapat ucapan "Terima Kasih" lalu klik link Go to My Control Panel Now
4. Disitu kamu bisa mensetting terlebih dahulu shoutbox kamu, misalnya Style & Color, Date & Time, dan lain-lain.
5. Jika sudah selesai klik menu Get Codes
6. Jika kamu pingin menaruh shoutbox di blog kamu pilih "Place Shoutbox on Webpage"
7. Atur lebar dan tinggi shoutbox di kolom widht dan hight
8. Kemudian Copy kode yang ada di dalam kotak "generated Codes"
9. Login ke blogger.com lalu pilih Layout kemudian Add Page Elements
11. Tambahkan element HTML/Javascript.
12. Paste Kode yang telah kamu copy dari shoutbox.com tadi di kotak "Content" lalu simpan.
13. oke,, lalu jangan lupa tinggalkan koment di shoutmix saya hahahaaa

Membuat Gambar Melayang di Pojok

2009-05-19T21:01:00.000-07:00

Berikut ini saya Mencoba ngebahas gimana cara membuat gambar yang selalu berlari tanpa henti dan berada di pojok (bisa atas, bawah, kiri, kanan) meskipun "scroll bar" ditarik kemana-mana. "Scroll bar" itu apa sih? itu lho kotak kecil panjang yang ada disamping itu, yg biasanya ditarik kebawah dan keatas supaya bisa ngelihat isi blog yang kepanjangan. Trus maksudnya "gambar" itu apa? "gambar " itu maksudnya bisa gambar atau photo kamu, animasi, Jam, Hit Counter, Shoutbox, Kalender, Adsense, Iklan, Widget-widget dan lain-lain. Kalo untuk di blog ini aku pasang gambar sonic yg sedang lari-lari klik disini untuk melihatnya (pojok kiri bawah). Nha udah tahu kan maksudnya. Kalo dah tahu dan pingin mencobanya mari ikuti trik 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 tebal 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://trik-nyaman.blogspot.com">
<img src="http://i700.photobucket.com/albums/ww6/mandalika3/soniclari.gif" border="0" /></a>
</div>

"http://trik-nyaman.blogspot.com" adalah link. ganti dengan link kamu.
"http://i700.photobucket.com/albums/ww6/mandalika3/soniclari.gif" adalah 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.

Text Berjalan di Bar menu

2009-05-19T20:24:00.000-07:00

Teman blogger beberapa hari yang lalu mengirimkan email kepada saya yang isinya menanyakan tentang cara membuat text berjalan yang ada pada bar menu bawah seperti halnya pada blog milik saya ini. Pertanyaan tersebut sudah saya jawab langsung melalui email juga dan sekarangpun pada saat artikel ini di buat, sobat Ochim sudah berhasil membuat bar menu blognya ada tulisan berjalan.

Seperti biasanya, jika ada pertanyaan melalui email maka jawaban dari pertanyaan tersebut akan saya posting melalui blog ini. Nah jika sobat sama-sama tertarik ingin membuat text berjalan tersebut, silahkan baca artikel ini sampai tuntas.

Karena template blogger terbagi menjadi dua yaitu template klasik dan template baru, maka untuk cara membuat text berjalan tersebutpun akan berbeda, oleh karenanya pembahasannya pun akan saya bagi menjadi dua bagian. Akan tetapi perlu saya sampaikan, contoh yang akan saya berikan kali ini hasilnya tidak persis seperti pada blog ini yaitu text berjalan dari arah kanan kekiri, akan tetapi saya akan memberi contoh text berjalan dari kiri ke arah kanan serta ada jeda waktu antara tulisan yang petama dengan yang kedua dan juga tulisan berikutnya.

Untuk template klasik silahkan ikuti langkah-langkah berikut ini :

1. Sign in di blogger dengan id sobat
2. Klik menu Template
3. klik menu Edit HTML

Copy seluruh kode HTMl lalu paste pada program notepad kemudian save. Ini di maksudkan untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting template, sobat masih mempunyai data untuk mengembalikannya ke semula

Copy kode berikut ini lalu paste di atas kode </head>

<script language='javascript'>
message = "Tulis text pertama yang ingin muncul disini ^" +
"Tulis text kedua disini ^" +
"Tulis text ketiga disini ^" +
"Tulis text keempat disini ^"

scrollSpeed = 130
lineDelay = 0

// Do not change the text below //

txt = ""

function scrollText(pos) {
if (message.charAt(pos) != '^') {
txt = txt + message.charAt(pos)
status = txt
pauze = scrollSpeed
}
else {
pauze = lineDelay
txt = ""
if (pos == message.length-1) pos = -1
}
pos++
setTimeout("scrollText('"+pos+"')",pauze)
}
scrollText(0)
</script>

6. Klik tombol Save Template Changes
7. Selesai.

Cara ke dua ini untuk template baru silahkan ikuti langkah-langkah berikut ini :

1. Sign in di blogger

2. Klik menu Layout

3. Klik menu Edit HTML
4. Klik tulisan Download Full Template, lalu save data tersebut.
Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template
5. Klik kotak kecil di samping tulisan Expand Widget Templates untuk
memberi tanda centang.
Sekali lagi jangan lupa klik kotak kecil di samping tulisan Expand Widget Templates
6. Tunggu beberapa saat sampai proses selesai

7. Simpan kode berikut di bawah kode </body> , kode ini letaknya berada paling bawah
sebelum kode </html>

<script language='javascript'>
message = "Tulis text pertama yang ingin muncul disini ^" +
"Tulis text kedua disini ^" +
"Tulis text ketiga disini ^" +
"Tulis text keempat disini ^"

scrollSpeed = 130
lineDelay = 0

// Do not change the text below //

txt = ""

function scrollText(pos) {
if (message.charAt(pos) != '^') {
txt = txt + message.charAt(pos)
status = txt
pauze = scrollSpeed
}
else {
pauze = lineDelay
txt = ""
if (pos == message.length-1) pos = -1
}
pos++
setTimeout("scrollText('"+pos+"')",pauze)
}
scrollText(0)
</script>

8. Klik tombol SAVE TEMPLATE

9. Selesai

sedikit CATATAN, pada kode diatas ada tulisan yang saya buat kuning , nah tulisan tersebut harus sobat ganti dengan tulisan yang sobat inginkan. contoh : selamat datang di blog saya. atau apa saja yang menurut sobat layak untuk di tulis di situ. contoh yang saya berikan diatas memuat pesan atau text sebanyak empat tulisan, jika sobat ingin lebih banyak itu bisa dilakukan dengan menambah baris tulisan seperti kode sebelumnya.Untuk kode --> scrollSpeed = 130 . angka "130" merupakan kecepatan dari text berjalan, semakin kecil nilainya semakin cepat text berjalan, dan semakin besar nilainya maka text akan semakin lambat. Silahkan sesuaikan dengan keinginan sobat.
Seperti yang saya katakan di awal artikel bahwa kode yang saya berikan di atas hasil efeknya tidak sama dengan yang ada di blog ini, untuk melihat hasil nyatanya, silahkan sobat klik di sini.

Menyimpan Data di Internet

2009-04-24T22:08:00.000-07:00

Dari pada susah-susah bawa flashdisk kemana mana, belum lagi pas apes flashdisk lupa terbawa pasti kita akan pusing tujuh keliling tidak dapat mengambil data yang sangat kita butuhkan, sekarang ada cara yang lebih gampang untuk menyimpan data kita, pertama kita simpan data kita di flashdisk dan yang kedua untuk antisipasi bila ternyata kita lupa membawa flashdisknya, kita simpan data kita di internet. nah silahkan register disini lalu upload file anda lalu anda sudah bisa download dari mana saja tidak perlu pusing mikirin fashdisk. anda juga dapat memanfaatkan linknya bisa di letakan di blog atau web anda, jadi jika orang lain mau download tinggal buka blog atau web anda

Memasang Gambar di Header Blog

2009-04-15T02:25:00.000-07:00

Kadang kala template standar dari blogger.com tidak menyertakan fasilitas Add Widged pada bagian headernya sehingga kita kesulitan untuk memasang gambar atau widged lainya di bagian atas blog atau biasa di sebut Header. kalau masih bingung tentang Header, itu tuh yang ada tulisan judul blog dan deskripsi tentang blog, contohnya kalau punya saya di bagian yang ada tulisanya Tips Mempercantik Blog.

Nah begini caranya pertama cari kode berikut ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR LIKE (Header)' type='Header'/>
</b:section>
</div>

Ganti kode yang berwarna biru sehingga menjadi seperti ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='YOUR LIKE (Header)' type='Header'/>
</b:section>
</div>

Setelah itu simpan. Untuk maxwidgets nya juga bisa anda ganti menjadi dua atau lebih Widged nya, nah setelah itu seperti biasa masuk ke Tata Letak--->Add Gadged--->HTML/javascript anda posting dahulu gambar di www.photobucket.com lalu copy HTML code nya, lalu paste di HTML/javascript pada bagian content. atau bisa juga anda langsung upload foto dari komputer anda, caranya masuk ke Tata Letak--->Add Gadged--->Gambar lalu upload gambar anda yang ada di komputer anda oke deh, selamat mencoba.

Cara Menampilkan Google Translate

2009-04-12T23:24:00.000-07:00

Ingin supaya blog anda dapat dibaca para blogger mania di seluruh penjuru dunia, gunakan aja Google Translate. program pintar ini mampu meterjemahkan blog anda ke dalam tiga puluh empat bahasa, hebat bukan... belum tahu apa itu google translate kalau mau tau seperti ini gambarnya:

Anda dapat memasang Google Translate ini di blog anda, caranya :

Klik gambar Google Translate di atas, kalo sudah masuk ke sini,
Pilih Tools, kemudian
Pilih bahasa yang anda gunakan di blog anda, misalnya pilih Indonesia
Copy kode yang berada di bawah tulisan "Copy and paste the HTML below to include the gadget on your webpage." kemudian paste di Tata Letak --> Add Gadget --> HTML/javasript terus paste kode tersebut di kolom konten
Simpan.

Membuat Read More Otomatis di Blog

2009-04-10T22:19:00.000-07:00

Tutorial kali ini membahas bagaimana caranya membuat Read more secara otomatis. Selain read morenya muncul secara otomatis hebatnya lagi, fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman saya sebut saja dengan fasilitas image thumbnail.

Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada dua pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image.

Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna biru dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

Kalo sudah tinggal lanjutkan dengan tutorial dibawah.

Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.

Langsung copy paste aja kode dibawah ini:

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini

b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

ilahkan disimpan dan lihat hasilnya :

Keterangan:

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Membuat Menu Drop down dengan CSS

2009-04-10T19:16:00.000-07:00

Bagi anda yang ingin memasang tab menu di bagian headernya, saya sarankan untuk memasang menu drop down ini di blognya. Seperti ini contohnya.Bagaimana cara untuk membuat menu drop down ini? tentu saja banyak cara untuk membuatnya, namun dalam kesempatan ini saya akan menuliskan dengan dua langkah. beginilah caranya :

A. Langkah pertama :

1. Login ke blogger dengan ID anda
2. Setelah berada pada halaman dashboard, klik Layout.
3. Kemudian klik tab edit HTML.
4. aya sarankan kepada anda sebelum mengubah kode template, silahkan di backup dulu. Klik link Download template sepenuhnya.
5. Silahkan lihat ke kode template anda, dan temukan kode berikut : ]]></b:skin>
6. Copy kode di bawah ini, lalu paste di atas kode : ]]></b:skin>

/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_definition2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#menu {list-style-type:none; margin:5px; padding:0;}
#menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;}
#menu li dl {position:absolute; top:0; left:0;padding-bottom:5px;}
#menu li a, #menu li a:visited {text-decoration:none;}
#menu li dd {display:none;}
#menu li a:hover {border:0;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;}
#menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
#menu dl {width: 150px; margin: 0; padding: 0; background: #c9ba65;}
#menu dt {margin:0; padding: 5px 5px 5px 20px; font-size: 1.1em; color: #fff; border-bottom:1px solid #fff; border-top:1px solid #fff;}
#menu .one {background: #827b6b; border-top:5px solid #dca;}
#menu .two {background: #646e4c; border-top:5px solid #bb9;}
#menu .three {background: #a4a88d; border-top:5px solid #eec;}
#menu .four {background: #a29f68; border-top:5px solid #f8f8b8;}
#menu .one dt {background: #b2ab9b;}
#menu .two dt {background: #949e7c;}
#menu .three dt {background: #d4d8bd;}
#menu .four dt {background: #e2dfa8;}
#menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;}
#menu .one dd {border-bottom:1px solid #aaa;}
#menu .two dd {border-bottom:1px solid #e8e8e8;}
#menu .three dd {border-bottom:1px solid #eee;}
#menu .four dd {border-bottom:1px solid #999;}
#menu dd.last {border-bottom:1px solid #fff;}
#menu dt a, #menu dt a:visited {display:block; color:#444;}
#menu dd a, #menu dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 20px; width:125px;}
#menu .one dd a {background:#949e7c; color:#eee;}
#menu .two dd a {background:#d4d8bd; color:#346;}
#menu .three dd a {background:#e2dfa8; color:#654;}
#menu .four dd a {background:#b2ab9b; color:#ff8;}
#menu .one dd a:hover {background: #b2ab9b; color:#345;}
#menu .two dd a:hover {background: #949e7c; color:#543;}
#menu .three dd a:hover {background: #d4d8bd; color:#123;}
#menu .four dd a:hover {background: #e2dfa8; color:#534;}

7. Silahkan lihat ke bagian bawah lagi, lalu temukan kode seperti ini :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='your blog title (Header)' type='Header'/>
</b:section>

8. Ubahlah kode yang saya cetak biru terang, sehingga kodenya menjadi seperti ini :

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='your blog title (Header)' type='Header'/>
</b:section>

Klik tombol Simpan Template. Tunggu beberapa saat sampai template anda selesai di simpan.

B. Langkah kedua :

Klik pada tab elemen Halaman yang berada di bagian Header. Perhatikan gambar gambar Page Element berikut ini

Klik pada Tambahkan sebuah Elemen halaman yang berada di atas elemen header. Perhatikan gambar berikut ini:

Setelah window pop up muncul, klik tombol Tambahkan ke blog untuk HTML/JavaScript.:
Copy kemudian paste kode di bawah ini pada elemen yang muncul tadi :

<ul id="menu">
<li>

<dl class="one">

<dt><a href="../menu/index.html">DEMOS</a></dt>
<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>
<dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd>
<dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd>
<dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd>
<dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd>
<dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd>
<dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd>
<dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd>
<dd class="last"><a href="../menu/em_images.html" title="em size images compared">em sized images</a></dd>
</dl>

</li>
<li>

<dl class="two">
<dt><a href="index.html">MENUS</a></dt>
<dd><a href="spies.html" title="a coded list of spies">spies menu</a></dd>
<dd><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></dd>
<dd><a href="expand.html" title="an enlarging unordered list">enlarging list</a></dd>
<dd><a href="enlarge.html" title="an unordered list with link images">link images</a></dd>
<dd><a href="cross.html" title="non-rectangular links">non-rectangular links</a></dd>
<dd><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></dd>
<dd class="last"><a href="circles.html" title="circular links">circular links</a></dd>
</dl>


</li>
<li>

<dl class="three">
<dt><a href="../layouts/index.html">LAYOUTS</a></dt>
<dd><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd>
<dd><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd>
<dd><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></dd>
<dd><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></dd>
<dd class="last"><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</a></dd>
</dl>

</li>
<li>

<dl class="four">
<dt><a href="../mozilla/index.html">MOZILLA</a></dt>
<dd><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></dd>
<dd><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></dd>
<dd><a href="../mozilla/content.html" title="Using content:">content:</a></dd>
<dd><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></dd>
<dd><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></dd>
<dd><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue made using border art</a></dd>
<dd class="last"><a href="../mozilla/target.html" title="Target Practise">target practise</a></dd>
</dl>


</li>
</ul>

5. Klik tombol Simpan Template
6. Selesai.

Catatan : Jika template anda tidak ada element add Page Element pada bagian header, anda dapat download Template berikut ini yang menggunakan add Page Elememt pada bagian headernya

Menampilkan Seluruh Judul Postingan di Blog

2009-04-08T05:26:00.000-07:00

Buat anda yang ingin menampilkan seluruh judul postingan di Blog anda atau yang sering disebut dengan Daftar isi, maka cara berikut bisa anda lakukan. Tetapi jika anda masih belum paham maksud tulisan saya, maka lihat dulu gambar berikut, atau bisa juga lihat contohnya di samping kanan atas blog saya ini:

sudah paham akan bikin apa sekarang. Jika sudah paham langsung saja copy dan paste kode berikut di Kustomisasi ---> Tata Letak ---> Tambah Gadget --->HTML/JavaScript dan paste pada bagian Content.

<div style="border: 0px solid rgb(51, 255, 51); overflow: auto; height: 350px;" margin="5px" ;>
<script style="text/javascript" src="http://sites.google.com/site/masfaysblog/Home/codedaftarisi.txt"></script><script style="text/javascript">var numposts = 1000;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://masnyaman.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>

Lalu ganti http://masnyaman.blogspot.com dengan alamat blog anda, Selamat Mencoba.

Cara Membuat Dropdown Menu

2009-04-08T00:00:00.000-07:00

Jika anda masih bingung apa itu Dropdown Menu maka lihatlah contoh di bawan ini. Dropdown menu contohnya seperti di bawah ini, kamu bisa tambahkan menu sampai juta jutaan link.Sebagai contoh saya cuma pasang dua link saja

Nha udah tahu kan? Dengan dropdown menu kita bisa menghemat space atau ruang di blog kita, karena dengan ukuran yang kecil seperti itu bisa menyimpan link dan text yang banyak.

Gini nih caranya :

Login ke blogger, trus masuk ke menu "Page Element" trus pilih Add page elements --> HTML/JavaScript. Kemudian masukkan script berikut ini di kocat "Content"

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>

Text yang berwarna biru muda adalah link. ganti text Link 1 dan Link 2 tersebut dengan link2 kamu.caranya buka blog kamu, nah di judul postingan kamu klik kanan pointer mouse, kemudian copy link location dan kemudian paste di Link 1 dan Link 2 .Text yang berwarna kuning adalah tulisan yang ditampilkan. Itu juga harus km ganti.

Contohnya seperti ini :

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="http://trik-blog-nyaman.blogspot.com/2009/04/cara-membuat-menu-vertikal.html"> Cara Membuat Menu Vertikal </option>
<option value="http://trik-blog-nyaman.blogspot.com/2009/04/cara-menampilkan-posting-baru.html"> Cara Menampilkan Posting Baru </option>
</select>

maka hasilnya akan seperti ini :

untuk menambahkan menu lagi, tambahkan kode seperti ini :

<option value="Links 2">Text 2</option>

sebelum kode </select>

Link dalam dropdown menu di atas jika di klik akan membuka link di halaman yang sama. Ini cocok untuk Arsip dan link-link yang masih berhubungan dengan blog tsb.

Ada satu tipe lagi yang jika diklik linknya maka akan membuka window baru tanpa menutup blog kamu. Yang ini cocok untu Blogroll atau Friend link.
Cara mambuatnya seperti diatas tapi ganti kode berikut

<select onChange="document.location.href=this.options[this.selectedIndex].value;">

ganti dengan kode ini yang merupakan kode paling atas dari menu ini :

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">

hasilnya akan seperti ini :

Complete deh...

Cara Menampilkan Posting Baru

2009-04-07T01:05:00.000-07:00

Kamu pingin nampilin postingan terbaru (Recent Post) kamu di side bar?
Kalo pingin, beginilah caranya :

1. Login to Blogger kemuduan pilih "Layout"
2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu).
3. Copy kode berikut ini dan taruh dalam kotak "content".

<script src="http://www.geocities.com/uddin_81/recent-post.js"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://YOURBLOGNAME.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>

4. Ganti YOURBLOGNAME dengan nama blog kamu.
5. Angka "10" menunjukkan jumlah "Recent Post" yang ditampilkan, kamu bisa menggantinya
6. Terus Simpan.

Cara Membuat Menu Vertikal

2009-04-06T19:35:00.000-07:00

Sebelumnya kita pernah membahas tentang membuat menu horizontal, nha sekarang mari kita mencoba membuat menu vertikal. Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal . Contohnya seperti gambar dibawah ini:

Beginilah cara membuatnya :
1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh.

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/blue2.gif');
}
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

Untuk memilih warna menu, perhatikan kode2 yang berwarna biru muda (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :

.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;

dan

.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/red.gif');

Pilihan Warna menu vertikal :

blue1.gif
blue2.gif
green1.gif
green2.gif
red1.gif
red2.gif
pink1.gif
pink2.gif
black1.gif
black2.gif

3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-blog-nyaman.blogspot.com">Trik Blog</a></li>
<li><a href="http://trik-nyaman.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>

Kode yang berwarna biru muda adalah linknya dan yg warna kuning adalah teks yang ditampilkan.

Membuat Menu Windows Eksplorer

2009-04-06T19:00:00.000-07:00

Apa itu menu Dtree (D-Tree) ? itu lho menu yang memiliki struktur seperti pohon, yang punya cabang-cabang itu lho, Seperti kalo kita membuka Windows Explorer. Menu yang seperti gambar dibawah ini atau seperti contoh ini.

Menu Dtree ini sangat berguna jika kamu memiliki postingan yang buanyak, karena dengan menggunakan menu Dtree maka akan bisa menghemat space/ruang yang ada di blogmu. Nah kamu pingin tahu cara membuatnya?

Beginilah cara membuatnya :

1. Login to Blogger, trus pilih "Layout --> Edit HTML"
2. Taruh kode berikut ini diatas kode <head>

<linkrel="StyleSheet" href="http://www.geocities.com/uddin_81/dtree.css"
type="text/css" />
<scripttype="text/javascript" src="http://www.geocities.com/uddin_81/dtree.js"></script>

3. Trus Klik Tombol "Save

4. Setelah itu copy kode berikut ini dan pasang di sidebar kamu, udah tahu tho cara pasangnya? itu lho di menu "Page Element" trus klik "Add a Gadget --> HTML/Javascript". Inolah script yang harus kamu copy di sidebar kamu.

<div class="dtree">
<script type="text/javascript">

</script>
</div>

berikut ini keteranganya:
- Ganti tulisan "link.html" dengan link kamu (judul posting kamu).
- Angka yang pertama harus unik tidak boleh ada yang sama (d.add(1,0,’Node 1’,’link.html’);
- Angka yang kedua merupakan cabang dari angka pertama (perhatikan angka-angka yang memiliki warna sama).
- Kamu bisa mengganti icon-iconnya dengan icon kamu sendiri, contoh scriptnya akan seperti ini:

d.add(10,0,’Profile’,’link.html’,’’,’’,’http://kendhin.890m.com/dtree/trash');

Ganti text "http://kendhin.890m.com/dtree/trash.gif" dengan alamat gambar kamu.

Cara Mengedit HTML Blogspot

2009-04-06T02:06:00.000-07:00

Jika kita mengotak-atik atau mengedit HTML blog kadang2 akan mengalami kesulitan, apalagi bagi yang masih agak pemula. Entah itu gak bisa nemu kode yang mau diedit lah, gak bisa disimpan karena error lah, Ada pesen error yang gak jelas lah, dan lah-lah yang lain, ya to...??? Nha trik dan tips kali ini akan mencoba gimana cara untuk mengatasi atau setidaknya mengurangi masalah "lah-lah" yang kadang2 atau sering terjadi tersebut.
Berikut ini beberapa tips untuk edit HTML bogger:

1. Backup Template
Membackup template ini penting karena jika terjadi hal-hal yang tidak dinginkan, misalnya blog jadi rusak maka kita bisa membuatnya seperti sediakala (sebelum rusak) jika kita sebelumnya sudah membackup template. Cara membackup template ini mudah. Cukup klik pada link "Download Full Template" lalu simpan file template di komputer kita. Kalo terjadi kesalahan yang tidak bisa kita atasi, kita tinggal upload aja file template tersebut.

2. Memberi Tanda Centang pada Kotak "Expand Widget Template"
Ini yang kadang2 dilupakan para "editor". Kalau kotak "Expand Widget Templates" tidak dicentang maka kode2 yang dicari kemungkinan tidak ditemukan. Tapi kadang2 hal ini tidak perlu dilakukan tergantung dari petunjuk tutorialnya. Makanya perhatikan baik2 tutorialnya kalo mau Edit HTML blog.

3. Tips Mempermudah Pencarian
Untuk mempermudah pencarian kode yaitu dengan meng-copy dulu kode yang mau dicari kemudian tekan "Ctrl+f" lalu masukkan kode yang dicopy tadi kedalam kotak yg muncul. Kalo misalkan kode yang dicari tidak muncul maka cobalah mencari sebagian dari kode tersebut. Misal mau mencari kode <p><data:post.body/></p> jika tidak ketemu maka cb carilah sebagiannya atau seperti ini data:post.body kalau sudah ketemu maka klik tombol next untuk melihat apakah ada kode lain yang sama untuk memastikan kode yang dikehendaki.tips ini paling mudah jika kita menggunakan browser Mozilla Firefox".

Membuat Kata dan Kalimat Berkedip

2009-04-06T00:06:00.000-07:00

Klo kita sering liat web atau blog yang ditampilannya terdapat kata atau kalimat yg berkelap kelip misalnya seperti kata ini yg sedang kelap kelip, mungkin buat yang belum tau, pasti kita sedikit heran..gimana y caranya..?

dulu juga sy kaya gtu, bingung banget, kq bisa y...tp ternyata setelah ditelusuri lebih lanjut..gampang banget, kita cuma tinggal sisipkan aja kode HTML di dalam kata atau kalimat yang mau kita kelap kelipkan..

kode HTML nya seperti ini.....

<blink>(Kata yang ingin anda kelap kelipkan)</blink>

contoh kalimat yg mau kita kelap kelipkan :

"ternyata gampang sekali y untuk mengkelap kelipkan kata itu"

caranya kita tinggal sisipkan aja kode HTML diantara kalimat tersebut menjadi :

<blink>"ternyata gampang sekali y untuk mengkelap kelipkan kata itu"</blink>

maka hasilnya akan seperti ini :

"ternyata gampang sekali y untuk mengkelap kelipkan kata itu"

Mudah Kan..
Jangan lupa, trik ini cuma bisa kita pake buat yang mendukung HTML aja, contohnya klo di blogger, masuk ke "ADD GADGET"---->"HTML/ Java Script". klo yang ngga ngedukung HTML sih jangan digunakan not mach...

Cara Membuat Menu Tab View

2009-04-05T23:29:00.000-07:00

Sebenarnya dah dari dulu pingin posting tentang itu, tp karena yg dulu cara pasanganya sulit jadi belum bisa aku jelaskan. Trus akhirnya aku menemukan metode baru dalam pembuatannya. Cara yang ini mungkin mirip dengan punyanya o-om, tp scriptnya agak beda.

Tab view itu contohnya seperti ini:

Beginilah cara untuk membuat menu tab view tersebut
1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]></b:skin>

3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* 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: 3px 5px;
}

4. Perhatikan text-text yang berwarna biru muda, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode2 warna silahkan lihat DISINI
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>

<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.

Cara Ganti Template Blog

2009-04-05T21:50:00.000-07:00

Pertama kamu harus membackup dulu tempalte kamu jika template baru kamu tidak berhasil diinstall, caranya masuk ke menu "Layout --> Edit HTML", trus klik link bertuliskan "Download Full Template" terus simpan file yang diberikan.

Kedua yaitu membackup elemen-elemen atau widget-widget yang sudah pernah kamu pasang, caranya gini, Masuk ke menu "Page Element", disitu kan banyak tuh element-element yang udah kamu pasang trus dibawahnya kan ada link bertiliskan "edit" klik link-link tersebut satu persatu, copy isi dari elemen itu dan taruh dalam notepad. Kalo kamu nanti dah ganti template dan mau memasang elemen-elemen tersebut tinggal copy dari notepad terus pasang di "add page elements".

Untuk mengganti template pertama klik link ini, kemudian download template blog yang kamu inginkan. nah setelah selesai download, ikuti langgkah berikut ini:

ekstrak dahulu file xml nya
login ke blog anda
masuk ke Dasbor
Tata letak
Edit HTML
Nah disitukan ada tombol Browse, cari file xml. yang sudah anda ekstraksi
kemudian klik Unggah atau Upload
klik dahulu kolom Prevew atau Pratinjau untuk melihat hasilnya sebelum di simpan
terakhir klik simpan template atau save template

Selesai deh.....

Cara Membuat Kotak Pesan di Blog

2009-04-05T21:39:00.000-07:00

Kotak ngoceh atau istilah lainnya shout box, Say Box, Tag Board, dan Chatter Box adalah suatu kotak yang berfungsi untuk mengirimkan pesan-pesan pendek, namun bisa juga berfungsi sebagai tempat ngobrol (chatting). Dengan shoutbox, kita juga bisa mempromosikan blog kita, misalnya nih, kita datangi blog orang yang menyediakan kotak ini kemudian kita kasih komentar atau cuma sekedar salam di shoutbox mereka, lalu yang punya blog akan melihat di shoutbox, biasanya meraka akan balas mengunjungi blog kita. Nha gitu ceritannya. Biasanya kotak ngoceh diselipkan kedalam halaman web/blog dengan bahasa java Script. Bagi kamu yang jago pemrograman java script mungkin bisa membuatnya sendiri dengan membuat kode-kode yang memusingkan kepala. Namun buat kamu yang nggak jago nggak usah kuatir karena sekarang ini banyak situs internet yang menyediakan layanan ini, salah satunya yaitu Shoutmix . Caranya adalah sebagai berikut :

1. Buka situs Shoutmix Kamu harus mendaftar di situs tersebut, cara daftarnya gampang kok.
2. Jika pendaftarannya berhasil kamu langsung disuruh milih type shoutbox yang disediakan, terserah kamu milih bentuknya yang gimana. Klik tombol Continue
3. Setelah itu kamu akan mendapat ucapan "Terima Kasih" lalu klik link Go to My Control Panel Now
4. Disitu kamu bisa mensetting terlebih dahulu shoutbox kamu, misalnya Style & Color, Date & Time, dan lain-lain.
5. Jika sudah selesai klik menu Get Codes
6. Jika kamu pingin menaruh shoutbox di blog kamu pilih "Place Shoutbox on Webpage"
7. Atur lebar dan tinggi shoutbox di kolom widht dan hight
8. Kemudian Copy kode yang ada di dalam kotak "generated Codes"
9. Login ke blogger.com lalu pilih Layout kemudian Add Page Elements
11. Tambahkan element HTML/Javascript.
12. Paste Kode yang telah kamu copy dari shoutbox.com tadi di kotak "Content" lalu simpan.
13. Jadi deh.....

Cara Mengganti Icon Pada Address Bar

2009-04-05T21:28:00.000-07:00

Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar atau icon pada address bar (kotak untuk mengetikkan alamat web). Dan jika kita punya blog di Blogspot maka icon default yang akan tampil adalah gambar seperti ini :
Bagi kamu yang tidak puas dengan icon/gambar tersebut, kamu bisa menggantinya dengan gambar sesuai dengan keinginanmu. caranya sangat mudah, yaitu dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira2 24x42 pixel sampai 32x32 pixel (sebenarnya ukurannya bebas sih, tapi biar filenya kecil dan proses membukanya cepat). Setelah itu .....

masuk ke "Layout --> Edit HTML" trus tempatkan script berikut sebelum kode </head>

<link href='http://i700.photobucket.com/albums/ww6/mandalika3/sonictrik.gif' rel='SHORTCUT ICON'/>

ganti huruf yang dicetak tebal dengan lokasi gambar dimana kamu menyimpannya. Kamu bisa menyimpan gambarmu di 000webhost atau bisa juga di photobucket dan juga di imageshack atau kalo kamu tidak mau pusing di bawah ini ada beberapa contoh icon/gambar beserta dengan linknya.

http://img87.imageshack.us/img87/5862/image1an1.gif
http://img110.imageshack.us/img110/6218/image2ie0.gif
http://img98.imageshack.us/img98/9617/image3cr0.gif
http://img134.imageshack.us/img134/633/image4hx4.gif
http://img139.imageshack.us/img139/83/image5oa7.gif
http://img509.imageshack.us/img509/6449/image6fu0.gif
http://img527.imageshack.us/img527/6543/image7go9.gif
http://img507.imageshack.us/img507/5774/image8wn8.gif
http://img150.imageshack.us/img150/5784/image9qo1.gif
http://img404.imageshack.us/img404/1214/image10vr1.gif
http://img412.imageshack.us/img412/3808/image11pc0.gif
http://img100.imageshack.us/img100/4658/image12du2.gif
http://img132.imageshack.us/img132/4733/image13lj1.gif
http://img145.imageshack.us/img145/7793/image14zg9.gif
http://img412.imageshack.us/img412/4403/image15jc7.gif
http://img264.imageshack.us/img264/7575/image16kn8.gif

Ganti Domain blogspot.com menjadi co.cc

2009-04-05T21:00:00.000-07:00

Di postingan sebelumnya mengenai penjelasan tentang domain co.cc, disana sy hanya dijelaskan mengenaii apa itu domain co.cc dan bagaimana cara mendapatkannnya. Permasalahannya, klo kita udah punya domainnya, lalu diapain..?

Untuk memasukkan domain ini ke dalam blogger atau blogspot, kita perlu sedikit settingan baik itu di domainnya maupun di blogger. Karna setelah kita setting domain co.cc ini di blogger, pihak blogger tidak akan mengapprove permintaan kita apabila data yang diperoleh oleh pihak bloggernya tidak valid.

Bagaimana cara mensetting domain ini agar blog kita yang dulunya,….
www.namablog.blogspot.com menjadi www.namablog.co.cc

sebelum mengikuti langkah di bawah ini daftarkan dahulu domain anda disini

* pertama check dan daftarkan alamat domain yg kamu inginkan di menu "Getting A Domain" lalu isikan alamat domain yang kamu inginkan di kolom yang disediakan, apabila nama domain kamu berhasil belum pernah dipake ma orang lain..segera lanjutkan ke "Continue to registration". lalu "Set Up"

* pada kolom "Set Up" kamu pilih yang "Zone Record", nanti di "Zone Record" terdapat 4 kolom yang harus kamu isi…

* Untuk kolom 1 yaitu “Host” kamu isi dengan alamat domain yang tadi kamu daftarkan misalnya “www.namablog.co.cc”. dan jangan lupa harus ditambahkan “www”.

* Untuk kolom 2 yaitu “TTL” jangan disentuh(he3..), biarkan saja apa adanya..
* Untuk kolom 3 yaitu “Type” kamu pilih saja yang “CNAME”..
* dan untuk kolom yg terakhir yaitu “Value” kamu isikan saja “ghs.google.com”
* klo sudah, "Klik Set Up"..
Biar g bingung, coba liat gambar di bawah ini :

Tugas di domainnya dah beres..nah sekarang selanjutnya tugas kita yaitu mensinergikan antara blogger dengan domain co.cc agar permintaan kita bisa diproses, caranya yaitu:

* Log in dulu di blogger

* Masuk ke menu “Setting / Pengaturan” lalu pilih “Publishing / Publikasikan”.

* Kemudian kamu pilih “Switch to : Custom Domain / Berpindah Ke : Domain Kustom”.

* Klo sudah, kamu pilih yang “Already own a domain? Switch to advanced settings / Beralih Ke Pengaturan Lanjut”.

* Terakhir, isikan alamat domain kamu yang co.cc di kotak “Your Domain / Domain Anda”..dan jangan lupa alamat depannya pake “www”.

* Untuk dibawahnya yang "Gunakan Host File Yang Hilang" kamu biarkan saja..km langsung ja ke "Simpan Pengaturan"

* Selesai

Udah bisa kan,.

Tapi sabar dulu..proses aktivasi domain baru kamu akan diproses dalam beberapa jam atau bahkan bisa nyampe sehari lebih. Jadi klo saran dari sy, ketika kamu setting domain ini, lakukanlah pada saat sebelum tidur..karena, ketika proses aktivasi..blog kamu tidak akan bisa diakses karena masih dalam proses. Klo sebelum tidur kan nanti pas bangunnya..pagi2 kamu dah bisa akses blog kamu pake domain yang baru ini…g usah cape2 nunggu..dan yang penting, klo blog kamu dah punya traffic..kasian kan pengunjungnya g bisa akses blog kamu..he3.

Klo dah berhasil..blog kamu akan tetap bisa diakses pake alamat yang dulu Cuma akan langsung dialihkan oleh pihak bloggernya ke alamat domain yang baru tadi.

Membuat Tab Menu dengan Dropdown

2009-04-05T20:40:00.000-07:00

Sebenernya tips ini masih sekedar coba-coba, tapi gpp..mudah-mudahan bisa bermanfaat buat kalian semua, he.
Klo kalian liat gambar disamping, mungkin maksudnya dah tau y.. yaitu kita buat yang namanya membuat "Tab View Dengan Dropdown" artinya jika kita pilih salah satu menu, maka akan muncul turunannya. klo diliat dari gambar di samping, tab menu utamanya adalah "DAERAH" tapi klo kita pilih menu daerah tersebut maka akan muncul turunannya seperti "JABODETABEK" " BANDUNG" dll..

Langsung liat ja deh contohnya disini.. oke,

Fungsi klo kita memakai trik ini yaitu biar lebih simple dan informasi yg kita kasih biar bisa dikelompokkan. kebayang kan klo di tab menu sy tampilin semua kota berjejer ke samping, kan g lucu..iya g..makanya sy pake trik dropdown ini..

pasti pengen kan pake trik ini juga, oke deh..gini tok cara buatnya :

1. Log in di blogger lalu masuk "Layout"---->"Edit HTML" lalu jangan lupa centang kotak "Expands Template Widgets" dan klo bisa back up dulu templatenya biar g terjadi sesuatu yang ngga diinginkan..
2. Cari kode ini ]]></b:skin> lalu setelah itu simpan kode di bawah ini tepat diatas kode tadi :

/* Dropdown Menus Trik Yuwie */
#page-bar li {
float: left;
margin: 0px;
padding: 0px;
}

#page-bar li li {
float: left;
margin: 0px;
padding: 0px;
width: 122px;
text-transform:none;
}

#page-bar li li a, #page-bar li li a:link, #page-bar li li a:visited {
background: #2B2B2B;
width: 122px;
float: none;
margin: 0px;
padding: 5px 10px 5px 18px;
border-top: 1px solid #C0C0C0;
}

#page-bar li li a:hover, #page-bar li li a:active {
background: #666666;
padding: 5px 10px 5px 18px;
}

#page-bar li ul {
position: absolute;
width: 10em;
left: -999em;
}

#page-bar li:hover ul {
left: auto;
display: block;
}

#page-bar li:hover ul, #page-bar li.sfhover ul {
left: auto;
}

3. Cari kode tab menu yang ada di blog kamu, Misal sy ambil untuk contoh yang gambar di atas :

<ul class='left clearfloat' id='page-bar'>
<li><a href='http://lowongankerjaku88.blogspot.com'>Daerah</a></li>
</ul>
kode diatas adalah "Menu Utamanya"..
Nah, untuk membuat turunannya, yang harus kamu lakukan terlebih dahulu adalah menyiapkan link turunannya dengan menggunakan class='cat-item' contoh :

<li class='cat-item'><a href='http://lowongankerjaku88.blogspot.com/search/label/Jabodetabek'>Jabodetabek</a></li>

"Klo kamu pengen turunannya lebih dari satu maka kamu siapkan semua link turunannya, mau satu atau lebih dari satu atau berapa pun..pokonya terserah kamu..yang penting siapin dulu aja link turunannya"

<li><a href='http://lowongankerjaku88.blogspot.com'>Daerah</a>
<ul class='children'>
<li class='cat-item'><a href='http://lowongankerjaku88.blogspot.com/search/label/Jabodetabek'>Jabodetabek</a></li>
</ul></li>
Klo link turunannya lebih dari satu, maka tinggal tambahkan aja menjadi :

<li><a href='http://lowongankerjaku88.blogspot.com'>Daerah</a>
<ul class='children'>
<li class='cat-item'><a href='http://lowongankerjaku88.blogspot.com/search/label/Jabodetabek'>Jabodetabek</a></li>
<li class='cat-item'><a href='alamat link'>Tambahan Turunan</a></li>
</ul></li>

Keterangan :

- Warna hitam adalah kode dari "Menu Utamanya"
- Warna merah adalah untuk membuat menu menjadi dropdown
- Warna Biru adalah kode dari "Link Turunannya"
- Warna Merah tua adalah kode tambahan jika kamu ingin memasukkan turunan lebih dari satu
- Khusus Warna Orange klo kamu perhatikan itu letaknya hanya dipindahkan saja, liat di "Menu Utama" lalu menjadi disimpan di bagian akhir.
Bingung y kebanyakan warna..he3.

6. "Udah deh" tinggal di "SIMPAN TEMPLATE"

coba liat hasilnya, udah ada belum turunannya..he3..

"Trik ini hanya akan berguna buat kamu yang sudah memakai "Tab Menu" di blognya, jika belum memakai tab menu, maka trik ini g akan bisa dipakai"

Cara Menghilangkan Navbar

2009-04-05T19:23:00.000-07:00

Navbar adalah fasilitas yang dimiliki oleh Blogger/blogspot, bentuknya berupa kotak kecil memanjang kesamping yang letaknya berada di bagian paling atas dari blog yang fungsinya antara lain untuk mulai melakukan Sign In/out atau bisa juga membuat Blog baru. Navigation Bar juga bisa digunakan untuk melaporkan kecurangan atau tindak kejahatan weblog yang dilakukan oleh seorang blogger, misalnya kontent blognya yang melanggar TOS atau hal-hal yang dianggap merugikan orang lain.

Namun ada beberapa blogger yang merasa akan lebih enak jika melihat tampilan blognya dalam keadaan bersih tanpa harus ada bagian mencolok di bagian atas blognya sendiri (NavBar). Karena itu, kadang para blogger menghapus NavBar tersebut. Pertanyaannya adalah: Apa tidak melanggar Term of Service (TOS) dari Blogger.com?
Sejauh ini, banyak blogger yang telah menghilangkan Navbar mereka dan tidak juga mendapat teguran dari blogger. Artinya, bisa dilakukan. Toh di TOS Blogger sendiri juga tidak ada aturan yang cukup detail tentang hal ini.

Nah, bagaimana menghilangkan Navigation Bar?
Ada beberapa penyedia template yang memang sudah tidak ada NavBar-nya. Namun bagi kamu yang memakai template yang masih ada NavBarnya dan ingin menghilangkannya maka inilah caranya.

1. Kamu harus Login dulu di Blogger.com / Blogspot.com
2. Trus Pilih Layout --> Edit HTML
3. Copy dan paste script berikut ke dalam tag head

#navbar-iframe {
display: none !important;
}

contohnya sebagai berikut :
-----------------------------------------------
Blogger Template Style
Name: Son of Moto (Mean Green Blogging Machine variation)
Designer: Jeffrey Zeldman
URL: www.zeldman.com
Date: 23 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================

Cara Membuat Tab Menu di Blog Kamu

2009-04-05T18:59:00.000-07:00

Ada yang pingin buat menu horizontal tapi nggak tahu caranya?
Gini nih caranya, eh tapi tunggu dulu, apasih menu horizontal itu? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping). Kayak gini ini lho:

1. Login ke blogger terus pilih Layout --> Edit HTML, trus beri tanda centang pada kotak "Expand Widget Templates". jangan lupa template di backup dulu.

2. Cari script seperti ini ]]></b:skin> kalo udah ketemu copy script dibawah
ini dan taruh diatasnya
/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /* Garis Bawah*/
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Posisi Menu*/
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 yang dicetak tebal biru muda bisa kamu ganti dengan gambar-gambar atau teks di bawah ini:
blackleft.gif---> blackright.gif
greenleft.gif--->greenright.gif
unguleft.gif---->unguright.gif
redleft.gif ----->redright.gif
unguleft.gif---->unguright.gif
yellowleft.gif -->yellowright.gif
blueleft.gif----->blueright.gif
whiteleft.gif----> whiteright.gif

Misalnya, jika kamu pilih yang warna merah maka scriptnya menjadi seperti ini;
background: url("http://kendhin.890m.com/menu/redleft.gif") no-repeat left top;
background: url("http://kendhin.890m.com/menu/redright.gif") no-repeat right top;

Kalo sudah selesai mari kita lanjutkan, sampai angka berapa tadi? oh ya sampai angka ketiga ya.
3. Copy script berikut ini

<div id="tabshori">
<ul>
<li><a href="http://trik-tips.blogspot.com"><span>Home</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >

4. Ganti http://trik-tips.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).
Kemudian text yang dicetak tebal warna kuning bisa kamu ganti dengan text yang kamu suka. Text tersebut adalah text yang muncul di tombol/menu.
5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu contoh memasangnya yaitu begini
cari kode berikut ini :
<div id="content-wrapper">

Kalo udah ketemu copy script yang tadi diatasnya
6. Simpan hasil pengeditan.

Cara Membuat Read More

2009-04-05T18:23:00.000-07:00

Biasanya postingan terbaru akan ditampilkan dihalaman utama blog. Namun jika postingan kamu terlalu panjang maka hal tersebut akan membuat penuh halaman utama. Jika kamu ingin supaya postingan kamu yang ditampilkan dihalaman utama cuma abstraksinya saja kemudian ada sebuah link Read More / Baca Selengkapnya untuk melihat selengkapnya maka ikutilah langkah-langkah berikut :

1. Buka menu Layout kemudian pilih Edit HTML.
2. Kasih tanda cek (centang) pada cekbox "expand widget template"
3. Cari kode berikut di Template blog kamu (tempatnya kira-kira pada 1/4 bagian bawah kode hmtl) :
<p><data:post.body/></p>

4. Kalau sudah ketemu, Ganti kode kode tersebut sehingga menjadi seperti ini:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Read More......</a>
</b:if>

Tulisan "Read More....." itu bisa kamu rubah, misalnya jadi "Baca Selengkapnya".

5. Simpan hasil pengeditan.
6. Kemudian pilih menu Setting lalu pilih Formatting
7. Pada kotak Post Template isikan kode berikut:

<span class="fullpost">

</span>

8. Kemudian Simpan.
9. Ketika memposting, kan disana ada 2 tab pilihan tuh, yang "Compose" dan "Edit Html", Nha km pilih Yang "Edit HTML", Maka secara otomatis akan tampak kode seperti berikut :

<span class="fullpost">

</span>

10. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalama utama (sebelum tulisan "Redmore") diatas kode ini :<span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span class="fullpost"> dan </span>
11. Ini yang paling penting diantara semua proses diatas, jika belum berhasil lihat cara postingnya di klik disini Atau download cara postingnya disini
Selamat Mencoba...