Tips Blogger Zacky

Lytebox Image Viewer for Blogger (fixed)

Original by IFX Adrian | 06 Maret 2010 128 Comments

Lytebox adalah sebuah lightbox yang dibuat untuk menampilkan suatu objek secara mandiri dengan menghapus ketergantungan prototype.js, effects.js, dan scriptaculous.js. Sejak versi asli Lytebox yang dibuat oleh Lokesh Dhakar (yang dirilis dengan dukungan iFrame) dibuat, modifikasi besar telah dilakukan untuk meningkatkan kinerjanya sebaik mungkin dan juga "Sildeshow", "Tema", dukungan konten HTML (sebagai lawan dari hanya gambar) dan masih banyak lagi pilihan yang dapat dikonfigurasi yang memungkinkan Anda untuk menyesuaikan tampilan dan nuansa Lytebox. (ini intro yang saya kutip dari Dolem)

Anda mungkin sudah pernah (saya juga) membaca tips tentang cara memasang lytebox di blog-blog lain. Saat pertama membaca dan melihat demonya, Lytebox berjalan dengan baik. Namun beberapa hari setelah itu sampai sekarang, Lytebox yang berasal dari trik blog-blog tersebut tidak berfungsi lagi. Saya berpikir itu karena hostingan tempat menaruh script nya sudah melewati batas bandwitch, jadi saya coba upload script tersebut ke hostingan baru, namun hasilnya tetap sama. Huft, pusing juga. Apa penyebabnya?

Karena saya sangat penasaran dengan Lytebox ini, saya coba mengutak-atik kode css dan javascript nya. Setelah memakan waktu kurang lebih 5 jam, akhirnya usaha saya untuk bertahan di depan monitor pun membuahkan hasil. Lytebox yang saya masukkan ke bengkel html saya (Macromedia Dreamweaver 8) berjalan sesuai dengan rencana.

Lytebox yang akan saya jelaskan ini adalah Lytebox v3.22. Di postingan sebelumnya tentang Lightbox, yaitu Facebox, Lytebox menggunakan prototype sebagai pengendali akitifitasnya sedangkan Facebox mengandalkan jQuery.
Berikut beberapa fitur v3.22 :
- Menampilkan satu gambar
- Menampilkan gambar-gambar dalam satu grup
- Membuat slideshow
- Menampilkan halaman atau link eksternal, bisa untuk satu link atau link dalam sebuah grup

Gimana menarik kan? Mau tau cara membuatnya? ("ah, dari tadi kek, kebanyakan ceramah nih si zacky", jawab si pembaca)

Berikut Cara Memasang Lytebox di Blogger / Blospot

1. Memasang kode CSS dan Javascript
- Pilih Layout > Edit HTML
- Cari kode </head>, lalu paste kode berikut di atasnya:

<script src='http://doigirls.megabyet.net/lytebox/lytebox.js' type='text/javascript'></script>
<link href='http://doigirls.megabyet.net/lytebox/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>

- Klik Save Template

2. Penerapan Lytebox
Seperti yang sudah saya jelaskan tadi, Lytebox bisa digunakan untuk menampilkan satu gambar atau lebih, membuat slideshow, dan menampilkan halaman eksternal. Anda bisa menggunakannya di postingan atau di Page Element template anda.
Berikut kode-kode pengaplikasian Lytebox:

- Menampilkan Satu Gambar

<a title="JUDUL LINK" href="URL-GAMBAR" rel="lytebox"><img src="URL-GAMBAR" style="width:320px;height:240;border:0" /></a>

demo » klik disini

- Menampilkan Beberapa Gambar Dalam Satu Grup

<a title="JUDUL LINK 1" href="URL-GAMBAR-1" rel="lytebox[grup]"><img src="URL-GAMBAR-1" style="width:320px;height:240;border:0" /></a>

<a title="JUDUL LINK 2" href="URL-GAMBAR-2" rel="lytebox[grup]"><img src="URL-GAMBAR-2" style="width:320px;height:240;border:0" /></a>

<a title="JUDUL LINK 3" href="URL-GAMBAR-3" rel="lytebox[grup]"><img src="URL-GAMBAR-3" style="width:320px;height:240;border:0" /></a>

<a title="JUDUL LINK 4" href="URL-GAMBAR-4" rel="lytebox[grup]"><img src="URL-GAMBAR-4" style="width:320px;height:240;border:0" /></a>

