Tips dan Trik Blogger

Menambah Animasi di sudut blog

2008-09-24T21:52:00.001+07:00

saat aku lagi cari-cari blog, tiba-tiba aku melihat ada yang beda dengan blog http://novel-bloggerholic.blogspot.com. ternyata ada "animasi" di sudut blognya. aku telusuri artikelnya, dan akhirnya ketemu juga cara masang kodenya.

Gini, gimana cara membuat "animasi" itu selalu 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 "animasi" itu apa? "animasi" 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 jin aladin (pojok kiri bawah). Nah, 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 ]]> kalo dah ketemu taru kode berikut ini di atasnya.

#trik_pojok {
position:fixed;_position:absolute;bottom:0px; right: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 "buttom", jika pingin di posisi atas bisa diganti dengan "top".

4. Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode

http://novel-bloggerholic.blogspot.com">
http://www.geocities.com/op3l_scorpio/avatar_bloggerHolic.gif" border="0" />

"http://novel-bloggerholic.blogspot.com" adalah link. ganti dengan link kamu.
"http://www.geocities.com/op3l_scorpio/avatar_bloggerHolic.gif" adalah lokasi gambarmu. ganti dengan lokasi gambar kamu.

5. Jika kamu ingin 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.

Memberikan efek highlight pada kode postingan

2008-09-23T13:53:00.003+07:00

Memberikan Highlight untuk script atau kode pada postingan akan lebih memperjelas pembaca. Contohnya bisa kamu lihat pada blogku ini. Setiap kali ada script/kode maka akan selalu ada highlight (kotak) yg akan membedakan dengan tulisan yg lain. Nha kamu mau tahu cara pembuatamnya?
Gini nih caranya :
1. Login ke blogger lalu pilih Layout-->Edit HTML

2. Kemudian copy kode dibawah ini lalu pasang di Script CSS kamu atau pasang sebelum kode ]]></b:skin>

.alert { background: #DDE4FF;
text-align: left;
padding: 5px 5px 5px 5px;
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;}

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

3. Kalau sudah kemudian Simpan.

Cara Posting
Supaya kode/scriptnya nanti bisa ada kotak highlight-nya maka untuk memposting harus pake cara2 tersendiri. Yaitu dengan menambahkan kode ini

sebelum kode/script yg akan diberi highlight. kemudian ditambahkan kode

diakhir script/Kode.

Dah gitu aja, gampang kan
Artikel ini dikutip dari http://trik-tips.blogspot.com/

Menambah Animasi di sudut blog

2008-09-23T12:25:00.015+07:00

saat aku lagi cari-cari blog, tiba-tiba aku melihat ada yang beda dengan blog http://trik-tips.blogspot.com. ternyata ada "animasi" di sudut blognya. aku telusuri artikelnya, dan akhirnya ketemu juga cara masang kodenya.

Gini, gimana cara membuat "animasi" itu selalu 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 "animasi" itu apa? "animasi" 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 sinchan lagi ngucapin Assalamu'alaikum (pojok kiri bawah). Nah, 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; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

<div id="trik_pojok">
<a href="http://belajar-trik-blogger.blogspot.com">
<img src="http://www.geocities.com/op3l_scorpio/logo-tips-trik-blog.jpg" border="0" /></a>
</div>

"http://belajar-trik-blogger.blogspot.com" adalah link. ganti dengan link kamu.
"http://www.geocities.com/op3l_scorpio/logo-tips-trik-blog.jpg" adalah lokasi gambarmu. ganti dengan lokasi gambar kamu.

5. Jika kamu ingin 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.

Sekilas Tentang Blog

2008-09-22T22:11:00.001+07:00

Sudah merupakan hal yang biasa jika saya bertanya tentang blog. Tetapi apa salahnya jika kita tahu awal mula diciptakannya blog.

Penggunaan istilah “weblog” pertama kali digunakan oleh John Berger pada tahun 1997. Pada bulan Mei 1999, Peter Merholz mengubah nama itu tetapi tetap menggunakan karakter yang sama. Dia mengubahnya menjadi “we blog”. Dia juga yang memperkenalkan kata “blog”. Setelah itu, kata ini menjadi kata dunia yang diterima oleh masyarakat global.

Salah satu situs blogging yang pertama adalah Xanga. Xanga memiliki 100 orang bloggers pada tahun 1997, yang secara mengejutkan berubah menjadi 50 juta di akhir tahun 2005. Orang-orang mulai menggunakan blog secara global di tahun 1999. Blogging mulai menular di mana-mana. Evan Williams dan Meg Hourihan dari Pyra Labs, membuat alat blog mereka sendiri yang bernama “Blogger”.

