Macam-macam Cara Membuat Link Lebih Unik
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 BloggerTriknya adalah :
<a href="http://sejutatrik.blogspot.com/">Sejuta Trik Blogger</a>
B. Link Tebal
Sejuta Trik Bloggerkodenya :
<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 Bloggerkodenya :
<a href="http://sejutatrik.blogspot.com/" target="_blank">Sejuta Trik Blogger</a>
D. Link Italic atau teks miring
Sejuta Trik Bloggerkodenya :
<a href="http://sejutatrik.blogspot.com/"><i>Sejuta Trik Blogger</i></a>
E. Link Berwarna
Sejuta Trik Bloggerkodenya :
<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.
