A Name Atribut

Rasanya belakangan ini saya agak malas menulis di blog ini, sedikit jenuh dan ditambah dengan adanya world cup 2010 sedikit menyita waktu saya. Kali ini saya akan memberikan tips lama tapi baru, lama buat blogger senior dan baru buat newbie. Yaitu penggunaan atribut a name pada tulisan/postingan di blog. A name sendiri berfungsi untuk menyorot link secara otomatis jika di klik akan menuju pada link yang dimaksud dan tentunya pada halaman postingan yang sama.

 

Link tersebut langsung mengarah pada link lain pada satu halaman posting, sehingga bisa memudahkan penulis membawa pengunjung pada tulisan yang dimaksud. Kodenya sangat mudah, hanya dengan menambahkan <a href=�#link yang di maksud�>Link</a> dan <a name=�link yang maksud�>Hasilnya</a>

 

Contohnya seperti ini :

 

<p> <a href="#Blogger 8">Klik disini</a> </p>

<h2>Blogger 1</h2>
<p>Judul Tulisan bla bla bla bla bla</p>

<h2>Blogger 2</h2>
<p>Judul Tulisan bla bla bla bla bla</p>

<h2>Blogger 3</h2>

<p>Judul Tulisan bla bla bla bla bla</p>

<h2>Blogger 4</h2>

<p>Judul Tulisan bla bla bla bla bla</p>

<h2>Blogger 5</h2>
<p>Judul Tulisan bla bla bla bla bla</p>

<h2>Blogger 6</h2>
<p>Judul Tulisan bla bla bla bla bla</p>

<h2>Blogger7</h2>
<p>Judul Tulisan bla bla bla bla bla</p>

<h2><a name="Blogger 8">Hasilnya</a></h2>
<p>Hasilnya bisa dilihat disini</p>

<h2>Blogger 9</h2>
<p>Judul Tulisan bla bla bla bla bla</p>

<h2>Blogger 10</h2>

<p>Judul Tulisan bla bla bla bla bla</p>

 

 

Klik disini

Blogger 1

Judul Tulisan bla bla bla bla bla

Blogger 2

Judul Tulisan bla bla bla bla bla

Blogger 3

Judul Tulisan bla bla bla bla bla

Blogger 4

Judul Tulisan bla bla bla bla bla

Blogger 5

Judul Tulisan bla bla bla bla bla

Blogger 6

Judul Tulisan bla bla bla bla bla

Blogger7

Judul Tulisan bla bla bla bla bla

Hasilnya

Hasilnya bisa dilihat disini

Blogger 9

Judul Tulisan bla bla bla bla bla

Blogger 10

Judul Tulisan bla bla bla bla bla

 

 

Mudah ya, sip selamat mencoba !

Mana Yang Lebih Baik, Nofollow atau Dofollow?

Seperti yang kita ketahui bahwa link adalah sebuah tautan yang diberikan oleh sebuah blog terhadap blog lainnya. Dengan kata lain, jika di klik akan menuju ke blog yang di beri link. Sobat jangan menganggap remeh hal ini, karena jika salah akan mengakibatkan posisi blog sobat jauh dari mesin pencari dan bisa menurunkan page rank blog sobat.

 

Kenapa saya beri judul kembalikan blog ke nofollow? mungkin banyak yang bertanya-tanya tentang hal ini, bukannya blog dofollow lebih bagus karena banyak yang berkomentar? Justru karena banyak yang berkomentar itulah makanya saya menyarankan sobat untuk mengembalikan blog sobat ke nofollow. Karena blog dofollow adalah sebuah blog yang memberikan oneway backlink (satu arah) kepada si pemberi komentar.

 

Pemasangan link dibedakan menjadi 2, contoh :

 

dofollow <a href=�http://kutu-blogspot.blogspot.com�>Dody Farial</a>

 

nofollow <a href=�http://kutu-blogspot.blogspot.com� rel=�nofollow�>Dody Farial></a>

 

Yang mana yang lebih baik untuk kesehatan blog sobat? tentu saja yang nofollow, tapi tidak etis rasanya jika sobat menggunakan nofollow untuk tukar link dengan blogger lain. untuk yang satu ini kasusnya berbeda, karena tukar link adalah backlink 2 arah (two-way backlink) sehingga saling menguntungkan antara sobat dengan blogger lain. Jadi, untuk tukar link sebaiknya menggunakan dofollow !

 

