Selasa, 17 Juli 2012


 komentar Respon :  
Jenis - Jenis Link dan Cara Membuatnya - Membuat Link adalah pelajaran dasar yang harus dipahami seorang blogger. Dengan mengetahui cara membuat link, SEO blog akan lebih mudah di optimasi. Sebagai contoh, membuat link untuk tukeran link dengan tujuan mendapatkan Backlink dari blog lain. Selain itu, kita juga bisa mengarahkan pengunjung ke halaman manapun dengan membuat link menuju ke halaman yang kita inginkan.

Sebelumnya saya sudah menulis artikel "Cara Membuat Link" yang merupakan panduan dasar untuk memasang link di blog, baik Link di postingan, maupun Link di sidebar atau bagian blog lainnya. Apabila anda masih belum tahu dasar membuat Link silahkan baca dulu artikel tersebut.

Artikel ini hanya sebagai pelengkap artikel "cara membuat link" sebelumnya. Di artikel ini, saya akan menunjukkan macam -macam cara membuat link mulai dari yang biasa sampai yang luar biasa serta cara membuatnya . Mari kita mulai...

Karena link bermacam - macam, kita mulai dari membuat link biasa.Untuk membuat link gunakan kode di bawah ini :
<a href="http://www.bloggerbugis.com/">BLOGGERBUGIS</a>

Hasilnya :

Kata "BLOGGERBUGIS" adalah link yang menuju ke  http://www.bloggerbugis.com
Saat di klik, Link diatas akan langsung mengganti halaman tempat linknya di pasang menjadi halaman yang dituju linknya.

Jika ingin membuat jenis - jenis Link yang lain, kita tinggal menambahkan beberapa kode HTML. Adapun kode HTML yang ditambahkan tersebut berbeda-beda tergantung dari jenis link yang kita inginkan.

Berikut macam - macam Link yang biasa di gunakan di blog

  • Link yang Membuka Tab Baru saat Link Di Klik 
  • Link yang Membuka Beberapa Halaman / Situs Sekaligus saat di Klik 
  • Link yang Membuka Halaman / Situs yang dituju link tanpa di klik. 
  • Link Gambar / LINK BANNER Pada Blog. 
  • Habis.
Berikut panduan cara membuat jenis-jenis link tersebut di atas satu persatu

Link yang Membuka Tab Baru

Saat pengunjung mengklik link jenis ini, halaman yang dituju link akan terbuka di tab baru browser. untuk membuatnya kita hanya perlu menambahkan kode target="_blank" setelah alamat url yang dituju link. Bisa juga menggunakan kode  target="_new" , dan bisa juga menggunakan kode target="_up".
Contoh kode yang digunakan seperti ini :

<a href="http://www.bloggerbugis.com/" target="_blank">BLOGGERBUGIS</a>

Kode diatas akan membuat kata BLOGGERBUGIS menjadi link menuju ke halamanhttp://www.bloggerbugis.com yang akan terbuka di tab baru browser. Kode link diatas akan menghasilkan link seperti ini :


Silahkan di klik untuk melihat hasilnya.

Link yang membuka Beberapa Halaman sekaligus

Link jenis ini akan membuka beberapa  halaman sekaligus pada saat bersamaan saat linknya di klik
Kode yang digunakan seperti ini :

<a href="javascript:(function(){window.open('http://www.bloggerbugis.com');})();javascript:(function(){window.open('http://abas-kerja-online.blogspot.com');})();">Blogger Bugis & Abas NAD</a>


Kode link diatas akan menghasilkan link di bawah ini :


Silahkan di klik untuk melihat hasilnya.
 
Untuk menambahkan lebih banyak halaman yang terbuka saat linknya di klik, tambahkan kode  ini :

javascript:(function(){window.open('Alamat URL 3');})();

Contoh :
 <a href="javascript:(function(){window.open('http://www.bloggerbugis.com');})();javascript:(function(){window.open('http://abas-kerja-online.blogspot.com');})();javascript:(function(){window.open('Alamat URL 3');})();">Blogger Bugis & Abas NAD</a>

Jangan lupa mengganti tulisan ALAMAT URL 3 dengan URL tujuan link.

Link yang Terbuka Tanpa di Klik

Ini adalah jenis link yang paling saya benci. Banyak blogger yang menggunakannya pada iklan yang terpasang di blognya. Link jenis ini akan langsung terbuka tanpa di klik saat mouse menyentuh / melewati link.

Kode yang digunakan seperti ini :

<a href="http://www.bloggerbugis.com" onmouseover="window.location=this.href">BLOGGER BUGIS</a>

Hasil dari kode link diatas seperti ini :


Silahkan arahkan mouse anda pada link untuk melihat hasilnya.

Link Banner ( Link Gambar )

