Sabtu, 22 Agustus 2009

Membuat Floating Header atau Strip Header di Blog

Pada posting sebelumnya saya telah memberikan trik mengenai cara membuat strip ad footer atau statis footer. Kali ini kita akan melakukan trik sedikit berbeda yaitu membuat strip header atau floating header. Strip header ini akan terlihat seperti navigation bar ala blogger. Apabila anda mengscroll halaman ke bawah maka strip header tersebut akan ikut ke bawah. Pada strip header ini anda dapat memasang pesan, iklan dan lain sebagainya. Tertarik bagaimana cara membuatnya, ikuti triknya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Lalu kopi dan paste kode berikut sebelum kode ]]></b:skin>
/*-- mta bar (blogtrikdantips.blogspot --*/
#mta_bar{background:#000; border-bottom:2px solid #111; z-index:100; top:0; left:0; width:100%; overflow:auto; position:fixed; margin-left:0; margin-right:0; margin-top:0; margin-bottom:4px; padding-left:0; padding-right:0; padding-top:7px; padding-bottom:4px;z-index:10000;opacity: 0.9;filter: alpha(opacity: 90);}
* html #mta_bar{position:absolute; /*IE6 hack*/width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px":body.clientWidth+"px")}
#mta_bar .center{float:left; text-align:center; font-family:Verdana,Arial; font-size:13px; font-weight:bold; font-style:normal; color:#FFFFFF; width:65%}
#mta_bar .left{float:left; text-align:left; font-family:Verdana,Arial; font-size:13px; font-weight:normal; font-style:normal; color:#FFFFFF; width:20%}
#mta_bar .right{font-family:verdana,Arial,Helvetica,sans-serif; float:right; text-align:center; font-weight:normal; font-size:10px; letter-spacing:0; width:30px; white-space:nowrap}
#mta_bar .right a{font-size:10px; color:#FFFFFF; text-decoration:none}
#mta_bar .right a:hover{font-size:10px; color:#80ff00; text-decoration:none}
#left_bar a{background:url('http://1.bp.blogspot.com/-go6gSY549SM/T7r7hZ7fMUI/AAAAAAAADSs/qyppABFiMHI/s400/FaceBook.png') no-repeat; text-decoration:none; color:#FFFFFF; padding-left:23px; padding-right:0; padding-top:0; padding-bottom:0}
#left_bar a:hover{text-decoration:none; color:#80ff00}
#left_bar2 a{background:url('http://1.bp.blogspot.com/-go6gSY549SM/T7r7hZ7fMUI/AAAAAAAADSs/qyppABFiMHI/s400/FaceBook.png') no-repeat 2px; text-decoration:none; color:#FFFFFF; padding-left:21px; padding-right:0; padding-top:0; padding-bottom:0}
#left_bar2 a:hover{text-decoration:none; color:#80ff00}
#to_top{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj24A4VbmGRKYIXwQHxCynSoS-RZOte9CFVwbkvcmVctEvt6GlaKPIRcCKS01lBENdd4ovPRX4JccnNx0W4y3Syk_oDMyyZKArZgAZFko0A7SwdG4ITSbYhqLLMss8enZqHY4ZlwjtBV-U/s1600/delete.png) no-repeat scroll 0%; position:absolute; /*this replaces float - fixes thanks to blognya anak bone ofhttp://iananakbone.blogspot.com*/height:18px; width:19px; margin:0 0 0 900px; /*this was updated*/padding:9px 5px}
#anima_sudut2 a:link {
color:#000000;
}
#anima_sudut2 a:visited {
color: #FFFFFF;
text-decoration:none;
}
#anima_sudut2 a:hover {
color: #000000;
}
#to_top a{padding:8px}
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:-40px;
left:auto;
right:-2px;
bottom:auto;
line-height:14px;
font-size:12px;
font-weight:normal;
}
.menu{
border:none;
border:0px;
margin-left:35px;
padding:0px;
font-size:13px;
}
.menu ul{
background:#000000;
height:2px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#000000;
color:#80ff00;
display:block;
font-weight:normal;
line-height:30px;
margin:0px;
padding:0px 10px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #212121;
color:#80ff00;
text-decoration:none;
}
.menu li ul{
background:#000000;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:180px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:180px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:30px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#212121 center left no-repeat;
border:0px;
color:#80ff00;
text-decoration:none;
}
.menu p{
clear:left;
}

