Google Update Page Rank

Tadi siang saat jam istirahat kantor saya sempatkan membuka internet dan melihat-lihat isi blog tercinta ini, saya cukup terkejut sewaktu melihat button page rank milik blog go blog di halaman bawah template, angka yang biasanya 2 tiba-tiba berubah jadi 3.

Kemudian saya cek and ricek di semua tools yang menyediakan fasilitas untuk melihat page rank, dan memang hasilnya sama semua, blog ini naik kelas satu strip. Google Update Page rank !

Google agak telat untuk update PR, karena biasanya google update 3 bulan sekali. Dan seingat saya, terakhir kali google update PR pada bulan juni yang lalu. Kalau di hitung-hitung berarti goolge update page rank mundur 1 bulan lebih lama dari jadwal rutin yang biasa google lakukan. Memang google update page rank tidak melulu per 3 bulan, karena pernah google update lagi hanya dalam jeda waktu 1 bulan, kalau tidak salah waktu itu google update bulan mei dan pada bulan juni update lagi.

Ada senang, ada sedih, ada pula yang biasa-biasa saja melihat update PR pada akhir bulan oktober ini. Begitu pula dengan saya yang biasa-biasa saja dalam menanggapi hal ini, karena target saya untuk blog ini adalah 4 atau naik 2 tingkat. Tapi apa mau di kata, google belum mengizinkan blog ini menyandang PR4. Mungkin saya kurang gencar mencari backlink, makanya mbah google hanya memberikan segitu aja buat blog ini. Tapi ada juga yang membuat saya cukup senang, karena blog mind author naik dari N/A jadi 2 dan saya juga ikut senang dengan naiknya PR blog teman saya rozani yang semula nol naik jadi 1, selamat ya sob.

Oke deh, selamat ya buat temen-temen yang sudah dapat PR dan yang naik, buat yang turun jangan kecewa.

More about → Google Update Page Rank

Tombol View Pop Up

Membuat tombol view pop up ini sebenarnya tidaklah sulit, dan fungsinya lumayan sangat bermanfaat buat sobat yang ingin memancing pengunjung untuk melihat halaman link yang ingin sobat tampilkan. Misalnya, jika ingin mengajak pengunjung untuk ikut program yang sudah sobat ikuti dari situs affiliasi, yang biasanya ditampilkan dalam bentuk banner, atau tulisan biasa.

 

Jika memakai tombol view pop up ini, saya yakin pengunjung lebih penasaran untuk mengklik link yang sobat ingin tampilkan ketimbang menggunakan banner atau tulisan biasa.

Kenapa ? karena banner yang sobat pasang sudah memperlihatkan isi dari link yang dimaksud, so..yang liat juga males, soalnya sudah pada tau isinya..�oh bisnis online yang itu ya�, atau �ehmm..kalo bisnis tabungan online yang begitu sih males ah�. Nah loh, jadi ga diklik deh tuh banner atau tulisan sobat, bener ga tuh. Ya udah deh langsung aja, begini nih contoh tombol view pop up yang dimaksud.

 

 

Untuk membuatnya, silahkan sobat copy saja scripnya dibawah ini :

 

<center><form onsubmit="window.open('http://ALAMAT URL','popupwindow','scrollbars=no, width=300,height=100');return true"><input type="submit" value="TULISAN PADA TOMBOL"></form></center>

 

Copy paste kode tersebut di tempat yang sobat inginkan, di sidebar, header atau dipostingan juga bisa.

 

Keterangan :

 

   <center> : untuk tombol yang terletak ditengah, jika ingin letaknya di sebelah kanan tinggal sobat ganti saja dengan <right> jangan lupa ditutup dengan </right>  
   Tulisan yang berwarna biru adalah alamat url yang ingin sobat pasang.  
   Tulisan yang berwarna merah adalah tulisan pada tombol.

Silahkan kreasikan sendiri tombol view pop up milik sobat..