Selain menggunakan kata atau kalimat, kita juga bisa membuat gambar menjadi link. Link jenis ini di kenal dengan Link Banner. Biasanya di gunakan untuk membuat Link Banner untuk tukeran Link dan Link Banner untuk iklan di blog. Untuk jenis link yang satu ini kita membutuhkan sebuah gambar yang tersimpan di imge hosting lalu menggunakan alamat URL Gambar tersebut. Misalnya kita akan menggunakan Gambar di bawah ini sebagai link


Gambar diatas tersimpan di PICASA dengan alamat URLhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFAmk39NQvtxi0ptJKW4FjlbcWxDoVH9A1DOMy4_W5ZR9TIetpBsVnwp9NU7M315F200BiGp3gPN9d7Y1BuD0oP_W8VhtLfr7JKptCdM4VBW2tDzH4wOqpbwAqyNrRTbO4hyHsNvhtHOCJ/

Untuk membuat gambarnya menjadi link, Contoh kode yang digunakan seperti ini :

<a href="http://www.bloggerbugis.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFAmk39NQvtxi0ptJKW4FjlbcWxDoVH9A1DOMy4_W5ZR9TIetpBsVnwp9NU7M315F200BiGp3gPN9d7Y1BuD0oP_W8VhtLfr7JKptCdM4VBW2tDzH4wOqpbwAqyNrRTbO4hyHsNvhtHOCJ/border="0" /></a>

Hasilnya seperti ini :


Silahkan klik gambar diatas untuk melihat hasilnya

Note : Ganti kode yang berwarna merah dengan URL gambar anda.

Kita masih bisa menambahkan beberapa kode untuk mengatur Linknya, misalnya memberi warna pada link ( Lihat kode warna klik DISINI ), mengatur posisi dan besar gambar pada Link Banner dengan kode margin dan padding, dll. Silahkan edit sendiri linknya agar sesuai dengan yang anda inginkan.

Oce mas bro.... semoga cukup jelas cara saya menyampaikan Beberapa Jenis Link dan cara membuatnya di Blog.

Happy blogging dan Salam Blogger.....

 komentar Respon : 
Cara Membuat Tulisan Berjalan - Setelah mengetahui cara membuat spoiler, trik Blogger Bugis berikutnya adalah membuat teks atau tulisan atau widget yang ada pada blog bergerak sendiri dengan menggunakan kode HTML. Teks atau tulisan bergerak ini biasa di sebut dengan tulisan berjalan, dalam kode HTML di kenal dengan perintah marquee.

Cara membuat tulisan berjalan | Cara membuat tulisan bergerak | Cara membuat tulisan berjalan di blog | Cara membuat tulisan berjalan pada blog | cara membuat widget berjalan dan bergerak
Gambar 1 : Cara Membuat Tulisan Berjalan

Membuat tulisan berjalan akan memberikan tambahan variasi pada blog. Biasanya, tulisan berjalan atau widget berjalan pada blog di gunakan oleh blogger untuk menampilkan semua widget atau tulisan yang tersimpan di dalam kotak yang tidak menggunakan scroll. Kecepatan berjalan, arah gerakan dan variasi lain bisa di tambahkan pada teks atau tulisan berjalan untuk membuat tulisan atau teks berjalan bergerak atau berjalan sesuai dengan yang kita inginkan.

Cara Membuat tulisan berjalan

Kode HTML dasar yang di gunakan untuk membuat tulisan bergerak atau berjalan adalah :

<marquee>Tulisan Berjalan</marquee>

Kode tersebut akan membuat tulisan berjalan seperti di bawah ini :

Tulisan Berjalan


Cara Membuat Widget Berjalan

Membuat widget berjalan atau bergerak sama saja dengan cara membuat tulisan berjalan. Gunakan kode yang sama seperti kode di atas lalu ganti tulisan yang berwarna merah dengan kode widget yang ingin di buat bergerak atau berjalan sehingga kodenya seperti ini :

<marquee>Tulisan Berjalan</marquee>

Ubah kodenya menjadi seperti ini :

<marquee>Kode Widget</marquee>

Ganti kode yang berwarna merah dengan kode widget yang ingin di buat bergerak

Macam - Macam Tulisan Berjalan

Setelah mengetahui cara membuat tulisan dan widget berjalan, berikut saya jelaskan cara mengatur gerakan dan memberi variasi pada tulisan berjalan agar terlihat lebih menarik

1. Mengatur Kecepatan Gerakan
Tambahkan perintah scrollamount="angka kecepatan" untuk mengatur kecepatan gerakan tulisan berjalan sehingga kodenya menjadi seperti ini :

<marquee scrollamount="angka kecepatan">TULISAN BERJALAN</marquee>

Ganti kode berwarna biru dengan angka ( misalanya 2, 3, atau 4 dsb ) dan ganti Tulisan berjalan dengan teks atau tulisan atau kode widget yang ingin di buat berjalan atau bergerak.
Contohnya :

<marquee scrollamount="2">TULISAN BERJALAN</marquee>
<marquee scrollamount="3">TULISAN BERJALAN</marquee>
<marquee scrollamount="4">TULISAN BERJALAN</marquee>

