Tips Blogger Zacky

Falkner Press Blogger Magazine Template

2010-02-11T17:38:00.004+07:00

Demo | Download
- Automatic Readmore + Thumbnails
- Featured Content Slider
- Adsense ready
- PSD Custom Logo Included
- Youtube Video embedding Integrated
- Fully SEO Optimized
- Advertisement Block Ready
- 3 Columns
- Social Bookmarking Icons
- Twitter Updates widget
- Feedburner Email Subscription ready
- Thumbnails on Recent Posts in Sidebar
- Integrated Search box
- Beautiful top Navigation bar
- Cross-browser compatible

Author: BloggerTricks.com
Instalasi: Klik disini

Allurement Blogger Template

2010-02-10T16:35:00.006+07:00

Demo | Download

- Elegant Blogger Template
- Cocok untuk semua jenis blog
- Warna merah, background grey
- 2 kolom, sidebar kanan
- Search box ready, ikon Twitter dan RSS

Author: Blogger Template Place
Instalasi: Klik disini

credit: AllBlogtools.com

Drop Shadow Mempercantik Tampilan Gambar

2010-02-07T19:28:00.005+07:00

Drop Shadow adalah sebuah efek bayangan yang timbul pada suatu objek, bisa pada sebuah kotak, tabel, dan gambar. Coba anda perhatikan gambar yang ada pada setiap postingan blog ini. Semua gambar tersebut memiliki bayangan yang membuat tampilannya menjadi lebih menarik. Untuk membuat drop shadow bisa kita lakukan pada beberapa software photo editing seperti Adobe Photoshop. Tapi gimna jika semua postingan kita memiliki gambar yang akan diberi shadow dan jumlahnya banyak? Duh, bisa pusing jadinya... Tenang, dengan membaca tips ini sampai tuntas anda akan mengetahui cara memberi drop shadow pada gambar postingan dengan hanya menggunakan kode css yang simpel.

Berikut Cara Membuat Drop Shadow Gambar

1. Login ke akun Blogger anda, lalu pilih Layout > Edit HTML

2. Cari kode ]]></b:skin>, lalu paste kode css berikut tepat di atasnya:

.drop-shadow img {
background:url(http://i30.tinypic.com/1qsh1h.jpg) no-repeat right bottom;
padding: 5px 10px 10px 5px;
}

3. Cari kode <data:post.body/>, lalu ganti kode tersebut dengan kode berikut:

<div class='drop-shadow'><data:post.body/></div>

4. Terakhir, klik Save Template dan lihat hasilnya.

Selamat mencoba...

Jangan lupa kasih komentar ya...

Cara Mudah Membuat Tooltip Dengan Kode CSS

2010-02-07T14:13:00.006+07:00

Tooltip merupakan suatu fasilitas yang berguna untuk memberikan keterangan sesuatu yang sedang dituju oleh pembaca. Ada beberapa cara untuk membuat tooltip tersebut. Untuk permulaan, sekarang saya akan menjelaskan trik dasarnya yaitu dengan menggunakan kode CSS.

Menyiapkan Kode CSS

1. Login ke akun Blogger anda, lalu pilih Layout > Edit HTML

2. Cari kode ]]></b:skin>, lalu paste kode css berikut tepat di atasnya:

a.tip {position:relative}
a.tip span {
display:none;
padding:5px;
z-index:100;
background:#000;
color:#fff;
text-decoration:none;
width:200px; /* lebar tooltip */
height:auto;
-moz-border-radius:2px;
-webkit-border-radius:2px
}
a:hover.tip {
font-size:99%;
cursor:pointer
}
a:hover.tip span {
display:block;
position:absolute;
-moz-opacity:0.7;
opacity:0.7;
top:auto;
left:auto;
right:2px;
bottom:auto;
line-height:14px;
font-size:12px;
font-weight:normal;
}

Untuk mengatur posisi tooltip, ada bisa mengaturnya dengan memainkan kode top:auto; left:2px; right:auto; bottom:auto;.

3. Klik Save Template.

Menerapkan Tooltip di Blog

Anda bisa menggunakan tooltip ini di postingan atau di bagian lain blog anda. Kodenya:

<a class='tip' href='#'>kesini<span>Tooltip merupakan suatu fasilitas yang berguna untuk memberikan keterangan sesuatu yang sedang dituju oleh pembaca.</span></a>

Hasilnya: Kesini donk...Tooltip merupakan suatu fasilitas yang berguna untuk memberikan keterangan sesuatu yang sedang dituju oleh pembaca.

Gimana? Mudahkan?

Jangan lupa kasih komentar ya...

Membuat Icon External Link Dengan jQuery

2010-02-02T21:51:00.008+07:00

Selamat malam semuanya... Sebelum saya mulai menjelaskan tips ini, coba anda buka dulu blog ini.
Sudahkan? Nha, coba anda perhatikan link Smooth Scrolling Back-to-Top dan External Links Icon. Setelah link tersebut muncul icon . Icon tersebut menunjukkan bahwa link yang ada dibelakangnya adalah sebuah link external. Anda tentu sudah paham arti dari link external. Sekarang, saya akan menjelaskan cara membuat icon link external tersebut secara otomatis dengan sedikit sentuhan jQuery.

Berikut Cara Membuat Icon Link External

1. Login ke akun Blogger anda

2. Pilih Layout > Edit HTML

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

<style>
.exlicon img {
border:0;
padding:0;
margin:0
} /* kode ini bisa anda pindahkan tepat di atas kode ]]></b:skin> */
</style>

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

<script type='text/javascript'>
$(document).ready(function() {
$('.exlicon a').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).after(' <img src="http://1.bp.blogspot.com/_Z_KyM3IvEFQ/S2g4rizodxI/AAAAAAAABCQ/y9K3bCLHSs0/s400/icon.gif" alt="external link" />');
});
</script>

Keterangan:
- http://1.bp.blogspot.com/_Z_KyM3IvEFQ/S2g4rizodxI/AAAAAAAABCQ/y9K3bCLHSs0/s400/icon.gif adalah url icon.

4. Cari kode <data:post.body/>, ganti kode tersebut dengan:

<div class='exlicon'><data:post.body/></div>

5. Terakhir, klik Save Template.

Untuk demonya bisa anda lihat disini.

Selamat mencoba...

Cara Membuat Back to Top Dengan jQuery

2010-02-01T19:56:00.012+07:00

Hy semuanya... Masih ingat cara membuat tombol back to top yang telah saya posting dulu? Gimana? Apa anda sudah menggunakannya? Jika sudah atau pun belum, sekarang anda harus baca tips ini dengan baik karena cara membuat back to top kali ini menggunakan jQuery. Di trik lama, gerak back to top yang dihasilkan sangat cepat dan langsung menuju ke atas. Lain halnya dengan jika kita memberi sedikit sentuhan scipt jQuery. Gerak yang dihasilkan akan lebih perlahan dan lembut.

Berikut Cara Membuat Smoothscroll Go to Top

1. Login ke akun Blogger anda

2. Pilih Layout > Edit HTML

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> 
<script type='text/javascript'>
$(function(){
$('a[href*=#top]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
</script>

4. Cari kode <body>, lalu masukkan atribut id='top' ke dalam tag <body>, maka hasilnya akan seperti <body id='top'>

5. Selanjutnya, cari kode </body> dan paste kode berikut di atasnya:

<div id='gotop'>
<a href='#top' title='Go to Top'>
<img src='http://4.bp.blogspot.com/_Z_KyM3IvEFQ/S2bGsbtW-vI/AAAAAAAABCA/sXmxVJTXnvI/s400/arrow1-blue-32.png' style='right:20px;bottom:20px;position:fixed'/>
</a>
</div>

Keterangan:
- http://4.bp.blogspot.com/_Z_KyM3IvEFQ/S2bGsbtW-vI/AAAAAAAABCA/sXmxVJTXnvI/s400/arrow1-blue-32.png > url gambar
- right:20px; bottom:20px; > posisi gambar pada template adalah 20 pixel dari bawah dan kanan.

info: untuk gambar / tombolnya bisa anda download disini.

6. Terakhir, klik Save Template.

Untuk demonya bisa anda lihat disini.

Sedikit pemberitahuan, untuk kedepannya saya masih akan menyediakan tips tentang fungsi jQuery untuk Blogger. Jadi jangan lupa untuk berlangganan dengan Tips Blogger Zacky, ok?

Artikel Dicuri? Lindungi Blog Anda!

2010-01-31T01:04:00.009+07:00

Sekarang ini banyak sekali blog baru yang muncul setiap hari. Mereka berusaha untuk membuat blognya menjadi lebih bagus dan berisi banyak artikel. Namun kadang proses pembuatan artikel menjadi instant / cepat dengan mengcopy paste artikel orang lain. Sebenarnya hal itu boleh saja dilakukan karena isi artikel blog memang untuk dibagikan. Tapi yang tidak bolehnya mereka mengcopy paste semua artikel TANPA menyertakan link sumber atau memberikan atribusi kepada sang pemilik artikel. Ini disebut juga dengan plagiarisme, penjiplakan, atau pencurian artikel sederhana.
Dipostingan sebelumnya saya telah menjelaskan cara menghindari blog dari penjiplakan. Namun cara tersebut terlalu keras karena artikel mutlak tidak bisa di copy dan kita tidak bisa mengisi beberapa form yang ada diblog, seperti form shoutbox, email subscriber, dll. Wah, kalo begitu bisa2 tidak ada lagi orang yang akan berkunjung, hehehe... Maka dari itu, kita harus menggunakan cara lain yaitu dengan mendaftarkan semua artikel blog sehingga mendapatkan hak ciptanya.

Untuk cara ini, saya menyarankan anda untuk menggunakan jasa pendaftaran hak cipta yang terbaik dan gratis dan saya sendiri sudah menggunakannya, yaitu MyFreeCopyRight. Yah, untuk permulaan kita pakai yang gratisan saja dulu (blog aja masih gratisan, eh mau pakai hak cipta yang berbayar, hehehe...). Lanjut... Dengan MyFreeCopyRight, kita akan diberi sebuah id registrasi hak cipta dan bisa mendaftarkan masing2 artikel blog disertai dengan tanggal penerbitannya.
Proses registrasinya cukup mudah, yaitu:

1. Buka situs MyFreeCopyRight. Anda harus membuat akun anggota dengan memasukkan alamat email beserta password

2. Jika akun anda sudah aktif, segera login untuk mendaftarkan blog anda beserta artikelnya. Klik tombol PROTECT MY CREATION.

3. Pilih BLOG / PODCAST. Lalu masukkan url feed blog anda. Untuk alamat ini saya menyarankan anda untuk memasukkan sitemap yang telah anda submit ke Google Webmaster dan di generate oleh Blogger Sitemap Generator. Ini bertujuan supaya semua artikel anda bisa terdaftar, karena kalau menggunakan alamat feed biasa url yang akan dikirim hanya 25 url.

4. Setelah url anda terdaftar, anda akan diberikan kode html dan sebuah kode registrasi hak cipta, lalu pasang kode tersebut di blog anda.

Jika blog anda telah terdaftar lalu ada orang yang mencuri artikelnya, maka anda harus melaporkannya ke Blogger Team melalui halaman ini.

Google selalu meng-update algoritmanya untuk menemukan sumber artikel dan menghapus daftar duplikasi artikel yang telah terindex. Jadi jika artikel anda masih dicuri, berdasarkan pernyataan Blog Google Webmaster Central, blog anda akan tetap berada di atas blog duplikasi dalam hasil pencarian Google.

Terakhir, jika para pencuri tidak mengacuhkan hak cipta blog anda dan terus mencuri artikel, maka buatlah Daftar PENCURI ARTIKEL dan tampilkan di blog anda supaya pengunjung tahu bahwa anda adalah sang pemilik artikel yang sebenarnya dan pencuri tersebut akan merasa malu (itu pun kalau mereka masih punya rasa malu, hehehe...)

Ok, sekian dulu tips dari saya. Mudah2an berguna bagi kita semua dan mari sama2 kita BASMI PEMBAJAKAN!

Salam Blogger!

Hidden Chatbox

2010-01-28T16:23:00.009+07:00

Hidden Chatbox adalah sebuah tempat menyimpan atau meletakkan widget chatbox (Shoutmix, Shoutbox, dll) yang bisa bersembunyi. Sembunyi disini pastinya bukan berarti hilang, kabur, atau lari dari kejaran polisi (emangnya Nooordin M. Top apa?!), tapi sengaja kita sembunyikan untuk menghemat ruang blog. Sudah hampir sebulan saya tidak memasang widget shoutmix, itu karena banyak widget lain yang lebih penting darinya untuk ditampilkan. Tapi setelah belajar dan paham, saya menggunakan trik Hidden Chatbox ini untuk memasang shoutmix sehingga blog saya tidak terlihat sesak lagi(walau sebenarnya masih sesak banget, hehehehe....). Anda juga mau memasang shoutmix dengan trik ini? Baca baik-baik ya...

Trik Hidden Chatbox ini terbagi menjadi 2 pilihan, yaitu LEFT-Hidden Chatbox dan RIGHT-Hidden Chatbox. Kalau yang saya pakai di blog ini adalah RIGHT-Hidden Chatbox. Berikut kodenya:

LEFT-Hidden Chatbox

<style>
#hcl {
position:fixed;
top:100px;
left:0px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://3.bp.blogspot.com/_Z_KyM3IvEFQ/S2Evq5hIpUI/AAAAAAAABAM/3qo6ScKImhw/s400/cbred-LEFT.png') no-repeat;
}
.hclcontent {
float:left;
border:2px solid #790909;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened;
}
function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>
<div id="hcl">
<div class="hclcontent">



<br />
<div class="hc-credit">
<span style="float:left">

<a href="http://tips-blogger-zacky.blogspot.com/2010/01/hidden-chatbox.html" target="_blank">
Get this widget!
</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcl()">
[close]
</a>
</span>
</div>
</div>
<div class="hcltab" onclick="showHidehcl()"> </div>

</div>
<script type="text/javascript">
var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
</script>

RIGHT-Hidden Chatbox

<style>
#hcr {
position:fixed;
top:100px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://2.bp.blogspot.com/_Z_KyM3IvEFQ/S2EvgsgQ7nI/AAAAAAAAA_k/gq8QRLZcHFs/s400/cbblue.png') no-repeat;
}
.hcrcontent {
float:left;
border:2px solid #003e82;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}
function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>
<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent">



<br />
<div class="hc-credit">
<span style="float:left">

<a href="http://tips-blogger-zacky.blogspot.com/2010/01/hidden-chatbox.html" target="_blank">
Get this widget!
</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcr()">
[close]
</a>
</span>
</div>
</div>
</div>
<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>

Keterangan:

#hcr {
position:fixed;
top:100px; /* Menunjukkan bahwa jarak tab dari atas adalah sejauh 100px. Bisa anda ganti dengan bottom:100px yang berarti jarak tab dari bawah menjadi sejauh 100px */
z-index:+1000;
}

.hcrtab {
height:100px; /* tinggi tab pembuka hidden chatbox */
width:30px; /* tinggi tab pembuka hidden chatbox */
float:left;
cursor:pointer;
background:url('http://2.bp.blogspot.com/_Z_KyM3IvEFQ/S2EvgsgQ7nI/AAAAAAAAA_k/gq8QRLZcHFs/s400/cbblue.png') no-repeat; /* gambar yang dijadikan sebagai tab pembuka hidden chatbox */
}

.hcrcontent {
float:left;
border:2px solid #003e82; /* warna dan ukuran border hidden chatbox */
background:#f3f6f7; /* warna background hidden chatbox (tidak perlu diganti jika anda mengedit kode lain pada style) */
padding:10px;
}

Berikut beberapa gambar tab pembuka hidden chatbox dan kode warna html untuk border yang serasi:

Kode warna border: #790909

Kode warna border: #aca500

Kode warna border: #008232

Kode warna border: #003e82

Kode warna border: #0079a0

Nha, sekarang kit pasang kode itu di blog. Udah tahu caranya kan? Itu, pilih Layout > Page Elements > HTML/Javascript, lalu masukkan kode Hidden Chatbox disana.

Klik disini untuk melihat demo LEFT-Hidden Chatbox dan RIGHT-Hidden Chatbox.

Note: Trik hidden ini bisa juga anda gunakan untuk memasang widget lain, jadi trik ini tidak khusus untuk memasang shoutmix. Anda tinggal berkreasi dengan kode-kode yang bisa bikin kepala jadi botak itu, hahahahahaha...!

Selamat mencoba....

Memperkenalkan TBZ-Bookmarking Widget

2010-01-27T15:11:00.006+07:00

Selamat siang semuanya... Apa kabar? Mudah2an baik semuanya ya... Kali ini saya mau bagi tips tentang social bookmarking widget. Postingan ini saya buat untuk menjawab pertanyaan saudara My Self di pada komentar postingan cara membuat buku tamu shoutbox. Widget ini saya beri nama TBZ-Bookmarking. Dengan TBZ-Bookmarking kita bisa membagikan artikel ke 12 social bookmarking situs, yaitu Facebook, Google Bookmarks, Delicious, Digg, Stumbleupon, Twitter, Technorati, Linkedin, Mixx, Newsvine, Yahoo, dan Reddit. Satu lagi, widget ini mempunyai satu kelebihan yaitu jika kita mengarahkan mouse ke gambar (hover effect), maka akan keluar title dari gambar situs yang kita tuju. Gimana? Mau pasang widget ini?

Berikut Cara Memasang Widget TBZ-Bookmarking

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML, lalu centang Expand Widget Template

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

<style>
.tbzbookmark {
background:#FFF !important;
width:310px; /* lebar kotak */
text-align:center;
text-transform:none;
border:1px solid #DDD; /* warna border kotak */
-moz-border-radius:5px;
padding:10px;
}
.tbzbookmark img {
margin-top:5px;
opacity:.4;
-moz-opacity:.4;
filter:alpha(opacity=40);
}
.tbzbookmark img:hover {
opacity:1;
-moz-opacity:1;
filter:alpha(opacity=100);
}
.sharemessage {
color:#666; /* warna judul */
font:Arial, Helvetica, sans-serif;
font-size:13px; /* ukuran huruf judul */
font-weight:bold;
margin-bottom:5px;
padding-bottom:2px;
border-bottom: 1px solid #CCC; /* warna border bawah judul */
}
.tbzcredit {
font-size:9px;
text-align:right;
}
.tbzcredit a {
text-decoration:none;
}
.tbzcredit a:hover {
text-decoration:underline;
}
</style>
<script src='http://z-sbookmark.googlecode.com/files/Z-Bookmarking.js' type='text/javascript'/>

4. Selanjunya, cari kode <div class='post-footer'> atau <p class='post-footer-line post-footer-line-1'>. Kalau sudah, paste kode berikut di atasnya:

<div class="tbzbookmark">
<div class="sharemessage">
<div expr:id='"sbtxt"+data:post.id'>Share this post!</div>
<script type='text/javascript'>showsbtext("sbtxt" + "<data:post.id/>",0)</script>
</div>

<div id='row1'>
<a expr:href='"http://www.facebook.com/share.php?u="+ data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",1);"' rel='nofollow' target='_blank' title='Facebook'><img alt='Facebook' src='http://1.bp.blogspot.com/_Z_KyM3IvEFQ/S0YECkR2PFI/AAAAAAAAA08/E41Np49gMOQ/s400/facebook.png'/></a>

<a expr:href='"http://del.icio.us/post?url="+ data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",2);"' rel='nofollow' target='_blank' title='Delicious'><img alt='Delicious' src='http://3.bp.blogspot.com/_Z_KyM3IvEFQ/S0YEC_HrhTI/AAAAAAAAA1E/9PyQYMVy7Bc/s400/Delicious.png'/></a>

<a expr:href='"http://digg.com/submit?phase=2&url="+ data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",3);"' rel='nofollow' target='_blank' title='Digg!'><img alt='Digg!' src='http://1.bp.blogspot.com/_Z_KyM3IvEFQ/S0YEDavjQKI/AAAAAAAAA1M/MpkDmNtE-Xs/s400/Digg.png'/></a>

<a expr:href='"http://twitter.com/home?status=Currently reading: " + data:blog.title + " - " + data:post.url + ". What about you?"' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",4);"' rel='nofollow' target='_blank' title='Twitter'><img alt='Twitter' src='http://1.bp.blogspot.com/_Z_KyM3IvEFQ/S0YEeYgTSvI/AAAAAAAAA2M/Z1ppNui4cIY/s400/Twitter.png'/></a>

<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url="+ data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",5);"' rel='nofollow' target='_blank' title='Linkedin'><img alt='Linkedin' src='http://3.bp.blogspot.com/_Z_KyM3IvEFQ/S0YEECBCZWI/AAAAAAAAA1c/jUyFrHwpDs8/s400/Linkedin.png'/></a>