demo » klik disini

- Membuat Slideshow

<a title="JUDUL LINK 1" href="URL-GAMBAR-1" rel="lyteshow[slideshow]"><img src="URL-GAMBAR-1" style="width:320px;height:240;border:0" /></a>

<a title="JUDUL LINK 2" href="URL-GAMBAR-2" rel="lyteshow[slideshow]"><img src="URL-GAMBAR-2" style="width:320px;height:240;border:0" /></a>

<a title="JUDUL LINK 3" href="URL-GAMBAR-3" rel="lyteshow[slideshow]"><img src="URL-GAMBAR-3" style="width:320px;height:240;border:0" /></a>

<a title="JUDUL LINK 4" href="URL-GAMBAR-4" rel="lytebox[slideshow]"><img src="URL-GAMBAR-4" style="width:320px;height:240;border:0" /></a>

demo » klik disini

- Menampilkan Halaman Eksternal
1. Satu Halaman Eksternal

<a title="JUDUL HALAMAN EKSTERNAL" href="URL-HALAMAN-EKSTERNAL" rel="lyteframe" rev="width:640px;height:380px;scrolling:auto">Google Search</a>

demo » klik disini

2. Beberapa Halaman Eksternal Dalam Satu Grup

<a title="JUDUL HALAMAN EKSTERNAL-1" href="URL-HALAMAN-EKSTERNAL-1" rel="lyteframe[external]" rev="width:640px;height:380px;scrolling:auto">Google Search</a>

<a title="JUDUL HALAMAN EKSTERNAL-2" href="URL-HALAMAN-EKSTERNAL-2" rel="lyteframe[external]" rev="width:640px;height:380px;scrolling:auto">Yahoo! Search</a>

<a title="JUDUL HALAMAN EKSTERNAL-3" href="URL-HALAMAN-EKSTERNAL-3" rel="lyteframe[external]" rev="width:640px;height:380px;scrolling:auto">Bing Search</a>

demo » klik disini

Keterangan:
1. http://doigirls.megabyet.net/lytebox/ adalah tempat hostingan script Lytebox.
Silahkan download source Lytebox v3.22 disini. Ekstrak source Lytebox v3.22 dan upload ke hostingan anda, letakkan ke satu folder. Ingat!, url gambar backgroud yang ada di dalam lytebox.css, misalnya images/close_grey.png tidak perlu anda ganti, karena file tersebut sudah berada folder yang sama. Saya sarankan anda memilih hostingan untuk free web hosting yang yang memiliki batasan bandwitch yang besar, untuk hal ini saya rekomendasikan anda untuk memilih Megabyet Internet. "Inilah rahasia berjalannya Lytebox".

2. title="JUDUL LINK" dan title="JUDUL HALAMAN EKSTERNAL" sangat berguna untuk Lytebox karena JUDUL LINK dan JUDUL HALAMAN EKSTERNAL tersebut akan muncul di sebelah kanan bawah Lytebox dan gunanya untuk memberi informasi tentang gambar apa yang sedang dilihat oleh pengunjung.

3. style="width:320px;height:240;border:0" berfungsi untuk mengatur ukuran tampilan sebelum masuk ke Lytebox, karena sangat tidak efisien jika kita menampilkan ukuran sebenarnya di blog sedangkan kita telah menggunakan Lytebox sebagai image viewer.
Misalnya ukuran gambar anda adalah 800x600 pixel, maka ganti kode width:320px;height:240 menjadi width:400px;height:300px sehingga gambar yang muncul di blog berukuran 400x300 pixel.

4. rel="lytebox" berfungsi untuk memanggil kode javascript yang anda pasang. Kode ini tidak perlu diganti!

5. rel="lytebox[grup]" , kode grup berfungsi sebagai id pengelompokkan gambar. Kode ini bisa anda ganti sesuai keinginan.

5. rel="lytebox[slideshow]" , kode slideshow berfungsi sebagai id pengelompokkan gambar untuk menampilkannya ke dalam sebuah Slideshow. Kode ini bisa anda ganti sesuai keinginan.

6. rel="lyteframe" berfungsi untuk memanggil kode javascript yang anda pasang. Kode ini tidak perlu diganti!