Keterangan:
- Kode warna merah berfungsi untuk membuat warna kelihatan transparant
- warna ungu adalah alamt url gambar

4. Masukan kode dibawah ini diatas kode </head>
<script src='http://blogtrikdantips-blogspot.googlecode.com/files/strip_ads_header.js' type='text/javascript'/>
5. Letak kode dibawah ini dibawah kode <body>
<div id='mta_bar'>
<div id='left_bar2'>
<span class='left'>
<a href='http://www.facebook.com/blogtrikdantips' target='_blank'>Login to Facebook</a></span></div>
<div id='left_bar'>

<span class='center'><a href='http://www.facebook.com/blogtrikdantips' target='_blank;'>Ayo Gabung Facebook Kami Sekarang !!!</a></span></div>

<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;o-om.com.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://1.bp.blogspot.com/-6gSK0-wxx08/T7r6a23RZ1I/AAAAAAAADSg/IwsfjZEo3-4/s400/delete.png' style='cursor:hand;cursor:pointer;'/></span></div>
6. Hapus kode berwarna merah lalu gantikan dengan url facebook sobat
7. Simpan template sobat

Selamat mencoba...semoga berhasil..!!!

Jumat, 21 Agustus 2009

Membuat Footer Melayang atau Strip Footer

Salah satu tips untuk memikat pengunjung bukan hanya pada artikel anda tapi penampilan blog anda merupakan pandangan pertama yang dapat memikat mereka. Jika anda merasa blog anda belum tampil menarik maka trik yang satu ini akan membuatnya lebih menarik. Pada kesempatan ini saya akan mengajarkan trik untuk membuat footer bar yang statis. Footer bar akan selalu muncul walaupun anda mengscroll ke bawah halaman. Pada footer bar atau strip footer ini anda dapat memasang iklan atau pun pesan kepada pengunjung. Tentunya pengunjung akan mudah melihat pesan tersebut apabila mereka mendatangi blog anda.

Jika anda tertarik untuk membuatnya. Maka perhatikan langkah berikut ini:
1. Login ke blogger
2. Pilih Rancangan -- Edit HTML
3. Centang Expand widget template
4. Cari kode ]]></b:skin> dan paste kode dibawah sebelum kode ]]></b:skin>
/* Footer Melayang by www.blogtrikdantips.blogspot.com */

#navbar-footer p.info {
float: right;
padding-right:40px;
line-height: 1.2;
height: 100%;
vertical-align: bottom;
}

#navbar-footer p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:40px;
vertical-align: bottom;
line-height: 1.2;
}

#navbar-footer a {
color: #333;
}

#navbar-footer {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 10px solid #f5f5f5;
background-color: #f5f5f5;
width: 100%;
left: 0px;
text-align: left;
color: #888;
font-family: Verdana;
font-size: 11px;
z-index:10000;
opacity: 0.9;
filter: alpha(opacity: 90);
bottom:0;
}
5. Kemudian paste kode berikut sebelum kode </body>
<div id='navbar-footer'>
<p>
Agar <a href='url_blog_anda'>Nama Blog Anda</a> lebih bermanfaat dan menarik lagi,<br/> diharap anda dapat meninggalkan komentar....
</p>
<p class='info'>Created by <a href='url_blog_anda'>Nama Blog Anda</a> | Widget by <a href='http://www.blogtrikdantips.blogspot.com'>Blog Trik dan Tips</a><br/>Copyright 2008 - 2009 All Rights Reserved: <a href='url_blog_anda'>Nama Blog Anda</a>
<br/>
</p>
</div>
6. Simpan template anda dan lihat hasilnya...

Semoga trik ini bermanfaat...selamat mencoba!!

Senin, 17 Agustus 2009

Membuat Efek Ketikan pada Judul Blog

Ada beberapa cara untuk membuat judul blog menjadi animatif. Seperti yang udah saya tulis sebelumnya bagaimana cara membuat judul blog bergerak seperti marquee (ke kiri atau ke kanan), trik kali ini sedikit berbeda dimana judul blog akan muncul seperti sebuah ketikan dari masing-masing huruf. Kalo misalnya anda tertarik untuk memasangnya pada blog anda ikuti aja trik berikut ini:

1. Login ke blogger
2. Pilih Tata Letak
3. Klik Edit HTML
4. Cari kode </body>
5. Paste script berikut ini tepat diatas kode </body>
<script>
var tit = document.title;
var c = 0;
function writetitle() {
document.title = tit.substring(0,c);
if(c==tit.length)
{
c = 0;
setTimeout("writetitle()", 2000)
}
else {
c++;
setTimeout("writetitle()", 275)
}
}
writetitle()
</script>
6. Simpan perubahannya

Coba lihat hasilnya......kalo uda jadi jangan lupa beri komentar ya.....selamat ngeblog!!

Minggu, 16 Agustus 2009

Membuat Alert Perkenalan bagi Pengunjung

Sobat mungkin pernah mengikuti salah satu trik yang saya berikan mengenai cara membuat alert pesan selamat datang bagi pengunjung. Trik kali ini sedikit agak berbeda, kita akan mencoba membuat alert selamat datang dengan perkenalan sepintas. Ketika seseorang mendatangi blog anda maka orang tersebut akan diminta untuk menulis namanya apab. Setelah memasukan nama maka pengunjung akan disapa sesuai namanya. Oke bagi yang berminat langsung saja saya tunjukan langkahnya.

1. Login dulu ke blogger
2. Klik Rancangan -- Elemen Laman
3. Klik Tambah Gadjet lalu pilih HTML/Javascript
5. Masukan script dibawah ini:
<script type='text/javascript'>
var name = prompt("Selamat Datang!! Boleh Tau Nama Anda?", "Nama Anda ");
alert("Salam Kenal "+name)
alert("Selamat Surfing di Blog Saya, Semoga Bermanfaat!!")
</script>
Keterangan:
Kode berwarna merah adalah pesan bagi pengunjung. Sobat dapat menganti sesuai dengan selara.

6. Simpan gadjet dan lihat pada blog anda!

That's it. Selamat mencoba!!!

Sabtu, 15 Agustus 2009

Membuat Efek Bunga Sakura Bertaburan di Blog

Sakura adalah bunga yang identik dengan negara Jepang dimana bunga ini bermekaran pada musim semi yaitu pada awal April hingga awal Mei. Negara ini memiliki varian bunga sakura kurang lebih 200 jenis. Buka sakura mempunyai arti yang berkaitan dengan wanita, kesedihan serta kematian. Kali ini saya akan memberikan tips kepada sobat blogger bagaimana membuat efek bunga sakura gugur dan bertaburan di blog. Trik berikut ini dapat membuat blog anda lebih menarik dan cantik. Caranya sangat mudah saja, anda hanya perlu ikuti langkah berikut ini:

1. Login ke blogger.
2. Pilih Rancangan -- Elemen Laman
3. Tambahkan gadjet lalu pilih HTML/Javascript
4. Masukkan kode berikut ini:
<script src='http://blogtrikdantips-blogspot.googlecode.com/files/SakuraRain.js' type='text/javascript'/></script>
5. Simpan template anda

Sekarang sobat coba lihat hasilnya di blog. Taburan bunganya pasti cantik dan membuat blog anda lebih menarik. Selamat mencoba!

Cara Membuat Posting Acak atau Random Post

Sudahkah anda pernah mendengar tentang random post...Nah itu dia...posting yang dapat ditampilkan secara acak. Yang diacak disini yaitu judul postingnya aja. Terkadang blogger yang baru memasang recent post dan pada halaman depannya udah ditampilkan judul yang sama. Dari pada menampilkan recent post....mendingan pasang aja gadjet berikut ini yaitu ....Random Post. Cara membuatnya gak susah amat alias cukup mudah....Jadi ikuti aja langkahnya....

1. Login dulu ke blogger.
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan gadjet
4. Pilih HTML JavaScript
5. Masukan kode dibawah ini
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="http://blogtrikdantips.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&
callback=randomposts" type="text/javascript"></script>
6. Gantikan kode berwarna merah dengan URL blog anda.
7. Simpan gadjet tersebut

Keterangan:
Angka 10 pada kode tersebut menunjukan jumlah postingan yang ditampilkan secara acak!!! Met mencoba ya....

Selasa, 04 Agustus 2009

Cara Pembayaran Google Adsense melalui Western Union