<a expr:href='"http://www.stumbleupon.com/submit?url="+ data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",6);"' rel='nofollow' target='_blank' title='StumbleUpon'><img alt='StumbleUpon' src='http://3.bp.blogspot.com/_Z_KyM3IvEFQ/S0YEW9uvB6I/AAAAAAAAA18/A8DggvtDd1k/s400/Stumbleupon.png'/></a>
</div>

<div id='row2'>
<a expr:href='"http://technorati.com/faves?add="+ data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",7);"' rel='nofollow' target='_blank' title='Technorati'><img alt='Technorati' src='http://1.bp.blogspot.com/_Z_KyM3IvEFQ/S0YEXu3iWII/AAAAAAAAA2E/20u3vVBKy-Y/s400/Technorati.png'/></a>

<a expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk="+ data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",8);"' rel='nofollow' target='_blank' title='Google Bookmarks'><img alt='Google Bookmarks' src='http://1.bp.blogspot.com/_Z_KyM3IvEFQ/S0YED0iVkII/AAAAAAAAA1U/Y9aqTyY5Zs0/s400/Google.png'/></a>

<a expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",9);"' rel='nofollow' target='_blank' title='Mixx'><img alt='Mixx' src='http://4.bp.blogspot.com/_Z_KyM3IvEFQ/S0YEWOurSLI/AAAAAAAAA1k/yNzj5TWk2iQ/s400/mixx.png'/></a>

<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",10);"' target='_blank' title='Yahoo!'><img alt='Yahoo!' src='http://3.bp.blogspot.com/_Z_KyM3IvEFQ/S0YEev5YPiI/AAAAAAAAA2U/BwYzDyUPSKs/s400/Yahoo.png'/></a>

<a expr:href='"http://www.newsvine.com/_tools/seed&save?u="+ data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",11);"' rel='nofollow' target='_blank' title='Newsvine'><img alt='Newsvine' src='http://2.bp.blogspot.com/_Z_KyM3IvEFQ/S0YEWZxEmZI/AAAAAAAAA1s/KdsosSzRlak/s400/newsvine.png'/></a>

<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",12);"' target='_blank' title='Reddit'><img alt='Reddit' src='http://3.bp.blogspot.com/_Z_KyM3IvEFQ/S0YEWn7gkTI/AAAAAAAAA10/FpQABQ_3Q88/s400/Reddit.png'/></a>
</div><div class="tbzcredit"><a href="http://tips-blogger-zacky.blogspot.com/2010/01/memperkenalkan-tbz-bookmarking-widget.html" target="_blank">Get this widget!</a></div>
</div>

Untuk yang ada read more, anda tinggal masukkan kode di atas ke dalam kode berikut:

<b:if cond='data:blog.pageType == "item"'>

</b:if>

5. Terakhir, klik Save Template.

note: Tolong jangan hapus credit yang ada dibawah widget.

Untuk demonya bisa anda lihat di bawah postingan ini.

Selamat mencoba...

Mengganti Tulisan Older Post, Newer Post, Home

2010-01-24T23:42:00.004+07:00

Tulisan older post, newer post, dan home merupakan navigasi yang muncul di bawah postingan untuk beranjak ke postingan yang baru, lama, dan kembali ke homepage blog. Nha, apa pernah terpikir oleh anda untuk menggantinya dengan sebuah gambar? Saya rasa anda harus melalukannya supaya blog terlihat lebih sempurna dan berbeda dengan blog lainnya. Mau tau cara?

Berikut Cara Mengganti Navigasi Blog Dengan Gambar:

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML, lalu centang Expand Widget Template

3. Cari kode berikut:

- <data:newerPageTitle/> ganti dengan <img src="URL-GAMBAR-PREVIOUS" border="0" />
- <data:olderPageTitle/> ganti dengan <img src="URL-GAMBAR-NEXT" border="0" />
- <data:homeMsg/> ganti dengan <img src="URL-GAMBAR-HOME" border="0" />

Klik disini dan disini untuk men-download gambar / tombol Previous, Next dan Home. Password: TBZ-MBT

5. Terakhir, klik Save Template.

Jangan lupa kasih komentar dan ucapkan terima kasih kepada Mohammad Mustafa Ahmedzai ya...

Tips Meningkatkan Alexa Traffic Rank

2010-01-24T04:22:00.010+07:00

Selamat malam semuanya... Sesuai janji saya pada postingan tentang Alexa Traffic Rank, sekarang saya akan menjelaskan tips untuk meningkatkan Peringkat Alexa tersebut. Dibaca baik2 ya...

Berikut Cara Meningkatkan Alexa Traffic Rank:

1. Pasang Alexa Toolbar
Jika anda membuka blog anda setiap hari dan telah memasang Alexa Toolbar, minta teman anda untuk melakukan hal yang sama. Setiap kali kita mengunjungi blog, Alexa Toolbar akan menghubungkan kunjungan tersebut ke Alexa Ranking Engine yang akan meng-update ranking blog anda. Intinya, Alexa mengandalkan toolbar nya untuk menetapkan ranking sebuah blog atau situs.
Klik disini atau disini untuk memasang Alexa Toolbar.

2. Pasang Widget Alexa Rank
Banyak orang yang melakukan ini (termasuk saya), dan hasilnya terbukti Alexa Traffic Rank meningkat. Tampilan widget ini tersedia dalam 2 pilihan, yaitu:

Klik disini untuk mendapatkan widget Alexa Rank.

3. Tulis artikel Tentang Alexa
Anda bisa menulis berbagai hal tentang Alexa di postingan dan ajak para pembaca untuk men-download Alexa Toolbar.

4. Jadikan Blog Anda sebagai Homepage Browser
Lakukan ini pada setiap komputer yang bisa anda kontrol atau minta lah teman2 anda untuk menjadikan blog anda sebagai homepage browser mereka. Dengan begitu, setiap kali anda atau mereka membuka browser tersebut, maka blog anda akan menjadi halaman pertama yang akan muncul. Sudah tahu kan cara melakukannya? Kalau belum, begini caranya:

- Untuk Mozilla Firefox
> Buka Mozilla Firefox anda
> Pilih menu Tools > Option

> Klik tab Main, ilhat tulisan when Firefox starts. Pilih Show my home page yang ada pada dropdown menu disampingnya.
> Sudah kan? Sekarang lihat tulisan Home Page. Isi kotak yang ada disebelahnya dengan url blog anda. Misalnya http://tips-blogger-zacky.blogspot.com

> Terakhir, klik OK untuk menyimpan setting.

- Untuk Internet Explorer
> Buka Internet Explorer anda
> Pilih menu Tools > Internet Options

> Klik tab General. Isi kotak Home page dengan url blog anda. Misalnya http://tips-blogger-zacky.blogspot.com

> Terakhir, klik OK untuk menyimpan setting.

5. Tambahkan Kategori Webmaster ke Blog
Karena pada semua webmaster sudah terpasang Alexa Toolbar, ketika mereka mengunjungi blog anda, maka kunjungan tersebut akan dihubungkan ke Alexa. Cara ini akan sangat mempengaruhi Alexa Traffic Rank.

6. Tingkatkan Traffic Blog Secara Umum
Ini adalah hal pokok tentang Alexa. Semakin banyak kunjungan dan pageviews blog maka Alexa Rank akan meningkat.

Ok, sekian dulu dari saya. Jika ada kekurangan, mohon segera dikoreksi.

Salam Blogger!

Download AntiVirus PCMAV 2.2c

2010-01-24T02:43:00.004+07:00

PCMAV 2.2c Update Build1 telah hadir dengan penambahan 20 pengenal varian virus baru. Bagi Anda pengguna PCMAV 2.2c, sangat disarankan segera melakukan update, agar PCMAV Anda dapat mengenali dan membasmi virus lebih banyak lagi.

Untuk mendapatkan dan menggunakan update PCMAV ini, Anda cukup menjalankan PCMAV Cleaner (PCMAV-CLN.exe), komputer harus dalam keadaan aktif terhubung ke Internet (non-proxy). Fitur Automatic Updates dari PCMAV akan secara otomatis men-download dan meng-update database dari PCMAV.

Virus terbaru: Zhola. Dibuat dengan bahasa pemrograman Visual Basic tanpa di-pack, berukuran sekitar 672 KB, virus Zhola termasuk virus yang memiliki payload ganas. Icon yang dimilikinya menyerupai icon software lokal. Ia akan mencari berbagai file dokumen dan multimedia, untuk kemudian menghapusnya dan menggantikan dengan file virus yang menyamar dengan nama file tersebut.

Di dalam tubuhnya, virus menyimpan ekstensi file berikut: *.doc,*.jpg,*.mp3,*.avi,*.mpeg,*.3gp,*.flv,*.mpg,*.mov,*.wmv,*.wav,*.3gp2. Setiap file dengan ekstensi tersebut akan menjadi incaran virus. Selain itu pada setiap root drive yang ditemuinya, virus juga menciptakan file dengan nama windows.exe, Love Letter 4 Zhola.exe, dan autorun.inf seperti tampak pada screenshot.

Daftar tambahan virus hingga PCMAV 2.2c Update Build1:
Albim
Avt-Net
Avt-Net.dll
CintaKampus
Cuakep.G
Gambar
Gambar.bat.A
Gambar.bat.B
Geografi.B
Msa
Mshearts.htm
Mshearts.inf
Mshearts.vbs
Random8
Serviks
Serviks.inf
Serviks.vbs
Shuriken.J
Zhola
Zhola.inf

Download PCMAV 2.2b | Download PCMAV 2.2c Update Build1

Letakkan file hasil download tersebut (update.vdb) ke dalam folder \vdb. Jika sebelumnya telah terdapat file update yang lama, Anda cukup menimpanya. Pastikan sekali lagi, bahwa nama file update adalah update.vdb, jika berbeda, cukup ubah namanya. Dan nanti saat Anda kembali menjalankan PCMAV, ia sudah dalam keadaan kondisi ter-update.

Sumber: PCMAV.biz

Tingkatkan Backlink Dengan Link Referral

2010-01-22T00:23:00.015+07:00

LinkReferral.com adalah sebuah situs yang menyediakan free immediate traffic untuk blog atau situs anggotanya. Keanggotaannya bias kita dapatkan secara gratis dan berbayar. Jika kita memiliki akun berbayar, maka kita akan diberi fitur yang lebih banyak daripada akun gratis. Ya, bagi kita sang Blogger tak beruang, kita buat yang gratisnya saja dulu, ya nggak?

Cara Mendaftar ke LinkReferral.com

1.Buka situs LinkReferral.com, lalu klik tulisan join now yang ada dibawah form login
2.Isi semua data yang diperlukan di form registrasinya, dan pilih tipe akun anda (Basic Membership atau Premium Membership). Lalu klik tulisan register yang ada di bagian paling bawah halaman
3.Cek email anda untuk mengkonfirmasi akun yang telah anda daftarkan tadi
4.Setelah proses registrasi selesai, anda akan diberi referral link dan beberapa banner untuk promosi referral link tesebut.
5.Setelah memilih, klik LOGIN TO GET IMMEDIATE FREE TRAFFIC... yang ada di bagian paling bawah halaman untuk login ke akun yang baru saja anda buat.

Bagaimana Cara Mendapatkan Traffic Dari LinkReferral.com

Kapasitas traffic yang akan diberikan oleh LinkReferral.com tergantung pada kriteria rangking akun kita. Untuk mendapatkan rangking, kita harus melakukan tahap-tahap berikut:

1.Login Setiap Hari
Maka ranking di member directory traffic akan tetap berada diatas daftar anggota yang lain

2.Kunjungi Situs
Kita harus mengunjungi situs yang ada pada Directory Traffic.Selain akan diberi kunjungan balik oleh anggota yang telah dikunjungi, kita juga akan dikunjungi langsung oleh pihak LinkReferral.com. Maksimal 30 situs.

3.Review Situs
Review dilakukan untuk memberi penilaian dan tanggapan terhadap sebuah situs yang telah dikunjungi. Dengan bergitu, situs yang kita review akan me-review balik situs kita sehingga kita mendapatkan nilai yang bisa meningkatkan traffic. Maksimal 5 review.

4.Posting Sebuah Artikel / Komentar di Forum
Buka Forum list, lalu posting artikel atau sebuah komentar. Maksimal 1 artikel atau 1 komentar.

5.Pilih Situs Favorit
Pilih salah satu situs yang telah anda kunjungi untuk dijadikan situs favorit. Maksimal 1 situs favorit.

5 cara di atas harus anda lakukan setiap harinya supaya ranking anda terus meningkat, dan saya sudah merasakan hasilnya, sangat memuaskan.

Ok, sekian dulu salah satu tips meningkatkan traffic dari saya. Jika ada kekurangan, mohon segera dikoreksi.

Selamat mencoba....

Cara Membuat Widget Top Artikel / Popular Posts

2010-01-17T23:08:00.001+07:00

Widget Top Artikel atau Popular Posts adalah widget yang berfungsi untuk menampilkan daftar artikel yang paling banyak dikomentari oleh pengunjung. Cara membuatnya hampir sama mudahnya dengan cara membuat widget top komentator yang telah saya jelaskan sebelumnya. Mau?

Berikut Cara Membuat Widget Top Artikel:

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML

3. Tambahkan Page Elements dengan HTML/Javascript, lalu paste kode berikut ke dalam kotak content:

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1a1c6e4e6d4f148e3650fda46910e15f&url=http%3A%2F%2Ftips-blogger-zacky.blogspot.com&num=10" type="text/javascript"></script><span style="font-size:9px;"><a href="http://tips-blogger-zacky.blogspot.com">Get this widget!</a></span>

*Keterangan:
- Ganti tips-blogger-zacky.blogspot.com dengan alamat blog anda tanpa http://
- Angka 10 menunjukkan jumlah artikel yang tampil pada daftar.

4. Terakhir, klik Save.

Jangan lupa kasih komentar ya...

Cara Membuat Widget Top Komentator

2010-01-15T00:34:00.002+07:00

Widget Top Komentator akan sangat berguna mereka anda yang memiliki blog dengan pengunjung yang cukup ramai. Hal ini merupakan salah satu cara untuk berterima kasih dan menunjukkan kepada mereka bahwa blog anda adalah blog yang dofollow. Cara memasang widget ini cukup mudah, anda hanya perlu menambahkan sedikit javascript ke elemen template anda. Mau?

Berikut Cara Membuat Widget Top Komentator:

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML

3. Tambahkan Page Elements dengan HTML/Javascript, lalu paste kode berikut ke dalam kotak content:

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
if(obj.value.items[i].link == "")
var item ="<li>" + obj.value.items[i].title + "</li>";
else
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=7b5e76fd684f11e94320abd4e00fbbca&url=http%3A%2F%2Ftips-blogger-zacky.blogspot.com&num=10&filter=Zacky Adrishayuni" type="text/javascript"></script><span style="font-size:9px;"><a href="http://tips-blogger-zacky.blogspot.com">Get this widget!</a></span>

*Keterangan:
- Ganti tips-blogger-zacky.blogspot.com dengan alamat blog anda tanpa http://
- Ganti Zacky Adrishayuni dengan nama anda. Ini berfungsi untuk menghapus nama anda sendiri dari daftar top komentator. Kenapa harus dihapus? Jawabannya bisa anda pikirkan sendiri... Hehehe...
- Angka 10 menunjukkan jumlah komentator yang tampil pada daftar.

4. Terakhir, klik Save.

Jangan lupa kasih komentar ya...

New! HTML Color Codes Generator

2010-01-07T20:08:00.002+07:00

Sudah baca tentang kode warna HTML? Atau tool generatornya? Kalo belum, silahkan baca dulu disini dan disini. Kalau sudah, sekarang ada lagi tool baru yang barunnya. Kali ini tool generator tersebut berbentuk sebuah roda yang berputar. Mau?

Jangan lupa ucapkan terima kasih buat team 2createwebsite.com dan Mohammad Mustafa Ahmedzai.

Semoga bermanfaat...

Membuat Efek Gambar Samar Blur

2010-01-07T19:40:00.002+07:00

Selamat malam semuanya. Kali ini saya akan membahas sedikit tentang image effect. Sebelum kita mulai, coba anda lihat About Me yang ada di atas postingan ini. Perhatikan gambar saya. Gimana? Ganteng kan? Hehehe... Tapi bukan itu tujuan anda melihatnya. Coba perhatikan lagi gambarnya baik2... Gimana? Ada yang berbeda dari gambar biasa kan? Coba anda arahkan mouse anda ke gambar tersebut? Gimana? Ada yang beda lagi? Benar, sebelum anda mengarahkan mouse gambar tersebut terlihat samar, tapi setelah mouse diarahkan tampilan gambar menjadi full (sehingga kelihatan banget ganteng nya saya ini, hehehe...). Itulah yang dinamakan dengan efek blur. Mau tau cara membuat nya?

Berikut Cara Membuat Efek Blur:

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML, lalu centang Expand Widget Template

3. Cari kode ]]></b:skin>, lalu paste kode css berikut di atasnya:

a.linkopacity img {
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;\
}

a.linkopacity:hover img {
filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}

4. Klik Save Template.

Cara Menggunakannya:
Misalnya kode gambar anda seperti:

<img src="http://tipsbloggerzacky.googlecode.com/files/50000.jpg" border="0"/>

Untuk membuat efek blur, kita harus memasukkan kode gambar tersebut ke dalam tag <a> dengan class="linkopacity". Maka kode tersebut akan menjadi seperti:

<a class="linkopacity"><img src="http://tipsbloggerzacky.googlecode.com/files/50000.jpg" style="width:375px;height:184px;border:none"/></a>

Hasilnya:

Selamat mencoba...

Jangan lupa kasih komentar ya...

Tips Search Engine Optimization (SEO)

2010-01-07T19:32:00.000+07:00