More about → Tombol View Pop Up

Cara Membuat Efek Zoom Pada Gambar

Pada dasarnya membuat efek zoom pada gambar cukup banyak manfaatnya, selain menghemat tempat, sekaligus mempercantik tampilan blog kita. Ada kalanya dimana kita mempunyai gambar yang sangat besar dan harus di tampilkan dalam ukuran yang besar, wah tempatnya ga cukup nih mas, itu bisa menjadi kendala dalam optimasi gambar yang hendak ditampilkan. Sementara sobat tidak ingin gambar tersebut berlalu begitu saja tanpa sentuhan pengunjung sedikitpun.

 

Tutorial membuat efek zoom pada gambar ini sangat mudah, cukup menambahkan kode css pada template dan sedikit mengedit kode gambar yang sobat miliki. Ga usah panjang lebar ya, langsung praktek aja. Sip, sekarang silahkan siapkan komputer sobat dulu, plus kopi dan rokok sebagai pelengkap..

 

1. Silahkan login ke Blogger terlebih dahulu.

    

2. Kemudian klik Tata Letak.

    

3. Tuju halaman Edit HTML.

    

4. Letakkan kode css berikut ini, tepat diatas / sebelum kode ]]></b:skin>

    

   /* Zoom Efek */

   .thumbnail{position:relative;z-index:0}

   .thumbnail:hover{background-color:transparent;z-index:50}

   .thumbnail span{position:absolute;left:-1000px;visibility:hidden;color: black;text-decoration: none}

   .thumbnail span img{border-width:0;padding:2px}

   .thumbnail:hover span {visibility: visible;top: 0;left: 60px}

    

5. Jangan lupa Simpan Template.

## Untuk membuat gambarnya zoom-nya, berikut contoh gambar yang saya punya :

 

<a href="http://s643.photobucket.com/albums/uu155/miskahiper/?action=view&current=vaio-zoom-1.jpg" target="_blank"><img src="http://i643.photobucket.com/albums/uu155/miskahiper/vaio-zoom-1.jpg" border="0" alt="Photobucket"></a>

 

Kemudian hapus tulisan yang berwarna hijau, tambahkan dengan tulisan yang berwarna merah, sehingga menjadi seperti berikut :

 

<a class="thumbnail" href="#thumb"><img src="http://i643.photobucket.com/albums/uu155/miskahiper/vaio-zoom-1.jpg" border="0" alt="Photobucket"><span><img src="http://i643.photobucket.com/albums/uu155/miskahiper/vaio-zoom-1.jpg" width="380px" height="300px";/></span></a>

 

coba sekarang sobat sorot gambar dibawah ini 

 

 

 

Sedangkan kode HTMl untuk text adalah sebagai berikut :

 

<a class="thumbnail" href="#thumb">Contoh Gambar<span><img src=http://i643.photobucket.com/albums/uu155/miskahiper/vaio-zoom-1.jpg /></span></a>

 

coba di sorot tulisan berwarna hijau dibawah ini :

 

Contoh Gambar

 

Ukuran besarnya gambar yang akan di zoom silahkan sobat atur sesuai keinginan, silahkan ganti angka yang berkelip yang berwarna merah dengan ukuran yang sobat inginkan saat di zoom, sesuaikan juga dengan ukuran asli gambar agar gambar yang di zoom tidak pecah atau kabur. Oke sob, selamat mencoba ya, semoga berhasil !

More about → Cara Membuat Efek Zoom Pada Gambar

Cara Membuat Efek Blur Pada Gambar

Tutorial sederhana ini sebenarnya hanya membutuhkan sedikit kode css pada template. Cara membuat efek blur pada gambar, ya begitulah kira-kira pembahasan kali ini. Efek blur ini akan terjadi jika cursor melintas pada gambar, jadi gambar akan terlihat menjadi tampak samar apabila cursor melintas diatas gambar, nah terus bagaimana kalau ga punya mouse mas dody? wah mending ke laut aja sob..

 

