Textual description of firstImageUrl

Macam-macam Cara Membuat Link Lebih Unik

macam-macam link
Hi Sob! Bagaimana kabar kamu? Semoga semangat seperti saya yang lagi postig hari ini. Kali ini sejuta trik blogger akan coba sharing pengalaman saya tentang macam-macam cara membuat link lebih unik. Macam-macam di posting kali ini saya fokuskan pada singgle link. Singgle link ini artinya link yang kita buat terpisah tanpa dipengaruhi oleh CSS, Script, dan Jquery yang terpasang di template kita.

Ada macam-macam trik memodifikasi link agar kelihatan unik. Berikut beberapa contoh dalam posting saya yang lalu :
dan masih banyak lagi macam-macam membuat link yang belum sempat diposting. Karena saking banyaknya modifikasi link. Sebagai contoh link nuding, link hover, link open new tab, dan masih banyak lagi yang lain. Atau kalau masih kurang ya cari saja di google :D

Posting tentang macam-macam membuat link ini terinspirasi bagi saya sendiri yang kesulitan membuat 1 link saja yang unik tanpa dipengaruhi bawaan template. Nah bagi sahabat sejuta trik yang juga ingin membuat link 1 saja yang unik, berikut triknya.

Membuat link memang sangat mudah. Tetapi untuk trik kali ini adalah untuk singgle link atau 1 link yang kita utak-atik. Sebagai contoh cara membuat link adalah sebagai berikut :

A. Link Biasa

Sejuta Trik Blogger
Triknya adalah :
<a href="http://sejutatrik.blogspot.com/">Sejuta Trik Blogger</a>

B. Link Tebal

Sejuta Trik Blogger
kodenya :
<b><a href="http://sejutatrik.blogspot.com/">Sejuta Trik Blogger</a></b>
atau
<strong><a href="http://sejutatrik.blogspot.com/">Sejuta Trik Blogger</a></strong>

C. Membuat Link Membuka Tab Baru

Sejuta Trik Blogger
kodenya :
<a href="http://sejutatrik.blogspot.com/" target="_blank">Sejuta Trik Blogger</a>

D. Link Italic atau teks miring

Sejuta Trik Blogger
kodenya :
<a href="http://sejutatrik.blogspot.com/"><i>Sejuta Trik Blogger</i></a>

E. Link Berwarna

Sejuta Trik Blogger
kodenya :
<a href="http://sejutatrik.blogspot.com/" target="_blank"><span style="color: blue;">Sejuta Trik Blogger</span></a>
 

F. Link Menu Hover CSS 3

kodenya :
<style>
.coollinks a {
 display: inline-block;
 padding: 4px;
 outline: 0;
 color: #3a599d;
 -webkit-transition-duration: 0.35s;
 -moz-transition-duration: 0.35s;
 -o-transition-duration: 0.35s;
 transition-duration: 0.35s;
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 -o-transition-property: -o-transform;
 transition-property: transform;
 -webkit-transform: scale(1) rotate(0);
 -moz-transform: scale(1) rotate(0);
 -o-transform: scale(1) rotate(0);
 transform: scale(1) rotate(0);
}
.coollinks #one:hover, #three:hover, #five:hover{
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 -o-border-radius: 6px;
 border-radius: 6px;
 -webkit-transform: scale(1.01) rotate(-1.1deg);
 -moz-transform: scale(1.01) rotate(-1.1deg);
 -o-transform: scale(1.01) rotate(-1.1deg);
 transform: scale(1.01) rotate(-1.1deg);
}
.coollinks #two:hover, #four:hover {
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 -o-border-radius: 6px;
 border-radius: 6px;
 -webkit-transform: scale(1.01) rotate(1.1deg);
 -moz-transform: scale(1.01) rotate(1.1deg);
 -o-transform: scale(1.01) rotate(1.1deg);
 transform: scale(1.01) rotate(1.1deg);
}
.coollinks #one:hover{
 background: #815782;
 text-decoration: none;
 color: #fff;}

.coollinks #two:hover {
 background: #62946d;
 text-decoration: none;
 color: #fff;
}
.coollinks #three:hover {
 background: #824c4a;
 text-decoration: none;
 color: #fff;
}
.coollinks #four:hover {
 background: #825f0c;
 text-decoration: none;
 color: #fff;
}
.coollinks #five:hover {
 background: #823a3a;
 text-decoration: none;
 color: #fff;
}
</style>

lalu tambahkan kode berkut di bawahnya :

<div class="coollinks">
<a href="http://sejutatrik.blogspot.com" id="one">Home</a>
<a href="http://sejutatrik.blogspot.com/2012/02/memasang-breadcrumb-google.html" id="two">Google Breadcrumb</a>
<a href="http://sejutatrik.blogspot.com/2010/10/daftar-isi-sejuta-trik.html" id="three">Sitemap</a>
<a href="http://sejutatrik.blogspot.com/2011/10/daftar-ping-service-terbaik.html" id="four">Ping Service</a>
<a href="http://www.givegoodweb.com/tools/page-check/index.php" id="five">Title H1 Ceck</a>
</div>


Untuk trik 'F' sahabat bisa letakkan pada 'HTML' widget atau saat posting seperti milik saya ini.
Nah, bagi teman-teman yang memiliki trik lebih unik dari macam-macam cara membuat link di atas, mari berbagi. Akhir kata, Happy Blogging Friends! Cayo Blogger Indonesia. 

19 comments:

  1. AnonymousMay 12, 2012

    nice share sob

    ReplyDelete
  2. kheren sob sharenya...

    ReplyDelete
  3. Nice... Mantab..brooO....

    ReplyDelete
  4. Mantap Artikelnya sob..

    ReplyDelete
  5. wah kayanya gampang juga ya... di coba ntar gan

    ReplyDelete
  6. sangat bermanfaat sekali infonya ....??

    ReplyDelete
  7. mantab sob lengkap nih :D

    ReplyDelete
  8. Thanks sudah berbagi ilmunya, sukses selalu...

    ReplyDelete
  9. thanks sob, sangat bermanfaat :)

    ReplyDelete
  10. thanks sob, sangat bermanfaat :)

    ReplyDelete
  11. bisa dicoba nih, ada yang bisa pake gambar tidak link sahabatnya?

    ReplyDelete
  12. info yg bguz...
    ijin copas gan.

    ReplyDelete
  13. waduhh.. kalah saingan nie ane ma gan, hehe ane coba juga deh gan..

    ReplyDelete

Silahkan berkomentar sesuai artikel. Setiap komentar adalah tanggung jawab anda. Komentar spam akan dihapus, baik secara otomatis dengan javascript ataupun manual. Saya sudah menyediakan nama/url jadi link aktif di komentar tidak perlu lagi disertakan. Jadilah blogger Indonesia yang bijak. Anda berkomentar saya berkunjung!