Zacky: Anda sudah tahu arti SEO?
Pembaca: Sudah! Search Engine Optimization kan?
Zacky: Waduuh, itu bukan artinya! Tapi kepanjangannya! Gimana sih?
Pembaca: Ow? Maaf deh...

Ok, karena sudah cape drama, sekarang mari kita langsung pada isi artikel yang sebenarnya.

Search Engine Optimization atau SEO adalah cara yang dilakukan oleh para webmaster untuk mengoptimalkan blog atau situs mereka agar mendapatkan rangking yang baik pada search engine (Google, Yahoo, Bing). Ada 2 metode yang bisa dilakukan untuk SEO, yaitu SEO secara internal dan SEO secara Eksternal. Untuk permulaan, di tips kali ini saya akan menjelaskan yang internal nya saja. Untuk yang eksternal bisa anda baca di postingan berikutnya. Mau?

SEO secara internal maksudnya adalah tips seo yang dilakukan pada blog sendiri, baik itu pada isi / artikel, maupun pada template dari blog tersebut.

Berikut Tips SEO Internal untuk Template:

1. Pasang Meta Tags
Meta tags berfungsi untuk memberi informasi tentang blog.
Berikut meta tags yang seo friendly:

<META content='Isi deskripsi blog disini' name='description'/>
<META content='Isi keyword blog disini' name='keywords'/>
<META content='Nama anda' name='author'/>
<META content='Nama anda' name='copyright'/>
<META content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<META content='true' name='MSSmartTagsPreventParsing'/>
<META content='global' name='distribution'/>
<META content='1 days' name='revisit-after'/>
<META content='all' name='audience'/>
<META content='general' name='rating'/>
<META content='all' name='robots'/>
<META content='index, follow' name='robots'/>
<META content='id' name='language'/>
<META content='ID' name='country'/>
<META content='Indonesia' name='geo.placename'/>
<META content='blogger' name='generator'/>

Untuk memasangnya, cari kode <head>, lalu paste semua meta tags tersebut dibawahnya.

3. Gunakan Keyword Yang Sesuai Dengan Isi Blog
Keyword adalah kata kunci yang dilihat oleh search engine untuk menentukan relevansi hasil suatu pencarian. Misalnya blog berisi tentang dunia entertainment, maka gunakanlah keyword yang berhubungan dengan dunia entertainment tersebut. Selain itu, keyword yang anda pakai juga harus keyword yang banyak di cari oleh orang. Jumlah maksimal dari keyword adalah sebanyak 20 keyword, karena ada beberapa search engine yang kesulitan dengan keyword yang jumlahnya lebih dari 20. Untuk lebih jelasnya tentang maslaha keyword ini, anda bisa menggunakan keyword suggestion yang ada pada situs SEO.

4. Ganti Judul Blog Dengan Judul Artikel
Secara umum, tempalte blogger meletakkan judul blog di depan judul artikel. Misalnya Tips Blogger Zacky: Tips Search Engine Optimization. Peletakan judul seperti itu tidak seo friendly. Klik disini untuk membaca tips tentang cara mengganti judul blog dengan judul artikel.

5. Pastikan Kode Heading Tetap Utuh
Di waktu mengedit template, mungkin anda sering melihat kode h1, h2, h3, h4. Kode tersebut dinamakan heading. Pastikan tidak ada satu pun kode heading yang terhapus. Ini karena data yang pertama kali dilihat oleh search engine adalah data yang ada pada kode heading tersebut.

6. Buat Related Post / Artikel Yang Berhubungan
Dengan membuat related post, pageviews anda akan meningkat. Klik disini untuk membaca tutorialnya.

7. Pilih Template Yang Baik Dan Jangan Terlalu Sering Menggantinya
Unsahakan memilih template yang seo friendly dan jangan terlalu sering menggantinya.

Berikut Tips SEO Internal Untuk Isi Blog:

1. Artikel Hasil Karya Sendiri / Original Content
Ini adalah hal yang pertama dan utama yang harus anda ingat. Sebuah blog akan mendapatkan rank yang bagus oleh search engine jika isi / artikel blog tersebut harus original / asli karya ketikan anda. Kenapa ketikan? Karena kita membuatnya pada komputer, hehehe... Jadi jangan pernah copy paste artikel orang lain, hargai kerja kerasnya. Ok?

2. Judul Artikel Merupakan Tema Pokok Dari Isi Artikel
Setiap kali menulis artikel anda harus membuat judul yang benar2 pas sehingga judul tersebut bisa mewakili isi artikel secara keseluruhan. Ini hal kecil tapi penting karena sebelum search engine melihat isi artikel, mereka terlebih dahulu bertemu dengan si jadul, eh si judul artikel karena judul tersebut diatur sebagai heading 2 (h2) di template.

3. Gunakan Penekanan / Penegasan Text Pada Artikel
Penekanan atau penegasan disini maksudnya adalah dengan menebalkan, memiringkan, atau menggaris bawahi suatu kata atau frase yang berhubungan erat dengan isi blog anda. Misalnya, blog anda fokus terhadap tips, maka gunakan penegasan tek tersebut pada kata tips yang ada pada artikel anda. Tapi ingat, jangan memberi penegasan pada kata yang sama secara berulang-ulang karena bisa di anggap spam oleh eyang buyut Google.

4. Jangan Membuat Hidden Text atau Hidden Links
Hidden Text atau Hidden Links maksudnya warna text atau link tersebut sama dengan warna background nya. Jadi tidak terlihat oleh pembaca. Hal ini bisa di anggap sebagai sebuah penipuan oleh search engine.

5. Buat Artikel yang bertautan dengan Artikel lain
Mungkin anda pernah melihat artikel saya yang berisi "silahkan baca disini, klik disini, di postingan sebelumnya, dll." Nha, hal itu berguna untuk meningkatkan pageviews, so traffic juga otomatis naik.

6. Segera Revisi Link yang Rusak (Broken Link)
Link yang rusak atau broken link artinya link yang dituju tidak dapat ditemukan. Jika ada broken link di blog anda, segera ganti dengan yang baru atau hilangkan saja link tersebut.

7. Gunakan Tag "alt" Pada Gambar
Penggunaan tag "alt" sering terlupakan oleh para blogger karena malas mengetik atau bahkan tidak tahu apa gunanya tag tersebut. Padahal ini akan sangat membantu karena dengan menggunakan tag "alt" search engine akan mudah mengenali gambar. Caranya... Misalnya kode gambar anda seperti ini <img src="zacky_ganteng.jpg" />, maka masukkan tag alt ke dalam tag img. Hasilnya <img src="zacky_ganteng.jpg" alt="zacky ganteng"/>.

Ok, mungkin hanya itu dari saya. Saya bukan master SEO. Saya hanya ingin berbagi pengetahuan yang saya dapat karena saya juga seorang newbie. Maka dari itu, jika ada kesalahan mari segera kita diskusikan bersama disini.

Salam blogger!

Apa Itu Alexa Traffic Rank?

2010-01-07T19:31:00.000+07:00

Alexa Traffic Rank didasarkan pada 3 bulan jumlah traffic pengunaan situs oleh semua pengguna Alexa Toolbar dan dari berbagai sumber data traffic, serta kombinasi dari jumlah pengunjung dan pageviews, dua faktor inilah yang dijadikan dasar utama menentukan Alexa Traffic Rank. Dengan terpasangnya alexa toolbar pada browser yang kita pakai, maka Alexa akan mengetahui berapakah jumlah pengunjung serta pageviews (jumlah halaman yang di lihat) pada website atau blog. Setelah data terkumpul maka mesin alexa akan secara otomatis membuat ranking atau peringkat pada website atau blog tersebut. Jadi, rank dari sebuah situs merupakan cerminan dari jumlah orang yang mengunjungi situs tersebut dan jumlah halaman yang di dilihat oleh mereka.

Alexa Rank atau Peringkat Alexa yang paling bagus adalah dengan nilai atau rank 1. Semakin kecil nilai peringkat alexa, maka kualitas peringkat tersebut semakin baik. Hal ini berbanding terbalik dengan Google Page Rank karena di Google Page Rank semakin nilainya maka akan semakin bagus, dimana peringkat tertingginya adalah 10.

Bagi anda (saya juga nih, hehehe...) yang menjadikan blog atau situs sebagai lahan penghasilan, Alexa Rank merupakan suatu hal yang sangat penting selain Google Page Rank. Ini karena sawah ladang tempat mencari uang di dunia internet seperti Teks Link ads, Sponsored Review, ReviewMe, ask2link, BuySellAds, ReviewMe, dan beberapa tempat lainnya menjadikan Alexa Rank sebagai pedoman. Semakin tinggi rank blog kita, maka semakin banyak pula para advertiser yang ingin memasang iklan.

Ok, sekian dulu dari saya tentang Alexa Traffic Rank. Mudah2an bermanfaat bagi anda.
Untuk tips cara meningkatkan Alexa Traffic Rank akan saya posting di kesempatan berikutnya.

Salam Blogger!

Akhirnya Pecah Telor Juga

2010-01-02T20:05:00.007+07:00

Pergantian tahun kemarin jadi sebuah surprise untuk Tips Blogger Zacky, karena sudah mendapat PageRank 2...! Saya tidak menyangka akan secepat ini karena blog Tips Blogger Zacky masih muda banget umurnya. Saya mengetahuinya pun secara tidak sengaja. Begini ceitanya...

Kemarin saya pasang Alexa Toolbar dan Google Toolbar di Mozilla Firefox yang ada pada laptop butut ini. Setelah kedua toolbar tersebut dipasang, saya coba lihat tampilan dan mencari tahu apa fungsinya (maklum deh, belum pernah masang yang gituan, hehehe...). Karena sudah bosan meilhatnya, saya coba buka Tips Blogger Zacky.

Tiba2 ada yang berubah pada tampilan salah satu button Google Toolbar yang semulanya seperti

sekarang jadi

Karena penasaran, saya coba lihat artinya. Eh, button itu bilang "PageRank is Google's view of the importance of this page (2/10)". Rasanya kaget banget! Terus saya berpikiran, "apa benar ini PageRank nya Tips Blogger Zacky". Karena masih ragu atau karena tidak tahu apa yang sebenarnya terjadi, saya coba cek ke prchecker.com. Setelah di cek, eh hasilnya sama, blog saya dapat PageRank 2! Duh, senang banget rasanya..!!! Itulah sebabnya saya bilang ini adalah sebuah surprise.

Sekarang saya mau mengucapkan terima kasih kepada Mbah Google yang sudah memberi saya PageRank 2, semua follower baik itu dari Google Friend Connect, MyBlogLog, dan BlogCatalog, semua pengunjung setia Tips Blogger Zacky, dan pada semua teman2 yang sudah mendukung jalannya Tips Blogger Zacky samapai saat ini. Mudah2an PageRank dan traffic blog ini akan bertambah terus dikemudian hari.

Cara Menampilkan Avatar / Foto Komentator Blogger

2010-01-01T20:17:00.010+07:00

Tips kali ini merupakan detail kecil tapi penting untuk anda para Blogger. Dengan tips yang akan saya jelaskan sekarang, anda bisa menampilkan foto / avatar para komentator di samping isi komentar atau dibawah. Jika para komentator memberi komentar dengan akun atau profil Blogger mereka, maka foto dari profil tersebut akan langsung muncul disamping isi komentar. Untuk contohnya bisa anda lihat disini. Mau tau cara membuatnya?

Berikut Cara Menampilkan Avatar / Foto Komentator di Komentar Blogger:

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML, lalu centang Expand Widget Template

3. Cari kode <dl id='comments-block'>, ganti kode tersebut dengan kode di bawah ini:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

Note: Jika di template anda kode comments-block berada dalam tag div, maka ganti tag dl pada <dl expr:class='data:post.avatarIndentClass' id='comments-block'/> dengan tag div. Hasilnya: <div expr:class='data:post.avatarIndentClass' id='comments-block'/>.

4. Selanjtunya, cari kode <a expr:name='data:comment.anchorName'/>, lalu paste kode berikut di atasnya:

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' width='35px' style='margin-bottom:-2px;' />
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

5. Terakhir, klik Save Template.

Selamat mencoba...

Jangan lupa kasih komentar ya...

HTML Color Codes Generator

2009-12-25T20:41:00.002+07:00

Selamat malam semuanya... Apa kabar nih? Baik kan? Ok, mari kita mulai... Anda masih sudah baca artikel saya tentang kode warna html? Kalau belum, baca dulu disini. Disana saya menyajikan kode warna html tersebut dalam bentuk tabel. Nha, sekarang saya meu revisi sedikit nih, tabel tersebut saya ubah menjadi sebuah tool generator, dan jangan lupa ucapkan terima kasih buat team AllBlogTools. Tool ini membolehkan kita memilih dan mengetahui kode warna html dengan mudah, yaitu dengan hanya mengarahkan mouse ke warna yang akan kita pilih dan kemudian kodenya akan langsung muncul, sama seperti color picker yang ada pada Adobe Photoshop. Mau?

Html Color Codes Generator

5 Cara Terbaik Mendapatkan Uang Dari Blog

2009-12-25T20:40:00.001+07:00

Mendapatkan uang dari blog merupakan sebuah tujuan penting dari para Blogger. Kita banyak menghabiskan waktu, tenaga, pikiran, dan uang untuk itu. Tapi kebanyakan dari kita tidak mendapatkan hasil seperti yang diimpikan, dan sering bertanya tentang cara yang paling baik untuk mendapatkan uang dari blog. Kita harus tahu bahwa jawaban dari pertanyaan tersebut tidaklah sama untuk setiap orang dan blog. Nha, di tips kali ini saya akan membagikan sedikit jawaban secara umumnya. Mau?

Berikut 5 Cara Terbaik Mendapatkan Uang Dari Blog:

1. Media Periklanan
Cara ini adalah cara yang paling banyak dipakai karena mudah untuk memasangnya diblog. Seperti yang kita tahu, media periklanan online yang sangat terkenal adalah Google Adsense. Karena media tersebut sering dikeluhkan oleh para Blogger karena persyaratan dan proses pembayarannya cukup rumit, maka mereka memilih alternatif seprti AdBrite, Bidvertiser, Chitika. Kalau yang punya orang Indonesia seperti AdsenseCamp, AdsenseBlogger, KumpulBlogger, PPCIndo, dll.

2. Affiliate Marketing
Program ini bisa dijalankan dengan berbagai cara. Mereka memberikan sebuah banner pada kita untuk dipasang di blog. Kita akan mendapatkan uang jika pengunjung mendaftar atau membeli produk yang ada pada link banner tersebut. Komisi yang akan didapat berkisar antara 5% sampai 75%. Contoh situs affiliate marketing yaitu Commission Junction, LinkShare, Click Bank, Amazon, dll.

3. Pasang Link / Tombol Donasi
Cara ini tergantung pada kepercayaan pengunjung dan seberapa besar manfaat blog kita bagi mereka. Mungkin ini tidak akan bisa mendapatkan banyak uang, tapi setidaknya bisa membantu kita untuk beberapa dollar / rupiah.

4. Jual Produk Di Blog
Kita bisa menjual beberapa produk yang berkaitan dengan isi blog anda jika sudah memiliki traffic yang cukup tinggi. Produk ini bisa punya anda sendiri atau punya orang lain. Anda bisa menjual e-book, software, dll.

5. Jual Ruang Iklan Di Blog
Kita bisa membuat sendiri ruang iklan di blog, baik itu berupa banner atau text link. Cara ini sangat ampuh dan dijamin mudah. Anda tinggal memasang ruang iklan tersebut, dan tinggal tunggu sampai ada situs atau blog lain yang ingin memasang iklan mereka di blog kita. Kita juga bisa menggunakan sebuah situs provider untuk cara ini, seperti BuySellAds.com.

Ok, sekian dulu dari saya. Jika ada kekurangan mohon dikoreksi.

Selamat mencoba...

Simple Fresh Blogger Template

2009-12-23T19:23:00.008+07:00

Demo | Download

Password: tips-blogger-zacky.blogspot.com

Deskripsi:
- Kompatibilitas: Internet Explorer 8, Firefox RC3, Opera 9.6, Google Chrome 0.3.154.9
- Magazine Style
- 3 columns

Jangan lupa kasih komentar ya...

ET Blogger Template RC2

2009-12-23T19:23:00.007+07:00

SchemerMag Blogger Template

2009-12-21T19:59:00.003+07:00

Demo | Download

Password: tips-blogger-zacky.blogspot.com

Deskripsi:
- Kompatibilitas: Internet Explorer 8, Firefox RC3, Opera 9.6, Google Chrome 0.3.154.9
- Premium Template, Magazine Style
- 3 columns

Jangan lupa kasih komentar ya...

Cara Memasang Facebook Toolbar

2009-12-21T19:52:00.001+07:00

Huft... Facebook lagi, Facebook lagi... Karena saya hobi banget sama Facebook, maka saya pakai ungkapan "Tiada hari tanpa Facebook", hehehe... Dan lagi2 saya mau bahas tips yang ada hubungannya dengan Facebook! Kalau sebelumnya saya sudah pernah membahas tipsnya disini, disana, disini lagi, dan disana lagi. Sekarang ada yang baru lagi nih yaitu memasang Facebook toolbar. Anda sudah tahu kan yang toolbar yang saya maksud? Itu lho yang ada di bagian bawah halaman Facebook, tempat yang ada menu chat, notifikasi, aplikasi, pages, n lain2 itu,, tahu kan? Toolbar tersebut juga bisa kita pasang di blog. Sebelumnya pemasangan toolbar seperti Facebook itu hanya untuk Joomla 1.5, dimana script nya dibuat oleh Mosquito Magazine. Dengan sedikit utak atik oleh para master, akhirnya script tersebut bisa juga dipasang di Blogger. Mau tau caranya?

Berikut Cara Memasang Facebook Toolbar Di Blog:

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML, lalu centang Expand Widget Template

3. Cari kode </head>, lalu paste kode css berikut tepat di atasnya:

<script src='http://tipsbloggerzacky.googlecode.com/files/fbtoolbar.js' type='text/javascript'/>
<link href='http://tipsbloggerzacky.googlecode.com/files/fbtoolbar-style.css' rel='stylesheet' type='text/css'/>
<link href='http://www.mosquitomagazine.com/facebook-toolbar/modules/mod_fbtoolbar/fbtoolbar.css' rel='stylesheet' type='text/css'/>

4. Selanjutnya cari code </body>, lalu paste kode berikut di atasnya:

<div class='moduletable'>
<div class='dhmbox' id='dhmbox1'>
<div class='dhmbox-content' id='dhmbox-content1' style='width:250px'>
<div class='dhmbox-content-title' style='width:250px'>
<div class='dhmbox-content-title-close' onclick='showDHMPopup(1);'/>
<div class='dhmbox-content-title-main'>Notification</div>
</div>
<div class='dhmbox-content-item'>
<div class='mod_twitter'>



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

<div class='dhmbox' id='dhmbox2'>
<div class='dhmbox-content' id='dhmbox-content2' style='width:250px'>
<div class='dhmbox-content-title' style='width:250px'>
<div class='dhmbox-content-title-close' onclick='showDHMPopup(2);'/>
<div class='dhmbox-content-title-main'>Chat</div>
</div>
<div class='dhmbox-content-item'>
<div>
<center><br/>



</center>
</div>
</div></div></div>