7. rel="lyteframe[external]" , kode external berfungsi sebagai id pengelompokkan halaman eksternal. Kode ini bisa anda ganti sesuai keinginan.

8. rev="width:640px;height:380px;scrolling:auto" berfungsi untuk mengatur ukuran Lytebox yang menampilkan halaman ekternal. Kode width:640px;height:380px bisa anda ganti sesuai keinginan.

9. Jika anda ingin memasangnya di postingan, maka lakukan pembuatan postingan di tab edit Html. Jika anda ingin memasangnya di template blog, maka tambahkan Page Elements dengan HTML/Javascript.

Huft, akhirnya selesai juga... Demo Lytebox bisa anda lihat disini.
Jika anda memiliki keraguan, kotak komentar di bawah ini akan menerima anda dengan senang hati..

Oya, sebelum postingan ini sampai di tanda titik yang terkahir, mari sama kita berterima kasih kepada:
1. Lokash Dhakar, sang penemu Lytebox

2. Dolem Lytebox, sang editor Lytebox

3. Megabyet Internet, hostingan saya

4. Macromedia Dreamweaver 8, bengkel web designer saya

5. Terakhir, tentunya kepada saya sendiri (Zacky Adrihayuni), wuahahahahaha...!

Semoga berhasil...

Label: Blogger Tips, Blogger Widget, Javascript, Lightbox, Lytebox, Prototype

Social Bookmarking Widget Untuk Homepage

Original by IFX Adrian | 04 Maret 2010 108 Comments

Anda semua tentu sudah paham bahwa saat ini situs-situs social bookmark atau jejaring sosial sangat berperan penting dalam hal meningkatkan trafik blog. Dengan mengirim, membagikan, atau menyimpan link di situs tersebut, kita akan mendapatkan pengunjung yang lebih banyak dan membuat mereka akan selalu mengunjungi blog kita.

Dibeberapa postingan sebelumnya, saya telah menjelaskan cara-cara untuk mengirim url postingan dengan mudah ke situs social bookmark, di antaranya Widget Sharing & Bookmarking, Widget Share the Love, Share on Facebook, dan terakhir widget buatan saya sendiri yaitu TBZ-Bookmarking Widget. Semua widget tersebut difokuskan untuk mengirim url postingan saja. Nha, kali ini saya akan menjelaskan cara membuat widget social bookmarking untuk membagikan url homepage blog. Dengan widget ini, kita bisa mengirim url homepage blog kita ke Facebook, Twitter, Digg, Stumbleupon, Linkedin, Yahoo Bookmarks, Google Bookmarks, Reddit, Mixx, Technorati, dan yang terkahir ke Google Buzz. Mau?

Berikut Cara Membuat Social Bookmarking Widget untuk Homepage

1. Login ke akun Blogger anda

2. Pilih Layout > Page Elements

3. Tambahkan Page Elements dengan HTML/Javascript, lalu paste kode di bawah ini ke dalam kotak content.

<a href="http://www.facebook.com/share.php?u=http://blogger-driver.blogspot.com" target="_blank" title="Share on Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxmClOjG-xdoAsCuYJ6gUe22i6pWPgwwS-gaL90BXAhicOpTY_OExrcCFVTbmx1u47WJDlW8dM5HsgScv4mERwFFK5hJi-qDpV5LpdIowEgSSqY76wOchetvm3OjAfV9wjbMIUHhKM4VU/s400/facebook_32.png" border="0" alt="Facebook" /></a>

<a href="http://twitter.com/home?status=I%20am%20currently%20on:%20Blogger%20Driver%20-%20http://blogger-driver.blogspot.com.%20It's%20a%20great%20blogging%20tips" target="_blank" title="Tweet It!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihYxBTBwXx_sYlKnJbdbGSWGLxOB_fSt0jCFJ6AqFf1vETMr3W5PhCSFsuVCsRcmMBnstNm2t1OKnxCmurAL54OAqBvwgbPaPhdoZNgiMMLu9gV-rmko-WYL86smmXITr7ZgvEJV8w51c/s400/twitter_32.png" border="0" alt="Twitter" /></a>