Banyak blogger senior yang mengembalikan blog mereka ke nofollow, semata-mata untuk menghindari link keluar lebih banyak. Kenapa saya bilang link keluar? tentu saja karena blog dofollow akan memberikan backlink secara cuma-cuma buat si pemberi komentar. Sudah banyak yang merasakan pagerank mereka di tendang google ke tempat yang paling dasar alias nol karena mengganti blog mereka ke dofollow.

 

Contoh Kasus

Jika dalam satu postingan blog sobat terdapat rata-rata 40 komentar, jumlah postingan sobat ada 100 dan semua postingan penuh dengan komentar dari blogger yang ingin mendapatkan backlink secara gratis. Bayangkan berapa link keluar (outbound link) yang sobat buang secara cuma-cuma. Asumsi jika sobat mempunyai link masuk (incoming link) sebanyak 200 link, apakah seimbang? bisa nutup kah? tentu saja tidak, hasilnya tinggal menunggu saat google update pagerank dan ucapan selamat dari google karena turun pagerank.

 

Sekarang tergantung sobat ingin mengembalikan blognya ke nofollow atau tetap menggunakan dofollow. Jika tetap menggunakan dofollow, sebaiknya selalu memantau backlink blog sobat di situs-situs backlink checker untuk mengetahui seberapa banyak incoming link dan outbound link untuk blog sobat.

Lacak Copy Paste Artikel Via Tynt Insight

Hal yang paling menjengkelkan dalam dunia blog adalah adanya blogger yang tidak tau malu dengan seenaknya mengcopy paste artikel kita tanpa menyertakan link penulisnya.

Sebenarnya tidak bisa di salahkan juga jika ada yang melakukan hal tersebut, karena memang tidak ada aturan yang benar-benar melarang kita untuk copy paste artikel dari blog orang lain.

 

Tapi semua itu hanya akan menghentikan kreatifitas sobat sendiri, karena menurut saya copy paste adalah hal memalukan apalagi jika tidak menyertakan link sumber (penulis). Jadi saya sarankan, hentikanlah copy paste dari blog orang lain, karena lebih baik membuat postingan hasil karya sendiri walaupun ala kadarnya daripada melakukan copy paste.

 

Untuk hal tersebut, sobat yang ingin tau siapa saja yang pernah mengcopy paste artikel sobat, bisa menggunakan jasa Tynt Insight. Kita bisa mengetahui gambar atau artikel kita yang di copas, dan seberapa banyak artikel kita di copas. Untuk memasang script-nya, silahkan langsung saja kunjungi Tynt Insight.

 

• Pada halaman depan, klik Get Started

   

   
• Kemudian lengkapi form pendaftaran dengan mengisi nama domain, email, dan password.

   

  
• Setelah selesai regitrasi, copy paste kode script yang ada di sebelah kanan bawah kedalam HTML template sobat. Letakkan kode tersebut sebelum </body>

Baiklah, selamat mencoba ! semoga dengan mengetahui siapa saja yang mengcopas artikel, sobat jadi tau bahwa artikel sobat menarik.

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..

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 !

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://kutu-blogspot.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://kutu-blogspot.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..

Menampilkan Judul Postingan Setelah Melakukan Pencarian

Perhatikan gambar disamping, terlihat jelas blog hanya menampilkan judul postingan saja setelah kita melakukan pencarian / search di blog. Jika sobat bingung maksud saya, silahkan sobat ketik keyword �blogspot� pada kotak search milik saya, terlihat blog hanya menampilkan judul � judul dari postingan saja. Secara default atau bawaan dari template standard, jika kita melakukan pencarian, maka yang akan kita temukan adalah judul postingan berserta urainnya yang panjang lebar, sehingga hasilnya kurang efisien dan memakan tempat. Dan biasanya pengunjung menjadi jenuh dan enggan mengklik halaman selanjutnya untuk mencari kata kunci yang di maksud.

 

Sekarang sobat sudah paham maksud dan tujuan untuk melakukan hasil pencarian dalam bentuk judul postingan. Jika tertarik, silahkan ikuti langkah � langkahnya berikut ini :

1. Login ke blogger dengan ID sobat.

    

2. Klik Tata Letak.

    

3. Pilih Edit HTML.

    