<div class='dhmbox' id='dhmbox3'>
<div class='dhmbox-content' id='dhmbox-content3' style='width:250px'>
<div class='dhmbox-content-title' style='width:250px'>
<div class='dhmbox-content-title-close' onclick='showDHMPopup(3);'/>
<div class='dhmbox-content-title-main'>JUDUL BOX 3</div>
</div>
<div class='dhmbox-content-item'>



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

<div class='dhmbox' id='dhmbox4'>
<div class='dhmbox-content' id='dhmbox-content4' style='width:200px'>
<div class='dhmbox-content-title' style='width:200px'>
<div class='dhmbox-content-title-close' onclick='showDHMPopup(4);'/>
<div class='dhmbox-content-title-main'>JUDUL BOX 4</div>
</div>
<div class='dhmbox-content-item'>



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

<div id='dhm-bar'>
<div id='dhm-bar-container'>

<div class='dhm-title'>
<a href='http://www.facebook.com/febri.adrian' target='_blank' title='Zacky Adrishayuni'>
<img border='0' src='http://static.ak.fbcdn.net/favicon.ico?8:132011'/>
<div>My Facebook</div>
</a>
</div>

<div class='dhm-title'>
<a href='http://tips-blogger-zacky.blogspot.com' target='_blank' title='Get Your Own!'>
<img border='0' src='http://img24.imageshack.us/img24/3547/bumig.png'/>
</a>
</div>

<div class='dhm-title'>
<a href='http://tips-blogger-zacky.blogspot.com/2009/11/tukaran-link.html' target='_blank' title='Link Exchange'>
<img border='0' src='http://b.static.ak.fbcdn.net/images/icons/group.gif'/>
</a>
</div>

<div class='dhm-title'>
<a href='#submit-article' rel='facebox'><div>Submit Article</div></a>
</div>

<div class='dhm-button' id='dhm-button-1' onclick='showDHMPopup(1);'><img src='http://img269.imageshack.us/img269/4061/notif.png'/></div>
<div class='dhm-button' id='dhm-button-2' onclick='showDHMPopup(2);'><img src='http://img260.imageshack.us/img260/2105/chati.gif'/></div>
<div class='dhm-button' id='dhm-button-3' onclick='showDHMPopup(3);'></div>
<div class='dhm-button' id='dhm-button-4' onclick='showDHMPopup(4);'></div>

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

Silahkan ganti kode yang berwarna merah dengan kode anda sendiri.

Note: Jika ada bagian footer template anda yang tertutup oleh toolbar ini, maka tambahkan kode <div style='height:16px'></div> diatas kode <div class='moduletable'>. Ini fungsinya untuk memberi jarak antara footer dengan toolbar. Ganti angka 16 dengan nilai yang lebih kecil atau besar untuk menyesuaikan jarak tersebut.

5. Terakhir, klik Save Template.

Selesai sudah... Mudah2an anda tidak minum bodrex setelah melihat kode yang banyak tadi, hehehe...

Selamat mencoba...

Jangan lupa kasih komentar ya...

Cara Membuat Form Contact Us

2009-12-21T19:33:00.006+07:00

Contact Us Form atau Formulir Kontak Kami berfungsi untuk menghubungkan para pengunjung dengan pemilik blog atau situs. Dengan adanya fasilitas penghubung tersebut, pengunjung bisa memberikan saran & kritik, mengajukan pertanyaan seputar materi blog, mengirimkan artikel baru, dll. Kebanyakan pengguna blog atau situs kecil hanya menggunakan sebuah text pemberitahuan untuk menghubungi mereka dengan cara mengirimkan email. Misalnya: "...silahkan kontak kami ke aaa@bbb.com...". Namun cara ini sering dianggap kuno oleh para senior karena cara tersebut kurang profesional. Coba anda lihat pada bagian topnavbar blog saya ini, disana terdapat link Contact Me. Jika anda meng-klik nya maka akan keluar sebuah form. Nha, di tips kali ini saya akan menjelaskan cara membuat contact form tersebut supaya blog atau situs kita terlihat lebih profesional. Mau?

Berikut Cara Membuat Contact Us Form:

1. Buka situs emailmeform.com

2. Klik tombol Sign Up Now for FREE yang berada pada bagian kanan atas.

3. Setelah itu anda akan diarahkan ke form registrasinya. Isi semua data yang diperlukan, lalu klik tombol Sign Up yang ada di bawahnya.

4. Jika sudah, anda akan mendapat pesan "Thank you for signing up! To prevent automated registrations, we sent a message to the email address you provided. Please check your email and click on the Verification Link inside, to activate your account." Cek email anda dan aktifkan akun yang anda daftarkan tadi dengan meng-klik link verifikasi yang ada pada email konfirmasi tersebut.

5. Setelah akun diaktifkan dan anda telah masuk pada halaman akun tersebut, klik link Create a New Form yang ada pada menu Control Panel.

6. Sekarang anda berada pada halaman pengaturan tahap 1 pembuatan form. Isi semua data yang diperlukan, lalu klik tombol next yang ada di bawahnya.

7. Untuk tahap 1 sampai tidak perlu di isi karean hanya optional. Maka klik saja next samapai tahap 7, dan form anda telah selesai dibuat.

8. Ada 2 pilhan untuk menampilkan form tersebut kepada pengunjung, yaitu :
- Menampilkan secara langsung di blog > klik link get the HTML code yang ada pada pesan yang muncul setelah anda membuat form tadi. Copy kode yang diberikan, lalu paste ke elemen template anda.

- Membuat link untuk menuju form > Copy direct link untuk form (misalnya: http://emailmeform.com/fid.php?formid=123456), dan buat link Contact Us pada blog anda.

Selamat mencoba...

Jangan lupa kasih komentar ya...

Cara Membuat Marquee Dengan Javascript

2009-12-21T19:30:00.004+07:00

Selamat malam semuanya... Di postingan sebelumnya saya telah menjelaskan cara membuat efek marquee. Disana terpampang jelas berbagai tipe dan variasi untuk marquee. Tapi marquee di tips tersebut tidak berjalan baik pada Mozilla Firefox. Misalnya gerakannya tidak mulus alias tersendat-sendat (ugh, manisnya bahasa qyuu... hehehe..). Nha, di tips kali ini saya akan menjelaskan cara lain untuk membuat marquee dengan menggunakan javascript dan akan berjalan dengan biak pada semua browser. Mau?

Berikut Cara Membuat Marquee Dengan Javascript:

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML, lalu centang Expand Widget Template

3. Cari kode ]]></b:skin>, lalu paste kode css berikut di atasnya:

#jsmarquee{
position: relative;
width: 300px; /*lebar marquee */
height: 150px; /*tinggi marquee */
background-color: white; /*warna background marquee */
overflow: hidden;
padding: 2px;
padding-left: 4px;
}

4. Cari kode </head>, lalu paste kode berikut diatasnya:

5. Klik Save Template.

Selesai untuk proses pemasangan script.
Untuk menampilkannya di postingan atau widget, gunakan kode berikut:

<div id="jsmarquee" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">

ISI MARQUEE ANDA DISINI (text, gambar, iklan, widget, dll)

</div>
</div>

Klik disini untuk melihat contohnya.

Note: Dengan tips ini gerakan marquee yang bisa kita buat hanya satu arah, yaitu dari bawah ke atas, tidak seperti marquee yang telah saya jelaskan disini. JIka anda ingin arahnya berubah, silakan cari kode cross_marquee.style.top, lalu ganti kode top dengan bottom (atas ke bawah), right (kiri ke kanan), left (kanan ke kiri).

Selamat mencoba...

Jangan lupa kasih komentar ya...

ET Blogger Template

2009-12-20T20:01:00.003+07:00

Deskripsi:

- Kompatibilitas: Internet Explorer 8, Firefox RC3, Opera 9.6, Google Chrome 0.3.154.9
- 3 columns.
- Fixed width

Demo | Download ET Blogger

Password: tips-blogger-zacky.blogspot.com

Jangan lupa kasih komentar ya...

Integrasi Blogger Dengan Amazon Associates

2009-12-19T19:14:00.004+07:00

Seperti yang kita tahu, Blogger telah memperlancar monteasi blog dengan menambahkan fitur tab Monetize pada dashboarb akun Blogger. Dimulai dengan AdSense yang berfungsi untuk memudahkan kita menampilkan iklan di blog. Setelah itu AdSense fo Feeds untuk meningkatkan pendapatan melalui RSS dan Atom feed. Sekarang ada yang baru lagi nih! Melalui Blogger Buzz pada tanggal 16 Desember kemarin, Blogger mengumumkan bahwa Amazon Associates sudah terintegrasi langsung dengannya. Dengan Amazon Associates, kita bisa mencari katalog produk Amazon dan memasang link produk tersebut di blog untuk menambah penghasilan jika pengunjung membeli produk yang kita tawarkan itu.

Untuk memulainya, silahkan login ke akun Blogger anda. Pilih Monetize > Amazon Associates. Ikuti semua petunjuk yang diberikan, setelah itu pilih Product Finder (jika anda belum mempunyai akun Amazon, anda juga bisa mendaftar langsung tanpa harus membuka tab baru atau pergi dari Blogger).

Jika sudah, masuk ke post editor. Disana anda akan melihat gadget Product Finder yang telah ditambahkan tadi berada disebelah kanan post editor. Anda bisa langsung mencari nama produk yang akan ditulis, memasukkan link produk, gambar atau iframe, harga, dan tombol buy it now. Setiap link yang dibuat akan berisi sebuah "unique Associates ID" supaya Amazon bisa mengetahui hasil klik dari pengunjung dan anda akan mendapatkan komisi untuk setiap produk yang terjual. Inilah yang dinamakan dengan affiliate atau referral program.

Note: Affiliate program akan berjalan dengan baik jika sang pengunjung percaya kepada anda. Anda harus menghindari promosi dengan cara yang simpel tapi berlebih-lebihan. Berilah penawaran yang jelas dan benar sehingga pengunjung tidak merasa akan ditipu dan berpikiran bahwa anda mendekati mereka hanya untuk sebuah keuntungan. Untuk info dan tips tentang affiliate program bisa anda lihat disini dan disini.

Ok, sekian dulu info dari saya. Untuk lebih jelas anda bisa langsung mengunjungi situs Amazon dan blog Amazon Associates.

Jangan lupa kasih komentar ya...

Membuat Read More Sejajar Dengan Paragraf

2009-12-19T19:13:00.002+07:00

Selamat malam semunya...! Kali ini saya akan menjelaskan tips yang masih ada hubungannya dengan mempercantik tampilan read more. Sebelumnya saya sudah menjelaskan 2 tips dengan tema yang sama, yaitu Membuat Read More + Judul Artikel dan Mengganti Link Read More Dengan Gambar. Jika di cara membuat read more yang telah saya jelaskan dulu, link read more anda akan tampil di paragraf baru atau baris baru alias tidak sejalan dengan paragraf abstraksi postingan.Nha tips kali ini membuat link read more supaya sejajar dengan paragraf. Caranya sangat simpel, namun sangat penting untuk detail kecil yang bisa membuat blog terlihat lebih rapi. Mau?

Berikut Cara Membuat Read More Sejajar dengan Paragraf:

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML, lalu centang Expand Widget Template

3. Cari kode link read more anda, seperti ini:

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

4. Pindahkan kode </p> ke tempat setelah kode </b:if>. Maka hasilnya akan seperti ini:

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

Keterangan: Tag <p> dan </p> menunjukkan satu paragraf. Jadi jika memindahkan kode link read more kode dalam tag tersebut, maka link read more akan muncul di paragraf yang sama.

5. Terakhir klik Save Template.

Selamat mencoba...

Jangan lupa kasih komentar ya...

Winter Christmas Blogger Template

2009-12-18T21:31:00.003+07:00

Deskripsi:

- Kompatibilitas: Internet Explorer 8, Firefox RC3, Opera 9.6, Google Chrome 0.3.154.9
- 3 columns.
- Fixed width

Download Winter Christmas

Password: tips-blogger-zacky.blogspot.com

Jangan lupa kasih komentar ya...

Emo Blogger Template

2009-12-18T21:30:00.005+07:00

Deskripsi:

- Kompatibilitas: Internet Explorer 8, Firefox RC3, Opera 9.6, Google Chrome 0.3.154.9
- 2 columns.
- Fixed width

Download Emo

Password: tips-blogger-zacky.blogspot.com

Jangan lupa kasih komentar ya...

Main Facebook Di Blog

2009-12-18T20:29:00.001+07:00

Malam semuanya! Oy, apa kabar semuanya? Baik kan? Maaf ya saya 2 hari ini absen soalnya sibuk terus nih, hehehe... Ok, untuk tips pembuka setelah 2 hari kabur dari depan laptop kemarin, saya akan menjelaskan tips yang ada hubungannya dengan Facebook. Bagi anda yang hobi Facebook (sebenarnya nggak pantas pakai kalimat itu karena pasti anda semua suka dengan yang namanya Facebook, ya kan? Hehehe..) pasti akan selalu menyempatkan untuk login kesana di saat blogging. Tentunya anda membuka tab baru untuk melakukan itu, ya kan? Nha, di tips kali ini saya akan memberi tahu cara supaya kita bisa main facebook lewat blog, jadi tidak harus buka tab baru lagi. Mau?

Untuk bisa bermain Facebook di blog, kita harus menambahkan sebuah objek html di halaman blog kita. Begini caranya:

1. Login ke akun Blogger anda

2. Pilih Layout > Page Elements

3. Tambahkan Page Elements dengan HTML/Javascript, lalu paste kode berikut ke dalam kotak content:

<object type="text/x-scriptlet" data="http://www.facebook.com" height="300" width="100%"><br></object>

Anda bisa mengatur lebar dan tinggi objek tersebut dengan mengganti nilai pada height="300" width="100%".

4. Terakhir klik Save.

Untuk contohnya bisa anda lihat disini.

Selamat Facebook'an di blog anda.

Jangan lupa kasih komentar ya...

Blogging Cepat Dengan BlogThis!

2009-12-15T21:47:00.001+07:00

Ada berita baru nih! Tapi sebenaranya berita sudah di publish oleh Blogger Buzz pada tanggal 9 Desember kemarin, so sekarang saya mau membagi info untuk anda yang belum lihat di Blogger Buzz. Beritanya adalah... Google Chrome mempublikasikan ekstensi barunya, yaitu BlogThis!. Dengan menggunakan BlogThis! kita bisa langsung blogging hanya dengan SATU kali klik.

Kenapa satu kali klik? Karena jika kita menggunakan Google Chrome yang telah terpasang ekstensi ini, akan ada tombol / icon Blogger di toolbar nya. Setelah meng-klik icon tersebut, kita akan langsung di bawa ke post editor blog, jadi bisa langung ketik ini dan itu yang akan di posting.

Anda bisa mendownload BlogThis disini. Atau kalau mau langsung dari browser, anda harus pakai yang Google Chrome BETA, lalu klik Extensions yang ada di toolbarnya, abis tu instal deh.

Selamat mencoba...

Silverline Blogger Template

2009-12-15T20:11:00.009+07:00

Deskripsi:

- Kompatibilitas: Internet Explorer 8, Firefox RC3, Opera 9.6, Google Chrome 0.3.154.9
- 3 columns.
- Fixed width

Download Silverline

Password: tips-blogger-zacky.blogspot.com

Jangan lupa kasih komentar ya...

Sw Soccer Blogger Template

2009-12-15T20:11:00.008+07:00

Deskripsi:

- Kompatibilitas: Internet Explorer 8, Firefox RC3, Opera 9.6, Google Chrome 0.3.154.9
- 3 columns.
- Fixed width

Download SW Soccer

Password: tips-blogger-zacky.blogspot.com

Jangan lupa kasih komentar ya...

Merry Christmas Blogger Template

2009-12-15T20:11:00.006+07:00

Deskripsi:

- Kompatibilitas: Internet Explorer 8, Firefox RC3, Opera 9.6, Google Chrome 0.3.154.9
- 2 columns.
- Fixed width

Download Merry Christmas

Jangan lupa kasih komentar ya...

Membuat Nomor Navigasi Halaman Blog

2009-12-14T19:18:00.000+07:00

Seperti yang kita tahu, terdapat 5 atau 10 artikel baru pada halaman utama blog. Jika pengunjung ingin membaca artikel yang lama mereka akan meng-klik tulisan older post / posting lama yang ada pada bagian bawah halaman, begitu seterusnya. Lalu gimana jika mereka ingin melihat artikel yang paling lama sedangkan kita sudah mempunyai lebih dari 100 artikel? Apakah mereka harus meng-klik older post / posting lama sampai ke halaman terakhir? Tentunya ini sangat tidak efisien karena bisa membuat pengunjung merasa bosan. Anda pastinya tidak ingin itu terjadi, ya kan? Maka dari itu, di tips kali ini saya akan menjelaskan cara mengatasinya dengan membuat nomor navigasi halaman blog. Mau tahu caranya?

Berikut Cara Membuat Nomor Navigasi Halaman Blog:

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML

3. Cari kode ]]></b:skin>, lalu paste kode css berikut tepat di atasnya:

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;
}

.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;

}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

4. Selanjutnya, cari kode yang hampir sama dengan kode berikut:

<b:section class=’main’ id=’main’ showaddelement=’yes’>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>

Lalu paste kode berikut dibawah kode </b:section>:

Keterangan:
- var pageCount=5; > angka 5 menunjukkan jumlah artikel yang dalam 1 halaman, anda bisa menggantinya sesuai keinginan. *Nilainya harus sama dengan pengaturan blog anda di Dashboard > Setting > Formatting > Posts per page.

- var displayPageNum=6; > angka 6 menunjukkan jumlah halaman yang muncul di navigasi.

- Selain itu anda juga bisa mengganti kode Previous dan Next pada var upPageWord ='Previous'; dan var downPageWord ='Next';

5. Klik Save Tempalte.

Note: Tips ini akan bermasalah jika anda menggunakan label di blog. Cara mengatasinya:
1. Pilih Layout > Edit HTML

2. Cari kode <a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>, lalu ganti dengan kode berikut:

<script type='text/javascript'>
var lblname = "<data :label.name/>";
lblname2 = encodeURIComponent(lblname);
var feedlink = '/search/label/' + lblname2+'?&max-results=10';
document.write('<a href="' + feedlink + '">'+lblname+'</a>');
</script>

3. Terakhir klik Save Template.

Untuk hasilnya bisa anda lihat sendiri di blog saya ini.

Selamat mencoba...

Jangan lupa kasih komentar ya...

Cara Membuat Read More + Judul Artikel

2009-12-14T19:17:00.001+07:00

Oops, read more lagi read more lagi! Lagi lagi saya akan membahas tips tentang read more. Kalau di postingan sebelumnya saya telah menjelaska cara mengganti link read more dengan gambar, nha sekarang cara menambahkan judul artikel di link read more tersebut. Misalnya: Read More - Cara Memasang Widget Share The Love. Mau tau caranya?

Berikut Cara Membuat Read More + Judul Artikel:

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML, lalu centang Expand Widget Template

3. Cari kode link read more anda, seperti ini:

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

4. Jika sudah, ganti kode tersebut dengan kode berikut:

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

5. Klik Save Template.

Note: Jika anda menggunakan kode Read More - <data:post.title/> maka hasilnya akan seperti ini Read More - Judul Artikel. Anda bisa memodifikasinya dengan menambahkan “ ”, », dan tanda lainnya sebelum atau sesudah kode <data:post.title/>