<a href="javascript:var%20b=document.body;var%20GR________bookmarklet_domain="http://www.google.com";if(b&&!document.xmlVersion){void(z=document.createElement("script"));void(z.src="http://www.google.com/reader/ui/link-bookmarklet.js");void(b.appendChild(z));}else{}" title="Buzz This!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY3TuoOt5PEnXSQicje9AfqHHz5F0D6JLefjIaw9NpVJdW006EB-KdsTONEEmiNC5_HZIT738vmx6u0VEPz7r5ImnzN7-oxWM_N04iKqcVNGT8z32M8e99NPLsgQHY4VxcQ3vCjKQrZ94/s400/googlebuzz.png" border="0" alt="Google Buzz" /></a>

<a href="http://del.icio.us/post?url=http://blogger-driver.blogspot.com&title=Blogger%20Driver" target="_blank" title="Bookmark to Delicious"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk0fI9Gd19xAlY4cQcdqzgP006KkCqpzhyphenhyphen21U_xLGMjoyu5W2zIu3sKFuHzRRBN2yKUTicVKot4_7fSQEawT_gUjXOPK5_5b8ZbYsESzQJhDi4MW7DMIX7fKo-aj73Me8-tEywkxsZoUg/s400/delicious_32.png" border="0" alt="Delicious" /></a>

<a href="http://del.icio.us/post?url=http://blogger-driver.blogspot.com&title=Blogger%20Driver" target="_blank" title="Digg It!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbxQ7BVIMoyNlqGqqDyzqYhOC1i7x4xZrKaepSm6NVGvwbXI7_qcXjF7n5E8jwbzKr9VUlP4XfAZ_C2FdOnjMxVuykFlhA5YnGz_OsZaqZkF8lkr69tyUYrlqCECXd_a7XJR6-dyOXo1I/s400/digg_32.png" border="0" alt="Digg" /></a>

<a href="http://www.stumbleupon.com/submit?url=http://blogger-driver.blogspot.com&title=Blogger%20Driver" target="_blank" title="Stumble it!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8N-21fo0KHGvRd4DfhsBcS2yaMb2wezg5J6mLZc1KcALuOCSVxG-zqO0Go2BEOrIQQRb_rZprQSeHUCTkhcw9wFwyNcOcznunfkzYpE8UY5FA95qM6doKIFDBOMYstJz50irrUxCakNs/s400/stumbleupon_32.png" border="0" alt="Stumbleupon" /></a>

<div style="clear:both;height:0"></div>

<a href="http://www.linkedin.com/shareArticle?mini=true&url=http://blogger-driver.blogspot.com&title=Blogger%20Driver" target="_blank" title="Share on Linkedin"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrcIc2wXl6YyUYKiMBENp64xC4Lx4g1PKxrE08EPePROzHtpjPMBLNPEVwbs3D-CeBFRIyidI5cJojPWNS4BhMMxtAGYfumJku4IMB3lg-_Bn9XDhaDJx1Ll-hiYW3Ud-CjJojiIW1HTo/s400/linkedin_32.png" border="0" alt="Linkedin" /></a>

<a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=http://blogger-driver.blogspot.com&=Blogger%20Driver" target="_blank" title="Bookmark to Yahoo! Bookmarks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiRNYczWB6Qd4zRAx6Fr-x30UjcNbbQqjKJnI5i6kpZk7TrrIOsF73iKBYSDTUVOfdYlLvqAwXcxNwQo0YzDMdwOKvJvUR7ZjYep8pHesL5GF_uinuR33WMrTtKJfbrrEgm96jzOBwbdM/s400/yahoo_32.png" border="0" alt="Yahoo! Bookmarks" /></a>

<a href="http://www.google.com/bookmarks/mark?op=add&bkmk=http://blogger-driver.blogspot.com/&title=Blogger%20Driver" target="_blank" title="Bookmark to Google Bookmarks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaIkNU_Nkw5sSRz1zaewvQb6MECHjWfG2FcfMPw32YFqatLHEWQeeayazm80PWF3ncoxpUC7bk3iqWiQuNck3Alcb9kkt5rsmQXkmmdDv__Y82Bsm2DX5JnDx7yGM43IVSOz7SrcuHWVw/s400/google_32.png" border="0" alt="Google Bookmarks" /></a>