Dan nanti akan saya jelaskan sekalian bagaimana caranya agar gambar yang di klik tidak pindah halaman atau menuju alamat url yang ada (tidak ngelink kemana-mana).

 

Caranya gampang aja kok, silahkan ikuti langkah-langkahnya berikut ini :

1. Login ke Blogger dulu ya.

    

2. Silahkan sobat tuju halaman Edit HTML.

    

3. Kemudian cari kode ]]></b:skin>

    

4. Letakkan kode berikut ini diatas / sebelum kode ]]></b:skin>

    

   .linkopacity img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}
   .linkopacity:hover img {filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;border:0;}

    

5. Simpan Template.

 

## Kemudian untuk membuat efek blur pada gambar yang akan di upload, contoh alamat url gambar yang ada :

 

<a href="http://newalltutorial.blogspot.com"><img src="http://i643.photobucket.com/albums/uu155/miskahiper/samsung-amoled.jpg" border="0" alt="Laptop"></a>

 

maka tampilan normalnya seperti dibawah ini :

 

 

 

  Untuk menambahkan efek blur kedalam gambar, maka kode yang harus sobat tambahkan adalah class="linkopacity" dan hasilnya seperti dibawah ini :

 

<a href="http://newalltutorial.blogspot.com" class="linkopacity"><img src="http://i643.photobucket.com/albums/uu155/miskahiper/samsung-amoled.jpg" border="0" alt="Laptop"></a>

 

Jika disorot maka gambar akan tampak samar atau ngeblur dan jika di klik maka akan menuju link terkait.

 

 

  Agar gambar yang di klik tidak ngelink kemana-mana atau tidak pindah ke halaman link yang ada, maka sobat tinggal mengganti linknya menjadi "#nogo" dan hasilnya seperti berikut :

 

<a href="#nogo" class="linkopacity"><img src="http://i643.photobucket.com/albums/uu155/miskahiper/samsung-amoled.jpg" border="0" alt="Laptop"></a>

 

Silahkan di sorot dan di klik, maka gambar tidak akan lari kemana-mana

 

 

 

Untuk merubah tingkat keburaman pada gambar, sobat tinggal atur angka pada kode css yang sudah disimpan pada template tadi. Ubah saja angka �30� menjadi angka yang lebih rendah untuk mendapatkan tingkat blur yang lebih gelap, contoh jika saya ubah angkanya menjadi �10� maka kodenya menjadi seperti berikut :

 

.linkopacity img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}
.linkopacity:hover img {filter:alpha(opacity=10); -moz-opacity:0.3; opacity:0.3;border:0;}

 

Selamat mencoba ya..

More about → Cara Membuat Efek Blur Pada Gambar

Menu Navigasi Horizontal

Sebelum ini pernah saya bahas tentang tutorial horizontal menu dropdown, kurang lebih sama dengan menu navigasi horizontal. Hanya saja dalam menu navigasi ini, sobat tidak perlu lagi masuk ke kode HTML template jika ingin menambahkan link baru. Namun kekurangan menu navigasi horizontal ini adalah tidak bisanya menambah link baru kebawah (vertikal) atau sub menu seperti pada horizontal menu dropdown.

 

 

langsung saja pada pembuatannya ya. Sip, sekarang silahkan sobat Login ke blogger dulu, kemudian tuju Elemen Halaman, lalu klik button Edit HTML, klik Expand Template Widgets.

 

Letakkan kode css berikut ini diatas kode ]]></b:skin>

/*-- (Menu/Nav) --*/
#nav{background:#000; height:30px; padding:5px 0 0; margin-bottom:0px; -moz-border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-topleft:5px}
#nav-left{float:left; display:inline; width:700px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:13pt comic sans ms,arial,sans-serif}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px; padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px; padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px 7px}

 