4. Silahkan klik Download Template Lengkap, untuk jaga � jaga jika gagal dan template jadi rusak.. just kidding sob.

    

5. Kemudian klik Expand Template Widget.

    

6. Cari kode <b:include data='post' name='post'/>

    

7. Hapus kode diatas dan ganti dengan kode berikut ini :

    

   <b:if cond='data:blog.homepageUrl !=
   data:blog.url'>
   <b:if cond='data:blog.pageType != "item"'>
   <a expr:href='data:post.url'>
   <data:post.title/></a><br/><br/>
   <b:else/>
   <b:include data='post' name='post'/>
   </b:if>
   <b:else/>
   <b:include data='post' name='post'/>
   </b:if>

    

8. Kemudian Simpan Template.

Silahkan lihat hasilnya, jika berhasil maka akan tampak seperti gambar diatas. Untuk variasi judul postingannya, saya punya 2 variasi yang mungkin bisa sobat terapkan :

 

1. Bentuk hasil pencarian dengan garis putus � putus dibawah setiap judul postingan.

    

   

    

   Jika sobat tertarik dengan variasi yang seperti ini, sobat tinggal menyisipkan kode <hr align='left' color='#CCCCCC' size='1' style='border-style: dotted; border-width=1'/> diantara </br>��..</br>, sehingga hasilnya menjadi seperti berikut ini :

    

   <b:if cond='data:blog.homepageUrl != data:blog.url'>
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <a expr:href='data:post.url'>
   <data:post.title/></a><br/><hr align='left' color='#CCCCCC' size='1' style='border-style: dotted; border-width=1'/><br/>
   <b:else/>
   <b:include data='post' name='post'/>
   </b:if>
   <b:else/>
   <b:include data='post' name='post'/>
   </b:if>

    

   Kode warna #CCCCCC adalah warna abu - abu, untuk mengubah warna garis dengan warna lain sobat bisa lihat disini.

    

2. Bentuk hasil pencarian dengan judul didalam kotak - kotak (seperti di blog saya ).

    

   

    

   Untuk hasil yang seperti ini, silahkan sobat ubah kode diatas menjadi seperti berikut :

    

   <b:if cond='data:blog.homepageUrl != data:blog.url'>
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <div style="border: 2px outset #CCCCCC; width: 500px; padding: 10px; background-color: #FBF5EF; text-align: left;">
   <a expr:href='data:post.url'>
   <data:post.title/></a></div><br/>
   <b:else/>
   <b:include data='post' name='post'/>
   </b:if>
   <b:else/>
   <b:include data='post' name='post'/>
   </b:if>

    

   Untuk kode width:500px, sobat sesuaikan dengan lebar main menu atau lebar kolom postingan sobat. Jika lebar kolom post 500px maka sebaiknya buatlah sebesar 400px saja agar terlihat lebih bagus. Dan untuk kode #FBF5EF adalah background judul post, atur sesuai dengan keinginan.

    

Selamat mencoba..have a nice day, selamat menunaikan ibadah puasa.

Membuat Link Download

Bagaimana caranya agar file yang akan kita sharing bisa di download oleh pengunjung ? caranya sangat mudah. Sobat tinggal siapkan filenya, kemudian upload file atau data sobat di tempat penyimpanan online, bisa di Google Sites atau Photobucket. 

Untuk menyimpan / mengupload filenya, sobat harus mendaftar dulu di 2 layanan tersebut, pilih salah satunya saja. Jika file yang akan di sharing ke pengunjung berupa gambar, saya sarankan di upload di Photobucket saja, tapi jika berupa file yang lain seperti dokumen, file javascript atau yang lainnya, saya sarankan sobat menguploadnya di Google Sites. 

• Daftar ke Google Sites
• Setelah itu upload file yang akan sobat beri link donwload
• Misalnya file yang saya upload alamatnya seperti ini :
  
  

  http://sites.google.com/site/dodyfarial/file/BlueLight.zip

• Kemudian rubah menjadi seperti ini :
  
  

  <a href="http://sites.google.com/site/dodyfarial/file/BlueLight.zip">Download Template</a>

• Jadi deh link downloadnya, sangat mudah kan.

Untuk kode yang saya tandai warna merah ganti dengan alamat url tempat sobat menyimpan / mengupload filenya. Contoh file yang sudah jadi dan siap didownload seperti ini ==>> Download

 
Selamat Mencoba !