Dengan semua orang dapat memulai blogger hanya dalam hitungan menit. Keseluruhan system blogger ini gratis dan sangat mengejutkan. Secara mengejutkan pula, Google membeli jasa Blogger ini di tahun 2004. Blogger masih tetap gratis, tetapi di bawah nama Google. Kata-kata “weblog”, “weblogging”, dan “webblogger” telah di masukkan ke dalam Oxford Dictionary pada bulan Maret 2003. Ini menandakan keseriusan dunia akan suatu kata yang bernama “blog”

Jika ada tanggapan atau kritik silahkan mengirimkan komentar.

Menambah Widget Alexa di Blog

2008-09-21T22:39:00.010+07:00

Kata "alexa" mungkin sudah sering anda dengar. Sebenarnya apa itu alexa? Kalau menurut mas Vavai dalam artikelnya Tips Meningkatkan rangking alexa di blog, yaitu :

Alexa adalah website yang menjadi bagian dari Amazone.com dan menyediakan informasi traffic dari mengenai suatu website. Alexa dapat dijadikan gambaran mengenai jumlah pengunjung yang mendatangi suatu blog dan terekam oleh Alexa.

Lebih lanjut Mas Vavai juga menyebutkan kalau beberapa situs seperti ReviewMe,Text Link Ads, AdBrite, Sponsored Review menjadikan alexa untuk mengetahui data-data dari publisher. Semakin tinggi ranking di Alexa, situs-situs tadi lebih percaya untuk meng-approve publishernya.

Ada beberapa faktor yang dapat meningkatkan ranking di Alexa, yaitu dengan cara memasang widget alexa di blog. Sampai saat alhamdulillah saya mendapat peringkat 9 dari alexa

Langkah-langkahnya:

1. Login ke alexa.com
2. Pada menu Developer's Corner pilih Widgets, maka akan tampil seperti gambar berikut:

Ada 3 pilihan yaitu:
Button (120 x 95 )
Vertical Banner ( 120 x 240 )
Banner ( 468 x 60 )

3. Ketikkan URL dari blog anda, lalu klik Build Widget, maka akan muncul seperti gambar berikut:

Copy/paste code html tersebut kedalam blog anda (sebelumnya tentukan dulu dimana widget ini akan dipasang, mis: sidebar)

4. Selesai

Setelah selesai pasang dengan widget ini diblog anda, harap kasi komentar ya.
Semoga berhasil.

Mengganti Favicon di Blog

2008-09-21T07:05:00.019+07:00

Apa itu Favicon ?
Favicon adalah kependekan dari favorite icon, yang sering dikenal sebagai website icon. Berfungsi sebagai identitas web yang ditampilkan pada Address bar web browser. Favicon ini muncul pada daftar bookmark atau favorite browser pengguna saat di save bookmark. Pada browser firefox dan IE 7 favicon secara otomatis pada URL bar browser muncul ketika kita berkunjung ke suatu situs.

cara memasang di blog

kunjungi directori favicon di favicon.cc
lalu pilih create jika anda ingin membuat sendiri atau pilih Top Rated Favicon jika anda malas membuat.

Selanjtunya pilih Download Favicon

Selanjutnya masuk ke Geocities.com.lalu pilih log in jika anda telah memiliki id_Yahoo atau sign up jika anda belum punya id_Yahoo

Setelah anda login Yahoo, lalu pilih create update > Easy Upload > Browse > Upload Files.

Selanjutnya pilih File Manager > View

Maka akan muncul gambar seperti ini, lalu copy link locationnya.

Masuk ke Blogger dan tuju bagian Edit HTML. Masukan kode berikut di bawah <title><data:blog.pageTitle/></title> :

<link rel="shotcut icon" href="http://www.geocities.com/op3l_scorpio/favicon.ico"/>

Kode dengan warna yang merah, anda ganti dengan link favicon anda.

Klik "pratinjau" untuk melihat hasil.

Bila berhasil, klik "Simpan". Selamat mencoba.

Membuat Kode Tukaran Link

2008-09-21T06:12:00.006+07:00

Tukeran Link sangat bagus untuk meningkatkan traffik Blog katanya kita harus punya banyak Link Back..... coba dech liat di Google trus isi link: link:http://belajar-trik-blogger.blogspot.com nah nanti muncul deh situs mana aja yang menampilkan link ke http://belajar-trik-blogger.blogspot.com bisa di coba untuk blognya....

Semakin banyak link ke blog kita semakin bagus rangkingnya di Google he he blog ini aja masih kosong.... belum ada di google he he....
Tutorial kali ini kita membuat code [Tukeran link] yang biasanya di gunakan untuk menambah link back ke kita... caranya sangat mudah, kita cukup memanfaatkan Code HTML [Text Area] dan [Link] di dalamnya....

Silahkan Copy Paste Code di bawah ini:

<textarea rows="5" cols="15" name="code"> <a href="http://belajar-trik-blogger.blogspot.com" target="_blank"><img border="0" alt="Photobucket" src="http://www.geocities.com/op3l_scorpio/Bannerku.jpg"/></a> </textarea>

Silahkan ganti nilai Rows dan Cols nah ganti aja nilanya sesuai selera masing masing.. Jangan lupa Ganti Juga yang warna biru dengan Url Blog dan Url Gambar yang mau di tampilkan,.... nah hasilnya yang kotak di bawah

Nah Jika Kode di atas di Copy Paste maka hasilnya seperti ini.

Menambah Tombol "Read More..."

2008-09-20T20:46:00.004+07:00

Sebenarnya, trik membuat readmore ini sebenarnya sudah diajarkan oleh Blogger.com sendiri dalam tulisannya yang bertajuk “How can I create expandable post summaries?”. Namun berhubung versi Blogger yang sekarang berbeda dari waktu itu, maka sekarang juga diperlukan teknik yang berbeda.

Oke, sekarang mari kita bahas tutorialnya.

Setelah login ke Blogger.com langsung saja masuk ke menu Layout » Edit HTML.

Pastikan Anda menekan tombol “Download Full Template” di bagian kanan atas dari kotak edit HTML tersebut untuk melakukan backup template sebelumnya.

Kemudian beri tanda centang pada kotak “Expand Widget Templates“.

Copy kan kode di bawah ini sebelum tag </head> atau tepat sesudah kode } ]]></b:skin>:

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

Lalu cari kode <p><data:post.body/></p> dan tambahkan kode berikut tepat dibawahnya:

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More..</a>
</b:if>

Trik Memasang Chat Box

2008-09-20T20:30:00.005+07:00

Mungkin untuk tutorial memasang Chat Box udah banyak yang tau. Tapi saya hanya sekedar membagi ilmu kepada blogger pemula dan yang mempercantik blognya.

Chat Box sangat banyak jenisnya diinternet, seperti : cbox.ws, shoutmix.com, Oggix, Tag-World, dan plugo.

Untuk apa sih Chat Box? Ada yang mengatakan bahwa memasang Chat Box tidak perlu, karena akan tampak tidak profesional. Tapi menurut saya, Chat Box sangat berguna untuk menyampaikan inspirasi dari pengunjung.

Ok, sekarang kita coba pasang Chat Box.

Sebelumnya saya menggunakan Shoutmix.com,tapi jika anda menggunakan jenis lain kodenya tidak jauh berbeda.

Langkah-langkah memasang Shoutmix :

Pertama-tama anda kunjungi www.shoutmix.com, lalu anda klik New user? sign up! pada bagian kiri atas.
Setelah itu, isikan form registrasi. lalu beri tanda centang I have read and agree to the Terms of Service. Lalu klik Continue.
Selanjutnya, pilih shoutbox style. lalu masukkan kode verifikasi kode. lalu klik Continue.
Selanjutnya, akan muncul bahwa anda telah berhasil registrasi. lalu lanjut ke My Control Panel.
Langkah selanjutnya, pilih Get codes, lalu klik Place shoutbox on webpage.
Disini anda bisa mengatur panjang dan lebar shoutbox. Lalu copykan isi yang ada di dalam Generated codes.
Selanjutnya login ke Blogger lalu masuk ke page elements > add a page elements > HTML/JavaScript > paste kode yang tadi.

Dan...
Selamat, Shoutbox anda telah terpasang.

ini saya berikan contoh kodenya:

<iframe scrolling="auto" width="400" frameborder="0" src="http://www4.shoutmix.com/?opel89" height="220" title="opel89">
<a href="http://www4.shoutmix.com/?opel89">View shoutbox</a>
</iframe>
<br/>

Dan ini hasilnya...

Kode warna merah anda ganti dengan ShoutBox_Id anda, kode warna biru anda bisa ubah sesuai dengan space di blog anda.

Selamat mencoba.

Pasang Status YM

2008-09-19T22:47:00.008+07:00

Untuk trik yang satu ini sebenarnya sudah banyak yang membahas, tapi saya mau sharing buat yang masih pemula dan yang pengen nampangin YM di blognya.

langsung aja ya
pertama masuk ke page elements--> add a page elements --> HTML/JavaScript --> copy/paste kode dibawah ini :

<a href="ymsgr:addfriend?op3l_scorpio"><img border="0" src="http://opi.yahoo.com/online?u=op3l_scorpio&m=g&t=9"/></a>

Ganti yang warna Merah dengan user YM anda... dan warna biru ganti dengan angka 1 s/d 16 setiap amasing masing angka tampilannya beda lho.....!!!

Ini contohnya :