Kamudian letakkan kode berikut ini tepat dibawah kode <div id='outer-wrapper'><div id='wrap2'> kode ini biasanya letaknya dibawah <body>

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

Jangan lupa Simpan Template. Coba lihat hasilnya !

 

 

Keterangan :

1. -moz-border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-topleft:5px
   
   
   adalah garis melengkung pada ujung kotak navigasi, semakin besar angkanya maka akan semakin besar garis lengkungnya. Jika ingin membuat kotak lancip, silahkan hapus saja semua kode tersebut.

    

2. height:30px adalah tinggi kotak navigasi.

    

3. Background:#000 adalah warna kotak navigasi, untuk merubah dengan warna lain silahkan klik disini. Dan jika ingin mengganti warna dengan gambar yang sobat punya, ubah kodenya sehingga menjadi seperti berikut :
   
   

   #nav{background:#000 url('http://lh6.ggpht.com/_7Y9pl24WpQY/StGMv1nlCvI/AAAAAAAAB4U/RmIZGEvqvHA/gradient.php_thumb%5B2%5D.jpg?imgmax=800') repeat-x; height:30px; padding:5px 0 0; margin-bottom:0px; -moz-border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-topleft:5px}���������������������.��������������������������������������������������������������������������������.. dst..

   alamat gambar diatas hanya contoh yang saya punya, jika ingin melihat gambarnya silahkan sobat block url gambar diatas kemudian masukkan ke address pada browser sobat dan enter, jreeng keliatan kan gambarnya. Silahkan jika ingin menggunakan gambar diatas atau jika punya gambar sendiri, monggo !

Jika berhasil maka menu navigasinya terletak di bagian paling atas header. Jika ingin meletakkan menu navigasi dibawah header maka yang harus sobat lakukan adalah merubah letak posisi <div id='outer-wrapper'><div id='wrap2'>, cut dan paste setelah kode header atau jika bingung maka letakkan saja tepat diatas kode

 

<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

 

Maka hasilnya akan seperti yang ada di blog ini, cuih om dody pamer nih..

Selamat mencoba ya..have a nice day !

More about → Menu Navigasi Horizontal

RED�H Template

Template kedua ini saya beri nama Red-H, agak bingung awalnya menentukan nama untuk template ini. Saya beri nama Red-H karena judul sidebar yang menggunakan warna merah. Template berukuran 980px ini memiliki 3 kolom, dengan warna dasar template putih abu-abu.

Template ini jauh lebih baik dibanding template pertama, karena selain warnanya yang menarik, template ini sudah menggunakan read more otomatis dan beberapa fitur menarik lainnya.

 

Sobat bisa mencobanya jika tertarik, silahkan baca spesifikasi lengkapnya dibawah ini, tapi tolong jangan menggunakan template untuk keuntungan pribadi, seperti mengupload di situs paid to upload ( ziddu, 4shared, dll..) dan menyebarkannya lewat blog.



Spesifikasi Template :

1. Type : Blogger Baru ( XML )
   
   
2. Ukuran dasar : 980px
   
   
   • Post : 600px 
   • Sidebar utama : 340px
   • Sidebar kiri : 160px
   • Sidebar kanan : 170px
   • Bagian atas kiri, tengah, kanan : masing � masing 300px
   • Bagian bawah kiri, tengah, kanan : masing � masing 300px
   
   
   
3. Warna dasar : putih abu � abu
   
   
4. Font : Verdana
   
   
5. Font Header : Comic Sans MS
   
   

Featured Template :