Ada dua cara untuk kita mendapatkan pembayaran dari Google Adsense yaitu melalui cek atau melalui Western Union. Adanya pilihan pembayaran pendapatan Google Adsense melalui Western Union ini merupakan kabar baik bagi para pemilik account Google Adsense mengingat bahwa melalui Western Union akan memungkinkan penerimaan uang dilakukan lebih cepat, biaya lebih murah, dan dapat diterima diberbagai agen Western Union yang jumlahnya sangat banyak. Layanan Western Union fokus pada pengiriman dan penerimaan uang secara real time pada berbagai negara. Fasilitas Western Union Quick Cash akan memudahkan sobat untuk bertransaksi dengan aman di agen-agen Western Union di kota sobat.

Banyak pemilik akun Google Adsense yang memanfaatkan fasilitas Western Union karena pemotongan biaya hanya sebesar Rp 6000 untuk bea materai apabila transaksi anda sebesar 1 juta rupiah. Apabila anda menggunakan pembayaran melalui cek maka anda akan dikenakan potongan uang muka sebesar 30 dollar. Memilih untuk bertransaksi dengan western union juga membantu anda mengurangi potongan dari bank dan lama waktu pencairan. Pembayaran melalui Western Union adalah dalam kurs dolar Amerika. Walaupun demikian pada Bank Western Union lokal anda dapat menerima pembayaran dalam mata uang setempat.

Pembayaran hanya diberikan kepada individu yang namanya tertera pada Western Union Quick Cash dari Google Adsense. Pembayaran dengan memakai Western Union Quick Cash perlu menyertakan KTP untuk memverifikasi. Pembayaran Google Adsense harus diambil selama 35 hari sebelum kadaluarsa dan tidak dapat dicairkan. Jika anda belum sempat mengambilnya maka akan dimasukan kembali ke rekening Google Adsense anda.

Untuk mencairkan pendapatan Google AdSense melalui Western adalah sebagai berikut :
1. Masuk ke akun Google Adsense, lalu klik Report payment/Riwayat pembayaran.
2. Pada bagian bawah ada informasi tentang detil penghasilan. Klik Rincian untuk mengetahui data-data lengkap pencairan Google Adsense.
3. Print detil Rincian Pembayaran.

Data yang akan dicetak atau diprint diantaranya adalah
1. Jumlah pembayaran
2. Nama dan alamat pengirim
3. Tanggal Pembayaran
4. Money Transfer Control Number
5. Nama dan alamat penerima pembayaran

Setelah sobat print data tersebut tinggal dibawa saja ke agen-agen Western Union terdetak seperti kantor pos atau bank. Prosesnya pencairannya sangat cepat karena dilakukan dengan menggunakan komputer dan hanya membutuhkan waktu kurang lebih 1-2 menit.

Cara Memperoleh Penghasilan dari Google Adsense

Sudahkah sobat pernah mencoba mencari uang langsung dari rumah, atau membangun bisnis internet. Jika belum, anda perlu mendengar tentang Google Adsense, dimana beribu-ribu orang sepanjang hari dan diseluruh dunia membuat uang dari program Google Adsense.

Bagaimana cara menjalankan pekerjaan ini? Sederhana, anda hanya menempatkan suatu iklan pada suatu webpage atau blog. Ketika seseorang mengklik pada iklan Google Adsense yang ada pada halaman webmu, sobat akan mendapatkan bayaran. Kamu akan dibayar untuk setiap klik pada iklan yang sobat pasang. Berikut adalah langkah-langkah bagaimana cara memulai mencari uang dari Google Adsense dan memulai bisnis online di rumahmu.

1. Untuk memulai membuat uang dari Google Adsense kamu harus membuat account Google. Account ini gratis dan dalam beberapa hari anda akan diterima dan dikirimkan password dan kode iklan untuk ditampilkan di webpage atau blog anda

2. Buatlah blog dari situs seperti blogger, wordpress, dll atau cari website yang menyediakan layanan hosting gratis.

3. Ikuti aturan sederhana bagaimana anda dapat memaksimalkan potensi iklan untuk meningkatkan pendapatan.

4. Gunakan tips-tips yang tersedia pada web bagaimana meningkatkan trafik pada blog atau website sobat sehingga memberikan peluang bagi pengunjung untuk mengklik iklan yang sobat pasang.

Itu merupakan langkah yang sangat sederhana bagaimana anda dibayar perbulan ke rekening bank atau diberikan cek Dollar. Banyak orang yang telah menjadi milioner hanya dengan bergabung bersama Google Adsense. Jika anda masih belum percaya mengenai Google Adsense bergabunglah dari sekarang. Selamat mencoba dan good luck!