Selamat mencoba...

Jangan lupa kasih komentar ya...

Cara Membuat Cursor Animasi

2009-12-14T19:10:00.001+07:00

Wow, 2 hari yang lalu ada yang request ke email saya dari mbak "C". Begini katanya, "Mas, saya mau tau cara membuat cursor yang unik seperti yang ada di profil friendster dan yang ada di blog lainnya. Tiap kali saya blogwalking saya selalu ngiri nih liat blog teman yang punya cursor yang unik itu. Bantuin saya donk mas, saya juga mau bikin yang seperi itu...". Setelah baca request itu saya langsung kaget! Kaget bukan karena saya tidak tau caranya, tapi kaget karena itu adalah request pertama yang masuk ke inbox saya, hehe... Ok, kali ini saya akan menjelaskan cara membuat cursor animasi seperi yang diminta mbak "C" itu.

Untuk memasang sebuah cursor animasi di blog, langkah pertama yang harus kita lakukan adalah menyiapkan cursor yang akan dipakai. Cari aja di mbah google, atau kalau mau cepat klik aja disini. Setelah anda sampai di situs tersebut, pilih dan kemudian simpan file cursor anda (biasanya berekstensi .ani). Jika sudah, upload file cursor itu ke sebuah image hosting, misalnya Photobucket.com. Setelah meng-upload, simpan url cursor tersebut.

Sekarang kita, beralih ke pemasangan di blog.

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML

3. Cari kode yang hampir sama dengan kode berikut:

body {
font: 100% Arial, Helvetica;
background: #f3f6f7;
color: #333;
}

4. Udah ketemu kan? Selanjutnya paste kode berikut di bawah kode body { :
cursor: url("URL-CURSOR-ANDA");

5. Terakhir, klik Save Template.

Selamat mencoba...

Jangan lupa kasih komentar ya...

Membuat Efek Zoom Gambar Dengan jQuery Image Magnify v1.1

2009-12-11T21:02:00.012+07:00

Selamat malam semuanya! Kali ini saya akan menjelaskan tips yang ada hubungannya dengan image effects. Dengan mengunakan jQuery Image Magnify v1.1 yang di update tanggal 14 November 2009 dan dipublikasikan oleh Dynamic Drive ini, kita bisa membuat perbesaran gambar sebanyak yang kita inginkan. Berbeda dengan Facebox yang hanya bisa menampilkan gambar tanpa perbesaran. Sebagai contoh, coba anda klik gambar . Gimana hasilnya? Jauh lebih besar dari ukuran yang tampak sebelumnya kan? Hmm,, tips ini akan sangat berguna bagi anda yang memiliki blog dengan tema galeri foto karena bisa memberi kesan elegan dan membuatnya tampak lebih profesional. Mau tau caranya?

Sebelum saya menjelaskan lebih lanjut, silahkan baca kutipan berikut dari Dynamic Drive tentang jQuery Image Magnify v1.1:

jQuery Image Magnify enables any image on the page to be magnified by a desired factor when clicked on, via a sleek zoom in/out effect. The enlarged image is centered on the user's screen until dismissed. It works on both images with and without explicit width/height attributes defined. This means you can take a large image that by default would look out of place when shown, shrink it using explicit width/height attributes, then enable users to magnify it on demand to its original dimensions when the image is clicked on using this script.

Nha, sekarang mari kita langsung pada pokok permasalahan...

Berikut Cara Memasang jQuery Image Magnify v1.1:

1. Login ke akun Blogger anda

2. Pilh Layout > Edit HTML, lalu centang Expand Widget Template

3. Cari kode </body>, lalu paste kode berikut di atasnya:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://tipsbloggerzacky.googlecode.com/files/jim-jquery.magnifier.js">
/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Brough to you by: Tips Blogger Zacky (tips-blogger-zacky.blogspot.com)
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
* This notice MUST stay intact for legal use
***********************************************/
</script>

4. Klik Save Template.

Selanjuntnya, cara mengunakan jQuery Image Magnify v1.1:

1. Fungsi Standar
Dalam fungsi standar, kita harus menambahkan atribut class="magnify" ke dalam tag img.
Kodenya:

<img src"URL-GAMBAR" class="magnify">

Ganti URL-GAMBAR dengan url gambar anda.

Jika anda ingin menampilkan gambar yang akan di zoom dengan ukuran yang lebih kecil dari yang asilnya, maka tambahkan atribut style="width:50px; height:30px; border:none;" ke dalam tag img.
Keterangan:
- width:50px > menunjukkan lebar gambar dalam pixel, ganti nilai 50 sesuai keinginan.
- height:30px > menunjukkan tinggi gambar dalam pixel, ganti nilai 30 sesuai keinginan.
- border:none > menghilangkan border gambar

Penempatan kodenya:

<img src="URL-GAMBAR" class="magnify" style="width:50px; height:30px; border:none;"/>

Contoh:

<img src="http://tipsbloggerzacky.googlecode.com/files/50000.jpg" class="magnify" style="width:250px; height:123px; border:none;"/>

Hasilnya:

Note: Jika anda tidak menggunakan atribut style="width:px; height:px; border:none;", maka perbesaran gambar akan didasarkan pada ukuran aslinya.

# Memodifikasi Fungsi Standar #
Untuk memodifikasi fungsi standar kta harus menambahkan beberapa atribut, yaitu:

- data-magnifyby="number" > berfungsi untuk menentukan jumlah perbesaran. Ganti number dengan jumlah perbesaran yang anda inginkan. Misalnya 1,2,3,4,5,... *Untuk perbesaran 3 kali tidak perlu ditulis karena sesuai dengan fungsi standar yang telah menentukan perbesaran sebanyak 3 kali.
Penempatan kodenya:
<img src="URL-GAMBAR" class="magnify" data-magnifyby="2" style="width:250px; height:123px; border:none;"/>

- data-magnifyto="number" > berfungsi untuk menentukan perbesaran lebar gambar ke dalam ukuran pixel, sedangkan tinggi akan mengacu kepada jumlah perbesaran lebar tersebut. Ganti number dengan ukuran pixel yang anda inginkan (tidak perlu ditambah dengan px). *Untuk menggunakannya, anda harus menghilangkan atribut data-magnifyby="number".
Penempatan kodenya:
<img src="URL-GAMBAR" class="magnify" data-magnifyto="500" style="width:250px; height:123px; border:none;"/>

- data-magnifyduration="number" > berfungsi untuk menentukan durasi perbesaran dari ukuran asli ke ukuran yang telah diperbesar. Ganti number dengan 500 untuk 0,5 detik, 2000 untuk detik. *Penulisan durasi dalam satuan milisecond. Untuk durasi 500 tidak perlu ditulis karena sesuai dengan fungsi standar yang telah menentukan durasi perbesaran selama 500 milisecond atau 0,5 detik.
Penempatan kodenya:
<img src="URL-GAMBAR" class="magnify" data-magnifyby="2" data-magnifyduration="1000" style="width:250px; height:123px; border:none;"/>

Contoh:

<img src="http://tipsbloggerzacky.googlecode.com/files/SAVING.JPG" class="magnify" data-magnifyby="2" data-magnifyduration="1000" style="width:248px; height:320px; border:none;"/>

Haslinya:

2. Membuat Link Gambar Yang Akan Diperbesar
Untuk membuat link gambar, kita harus menambahkan atribut id="ID-GAMBAR" dan membuat tag linknya.
Penempatan kodenya:

<img id="ID-GAMBAR" src="URL-GAMBAR" class="magnify" data-magnifyby="4" style="width:200px; height:150px; border:none;"/>
<a href="#" rel="magnify[ID-GAMBAR]">NAMA-LINK</a>

Contoh:

<img id="baby" src="http://tipsbloggerzacky.googlecode.com/files/get%20to%20the%20choppa%21.jpg" class="magnify" data-magnifyby="2" style="width:250px; height:198px; border:none;"/> <br /><a href="#" rel="magnify[baby]">Klik aqyu donk...</a>

Hasilnya:

Klik aqyu donk...

3. Membuat Efek Zoom Gambar Pada Link Dropdown Menu
Kodenya:

<form>
<select id="imageselect">
<option>Final Fantasy VIII Images</option>
<option>Squall</option>
<option>Rinoa</option>
<option>Squall-Rinoa_1</option>
<option>Squall-Rinoa_2</option>
</select>
</form>
<img id="imagebox" src="http://tipsbloggerzacky.googlecode.com/files/Squall.jpg" class="magnify" data-magnifyby="2" style="width:300px;height:225px; border:none;" />
<script type="text/javascript">
var imagebox=document.getElementById("imagebox")
var imageselect=document.getElementById("imageselect")
var imagelist=["http://tipsbloggerzacky.googlecode.com/files/Squall.jpg", "http://tipsbloggerzacky.googlecode.com/files/Rinoa.jpg", "http://tipsbloggerzacky.googlecode.com/files/Squall-Rinoa_1.jpg", "http://tipsbloggerzacky.googlecode.com/files/Squall-Rinoa_2.jpg"]
imageselect.onchange=function(){
if (this.selectedIndex!=0){
imagebox.src=imagelist[this.selectedIndex-1]
jQuery(imagebox).imageMagnify({
magnifyby: 2
})
}
}
</script>

Keterangannya.... Ah,, nggak jadi aahh, cape' jelasin smuanya... Lagian dengan mencari tau sendiri keterangannya bisa lebih cepat nangkapnya, ya nggak?

Oya, ini hasil kode yang tadi:

Nha, itulah artikel SINGKAT tentang jQuery Image Magnify v1.1. Bagi anda yang memiliki keraguan, silahkan request disini untuk diadakannya sesi tanya jawab tentang jQuery Image Magnify v1.1.

Ok, untuk sementara silahkan di coba dulu. Saya mau tidur dulu nih, hehehe...

Jangan lupa kasih komentar ya...

18 Back to Top Buttons

2009-12-11T19:43:00.001+07:00

Pastinya anda sudah tau cara membuat tombol Back to Top? Ya kan? Kalau belum, baca dulu disini.
Nha, sekarang saya akan membagikan 19 tombol Back to Top yang sangat menarik. Mau?

Jangan lupa kasih komentar ya...

21 Posts Separator Images

2009-12-11T19:34:00.003+07:00

Ehhmm...!! Selamat malam semuanya... Anda sudah tau cara membuat separator artikel kan? Kalu belum baca dulu disini. Kalau sudah, kali ini saya akan membagikan 21 gambar separator artikel tersebut. Mau?

Mau yang lebih? Kunjungi situs berikut:

- leehansen.com
- clipartandcrafts.com
- bigoo.ws

Jangan lupa kasih komentar ya...

Facebox, Blogger Lightbox ala Facebook

2009-12-10T22:24:00.016+07:00

Wow! Lagi lagi saya akan membahas widget yang ada hubungannya dengan Facebook. Widget yang akan saya bahas kali ini adalah lightbox blogger yang bergaya Facebook, namanya Facebox. Facebox dibuat oleh Famspam.com dan dipublikasikan oleh Dynamic Drive. Jika kita meng-klik link atau foto maka akan muncul pop-up box. Sebagai contoh, coba anda klik link Contact Me pada bagian TopNavBar blog saya ini. Muncul pop-up box seperti yang ada di Facebook kan? Mau tau cara membuatnya?

Sebelum saya menjelaskan lebih lanjut, silahkan baca kutipan berikut dari Dynamic Drive tentang Facebox:

Facebox is a lightweight Facebook-style lightbox which can display images, divs, or entire remote pages (via Ajax) inline on the page and on demand. It uses the compact jQuery library as its engine, unlike Lightbox v2.0, which uses Prototype.

Nha, sekarang mari kita langsung pada pokok permasalahan...

Berikut Cara Memasang Facebox:

1. Login ke akun Blogger anda

2. Pilh Layout > Edit HTML, lalu centang Expand Widget Template

3. Cari kode </body>, lalu paste kode berikut di atasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://tipsbloggerzacky.googlecode.com/files/tbzfacebox.js' type='text/javascript'/>

<script type='text/Javascript'>
function togglediv (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="divshown") { whichpost.className="divhidden"; } else { whichpost.className="divshown"; }
}
</script>

<script type='text/Javascript'>
function showhide(id) {
var elem = document.getElementById(id);
if (elem.style.display=="none") elem.style.display = "block";
else elem.style.display = "none";}
</script>

<script type='text/javascript'>
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>

4. Selanjutnya cari kode ]]></b:skin>, lalu paste kode berikut di atasnya:

.thickstyle{background: silver;}
#facebox .b { background:url(http://tipsbloggerzacky.googlecode.com/files/b.png);}
#facebox .tl { background:url(http://tipsbloggerzacky.googlecode.com/files/tl.png);}
#facebox .tr { background:url(http://tipsbloggerzacky.googlecode.com/files/tr.png);}
#facebox .bl { background:url(http://tipsbloggerzacky.googlecode.com/files/bl.png);}
#facebox .br { background:url(http://tipsbloggerzacky.googlecode.com/files/br.png);}
#facebox { position: absolute;width:100%;top:0;left: 0;z-index: 100;text-align: left;}
#facebox .popup { position: relative;}
#facebox table { margin: auto; border-collapse: collapse;}
#facebox .body { padding: 10px; background: #fff; width: 370px;}
#facebox .loading {text-align: center;}
#facebox .image {text-align: center;}
#facebox img {border: 0;}
#facebox .footer {border-top: 1px solid #DDDDDD;padding-top: 5px; margin-top: 10px;
text-align: right;}
#facebox .header {padding-top: 0px; margin-top: 0px; text-align: right;}
#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {height: 10px; width: 10px;
overflow: hidden;padding: 0;}
.current_page_item {background:#dee5e5;color:#2299ff;}

5. Klik Save Template.

Selesai untuk pemasangan script. Lalu gimana cara menggunakannya di blog?

Tenang, setelah memasang scipt Facebox, maka kita bisa menggunakannya untuk beberapa hal, yaitu:

1. Menampilkan gambar
Kodenya:

<a href="URL-GAMBAR-ANDA" rel="facebox">NAMA LINK</a>

Contoh:

<a href="http://i45.tinypic.com/kbydxv.jpg" rel="facebox">Rock ' Roll..!!</a>

Hasilnya akan seperti ini.

2. Menampilkan tag DIV
Di dalam tag DIV kita bisa memasukkan kode-kode widget, text, pengumuman, contact form, dll. Tag DIV ini harus ditambahkan atribut style="display:none" supaya isinya tidak muncul sebelum kita meng-klik link Facebox.

Kodenya:

<a href='#ID TAG DIV' rel='facebox'>NAMA LINK DIV</a><div id='ID TAG DIV' style='display:none'>ISI TAG DIV</div>

Contoh:

<a href='#contact-me' rel='facebox'>Contact Me</a><div id='contact-me' style='display:none'><form method="post" action="http://www.emailmeform.com/fid.php?formid=502783" enctype="multipart/form-data" accept-charset="UTF-8"><table cellpadding="2" cellspacing="0" border="0" bgcolor="#FFFFFF"><tr><td><font face="Verdana" size="2" color="#000000"></font> <div style="" id="mainmsg"> </div></td></tr></table><br><table cellpadding="2" cellspacing="0" border="0" bgcolor="#FFFFFF"><tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#000000">Your Name</font></td> <td><input type="text" name="FieldData0" size="30"> </td></tr><tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#000000">Your Email Address</font></td> <td><input type="text" name="FieldData1" size="30"> </td></tr><tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#000000">Subject</font></td> <td><input type="text" name="FieldData2" size="30"> </td></tr><tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#000000">Message</font></td> <td><textarea name="FieldData3" cols="60" rows="10"></textarea><br> </td></tr><tr> <td colspan="2"><table cellpadding=5 cellspacing=0 bgcolor="#E4F8E4" width="100%"><tr bgcolor="#AAD6AA"><td class="label" colspan="2"><font color="#FFFFFF" face="Verdana" size="2"><b>Image Verification</b></font></td></tr><tr><td class="captcha" style="padding: 2px;" width="10"><img src="http://www.emailmeform.com/turing.php" id="captcha" alt="captcha"></td><td class="field" valign="top"><div><font color="#000000">Please enter the text from the image</font>:<br><input type="text" name="Turing" value="" maxlength="100" size="10"> [ <a href="#" onclick=" document.getElementById('captcha').src = document.getElementById('captcha').src + '?' + (new Date()).getMilliseconds()">Refresh Image</a> ] [ <a href="http://www.emailmeform.com/?v=turing&pt=popup" onClick="window.open('http://www.emailmeform.com/?v=turing&pt=popup','_blank','width=400, height=500, left=' + (screen.width-450) + ', top=100');return false;">What's This?</a> ]</div></td></tr></table></td></tr><tr> <td> </td> <td align="right"><input type="text" name="hida2" value="" maxlength="100" size="3" style="display : none;"><input type="submit" class="btn" value="Send email" name="Submit"> <input type="reset" class="btn" value=" Clear " name="Clear"></td></tr><tr><td colspan=2 align="center"><br></td></tr></table></form></div>

Maka hasilnya akan seperti Contact Me

3. Menampilkan Halaman External Yang Berekstensi .htm dalam server yang sama
Kodenya:

<a href="External.htm" rel="facebox[.thickstyle]">NAMA LINK</a>

Hmm, anda suka widget ini?
Untuk sementara, silahkan coba dulu... Jika anda punya banyak pertanyaan tentang tips ini, maka akan saya jelaskan lebih lanjut pada sesi tanya jawab tentang Facebox. Sesi tanya jawab akan saya buka setelah ada request pertama di komentar postingan ini. Jadi bagi anda yang mau bertanya tentang Facebox sedangkan sesi tanya jawabnya belum ada, silahkan request dulu disini dan langsung buat pertanyaan anda. Pertanyaan harus detail supaya jawabannya sesuai keinginan anda.

Jangan lupa kasih komentar ya...

Ok, salam blogger!!!

Cara Mengganti Link Read More Dengan Gambar

2009-12-10T19:04:00.002+07:00

Selamat malam semuanya! Anda sudah tahu cara membuat read more kan? Kalau belum silahkan baca dulu disini. Jika kita membuat read more, di akhir abstraksi artikel kan ada link bertuliskan read more atau baca selengkapnya. Coba anda lihat pada link read more blog saya ini, disana tidak ada tulisan read more, tapi sebuah gambar / tombol . Nha di tips kali ini saya akan menjelaskan cara mengganti tulisan link read more anda dengan gambar seperti yang saya punya ini. Mau?

Berikut Cara Mengganti Link Read More Dengan Gambar:

1. Login ke akun Blogger anda

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

3. Cari kode link read more anda, seperti ini:

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

4. Jika sudah, ganti tulisan Read More... dengan kode berikut:

<img border="0" src="URL-GAMBAR-READMORE-ANDA">

Ganti URL-GAMBAR-READMORE-ANDA dengan url gambar anda, contoh:

<img border="0" src="http://i46.tinypic.com/aewkte.gif">

Anda bisa men-dowloand beberapa tombol read more disini. Password: tips-blogger-zacky.blogspot.com

5. Terakhir, klik Save Template.

Selamat mencoba...

Jangan lupa kasih komentar ya...

Windows Vista TCPIP UAC PATCH

2009-12-09T21:33:00.002+07:00

Bagi anda yang memiliki sistem operasi Windows Vista mungkin sering mendapat halangan koneksi oleh UAC (User Account Control) sehingga koneksi yang ada tidak sesuai dengan yang anda harapkan. Nha, kali ini saya akan membagikan tips untuk mengatasi masalah tersebut. Caranya dengan menggunakan TCPIP UAC PATCH yang di publikasikan oleh Securevista.net. Cara kerja patcher ini bisa dibilang cukup simple karena hanya mengubah sedikit key sistem registry dan men-disable UAC yang menjadi penghalang tadi. Setelah di patch, maka anda akan memiliki "70.000 open half connections". Wow, pasti bisa lebih kencang kalau seperti itu. Mau dapat patcher ini?

Download TCPIP UAC PATCH

Password: tips-blogger-zacky.blogspot.com

Additional Downloads:

Download WinZip | Download WinRar

Selamat mencoba...

Jangan lupa kasih komentar ya...

Cara Membuat Favicon Blog

2009-12-09T21:28:00.001+07:00

Favicon atau Favourite Icon adalah icon kecil yang berada di samping alamat blog atau pada tab browser. Jika anda membuat blog di Blogger.com, maka favicon yang akan muncul adalah favicon Blogger tersebut. Coba anda lihat favicon blog saya ini , berbeda dengan favicon Blogger kan? Nha, di tips kali ini saya akan menjelaskan cara membuat favicon untuk blog anda. Mau?

Berikut Cara Membuat Favicon Blog:

1. Pertama dan utama sekali, anda harus menyiapkan gambar yang akan dijadikan favicon (16x16 pixel)

2. Jika sudah, convert gambar tersebut hingga berekstensi .ico. Anda bisa meng-convert gambar tersebut dengan menggunakan software ini, atau dengan online tool seperti http://www.favicongenerator.com.

3. Setelah itu, upload favicon anda ke sebuah image hosting yang support dengan .ico lalu anda akan mendapatkan url favicon anda. Contoh:

4. Sekarang login ke akun Blogger anda

5. Pilih Layout > Edit HTML

6. Cari kode </head>, lalu paste kode berikut di atasnya:

<link rel="shortcut icon" href="URL-FAVICON-ANDA" type="image/ico"/>

Ganti URL-FAVICON-ANDA dengan url favicon yang telah anda upload tadi.

7. Terakhir, klik Save Template.

Selamat mencoba...

Jangan lupa kasih komentar ya...

Cara Menampilkan 10 Artikel Di Recent Posts

2009-12-09T20:57:00.003+07:00

Ehmm...! Selamat malam semuanya... Anda mungkin bertanya kenapa saya selalu berkata selamat malam. Jawabannya adalah karena saya selalu melakukan posting pada malam hari, tidak pernah pagi atau pun siang. Hehehe...! Maklum lah, dari pagi sampai siang saya sibuk terus, jadi tidak sempat ng-blog. Ok sudah cukup muqodimah pendek dari saya, sekarang mari kita langsung pada tips pembuka pada malam hari ini.
Widget Recent Posts bawaan Blogger hanya bisa menampilkan paling banyak 5 artikel terbaru, ya kan? Coba anda lihat pada bagian sidebar blog saya ini, disana ada widget "Posting Terbaru". Disana saya menampilkan 10 artikel. Gimana dengan yang anda punya? Masih 5 artikel paling banyak kan? Anda ingin menambahnya? Tenang, di tips kali ini saya akan menjelaskan cara membuat widget seperti yang saya punya itu. Mau?

Berikut Cara Menampilkan 10 Artikel Di Recent Posts:

1. Login ke akun Blogger anda

2. Pilih Layout > Page Elements

3. Tambahkan Page Elements dengan HTML/Javascript

4. Paste kode berikut ke dalam kotak content:

Ganti NAMABLOGANDA dengan alamat blog anda.

5. Terakhir, klik Save.

Note:
- Anda bisa menampilkan lebih dari 10 artikel dengan mengganti nilai var postshow=10; dengan nilai yang lebih tinggi. Di tips ini saya menjelaskan cara untuk 10 artikel karena menurut saya jumlah paling banyak dan baik untuk artikel terbaru adalah 10.

- Anda juga bisa menggunakan widget ini untuk Recent Comments / Komentar terbaru. Caranya, cari kode berikut:

<script src="http://NAMABLOGANDA.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>

Ganti tulisan posts dengan comments.

Selamat mencoba...

Jangan lupa kasih komentar ya...

Cara Membuat Duck Menu Animasi

2009-12-08T20:39:00.001+07:00

Duck menu? Duck artinya bebek, jadinya duck menu artunya menu untuk memilih bebek? Hahaha...!!!
Bukan.. Duck menu itu yang biasa kita lihat di windows itu lho.. Hehe.. Nha, sekarang saya akan menjelaskan cara membuatnya. Mau tau?

Berikut Cara Membuat Duck Menu Animasi:

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML, lalu centang Expand Widget Template

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

<script src='http://tipsbloggerzacky.googlecode.com/files/jquery-1.2.2.pack.js' type='text/javascript'/>
<script src='http://tipsbloggerzacky.googlecode.com/files/interface.js' type='text/javascript'/>

4. Selanjtnya, cari kode ]]></b:skin>, lalu paste kode berikut di atasnya:

/* duck menu by tips-blogger-zacky.blogspot.com start
----------------------------------------------- */
.fisheye{
text-align: center;
height: 62px;
position: relative;
}
a.fisheyeItem
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
a.fisheyeItem2
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
bottom: 0;
}
.fisheyeItem img
{
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.fisheyeItem2 img
{
border: none;
margin: 5px auto 0 auto;
width: 100%;
}
.fisheyeItem span,
.fisheyeItem2 span
{
display: none;
positon: absolute;
}
.fisheyeContainter
{

height: 50px;
width: 200px;
left: 500px;
position: absolute;
}
#fisheye2
{
position: absolute;
width: 100%;
bottom: 0px;
}

/* duck menu by tips-blogger-zacky.blogspot.com end
----------------------------------------------- */

5. Langkah terakhir, cari kode <body>, lalu paste kode berikut dibawahnya:

<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='#'><img src='http://4.bp.blogspot.com/_Yhcwq7ZzbIw/SUACQn-ny4I/AAAAAAAAAUc/yy_PBS_YWrc/s1600/music-trans.png' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='#'><img src='http://2.bp.blogspot.com/_Yhcwq7ZzbIw/SUACbeYOO5I/AAAAAAAAAUk/_Zfiy_TiZtA/s1600/rss2-trans.png' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='#'><img src='http://2.bp.blogspot.com/_Yhcwq7ZzbIw/SUACQeWOkPI/AAAAAAAAAUU/-1lW9Q0I4-A/s1600/link-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='http://1.bp.blogspot.com/_Yhcwq7ZzbIw/SUACQfGZMrI/AAAAAAAAAUM/7HS7vAdCjls/s1600/home-trans.png' width='30'/><span>Clock</span></a>
<a class='fisheyeItem' href='#'><img src='http://3.bp.blogspot.com/_Yhcwq7ZzbIw/SUACP2ct3iI/AAAAAAAAAUE/Wq7jf6tILFE/s1600/history-trans.png' width='30'/><span>Web</span></a>
<a class='fisheyeItem' href='#'><img src='http://1.bp.blogspot.com/_Yhcwq7ZzbIw/SUACP5KHlaI/AAAAAAAAAT8/0PJpHH9DzLE/s1600/email-trans.png' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='#'><img src='http://1.bp.blogspot.com/_Yhcwq7ZzbIw/SUACP6w_J0I/AAAAAAAAAT0/RXNWTRfB9po/s1600/video-trans.png' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='#'><img src='http://3.bp.blogspot.com/_Yhcwq7ZzbIw/SUACPp7mBQI/AAAAAAAAATs/UKxtQ51vOF0/s1600/rss-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='http://4.bp.blogspot.com/_Yhcwq7ZzbIw/SUACBJFd9ZI/AAAAAAAAATk/oJ5lL_SGpFI/s1600/email-trans.png' width='30'/><span>Clock</span></a>
<a class='fisheyeItem' href='#'><img src='http://3.bp.blogspot.com/_Yhcwq7ZzbIw/SUABzssGnaI/AAAAAAAAATc/hxJx2j7VRQA/s1600/calendar-trans.png' width='30'/><span>Web</span></a>
<a class='fisheyeItem' href='#'><img src='http://4.bp.blogspot.com/_Yhcwq7ZzbIw/SUABnXdQNdI/AAAAAAAAATU/jPWR6TthALk/s1600/portfolio-trans.png' width='30'/><span>Web</span></a>
</div>
</div>
<script type="text/javascript">
$(document).ready(
function()
{
$('#fisheye').Fisheye(
{
maxWidth: 15,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 30,
proximity: 70,
halign : 'center'
}
)
}
);
</script>

Silahkan costumisasi kode di atas dengan mengganti kode yang berwarna biru sesuai keinginan anda.

5. Terkahir, klik Save Template.

Selamat bermain dengan bebek2 anda, heehehe...

Jangan lupa kasih komentar ya...

NEW! Facebook Chatting Di Blog

2009-12-08T20:02:00.005+07:00

Anda semua pasti sudah tahu tentang Facebook?(hari gini nggat tau facebook? dodol banget! Hehehe...) Tentunya anda juga sudah atau bahkan sering menggunakan fasilitas chattingnya. Nha, sekarang fasilitas tersebut bisa anda pasang di blog. Dengan menggunakan sebuah widget yang bernama FooterChat, anda dan pengunjung lain bisa chatting layaknya chatting di Facebook. Mau tau memasangnya?

Caranya sangat mudah, anda tinggal pasang script berikut ke bagian footer blog anda:

<script type="text/javascript" src="http://www.footerchat.com/chat/cons.js"/>

Sebagai contoh bisa anda lihat disini.

Selamat ber-facebook ria di blog anda...

Jangan lupa kasih komentar ya...

Meletakkan Widget di Sudut Halaman Blog

2009-12-08T19:19:00.001+07:00

Selamat malam semuanya! Kali ini saya akan menjelaskan sebuat trik sederhana untuk meletakkan "......" di sudut halaman blog. Kenapa saya beri tanda "......" ? Karena kita bisa meletakkkan widget, gambar, text, atau apa pun kode yang kita inginkan. Semuanya itu bisa kita letakkan di bagian kiri / kanan atas, atau kiri / kanan bawah. Contoh, anda bisa lihat sendiri pada blog saya ini di bagian kanan bawah, terdapat widget Follow Me on Twitter (jangan lupa klik untuk follow saya di twtter ya, hehe...). Mau tau cara meletakkannya disana?

Berikut Cara Meletakkan Widget di Sudut Halaman Blog:

1. Seperti biasa, login dulu ke akun Blogger anda

2. Cari kode ]]></b:skin>, lalu paste kode css berikut di atasnya:

#corner_trick {
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); }

Kode yang berwarna merah menunjukkan posisi widget. Kalau mau letaknya di atas ganti bottom dengan top, kalau mau di kiri ganti right dengan left.

3. Selanjutnya, cari kode </body> lalu paste kode berikut di atasnya:

<div id="corner_trick">

</div>

4. Terakhir, klik Save Template.

Gimana? Mudahkan? Nha, sekarang selamat "mojok" dengan widget anda... Hehehe...

Jangan lupa kasih komentar ya...

Zinmag Remedy : Free Premium Blogger Template

2009-12-07T22:36:00.007+07:00

Zinmag Remedy adalah sebuah professional magazine template untuk Blogger.

Berikut Deskripsi Zinmag Remedy:

- Kompatibilitas: Internet Explorer 8, Firefox RC3, Opera 9.6, Google Chrome 0.3.154.9
- 4 columns.
- Gadget tersedia langsung.
- 2 Navigasi Bar
- Memiliki Search Box
- Memiliki tempat video
- Memiliki gadget di bagian footer
- dll.

Demo Zinmag Remedy | Download Zinmag Remedy

Jangan lupa kasih komentar ya...

Memasang Widget Share on Facebook

2009-12-07T21:50:00.001+07:00

Ehmm.. Selamat malam semuanya! Kali ini saya akan bagi tips yang masih ada hubungannya dengan Widget Sharing & Bookmarking Blogger yang telah saya posting 2 hari yang lalu. Ini sedikit beda karena widget yang hanya membagikan artikel ke Facebook, namanya Share on Facebook. Dengan memasang widget ini, kita atau pengunjung bisa membagikan artikel kita ke status profil facebook mereka. Berharap dengan itu bisa membuat artikel kita bisa dibaca oleh banyak orang sehigga dapat meningkatkan traffic blog atau website kita. Mau tau cara memasangnya?

Untuk memasangnya bisa kita lakukan dengan 2 cara, yaitu:

1. Mengambil widget langsung ke Facebook
- Buka situs ini

- Pilih style widget yang anda suka, lalu copy kode yang diberikan.

- Login ke akun Blogger anda, Pilih Layout > Edit HTML, lalu centang Expand Widget Template.

- Cari kode <div class='post-header-line-1'/>. Paste kode widget anda tadi tepat di bawahnya.

- Jika anda tidak menemukan kode tersebut, coba cari kode <data:post.body/>, paste kode widget anda tepat di atasnya.

- Klik Save Template untuk menyimpan perubahan.

2. Costumisasi Widget
Ada beberapa pilihan costumisasi widget ini,di antaranya:

-
Kodenya:

<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url'><img src='http://i15.photobucket.com/albums/a398/syilpid/share_on_facebook_2.png' border='0'/></a>

-
Kodenya:

<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url'><img src="http://i15.photobucket.com/albums/a398/syilpid/share_on_facebook_4.png" border="0"></a>

-
Kodenya:

<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url'><img src="http://i15.photobucket.com/albums/a398/syilpid/share_on_facebook_3.png" border="0"></a>

Jika anda hanya ini menampilkan tulisan, contoh "Share on Facebook", anda bisa menggantinya dengan kode berikut:

<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url'>Share on Facebook</a>

Sudah pilih style mana yang akan anda pasang? Kalau sudah, sekarang login ke akun Blogger anda. Pilih Layout > Edit HTML, lalu centang Expand Widget Template. Cari kode <data:post.body/>, paste kode widget yang anda pilih tadi tepat di atasnya.

Gimana? Mudahkan?

Selamat mencoba... Oya, jangan lupa add FB saya ya, disini.. hhehe... tHanks...

Jangan lupa kasih komentar ya...

Cara Memasang Widget Share The Love

2009-12-07T19:32:00.010+07:00

Share The Love merupakan salah satu widget sharing & bookmarking. Widget Share The Love memilikI tampilan yang sangat menariK. Dengan menggunakan widget ini kita bisa membagikan atau mengirimkan artikel ke 18 situs jejaring sosial. Yaitu Stumbleupon, Digg, Reddit, Delicious, Yahoobuzz, Blinklist, Technorati, Facebook, Twitter, Myspace, Mixx, Scriptstyle, Designfloat, Comfeed, Newsvine, Linkedin, Google, Friendfeed. Lalu gimana cara memasang widget itu blog? Mau tau?

Berikut Cara Memasang Widget Share The Love:

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML, lalu centang Expand Widget Template

3. Cari kode ]]></b:skin>, lalu paste kode css berikut tepat di atasnya:

/* start share the love css by tips-blogger-zacky.blogspot.com
----------------------------------------------- */
div.sexy-bookmarks{margin:20px 0 0 0; border: 0;outline: none;clear:both !important}
div.sexy-bookmarks-expand{height:29px; overflow:hidden}
.sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url('http://img31.imageshack.us/img31/176/sexytrans.png') !important; background-repeat:no-repeat}
div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left -1148px !important}
div.sexy-bookmarks ul.socials{width:100% !important; margin:0 !important; padding:0 !important; float:left}
div.sexy-bookmarks ul.socials li{display:inline !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:60px !important; cursor:pointer !important; padding:0 !important}
div.sexy-bookmarks ul.socials li:before, div.sexy-bookmarks ul.socials li:after, div.sexy-bookmarks ul.socials li a:before, div.sexy-bookmarks ul.socials li a:after{content:none !important}
div.sexy-bookmarks ul.socials a{display:block !important; width:60px !important; height:29px !important; text-indent:-9999px !important; background-color:transparent !important}
div.sexy-bookmarks ul.socials a:hover{background-color:transparent !important}
.sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumbleupon, .sexy-stumbleupon:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoobuzz, .sexy-yahoobuzz:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-scriptstyle, .sexy-scriptstyle:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-comfeed, .sexy-comfeed:hover, .sexy-newsvine, .sexy-newsvine:hover, .sexy-linkedin, .sexy-linkedin:hover, .sexy-google, .sexy-google:hover, .sexy-friendfeed, .sexy-friendfeed:hover{background:url('http://img512.imageshack.us/img512/3131/sexysprite.png') no-repeat !important;border: 0;outline: none;}
.sexy-digg{background-position:-980px bottom !important}
.sexy-digg:hover{background-position:-980px top !important}
.sexy-reddit{background-position:-700px bottom !important}
.sexy-reddit:hover{background-position:-700px top !important}
.sexy-stumbleupon{background-position:-630px bottom !important}
.sexy-stumbleupon:hover{background-position:-630px top !important}
.sexy-delicious{background-position:-1190px bottom !important}
.sexy-delicious:hover{background-position:-1190px top !important}
.sexy-yahoobuzz{background-position:-1120px bottom !important}
.sexy-yahoobuzz:hover{background-position:-1120px top !important}
.sexy-blinklist{background-position:-1260px bottom !important}
.sexy-blinklist:hover{background-position:-1260px top !important}
.sexy-technorati{background-position:-560px bottom !important}
.sexy-technorati:hover{background-position:-560px top !important}
.sexy-myspace{background-position:-770px bottom !important}
.sexy-myspace:hover{background-position:-770px top !important}
.sexy-twitter{background-position:-490px bottom !important}
.sexy-twitter:hover{background-position:-490px top !important}
.sexy-facebook{background-position:-1330px bottom !important}
.sexy-facebook:hover{background-position:-1330px top !important}
.sexy-mixx{background-position:-840px bottom !important}
.sexy-mixx:hover{background-position:-840px top !important}
.sexy-scriptstyle{background-position:-280px bottom !important}
.sexy-scriptstyle:hover{background-position:-280px top !important}
.sexy-designfloat{background-position:-1050px bottom !important}
.sexy-designfloat:hover{background-position:-1050px top !important}
.sexy-newsvine{background-position:left bottom !important}
.sexy-newsvine:hover{background-position:left top !important}
.sexy-google{background-position:-210px bottom !important}
.sexy-google:hover{background-position:-210px top !important}
.sexy-comfeed{background-position:-420px bottom !important}
.sexy-comfeed:hover{background-position:-420px top !important}
.sexy-linkedin{background-position:-70px bottom !important}
.sexy-linkedin:hover{background-position:-70px top !important}
.sexy-friendfeed{background-position:-1750px bottom !important}
.sexy-friendfeed:hover{background-position:-1750px top !important}
.sexy-link{ margin-left:25px; float:left}
.sexy-link A{padding:10px 0; width:470px; text-align:right; border:0; outline:none}
/* end share the love css by tips-blogger-zacky.blogspot.com
----------------------------------------------- */

4. Selanjutnya cari kode </head>, lalu paste kode berikut tepat di atasnya:

5. Langkah terakhir, cari kode <data:post.body/>. Paste kode berikut tepat di bawahnya:

<div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'>
<ul class='socials'>
<li class='sexy-delicious'><a class='external' expr:href='"http://del.icio.us/post?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Share this on del.icio.us</a></li>
<li class='sexy-digg'><a class='external' expr:href='"http://digg.com/submit?phase=2&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Digg this!'>Digg this!</a></li>
<li class='sexy-stumbleupon'><a class='external' expr:href='"http://www.stumbleupon.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>Stumble upon something good? Share it on StumbleUpon</a></li>
<li class='sexy-reddit'><a class='external' expr:href='"http://reddit.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Reddit'>Share this on Reddit</a></li>
<li class='sexy-google'><a class='external' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'>Add this to Google Bookmarks</a></li>
<li class='sexy-twitter'><a class='external' expr:href='"http://twitter.com/home?status=Reading: " + data:blog.title + " - " + data:post.url + " (@NAME)"' rel='nofollow' title='Tweet This!'>Tweet This!</a></li>
<li class='sexy-facebook'><a class='external' expr:href='"http://www.facebook.com/share.php?u="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Facebook'>Share this on Facebook</a></li>
<li class='sexy-mixx'><a class='external' expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url' rel='nofollow' title='Share this on Mixx'>Share this on Mixx</a></li>
<li class='sexy-comfeed'><a class='external' expr:href='data:blog.homepageUrl + "feeds/posts/default"' rel='nofollow' title='Subscribe'>Subscribe</a></li>
<li class='sexy-yahoobuzz'><a class='external' expr:href='"http://buzz.yahoo.com/submit/?submitUrl=" + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a></li>
<li class='sexy-linkedin'><a class='external' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Linkedin'>Share this on Linkedin</a></li>
<li class='sexy-designfloat'><a class='external' expr:href='"http://www.designfloat.com/submit.php?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Submit this to DesignFloat'>Submit this to DesignFloat</a></li>
<li class='sexy-technorati'><a class='external' expr:href='"http://technorati.com/faves?add="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Technorati'>Share this on Technorati</a></li>
<li class='sexy-scriptstyle'><a class='external' expr:href='"http://scriptandstyle.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Submit this to Script & Style'>Submit this to Script & Style</a></li>
<li class='sexy-myspace'><a class='external' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u=http"+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Post this to MySpace'>Post this to MySpace</a></li>
<li class='sexy-blinklist'><a class='external' expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Blinklist'>Share this on Blinklist</a></li>
<li class='sexy-friendfeed'><a class='external' expr:href='"http://friendfeed.com/?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on FriendFeed'>Share this on FriendFeed</a></li>
<li class='sexy-newsvine'><a class='external' expr:href='"http://www.newsvine.com/_tools/seed&save?u="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Seed this on Newsvine'>Seed this on Newsvine</a></li>
</ul>
<div style='clear:both;'/>
</div>
<div class='sexy-link'> <font size='1px'>Widget by <a href='http://www.cssreflex.com/' title='Web Design Blog, Blogger Hacks and Blogger templates'>Css Reflex </a>|<a href='http://www.tutzone.org/' title='Tutorials, Rare Downloads, Link Heaven, Tips Tricks, Hacks, Make How, Blogger Tricks And Tutorials, Internet, News, And Many More'> TutZone</a> | Brought to you by : </font><a href='http://tips-blogger-zacky.blogspot.com' target='_blank' title='Blogger Tips - Blogger Template - SEO'><font size='2'>Tips Blogger Zacky</font></a></div>

5. Klik Save Template untuk menyimpan perubahan.

Selamat mencoba...

Thanks to: cssreflex.com

Jangan lupa kasih komentar ya...

Cara Memasang Music Player Di Blog

2009-12-06T22:20:00.003+07:00

Anda suka musik? Hmm,, saya rasa anda semua tidak akan berkata tidak, ya kan? Saat ini dunia musik sudah sangat berkembang dengan pesat. Ini terlihat jelas pada dunia musik Indonesia yang telah memunculkan banyak penyanyi baru, baik itu solo ataupun group band. Jika blog anda berkaitan dengan dunia entertainment, pastinya pengunjung akan merasa sangat bosan tanpa kehadiran musik di blog anda. Nha, sekarang apa anda ingin blog anda hidup tanpa musik? Tenang, kali ini saya akan menjelaskan cara memasang music player di blog anda itu. Mau?

Berikut Cara Memasang Music Player di Blog:

1. Buka situs Mixpod.com. Kenapa Mixpod.com? Karena situs ini merupakan yang terbaik dan memiliki lebih dari 20 tampilan player.

2. Sebelum membuat music player, anda harus membuat sebuah akun disana.

3. Login ke Mixpod.com jika akun anda sudah diaktifkan

4. Pilih tampilan music player yang anda. Disana terdapat lebih dari 20 tampilan yang berbeda dan sangat menarik. Jika sudah, klik Create A Playlist

5. Ada 2 cara menambahkan lagu ke playlist, yaitu:

- Yang pertama dengan mencari lagu atau musik yang terdapat dalam database Mixpod.com. Caranya, ketik keyword lagu atau musik yang anda cari di search bar. Setelah hasil pencarian anda keluar, klik tombol plus / add yang ada disamping kanan lagu untuk menambahkannya ke playlist anda. *Sebaiknya, terlebih dulu anda coba memilih lagu yang kualitas suaranya bagus dan buffering yang cepat dengan menekan tombol play.

- Yang kedua dengan mencari url musik di search engine. Klik tulisan Add Url, lalu paste url musik anda.

6. Setelah anda memilih lagu2, klik Save Playlist.

7. Beri judul dan deskripsi playlist anda, lalu klik tombol Save (get code) yang ada di bagian bawah halaman. Copy kode yang diberikan tersebut.

Nha, selesai untuk proses memndapatkan music player. Sekarang anda tingga pasang music player tersebut di blog. Caranya udah tahu kan? Itu lho, pilih Layout > Page Elements. Tambahkan Page Elements dan pilih HTML/Javascript. Paste kode html music player tadi ke kotak content, lalu klik Save. Jadi deh...

Gimana? Mudahkan? Selamat berekspresi dengan music player baru anda, hehehe...

Jangan lupa kasih komentar ya...

Memasang Widget Recent Posts Dengan Thumbnail

2009-12-05T20:52:00.002+07:00

Hy semuanya.. Ada news baru nih.. Biasanya widget recent posts / posting terbaru hanya menampilkan judulnya, ya kan? Nha, di tips kali ini saya samu membagikan widget baru yang bisa menampilkan posting terbaru dengan thumbnail, namanya Advanced Recent Posts. Mau tau cara memasangnya?

Berikut Cara Memasang Widget Advanced Recent Post:

1. Seperti biasa, login ke akun Blogger anda

2. Pilih Layout > Page Elements

3. Tambahkan Page Elements, lalu ketik "recent posts with thumbnails" di tab search widget nya.

4. Kalau udah keluar widgetnya, klik tombol

5. Atur widget tersebut lalu klik Save.

Gimana? Mudahkan?

Selamat mencoba...

Jangan lupa kasih komentar ya...

Widget Sharing & Bookmarking Blogger

2009-12-05T20:07:00.005+07:00

Mengirim atau membagikan artikel ke situs jejaring sosial merupakan salah satu faktor dalam seo blog. Hal ini karena kita bisa mendapat banyak backlink dari situs2 tersebut dan itu merupakan faktor penting untuk meningkatkan page rank. Lalu gimana caranya supaya pengunjung blog bisa dengan mudah membagikan artikel kita ke situs jejaring sosial? Mau tau?

Berikut adalah 4 widget sharing dan bookmarking terbaik untuk Blogger:

1. AddtoAny

Deskripsi:
- Bisa membagikan artikel ke lebih dari 120 situs jejaring sosial
- Pengunjung bisa memilih layanan khusus
- Pengunjung bisa mengirim artikel kita ke temannya via email
- Pengunjung bisa mem-bookmark artikel kita ke web browser nya
- Widget bisa di atur dengan mudah

2. AddThis

Deskripsi:
- Widget sharing dengan ukuran terkecil
- Mempunyai layanan terbanyak (lebih dari 170 situs jejaring sosial)
- Bisa menerjemahkan artikel ke lebih dari 50 bahasa secara otomatis
- Menu dan warna widget bisa di atur
- Bisa mengetahui cara pengunjung membagikan artikel

3. ShareThis

Deskripsi:
- Hanya terdapat 45 layanan
- Hanya berbahasa Inggris
- Anda bisa memndaftar ke situs ShareThis dan memasukkan alamat email teman anda dan mengirimkan artikel ke meraka

4. Share The Love

Deskripsi:
- Memiliki 18 layanan
- Memliki sistem JQuery Expanding

* Untuk widget Share The Love akan saya jelaskan cara memasangnya di postingan berikutnya.

So, anda pilih yana mana? Jangan sampai salah memilih calon, ntar malah seperti Project Pop yang gagal kawin karena memilih calon hanya dari bagus rupa :r :r.

Jangan lupa kasih komentar ya...

Cara Membuat Tombol Back to Top Blogger

2009-12-05T20:06:00.005+07:00

Malam semuanya! Kali ini saya akan menjelaskan satu tips yang sangat mudah dan penting, yaitu cara membuat tombol Back to Top.
Kenapa sangat mudah? Karena anda akan saya kasih tau tips nya.. :O
Kenapa Penting? Karena bisa mempercepat pengunjung untuk kembali ke bagian paling atas halaman blog kita tanpa harus "scrolling". Dengan begitu mereka bisa dengan mudah mencari navigasi lain blog untuk berlama-lama disana. Hal ini merupakan salah satu cara membuat pengunjung merasa betah dan nyaman di blog. Mau tau caranya?

Berikut Cara Membuat Tombol Back to Top:

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML

3. Paste kode berikut sebelum kode ]]></b:skin> :