<a href="http://reddit.com/submit?url=http://blogger-driver.blogspot.com/&title=Blogger%20Driver" target="_blank" title="Reddit"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZDxpx6n9LZzy15v4Rq8tEWb-tfQnMqJdmZUe1E-9pvGZrKWb2E4ZVOI82ov4s76i-fKGi71X1iU6Oi-gNYqsRNNPxsJaebeP02azyjXwH5ZYky-BewzdnGYBKHbp4-1Jv9KHCcPK549g/s400/reddit_32.png" border="0" alt="Reddit" /></a>

<a href="http://www.mixx.com/submit?page_url=http://blogger-driver.blogspot.com" target="_blank" title="Share on Mixx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9mRj-GiaXr2Ufldm_NBCf_aSrAFpI6p2ijurH7anpvIRCijTzpjxkAr5-ECTzM4cWubjD4QyXe4r31Krgd0ZnEMJvdha8ZzUKaoAtjx7zEbaHf9oLCTot5AR5oOw9pgfVV7oEpRnF1RQ/s400/mixx_32.png" border="0" alt="Mixx" /></a>

<a href="http://technorati.com/faves?add=http://blogger-driver.blogspot.com&title=Blogger%20Driver" target="_blank" title="Fave this to Technorati"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhceucateyJLN0gb_lNnsHt84-9M1eO4zWZ4A2R7UZ7HK_esfzOMngIXtoPbFs4Z5NaELNEwHvbmKyumsj7iGG-CBhWrFv2ztXkj_TFg5lTv8l_iOVShmc9qdF9ssQAnTtyIOe-v3-QEOM/s400/technorati_32.png" border="0" alt="Technorati" /></a>

Keterangan:
- Ganti tulisan yang bercetak tebal dengan url dan nama blog anda
- Jika judul atau nama blog anda lebih dai satu kata, maka gunakan kode %20 sebagai pengganti spasi, misal "Blogger%20Driver" (tanpa tanda kutip)
- Saya sarankan anda meletakkan widget ini di bagian sidebar paling atas supaya mudah dilihat oleh pengunjung

4. Terkahir, klik Save Template.

Untuk demonya bisa anda lihat disini.

Selamat mencoba...

Label: Blogger Tips, Facebook, Google Buzz, SEO, Social Bookmarking

Cara Membuat Script Redirect URL

Original by IFX Adrian | 03 Maret 2010 164 Comments

Redirect URl berfungi untuk mengalihkan url awal yang diklik atau dituju oleh pengunjung ke url yang ditentukan. Script ini sudah saya pakai ketika url blog Tips Blogger Zacky yang lama (http://tips-blogger-zacky.blogspot.com) bermasalah dalam SEO nya. Karena tidak tahu apa masalahnya, sempat terpikir untuk membuat blog baru dengan nama yang baru juga. Saya sangat pusing, tak tahu apa yang harus dilakukan.

Sebenarnya url blog bisa saja diganti pada tab Settings akun Blogger, namun itu sangatlah merugikan karena url http://tips-blogger-zacky.blogspot.com sudah mendapat PR 2 dan Alexa Traffic Rank sudah mencapai 600an. Ditambah lagi semua url postingan sudah adem ayem nongkrong di beberapa blog directory, forum, dan beberapa situs social bookmark. Gimana nih caranya?, tanya saya kepada mbah Google. Saya dikasih solusi yang baik, tepat, dan tidak merugikan, yaitu dengan membiarkan url lama tetap eksis dan membuat url baru.

Saya memasang script redirect url ke url baru (http://tipsbloggerzacky.blogspot.com) pada template url lama (http://tips-blogger-zacky.blogspot.com). Sebagai hasilnya, silahkan anda klik url blog yang lama disini. Gimana? Langsung diarahkan balik ke http://tipsbloggerzacky.blogspot.com kan?
Nha, kali ini saya akan membagikan tips memasang script redirect url tersebut untuk anda yang memiliki masalah yang sama dengan saya. Mau?

Sebelum kita masuk ke kode untuk membuat scipt ini, ada beberapa hal yang harus anda perhatikan, yaitu:

1. Backup terlebih dahulu blog anda
Caranya mudah, masuk ke tab Settings > Basic. Lihat tulisan Blog Tools, disampinya terdapat tiga opsi: Import blog - Export blog - Delete blog. Pilih Export blog lalu klik DOWNLOAD BLOG, maka semua postingan anda akan tersimpan dalam sebuah file .xml. Jangan hapus postingan blog lama.

2. Buat blog baru dengan nama yang sama dengan blog lama anda, usahakan url barunya hampir sama dengan url baru.

3. Edit semua data di blog directory tempat anda submit url lama.

Sudah, sekarang mari kita masuk ke kodenya..

Berikut Cara Membuat Script Redirect Url

1. Login ke akun Blogger anda.

2. Pilih Layout > Edit HTML (ingat, pilih settingan ini untuk blog anda yang lama)

3. Cari kode <head>, lalu paste kode berikut di bawahnya:

<meta content='nofollow' name='robots'/>
<meta content='noindex' name='robots'/>

<script type='text/javascript'><![CDATA[//><!]]></script>
<meta content='0;URL= http://tipsbloggerzacky.blogspot.com/' http-equiv='refresh'/>

Keterangan:
- Kode meta tags di atas berguna supaya blog yang lama tidak diinidex lagi oleh search engine (Google, Yahoo, Bing), jadi blog baru anda tidak akan disangka blog jiplakan.
- Ganti http://tipsbloggerzacky.blogspot.com dengan url blog baru anda.

4. Terakhir, klik Save Template.

Supaya tampilan blog lama anda menjadi kosong atau muncul sedikit pesan tentang pengalihan url, anda harus menghapus semua isi tag body dan memngisinya dengan yang baru.
Begini caranya:

1. Pastinya anda masuk ke Layout > Edit HTML, tidak perlu mencentang Expand Widget Templates.

Misalnya isi template anda seperti ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<b:skin><![CDATA[/*
-----------------------------------------------
Nama : Blog ini gak ada gunanya lagi, wuahahahahaaa!!!!
----------------------------------------------- */
#navbar, #navbar-iframe {height:0;visibility:hid ...............
...............
...............
...............
]]></b:skin>

</head>

<body>
...............
...............
...............
</body>

</html>

2. Pertama, hapus dulu semua kode css template. Perhatikan tanda titik-titik diantara kode ----------------------------------------------- */ dan ]]></b:skin>, hapus kode css template anda sehingga kodenya hanya tinggal seperti ini:

----------------------------------------------- */

]]></b:skin>