Ke tiga kode diatas akan membuat tulisan berjalan dengan kcepatan berbeda yaitu 2, 3, dan 4. Kode di atas akan membuat tulisan berjalan seperti berikut ini :

TULISAN BERJALANTULISAN BERJALANTULISAN BERJALAN
Semakin besar angka scrollamount semakin cepat tulisannya berjalan.

2. Mengatur Arah Gerakan
Tambahkan perintah direction="arah gerakan" untuk menentukan arah gerakan tulisan berjalan. Adapun arah gerakan yang bisa di gunakan adalah :

right = arah gerakan ke kanan
up = arah gerakan ke atas
down = arah gerakan ke bawah

Penempatan kode arah gerakan sama dengan penempatan kode kecepatan gerakan. Contohnya seperti ini :

<marquee direction="right">TULISAN BERJALAN</marquee>

Jika kode kecepatan dan kode arah gerakan  di gabung, kodenya akan menjadi seperti ini :


<marquee scrollamount="2" direction="right">TULISAN BERJALAN</marquee>

<marquee scrollamount="2" direction="up">TULISAN BERJALAN</marquee>

<marquee scrollamount="2" direction="down">TULISAN BERJALAN</marquee> 

hasilnya :

TULISAN BERJALANTULISAN BERJALANTULISAN BERJALAN

Dengan memahami contoh di atas, anda sudah tahu bagaimana cara menambahkan perintah dan menggabung perintahnya untuk memberikan efek berbeda pada tulisan berjalannya. Sekarang saya akan memberikan beberapa kode perintah untuk tulisan berjalan. Anda tinggal menggabung kodenya jika anda menginginkan efek berbeda pada saat membuat tulisaan berjalan.

3. Tulisan Berjalan Bolak Balik
Membuat tulisan berjalan mondar mandir juga menarik. Untuk itu, berikut cara membuatnya versiBlogger Bugis. Kode yang di gunakan :

<marquee behavior="alternate">TULISAN BERJALAN BOLAK-BALIK</marquee>

Hasilnya :
TULISAN BERJALAN BOLAK-BALIK

4. Tulisan Berjalan dan Berhenti
Kode yang di gunakan :

<marquee onmouseover="this.stop()" onmouseout="this.start()">TULISAN BEJALAN dan BERHENTI</marquee>

Hasilnya :
TULISAN BEJALAN dan BERHENTI

Kode diatas akan membuat tulisan berhenti saat di sentuh mouse. Arahkan mouse anda pada tulisan berjalannya untuk melihat hasilnya.

5. Memberi background
Untuk memberi background dan warna pada tulisan berjalan kode yang di gunakan adalah sebagai berikut :

<marquee bgcolor="#FDEAE8">Tulisan Berjalan</marquee>

Hasilnya seperti ini :

Tulisan Berjalan

#FDEAE8 adalah kode warna background, untuk melihat lebih banyak kode warna, anda bisa lihat di artikel Blogger Bugis sebelumnya "Tools Untuk Melihat Kode Warna

6. Mengatur Lebar dan Tinggi Jarak Gerakan.
Untuk mengatur lebar dan gerakan tulisan berjalan, kode yang di gunakan adalah sebagai berikut :

<marquee scrollamount="2" direction="up" width="50px"height="70px">TULISAN BERJALAN</marquee>
<marquee scrollamount="2" direction="down" width="50px"height="70px">TULISAN BERJALAN</marquee>

Hasilnya :
TULISAN BERJALAN TULISAN BERJALAN

Pengaturan tinggi gerakan biasanya di gunakan untuk tulisan berjalan yang bergerak ke atas dan ke bawah agar arah gerakan tidak terlalu naik tau terlalu ke bawah seperti pada contohnomor 2 tulisan bergerak ke atas / bawah.

Width adalah lebar, sedangkan height adalah tinggi. Anda juga bisa menambah kode width saja atau height saja sesuai keinginan anda. Ganti angkanya dengan angka yang lebih besar atau lebih kecil jika ingin membuat lebar atau tinggi menjadi lebih lebar atau lebih tinggi atau sebaliknya. Semakin tinggi angka, maka akan semakin lebar atau semakin tinggi.

Beberapa contoh tulisan berjalan di atas saya rasa sudah cukup. Anda bisa memberikan variasi lain dengan menggabungkan kodenya. Jika anda ingin membuat link di berjalan, ganti kode "Tulisan Berjalan" dengan kode html link anda. Jika anda belum tahu bagaimana cara membuat kode HTML link, klik "Cara Membuat Link".

Selamat membuat blog anda lebih ramai dengan menambahkan Tulisan Berjalan. Jika masih ada pertanyaan tentang cara membuat tulisan berjalan di blogspot, sampaikan melalui kotakkomentar di bawah artikel ini.
Semoga bermanfaat......

Faisal Photographi

Faisal Photographi
Kota Tua