.gototop {
background:url(http://3.bp.blogspot.com/_Z_KyM3IvEFQ/S0NoQIQJzoI/AAAAAAAAAys/sIo_pJYRIo4/s400/arrowtopdt6.gif)no-repeat;
display:block;
_display:none;
position:fixed;
z-index:9999;
text-indent:-9999px;
width:17px;
height:17px;
overflow:hidden;
outline:none;
right:8px;
bottom:35px
}
.gotobottom {
background:url(http://4.bp.blogspot.com/_Z_KyM3IvEFQ/S0NoP_eDZQI/AAAAAAAAAyk/Z-BZuY6cx84/s400/arrowdownqe1.gif)no-repeat;
width:17px;
height:17px;
display:block;
_display:none;
position:fixed;
z-index:9999;
text-indent:-9999px;
overflow:hidden;
outline:none;
right:8px;
bottom:15px
}

4. Selanjutnya, cari kode </body>. Paste kode berikut di atasnya:

<a class='gototop' href='javascript:scroll(0,0)' title='Go to Top'>Top</a>
<a class='gotobottom' href='#footer' title='Go to Bottom'>Bottom</a>

5. Terakhir, klik Save Template untuk menyimpan perubahan.

Selamat mencoba...

Jangan lupa kasih komentar ya...

Cara Membuat Separator Artikel

2009-12-05T20:05:00.001+07:00

Hal yang bisa membuat pengunjung merasa betah di blog adalah dengan membuat tampilan blog menjadi lebih menarik, salah satunya dengan membuat tampilan artikel mejadi lebih mudah dibaca dengan memberi sebuah pemisah / separator. Sekarang sudah banyak template yang langsung menyediakan fitur itu, namun masih ada juga yang belum. Untuk anda yang memiliki tempalate yang termasuk kategori itu, di tips kali ini saya akan menjelaskan cara membuat separator artikel tersebut. Mau?

Berikut Cara Membuat Separator Artikel:

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML

3. Cari kode berikut:

.post {
margin: 0 0 40px 0;
width: 90%
}

4. Paste kode berikut tepat di bawah kode .post

background: url(LINK-GAMBAR-SEPARATOR-ANDA);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;

Ganti LINK-GAMBAR-SEPARATOR-ANDA dengan link gambar separator anda.

Contoh:

.post{
background: url(http://4.bp.blogspot.com/_JwD5r652h00/SuttjmoES2I/AAAAAAAAANw/bidxxyqfxwg/s1600/barsnake.gif);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
margin: 0 0 40px 0;
width: 90%;
}

5. Terakhir, klik Save Template untuk menyimpan perubahan.

Selamat mencoba...

Jangan lupa kasih komentar ya...

Meletakkan Iklan Google Adsense Di Tengah Artikel

2009-12-05T20:03:00.001+07:00

Selamat malam Blogger! Kali ini saya mau bahas sedikit tentang Google Adsense. Meskipun saya belum punya akun Adsense :v, tapi tidak apa2 lah, yang jelas saya sudah mau berbagi tentang apa yang saya tau, ya nggak?
Ok, mari kita mulai. Secara umum, iklan google adsense diletakkan di bagian atas atau bawah artikel. Namun saya lihat ada juga beberapa blog yang meletakkanya di tengah2 artikel. Setelah survey ke beberapa daerah tertinggal (bercanda.. :O), akhirnya saya memnukan cara untuk meletakkan iklan tersebut di tengah artikel. Artinya tidak di atas dan tidak juga di bawah, hehe... Mau tau caranya?

Berikut Meletakkan Iklan Google Adsense Di Tengah Artikel:

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML, lalu centang Expand Widget Template

3. Cari kode <data:post.body/>, lalu ganti kode tersebut dengan kode berikut:

<div expr:id='"aim1" + data:post.id'></div>
<div style="clear:both; margin:10px 0">



</div>
<div expr:id='"aim2" + data:post.id'>
<data :post.body/>
</div>
<script type="text/javascript">
var obj0=document.getElementById("aim1<data:post.id/>");
var obj1=document.getElementById("aim2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/x3C!-- adsense --x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

4. Ganti kode  dengan kode Adsense anda

5. Terakhir, klik Save Template.

Selamat mencoba...

Jangan lupa kasih komentar ya...

Menuliskan Karakter Khusus Di Artikel

2009-12-05T19:24:00.005+07:00

Selamat malam semuanya! Di postingan sebelmunya saya telah menjelaskan cara menampilkan kode HTML / Javascript di artikel. Sekarang ada lagi nih tips yang hampir sama dengan itu yaitu cara menampilkan simbol atau karakter khusus di artikel, misalnya simbol Æ. Untuk beberapa simbol anda memang bisa mengcopy langsung dari MS-Word, namun banyak sekali simbol / karakter yang tidak bisa di terjemahkan oleh browser sehingga karakter yang kita inginkan tidak muncul. Lalu gimana caranya? Mau tau?

Untuk menampilkan simbol ke dalam artikel, anda harus mengganti simbol tersebut dengan entitasnya.
Berikut daftar simbol dan entitasnya:

Karakter	Entitas	Karakter	Entitas	Karakter	Entitas
€	€	ý	ý	γ	γ
Ô	Ô	¥	¥	Δ	Δ
Á	Á	Ÿ	&Yuml;	δ	δ
á	á	ÿ	ÿ	Ε	Ε
Â	Â	–	–	ε	ε
â	â	‘	‘	Ζ	Ζ
´	´	’	’	ζ	ζ
Æ	Æ	‚	&sbquo;	Η	Η
æ	æ	“	“	η	η
À	À	”	”	Θ	Θ
à	à	„	&bdquo;	θ	θ
Å	Å	‹	&lsaquo;	Ι	Ι
Ã	Ã	›	&rsaquo;	ι	ι
ã	ã	†	&dagger;	Κ	Κ
Ä	Ä	‡	&Dagger;	κ	κ
ä	ä	‰	&permil;	Ε	Ε
∀	∀	•	•	Λ	Λ
¦	¦	…	…	λ	λ
Ç	Ç	″	″	Μ	Μ
ç	ç	′	′	μ	μ
¸	¸	‾	&oline;	Ν	Ν
¢	¢	⁄	&frasl;	ν	ν
ˆ	&circ;	™	™	Ξ	Ξ
©	©	∂	∂	ξ	ξ
¤	¤	∏	∏	Ο	Ο
°	°	−	−	Π	Π
÷	÷	√	&radic	π	π
É	É	∞	∞	Ρ	Ρ
é	é	∫	∫	ρ	ρ
Ê	Ê	≈	≈	Σ	Σ
ê	ê	≠	≠	σ	σ
È	È	≤	≤	ς	&sigmaf;
è	è	≥	≥	Τ	Τ
Ð	Ð	◊	&loz;	τ	τ
ð	ð	Α	Α	Υ	λ
Ë	Ë	α	α	Φ	Φ
ë	ë	Β	Β	φ	φ
€	€	β	β	Χ	Χ
Ë	Ë	Γ	Γ	Ψ	Ψ
½	½	õ	õ	ψ	ψ
¼	¼	Ö	Ö	Ω	Ω
¾	¾	ö	ö	ω	ω
Í	Í	¶	¶	ô	ô
í	í	±	±	Œ	&OElig;
Î	Î	£	£	œ	&oelig;
î	î	»	»	Ò	Ò
¡	¡	®	®	ò	ò
Ì	Ì	ƒ	&fnof;	ª	ª
ì	ì	Š	&Scaron;	º	º
¿	¿	š	&scaron;	Ø	Ø
Ï	Ï	§	§	ø	ø
ï	ï			Õ	Õ
«	«	¹	¹	Ú	Ú
¯	¯	²	²	ú	ú
µ	µ	³	³	Û	Û
·	·	ß	ß	û	û
¬	¬	Þ	Þ	Ù	Ù
Ñ	Ñ	þ	þ	ù	ù
ñ	ñ	˜	&tilde;	¨	¨
Ó	Ó	×	×	Ü	Ü
ó	ó	ü	ü	Ý	Ý

(Mau tau cara membuat tabel di atas? Klik disini untuk membaca tips nya)

Ingat, anda harus menulis entitas tersebut pada tab edit html, jangan pada tab compose, ok?

Selamat mencoba...

Jangan lupa kasih komentar ya...

Membuat Text Berjalan Di Tab Browser

2009-12-03T19:29:00.006+07:00

Selamat malam semuanya… Apa kabar? Baik kan? Udah sholat maghrib kan? Kalau sudah, sekarang saatnya saya menjelaskan cara membuat text berjalan di tab browser. Berjalan di sini maksudnya bukan seperti kita berjalan dengan kaki :r Tapi text atau judul tab browser yang bergerak dari kanan ke kiri. Sebagai contoh anda bisa lihat di blog saya yang lain yaitu Facebook Zacky :$.
Udah lihat kan? Menarik kan? Mau tau cara membuatnya?

Berikut Cara Membuat Text Berjalan Di Tab Browser:

1. Login ke akun Blogger anda

2. Pilih Layout > Edit HTML

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

<script type='text/javascript'>
//<![CDATA[
msg = "Isi Text 2";
msg = "Isi Text 1" + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>

Ganti tulisan Isi Text 1 dan Isi Text 2 sesuai keinginan anda.
Contoh:

<script type='text/javascript'>
//<![CDATA[
msg = " | Tutorial Facebook - Layout Facebook - Aplikasi Facebook     ";
msg = "Facebook Zacky" + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>

5. Terakhir, klik Save Template.

Gimana? So simple kan? Selamat mencoba...

Jangan lupa kasih komentar ya..

Membuat Link Warna Warni

2009-12-03T19:23:00.009+07:00

Hmm.. Link warna warni? Apa maksudnya?
Untuk menjawab pertanyaan itu, coba anda arahkan cursor anda ke salah satu text yang memiliki link di blog ini.
Udah? Gimana hasilnya? Pasti warna link itu berubah-ubah? Seperti pelangi yang memiliki banyak warna (duh, kalau bicara tentang pelangi saya jadi teringat akan masa2 di Tk dulu. Pelangi2 alangkah indahnya, merah kuning hijau di langi yang biru….. :$ hehe…). Lalu gimna cara membuatnya? Tenang, di tips kali ini saya akan menjelaskan cara membuat kita supaya teringat akan masa2 di TK. Eh salah, cara membuat link warna warni hehe… Mau tau?

Berikut Cara Membuat Link Warna Warni:

1. Login ke akun Blogger anda

2. Pilih Layout > Edit HTML

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

<script src='http://tipsbloggerzacky.googlecode.com/files/rainbow.js'/>

4. Terakhir, klik Save Template.

Selamat mencoba…

Jangan lupa kasih komentar ya…

Cara Membuat Tabel Di Blog

2009-12-03T18:53:00.010+07:00

Tabel merupakan sebuah elemen yang berfungsi untuk mengelompokkan beberapa variabel dengan variabel lain ke dalam sebuah kotak sehingga mudah untuk memahami pembagiannya (itu defenisi menurut saya, menurut anda gimana?). Bagi anda para Blogger yang memilki blog untuk keperluan bisnis tabel ini akan sangat berguna untuk menampilkan daftar harga dan jenis barang yang ditawarkan. Untuk keperluan yang lain juga boleh. Maka dari itu, di tips kali ini saya akan menjelaskan cara membuat tabel tersebut. Mau tau?

Untuk membuat tabel di blog atau website kita menggunkan kode HTML, misal <table> ..... </table>. Didalamnya kita bisa memasukkan beberapa atribut. Di antaranya:

bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya: bgcolor="kode warna" . Klik disini untuk mengetahui kode warna HTML.

align : untuk mengatur perataan teks pada tabel (rata kiri, tengah, rata kanan, atau rata kiri-kanan)Penempatan kodenya: align="left"|"center"|"right"

cellpadding : untuk mengatur jarak antara tepi cell dengan isi cell di dalam sebuah tabel. Penempatan kodenya: cellpadding="pixel"

border : untuk mengatur tingkat ketebalan garis tepi pada tabel. Penempatan kodenya: border="pixel"

cellspacing : untuk mengatur jarak antara cell. Penempatan kodenya: cellspacing="pixel"

height : untuk mengatur tinggi tabel. Penempatan kodenya: height="pixel"

width : untuk mengatur lebal tabel. Penempatan kodenya: width="pixel"

Kode yang terbentuk adalah seperti ini:

<table align="left"|"center"|"right"
bgcolor="kode warna"
border="pixel"
cellpadding="pixel"
cellspacing="pixel"
height="pixel"|"%"
width="pixel"|"%">
.....................
</table>

Kita juga bisa memasukkan beberapa elemen ke dalam elemen tabel, yaitu caption, TH (Table Header), TR (Table Row), dan TD (Table Division).

Elemen caption berfungsi untuk membuat judul tabel. Elemen ini mempunyai atribut align dengan nilai top (judul di atas tabel), dan bottom (judul di bawah tabel).

Kode yang terbentuk adalah seperti ini:

<caption align="top"|"bottom">
.................
</caption>

Elemen TR (Table Row) berfungsi untuk membuat baris. Elemen ini letaknya di dalam elemen tabel. Atribut yang bisa di pakai di dalam TR antara lain:

align : untuk mengatur perataan teks pada tabel (rata kiri, tengah, rata kanan, atau rata kiri-kanan)Penempatan kodenya: align="left"|"center"|"right"

valign : untuk mengatur posisi vertikal teks. Penempatan kodenya: valign="top"|"middle"|"bottom"

bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya: bgcolor="kode warna" . Klik disini untuk mengetahui kode warna HTML.

Kode yang terbentuk adalah seperti ini:

<tr align="left"|"center"|"right"
bgcolor="kode warna"
valign="top"|"middle"|"bottom">
.................
</tr>

Elemen TH (Table Header) berfungsi sebagai header cell pada sebuah kolom tabel. Atribut yang bisa di pakai di dalam TH antara lain:

align : untuk mengatur perataan teks pada tabel (rata kiri, tengah, rata kanan, atau rata kiri-kanan)Penempatan kodenya: align="left"|"center"|"right"

valign : untuk mengatur posisi vertikal teks. Penempatan kodenya: valign="top"|"middle"|"bottom"

bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya: bgcolor="kode warna" . Klik disini untuk mengetahui kode warna HTML

colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor"

rowspan : untuk mengatur baris. Penempatan kodenya : rowspan="nomor"

Kode yang terbentuk adalah seperti ini:

<th align="left"|"center"|"right"
bgcolor="kode warna"
valign="top"|"middle"|"bottom"
colspan="nomor" rowspan="nomor">
.................
</th>

Elemen TD (Table Division) adalah elemen untuk membuat kolom. Atribut yang bisa di pakai di dalam TD antara lain:

align : untuk mengatur perataan teks pada tabel (rata kiri, tengah, rata kanan, atau rata kiri-kanan)Penempatan kodenya: align="left"|"center"|"right"

valign : untuk mengatur posisi vertikal teks. Penempatan kodenya: valign="top"|"middle"|"bottom"

bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya: bgcolor="kode warna" . Klik disini untuk mengetahui kode warna HTML.

colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor"

rowspan : untuk mengatur baris. Penempatan kodenya : rowspan="nomor"

Kode yang terbentuk adalah seperti ini:

<td align="left"|"center"|"right"
bgcolor="kode warna"
valign="top"|"middle"|"bottom"
colspan="nomor" rowspan="nomor">
.................
</td>

Berikut kode membuat tabel sederhana:

<table width="200" border="1">
<tr>
<td>
Contoh Tabel Sederhana
</td>
</tr>
<table>

Hasilnya:

Contoh Tabel Sederhana

Jika anda ingin tulisannya berada ditengah, tambahkan kode align="center" setelah kode <td>.
Jika anda ingin menebalkan border nya, ganti nilai border="1" dengan nilai yang lebih tinggi. Contoh: border="5"

Contoh:

<table width="200" border="5">
<tr>
<td align="center">
Contoh center & border="5"
</td>
</tr>
</table>

Hasilnya:

Contoh center & border="5"

Jika anda ingin menambah kolom, misalnya 3 kolom, kodenya seperti ini:

<table width="300" border="5">
<tr>
<td align="center">
Contoh Kolom 1
</td>
<td align="center">
Contoh Kolom 2
</td>
<td align="center">
Contoh Kolom 3
</td>
</tr>
</table>

Hasilnya:

Contoh Kolom 1

Contoh Kolom 2

Contoh Kolom 3

Jika anda ingin menambah baris, misalnya 2 baris, kodenya seperti ini:

<table width="300" border="5">
<tr>
<td align="center">
Contoh Kolom 1
</td>
<td align="center">
Contoh Kolom 2
</td>
<td align="center">
Contoh Kolom 3
</td>
</tr>
<tr>
<td align="center">
Contoh Baris 2
</td>
<td align="center">
Contoh Baris 2
</td>
<td align="center">
Contoh Baris 2
</td>
</tr>
</table>

Hasilnya:

Contoh Kolom 1	Contoh Kolom 2	Contoh Kolom 3
Contoh Baris 2	Contoh Baris 2	Contoh Baris 2

Jika ingin memberi warna tabel, kodenya seperti ini:

<table width="300" border="5" bgcolor="#FF00FF">
<tr bgcolor="#0000FF">
<td align="center">
Contoh Kolom 1
</td>
<td align="center">
Contoh Kolom 2
</td>
<td align="center">
Contoh Kolom 3
</td>
</tr>
<tr bgcolor="#00FF00">
<td align="center">
Contoh Baris 2
</td>
<td align="center">
Contoh Baris 2
</td>
<td align="center">
Contoh Baris 2
</td>
</tr>
</table>

Hasilnya:

Contoh Kolom 1	Contoh Kolom 2	Contoh Kolom 3
Contoh Baris 2	Contoh Baris 2	Contoh Baris 2

Huft… Cape’ nih… Lanjut………!!!!!

Ini contoh terakhir:

Misalnya anda adalah Penjual Makanan Online (emang ada? :f anggap aja ada ya.. :r ok, lanjuutt…!). Anda ingin membuat daftar makanan yang unik dan menarik dengan membuat tabel seperti yang saya contohkan berikut:

**Warung Online Mpok Inez**
Daftar Menu & Harga
No.	Menu	Harga
1.	Nasi Uduk	Rp 5000
2.	Pecel Lele	Rp 3500
3.	Teh Telor	GRATIS!!!

"Wow! Kalau yang itu gimana bang Zacky? :f Inez nggak tau nih.. Bantuin donk…"

Duh Mpok Inez :$, gitu aja repot! Hehehe… Begini kode nya:

<table width="249" border="2" bgcolor="#FF00FF" cellpadding="5" cellspacing="0">
<caption align="top"><b>Warung Online Mpok Inez</b></caption>
<tr bgcolor="fuchsia">
<th colspan="3" bgcolor="#FF0000">Daftar Menu & Harga</th>
</tr>
<tr bgcolor="green">
<th width="24" bgcolor="#FFCC99">No.</th>
<th width="93" bgcolor="#33FFCC">Menu</th>
<th width="92" bgcolor="#66FF00">Harga</th>
</tr>
<tr bgcolor="yellow">
<td>1.</td>
<td>Nasi Uduk</td>
<td bgcolor="#CC0099">Rp 5000</td>
</tr>
<tr bgcolor="red">
<td bgcolor="#99FF00">2.</td>
<td bgcolor="#0000FF">Pecel Lele</td>
<td bgcolor="#FFFFFF">Rp 3500</td>
</tr>
<tr bgcolor="blue">
<td bgcolor="#009900">3.</td>
<td bgcolor="#FF00FF">Teh Telor</td>
<td bgcolor="#CCCCCC">GRATIS!!!</td>
</tr>
</table>

Gimana? Mpok udah kan? Kalau begitu sekarang saya minta menu yang gratis ya, yang Teh Telor itu lho.. :$ Cepat ya Mpookk,,, :)

Lho? Kok jadinya malah ngobrol dengan Mpok Inez? :r :r Ok, saya kembali ke anda para pembaca setia ku.. Hikz.. Hikz..!

Gimana? Saya membuat artikel yang SANGAT SINGKAT ini dengan sangat susah payah, jadi jangan lupa dikasih pujian ya :k, eh komentar… :O

Ok, selamat berkreasi dengan tabel anda…

Offline Blogging Dengan Windows Live Writer

2009-12-02T20:58:00.001+07:00

Apa itu Window Live Writer?
Window Live Writer adalah sebuah tool buatan Microsoft untuk para Blogger agar blogging / ngeblog secara offline. Bagi anda yang baru di dunia Blogger (termasuk saya sebelum tahu tips ini, hehe..), mungkin anda harus login dulu ke akun Blogger anda untuk membuat sebuah postingan. Tapi karena sekarang sudah banyak tool gratisan untuk blogging secara offline seperti Scribefire, Post2blog, Wbloggar, dan Window Live Writer yang akan kita bahas ini, cara itu sudah dianggap kuno oleh para master Blogger. Jadi sekarang jamannya Offline Blogging alias membuat artikelnya secara offline dengan tool lalu tinggal klik Publish kalau sudah dalam kondisi online. Tertarik mencoba?

Berikut Keunggulan Dari Window Live Writer:

1. Bisa Offline Blogging (pastinya!)
Dengan Offline Blogging kita bisa menghemat biaya pemakaian internet dan waktu, apalagi buat yang online di warnet. Uang keluarnya jadi berkurang. Hehehe…!

2. Tampilannya Menarik

3. Tool Editor Window Live Writer Sangat Lengkap
Jika kita menggunakan Window Live Writer, maka kita akan seperti menggunakan Microsoft Word karena tool editor nya sangat lengkap. Jadi untuk urusan mengedit gambar, membuat tabel, sangat lah mudah dengan Window Live Writer ini.

4. Image Editor Yang Mantap!
Hanya dengan satu kali klik, kita bisa membuat efek gambar yang sangat menarik. Tentunya ini akan sanagt berguna karena kita bisa menghemat waktu. Efek2 yang bisa dihasilkan adalah Drop shadow, Photopaper, Reflection, Rounded Corner, Water mark, Black and White, Sepia tone, dll.

5. Upload Gambar Secara Otomatis
Anda tidak perlu mengupload gambar yang akan diposting terlebih dahulu karena Window Live Writer akan mengupload secara otomatis ke Picasa Web Album.

6. Multi Preview Editor
Anda bisa memilih versi HTML atau versi biasa (WYSUWYG), serta web preview tampilan di browser.

7. Bisa Menambah Plugin
Seperti Firefox yang terkenal dengan fitur Add-Ons, Window Live Writer juga memiliki fitur fasilitas Add Plugin.

Berikut Link Download Untuk Window Live Writer:

1. Software Window Live Writer: http://download.live.com/writer

2. Download Plugin: http://gallery.live.com

Lalu gimana jika kita akan membuat read more? Apa bisa dengan Window Live Writer ini?
Tentu bisa… Kalau di Blogger kita memilih tab edit html untuk mengatur letak kode read more, di Window Live Writer kita pilih tab Source. Udah tahu kan cara membuat read more? Kalau belum, klik disini untuk membaca artikelnya.

Selamat mencoba…

Jangan lupa kasih komentar ya…

Meletakkan Widget Di Bawah Header

2009-12-02T20:06:00.002+07:00

Pada umumnya pada template blogger tidak bisa untuk menyimpan widget atau elemen langsung di bawah header, dan jika ada itu sudah hasil editan dari owner template tersebut. Biasanya template hanya bisa menyimpan di atas elemen post tapi tentu saja lebar dari elemen tersebut hanya selebar elemen post. Lalu timbul pertanyaan, apakah bisa kita meletakkan widget tepat di bawah header dan ukurannya sama dengan header tersebut? Jawaban dari pertanyaan itu ada di tip kali ini. Mau tau?

Berikut Cara Meletakkan Widget Di Bawah Header:

1. Login ke akun Blogger anda

2. Pilih Layout > Edit HTML

3. Untuk jaga2, bacup dulu template nya

3. Udahkan? Sekarang cari kode berikut:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

4. Ganti kode tersebut dengan kode berikut:

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

5. Klik Save Template

6. Sekarang pindah ke tab Page Elements

7. Lihat pada bagian Header nya, sudah ada tulisan add gadget kan? Nha, kalau mau menambahkan elemen tinggal klik aja tulisan itu.

Gimana? Mudahkan?

Selamat mencoba…

Menghilangkan Quick Edit Blogger

2009-12-02T20:05:00.002+07:00

Quick Edit adalah shortcut atau jalan pintas yang muncul di blog kita gunanya untuk mengedit widget atau postingan Blogger. Misalanya, jika kita sedang berada di halaman blog lalu ingin mengedit sebuah postingan, maka kita tinggal klik icon Quick Edit nya sehingga langsung menuju editor postingan. Icon tersebut hanya bisa dilihat jika kita sedang login ke Blogger, dengan kata lain pengunjung atau pun kita yang sedang logut tidak bisa melihatnya. Namun ada beberapa Blogger yang risih dengan kemunculan icon Qucik Edit sehingga ingin menghilangkannya. Apakah anda termasuk kategori Blogger itu? Kalau iya, di tips kali ini saya akan menjelaskan cara menghilangkan kerisihan anda itu. Mau tau caranya?

Berikut Cara Menghilangkan Quick Edit Blogger:

1. Login ke akun Blogger anda

2. Pilih Layout > Edit HTML

3. Cari kode ]]></b:skin>, lalu paste kode berikut di atasnya:

.quickedit{
display:none;
}

4. Terakhir, klik Save Template

Gimana? Sangat mudahkan?

Dengan melakukan tips ini, maka kerisihan anda akan lenyap dan ucapkan “I’m Sorry Goodbye” pada Quick Edit. :r

Selamat mencoba…

Cara Memasang Jadwal Sholat

2009-12-02T20:03:00.002+07:00

Khusus buat sahabat Blogger yang muslim, kali ini saya akan membagikan widget Jadwal Sholat. Selain untuk mempercantik blog anda, widget ini juga bisa membuat anda dan para pengunjung untuk sholat tepat pada waktunya :y. Jadi jangan blogging dan browsing saja kerjaannya, sholat dulu yang penting, ya nggak? Mau tau cara memasangnya?

Berikut Cara Memasang Jadwal Sholat Di Blog:

1. Buka situs IslamicFinder.org

2. Klik link Add new sevices to your site yang berada di bagian bawah halaman utama

3. Klik dropdown menu yang ada tulisan Select a Country

4. Plih Negara tempat tinggal anda. Contoh: Indonesia. Lalu klik GO

5. Pilih kota tempat tinggal anda, lalu klik tombol Generated Code dan copy kode HTML yang diberikan

Selesai untuk proses di IslamicFinder.org.

Sekarang saatnya kita pasang widget tersebut di blog. Caranya:

1. Login ke akun Blogger anda

2. Pilih Layuot > Page Elements

3. Tambahkan Page Elements dengan HTML/Javascript

4. Paste kode HTML yang anda copy tadi ke kotak content

5. Terakhir, klik Save untuk menyimpannya.

Sekarang blog anda kan sudah punya jadwal sholat, jadi seperti yang saya bilang tadi jangan blogging dan browsing saja kerjaannya, sholat dulu yang penting, ok?! :D

Selamat mencoba…

Jangan lupa kasih komentar ya…

Cara Memasang Jam Di Blog

2009-12-02T19:54:00.003+07:00

Apa gunanya memasang jam di blog? Jam yang anda pasang di blog berfungsi sebagai sebuah pernak-pernik yang bisa membuat tampilan blog menjadi lebih menarik. Selain itu juga untuk memudahkan para pengunjung blog sehingga mereka bisa mengatur lamanya melihat blog kita. Dengan begitu mereka tidak akan ketinggalan sesuatu yang mungkin seharusnya dikerjakan cepat. (huft,, sebenarnya saya ingin pengunjung lama2 di blog saya, walaupun gak dikasih minuman, hehe...). widget jam ini bisa anda dapatkan secara gratis! Mau tau caranya?

Berikut Cara Memasang Jam Di Blog:

1. Buka situs Clocklink.com

2. Jika sudah masuk kesana, klik link Want a clock on your Website?

3. Plih model jam yang tersedia, seperti analog, animal, animasi, digital, dll.

4. Klik View HTML tag yang berada di bawah jam yang anda pliih, lalu klik tombol Accept

5. Pilih TimeZone yang sesuai dengan daerah anda. Contoh untuk Indonesia bagian barat: GMT +7:00

6. Atur ukuran jam yang anda mau, lalu copy kode HTML yang diberikan.

Selesai untuk proses di Clocklink.com.

Langkah selanjutnya:

1. Login ke akun Blogger anda

2. Pilih Layout > Page Elements

3. Tambahkan Page Elements dengan HTML/Javascript

4. Paste kode HTML yang diberikan Clocklink.com tadi ke kotak content

5. Terakhir klik Save

Mudahkan?

Jangan lupa kasih komentar ya...