3. Kedua, hapus isi tag body. Perhatikan tanda titik-titik diantara kode <body> dan </body>, hapus isi tag body anda sehingga kodenya hanya tinggal seperti ini:

<body>

</body>

4. Untuk menambahkan pesan pengalihan url, caranya:
- Paste kode berikut di atas kode ]]></b:skin> :

#navbar, #navbar-iframe {height:0;visibility:hidden;display:none}
body {
background: #FFF;
font:12px Arial, Helvetica;
color: #333
}
#wrap {
background:transparent;
width:980px;
margin:100px auto 10px;
padding-top:2px;
position:relative;
text-align:center;
}

- Paste kode berikut di atas tag </body> :

<div id='wrap'>

<a href='http://tips-blogger-zacky.blogspot.com' target='_blank'><img border='0' src='http://i46.tinypic.com/33mvn7d.jpg'/></a>

<h2><a href='http://tipsbloggerzacky.blogspot.com'>TIPS BLOGGER ZACKY</a></h2>
<h2>HAS BEEN MOVED TO:</h2>

<h1><a href='http://tipsbloggerzacky.blogspot.com'>http://tipsbloggerzacky.blogspot.com</a></h1>

<a href='http://tipsbloggerzacky.blogspot.com'>Click here if browser doesn't redirect you automatically...</a>

</div>

Silahkan ganti tulisan yang dicetak tebal.

5. Terakhir, klik Save Template

Selesai sudah ceramah saya untuk hari ini, jika ada pertanyaan silahkan berkomentar, mumpung Blogger.com belum banned para spammers, hahahaha...

Selamat mencoba...

Label: Blogger Tips, Blogger Tools, Javascript

Cara Memasang Tombol Google Buzz di Blog

Original by IFX Adrian | 01 Maret 2010 88 Comments

Seperti yang kita ketahui, pada tanggal 9 Februari kemarin Google telah meng-upgrade Gmail dan menyulapnya menjadi sebuah situs social network atau jejaring sosial, yaitu menggabungkannya dengan sebuah layanan yang disebut Google Buzz. Google mengaku menciptakan layanan ini untuk menandingi 2 situs jejaring sosial yang sangat populer saat ini yaitu Facebook dan Twitter. Meski banyak pihak yang mengatakan bahwa Google Buzz ini merupakan hasil tiruan Yahoo Buzz yang telah lama muncul, namun sang penemu Google, Sergey Brin tampak optimis bahwa Google Buzz akan meraih kesuksesan.

