Berikut ini adalah salah satu trik sederhana untuk membuat beberapa link penting di dalam konten menjadi berkedip. Trik ini dimaksudkan untuk memberitahukan pembaca konten blog, bahwa ada link penting yang terkait dengan informasi yang disajikan dalam artikel.
Link yang kelihatan berkedip secara tidak langsung akan mencuri perhatian pembaca, sekaligus memancing minat pembaca untuk membuka link tersebut. Hal ini tentu menguntungkan dimana page views blog akan meningkat dan diharapkan Prosentase Bounce Rate dapat ditekan serta Alexa Rank blog akan menjadi lebih baik.
Agar tampilan link yang terdapat di dalam konten menjadi berkedip, anda harus menanamkan script di bagian <head> pada dokumen HTML template blog Anda. Script ini design oleh Dynamic Drive dan berbasis Javascript, selanjutnya Anda perlu menambahkan sedikit elemen 'rel' pada kode HTML link yang akan dibuat berkedip.
Cara Buat Tampilan Link di Dalam Konten Menjadi Berkedip
- Copy script di bawah ini, dan simpan di tempat hosting script seperti Google Code atau Google Sites dan ambil URL script-nya.
var flashinglinks={
pause: 1000,
targetlinks:[],
changecolor:function(){
for (var i=0; i<this.targetlinks.length; i++){
var targetlink=this.targetlinks[i]
var cssprop=(targetlink.colorsetting.type=="flashfg")? "color" : "backgroundColor"
targetlink.style[cssprop]=(targetlink.style[cssprop]!=targetlink.colorsetting.ncolor)? targetlink.colorsetting.ncolor : targetlink.colorsetting.ocolor
targetlink.colorsetting.ccolor=targetlink.style[cssprop]
}
},
fetchcssvalue:function(el, prop){
return (el.style[prop])? el.style[prop] : (el.currentStyle)? el.currentStyle[prop] : (document.defaultView.getComputedStyle)? document.defaultView.getComputedStyle(el, "").getPropertyValue(prop) : ""
},
addEvent:function(targetarr, functionref, tasktype){
if (targetarr.length>0){
var target=targetarr.shift()
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)})
this.addEvent(targetarr, functionref, tasktype)
}
},
init:function(){
var alllinks=document.getElementsByTagName("a")
for (var i=0; i<alllinks.length; i++){
if (alllinks[i].getAttribute('rel') && /(flash[bf]g)\[(.+)\]/i.test(alllinks[i].getAttribute('rel'))){
alllinks[i].colorsetting={
ocolor: this.fetchcssvalue(alllinks[i], RegExp.$1=="flashfg"? "color" : "backgroundColor"),
ncolor: RegExp.$2,
type: RegExp.$1
}
this.targetlinks.push(alllinks[i])
}
}
if (this.targetlinks.length>0){
setInterval(function(){flashinglinks.changecolor()}, this.pause)
}
}
}
flashinglinks.addEvent([window], function(){flashinglinks.init()}, "load")
pause: 1000,
targetlinks:[],
changecolor:function(){
for (var i=0; i<this.targetlinks.length; i++){
var targetlink=this.targetlinks[i]
var cssprop=(targetlink.colorsetting.type=="flashfg")? "color" : "backgroundColor"
targetlink.style[cssprop]=(targetlink.style[cssprop]!=targetlink.colorsetting.ncolor)? targetlink.colorsetting.ncolor : targetlink.colorsetting.ocolor
targetlink.colorsetting.ccolor=targetlink.style[cssprop]
}
},
fetchcssvalue:function(el, prop){
return (el.style[prop])? el.style[prop] : (el.currentStyle)? el.currentStyle[prop] : (document.defaultView.getComputedStyle)? document.defaultView.getComputedStyle(el, "").getPropertyValue(prop) : ""
},
addEvent:function(targetarr, functionref, tasktype){
if (targetarr.length>0){
var target=targetarr.shift()
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)})
this.addEvent(targetarr, functionref, tasktype)
}
},
init:function(){
var alllinks=document.getElementsByTagName("a")
for (var i=0; i<alllinks.length; i++){
if (alllinks[i].getAttribute('rel') && /(flash[bf]g)\[(.+)\]/i.test(alllinks[i].getAttribute('rel'))){
alllinks[i].colorsetting={
ocolor: this.fetchcssvalue(alllinks[i], RegExp.$1=="flashfg"? "color" : "backgroundColor"),
ncolor: RegExp.$2,
type: RegExp.$1
}
this.targetlinks.push(alllinks[i])
}
}
if (this.targetlinks.length>0){
setInterval(function(){flashinglinks.changecolor()}, this.pause)
}
}
}
flashinglinks.addEvent([window], function(){flashinglinks.init()}, "load")
- Login ke blogger dengan ID Anda, setelah berada pada halaman dashboard blogger, pilih menu Template>> Edit HTML >> Proceed
- Cari kode </head> pada dokumen HTML template Anda dan tempatkan URL script yang didapatkan dari tempat hosting script tepat di atas kode </head>. Contoh URL script yang ditempatkan di atas kode </head> seperti berikut ini.
<script src='http://multipaste.googlecode.com/files/flashinglinks.js' type='text/javascript'/>
- Tekan tombol Save template untuk menyimpan perubahan dokumen HTM template Anda.
- Selanjutnya setiap link penting yang akan dibuat blinking/berkedip tambahkan elemen berikut ini, pada kode HTML link, dan jangan lupa ganti "colorvalue" dengan kode warna.
<a href="contoh.htm" rel="flashfg[colorvalue]">Contoh 1</a>
<a href="contoh.htm" rel="flashbg[colorvalue]">Contoh 2</a>
<a href="contoh.htm" rel="flashbg[colorvalue]">Contoh 2</a>
- Sehingga secara lengkap kode HTML link (seperti demo di atas) terlihat seperti berikut,
<a href="http://multipaste.blogspot.com/" rel="flashfg[red]" target="_blank">Multi Paste </a>
<a href="http://multipaste.blogspot.com/" rel="flashbg[yellow]" target="_blank">Multi Paste </a>
<a href="http://multipaste.blogspot.com/" rel="flashbg[yellow]" target="_blank">Multi Paste </a>
Banyak cara yang digunakan oleh para bloggers untuk mencuri perhatian pembaca agar tertarik untuk membuka link yang terdapat dalam artikel salah satunya adalah trik membuat tampilan link menjadi berkedip, dan saya akan berterima kasih jika Anda ikut berbagi informasi seputar "Animasi Link" pada bagian komentar agar pengetahuan kita bersama terus bertambah.
Related Post:
Widget by [ salahbantal ]
Label:
Tips Dan Trik Ngeblog
Previous Article
Responses
0 Respones to "Membuat Link Di Dalam Postingan Berkedip"
Post a Comment