Loper主题添加个性title提示,偶尔给我发现特效提示框蛮不错的,简单来说就是气泡提示美化框样式,所以决定手动添加Loper主题个性title提示拽立网,其实很简单的不是用复杂,只要用心修改一下颜色代码就行了,如果感觉很麻烦也可以使用Wordpress Tooltips插件,今天我把Loper主题添加个性title提示方法分享给大家,请看以下操作!

添加前的效果图!

Loper主题添加个性title提示

1.登陆你的后台管理,选择【外观】-【编辑】-【loper: 样式表 (style.css)?】

选择:你喜欢效果的代码添加进去:【4种效果颜色自己改默认黑白】

1.第一种个性title提示效果图:

Loper主题添加个性title提示

第一种个性title提示代码:

/* 主题个性title提示1 */
#tooltip{color:#FFFFFF;text-align:center;position:absolute;z-index:999;display:none;background:black;font-size:12px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;box-shadow:0 0 3px black;-moz-box-shadow:0 0 3px #000000;-webkit-box-shadow:0 0 3px black;padding:3px 8px;}

 

2.第二种个性title提示效果图:

Loper主题添加个性title提示

第二种个性title提示代码:

/* 主题title提示样式2 */
#tooltip{background:#000000;color:#FFFFFF;text-align:center;margin-right:10px;position:absolute;z-index:9999;display:none;box-shadow:0 0 5px #000000;border:1px dashed #FFFFFF;padding:3px 8px;font-size:12px;}

 

3.第三种个性title提示效果图:

Loper主题添加个性title提示

第三种个性title提示代码:

/* 主题个性title提示3 */
#tooltip{background:#000;color:#FFFFFF;text-align:center;padding:6px 0;position:absolute;z-index:9999;display:none;border-radius:3px;box-shadow:0 0 3px #000;padding:3px 8px;font-size:12px;text-shadow:none;}
#tooltip:before{position: absolute;width: 0;height: 0;line-height: 0;border: 6px dashed #000;top: -6px;left:15px;border-bottom-style: solid;border-top: none;border-left-color: transparent;border-right-color: transparent;content:''}

 

4.第四种个性title提示效果图:

Loper主题添加个性title提示

第四种个性title提示代码:

/* 主题个性title提示4 */
#tooltip{background:#000000;color:#FFFFFF;text-align:center;margin-right:10px;position:absolute;z-index:9999;display:none;box-shadow:0 0 5px #000000;border:1px dashed #FFFFFF;padding:3px 8px;font-size:12px;}
#tooltip:before{position: absolute;width: 0;height: 0;line-height: 0;border: 6px dashed #000;top: -6px;left:15px;border-bottom-style: solid;border-top: none;border-left-color: transparent;border-right-color: transparent;content:''}

 

5.登陆你的FTP工具,选择【Loper主题】-【/scripts/】-【loperjs.js】

用【Notepad++】工具打开【loperjs.js】文件直接搜索以下代码:

$(".searchfade").fadeOut("slow");});

 

在上面代码后面添加下面全部代码:

function hooktooltip() {
$('*').each(function(i){if(this.title){var aTitle=this.title;$(this).mouseover(function(e){this.title='';$('body').append('<div id="tooltip">'+aTitle+'</div>')
;$('#tooltip').css({left: (e.pageX+30)+'px',top:(e.pageY+5)+'px',opacity:"0.8"
}).show(250)
}).mousemove(function(e) {
$('#tooltip').css({left: (e.pageX+30)+'px',top:(e.pageY+5)+'px'
})}).mouseout(function() {
this.title=aTitle;$('#tooltip').remove()
}).mousemove(function(e) {
$('#tooltip').css({left: (e.pageX+30)+'px',top:(e.pageY+5)+'px'
})})}});}
hooktooltip();

 

不懂添加代码,那就下载我分享的【loperjs.js】文件!然后替换!

提示:CSS里面颜色代码随便修改你喜欢的,各有所爱!

提示:Loper主题专用代码,添加带其他主题自己研究,请先备份好文件!

» 原创文章:《Loper主题添加个性title提示》 » 本文地址:《http://www.zlinet.com/148.html
©版权声明:《拽立网》 » 转载请务必注明出处,喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^