1. Read more otomatis : sobat tidak perlu lagi menyisipkan kode <span class=�fullpost�> setelah postingan yang pertama, dan tidak perlu juga menutupnya dengan </span>, karena template ini sudah menggunakan read more otomatis. Hanya saja buat sobat yang postingannya sudah memakai read more manual, maka yang harus sobat lakukan adalah menghapus kode <span class=�fullpost�> dan </span> setiap postingan milik sobat.
   
   
2. Related posts atau artikel terkait : seperti sobat ketahui, artikel terkait adalah judul artikel yang berada dalam satu label, jadi jika sobat menulis postingan sebaiknya mengisi label sesuai judul postingan sobat. Jika bingung, silahkan lihat bagian bawah dari semua postingan yang ada di blog ini.
   
   
3. Avatar mybloglog pada kotak komentar : jika pengunjung blog yang berkomentar adalah member dari mybloglog maka wajah profil mybloglog akan muncul pada kotak komentar. Belum tau apa itu mybloglog ? baliklah akan saya jelaskan sedikit, mybloglog adalah sebuah jejaring sosial atau situs social bookmark, dimana sobat bisa mendaftar secara gratis dan sobat bisa promosikan blog sobat disana, sobat bisa juga menjalin pertemanan dengan user lain. Daftarkan blog ke situs social bookmark bisa dapat backlink gratis, coba saja.
   
   
4. Modifikasi label cloud : beberapa bulan yang lalu, blogger telah menerbitkan label cloud pada bagian label di gadget. Namun saya rasa label cloud dari blogger ini tampilannya kurang menarik, tulisan hanya berwarna biru saja, maka dari itu sekalian saya buatkan lebel cloud multi warna di template ini.
   
   

Silahkan download template nya dibawah ini, dan jika ingin lihat demo template bisa sobat klik disini.

Zip File

More about → RED�H Template

100 Backlink Situs PR Tinggi

Pada dasarnya tujuan setiap blogger adalah sama, yaitu mencari backlink sebanyak � banyaknya untuk mendapatkan page rank dari google.

 

Seperti kita ketahui, page rank yang tinggi sangat mempengaruhi identitas sebuah blog / website. Semakin banyak backlink one-way atau backlink satu arah yang menuju ke blog kita, maka akan semakin terbuka kesempatan sebuah blog untuk mendapat page rank, apalagi jika backlink tersebut berasal dari blog ber PR tinggi.

 

Ada yang menggunakan page rank untuk berbagai bisnis online, ada juga yang tidak terlalu peduli dengan page rank karena mungkin hanya untuk iseng � iseng saja. Apakah sobat termasuk blogger dalam kateori yang pertama ? atau kategori blogger yang kedua, yang menyia � nyiakan waktu hanya untuk iseng �iseng saja ? Nah terserah sobat, tentukan pilihan sobat.

 

Kenapa harus page rank ? karena banyak situs bisnis online yang membutuhkan standarisasi page rank untuk diterima menjadi member mereka. Seperti bisnis paid review yaitu dimana kita dibayar setiap melakukan review sebuah situs, atau bisnis jualan link yang membayar kita setiap menaruh link situs orang lain di blog kita. Semakin tinggi page rank blog kita, maka akan semakin terbuka kesempatan kita menjalankan kedua bisnis tersebut. Dan uang mengalir ke dompet paypal sobat akan semakin berlimpah dah terus � menerus.

 

Hal ini sebenarnya sudah pernah saya bahas pada postingan tentang tips promosi blog dan free web directory. Sama dengan free web directory, tapi kali ini saya akan berikan informasi mencari backlink dari 100 situs ber PR tinggi. Sobat hanya perlu submit url blog dan memberikan sedikit diskripsi tentang blog sobat ke daftar 100 situs ini, dan tunggulah beberapa hari atau bahkan ada yang sampai berminggu � minggu untuk memberikan jawaban apakah blog sobat diterima di situs tersebut atau tidak. Jadi sebaiknya banyak - banyaklah berdoa sebelum submit blog sobat ke situs � situs tersebut.

 

Jika tertarik, silahkan sobat kunjungi http://greatdirectories.org/free.html

Selamat mencoba !

More about → 100 Backlink Situs PR Tinggi