Sama halnya dengan Facebook, pengguna Google Buzz juga dapat meng-update status yang mereka pikirkan dan pengguna lian juga dapat mengomentarinya. Google Buzz juga dapat menampilkan foto, video, dan link ke sebuah situs atau blog. Untuk dapat menggunakan Google Buzz, tentunya anda harus memiliki akun Gmail terlebih dahulu. Klik disini untuk mendaftar ke Gmail.

Sudah cukup muqodimahnya, sekarang mari kita masuk ke topik utama pembahasan kita kali ini, yaitu tentang cara memasang tombol Google Buzz di blog sebagai fasilitas sharing baru.

Dengan menggunakan tombol Google Buzz di blog, kita bisa dengan mudah membagikan atau mem-buzz artikel kita ke Gmail sehingga dapat dilihat oleh orang lain. Jika kita klik tombol tersebut, maka akan keluar sebuah pop-up window. Hal yang menarik disini adalah kita bisa memilih bagian manapun dari halaman dengan mengunakan cursor mouse anda, teks atau foto akan ditambahkan ke deskripsi Buzz anda. Sebagai contoh, silahkan anda klik tombol Buzz yang ada di bagian bawah postingan ini.

Ada 2 pilhan untuk tombol Buzz, yaitu icon besar dan icon kecil. Kodenya:

1. Icon Besar
Google Buzz Icon

<a href='javascript:var%20b=document.body;var%20GR________bookmarklet_domain="http://www.google.com";if(b&&!document.xmlVersion){void(z=document.createElement("script"));void(z.src="http://www.google.com/reader/ui/link-bookmarklet.js");void(b.appendChild(z));}else{}'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5_tWi5n4dsZpQzbR4M08-7LwEGgwISrpzy_f4IGBjGoC1XPPq4o5i0qtpz8YEhINQzSzuggejmsuc4U9vgfePAK2LdSccvVbBuj66RzPDCLh2pspYayhduLFf76MU0rCvpZ5mw3cOejk/s400/googlebuzz.png" border="0"/></a>

2. Icon Kecil
Google Buzz Icon

<a href='javascript:var%20b=document.body;var%20GR________bookmarklet_domain="http://www.google.com";if(b&&!document.xmlVersion){void(z=document.createElement("script"));void(z.src="http://www.google.com/reader/ui/link-bookmarklet.js");void(b.appendChild(z));}else{}'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_6gONL78q4La_aRQilZBcGea_bdUNsJ9zyZNRwYVAJ9v_H2AIcQNKPkrtfHOsFIRHtrxQJDNUCmB0oyKjHKKE7LEtF5dNDe2Q4r-8pCRJUpVHWD-glAHlAD4PWWTRSmG0JWlQyBMlRJg/s400/buzzthis.gif" border="0" alt="Buzz this!"/></a>

Berikut Cara Memasangnya di Template anda:

1. Login ke akun Blogger

2. Pilih Layout > Edit HTML, lalu centang Expand Widget Templates

3. Cari kode <data:post.body/>, lalu paste kode icon Buzz yang anda suka tepat di atasnya, sebagai contoh:

<a href='javascript:var%20b=document.body;var%20GR________bookmarklet_domain="http://www.google.com";if(b&&!document.xmlVersion){void(z=document.createElement("script"));void(z.src="http://www.google.com/reader/ui/link-bookmarklet.js");void(b.appendChild(z));}else{}'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5_tWi5n4dsZpQzbR4M08-7LwEGgwISrpzy_f4IGBjGoC1XPPq4o5i0qtpz8YEhINQzSzuggejmsuc4U9vgfePAK2LdSccvVbBuj66RzPDCLh2pspYayhduLFf76MU0rCvpZ5mw3cOejk/s400/googlebuzz.png" border="0"/></a>
<data:post.body/>

Jika anda ingin meletakkannya di bagian bawah postingan, maka cari kode <div class='post-footer'/>, lalu paste kode icon Buzz tepat di bawahnya.

4. Terakhir, klik Save Template.

Selamat mencoba...