闻建军博客

z-blog博客导航栏右上方添加new、hot、惊喜等醒目小图标的方法

我们经常看一些网站的导航菜单有一些小图标特效、特别醒目,博主今日也增加了这个小图标、添加之后看上去更加醒目、用户体验感加强,有人问我导航上的闪动的hot图标是如何实现的,几个写博客的朋友也问我如何给z-blog导航设置gif图标,今日给大家分享怎样在zblog导航栏右上方添加 new、hot、惊喜小图标,相信按照我的讲解去操作、设置好之后就会看到自己博客的效果了。

效果演示如图:

首先把需要设置的gif图标使用FTP上传工具上传的自己文件夹、

我使用的是卢松松主题、上传图片路径是/wwwroot/THEMES/LuSongSong/style/images/

其次打开首页CSS样式表,路径为/THEMES/您的模板文件夹/style/css/Index.css,

(我使用的是卢松松主题、CSS文件路径wwwroot/THEMES/LuSongSong/style/css/LuSongSong-Index.css)在底部添加以下代码:

#re {background-image: url

(图片所放地址);background-repeat: no-repeat;background-position: right top;}
#new {background-image: url

(图片所放地址);background-repeat: no-repeat;background-position: right top;}
#hot2 {background-image: url

(图片所放地址);background-repeat: no-repeat;background-position: right top;}
#hot {background-image: url

(图片所放地址);background-repeat: no-repeat;background-position: right top;}

最后在需要显示的导航链接中加入蓝色部分代码(其他同理)

<li class="page_item"><a href="http://s.wenjianjun.com/"title="邪恶党"><span id="hot">邪恶党</span></a></li>
文件重建、刷新下首页就会看到效果了! 

自己可以去网上下载自己喜欢适合自己模版的图标。

原创文章请注明转载自闻建军博客本文地址:http://wenjianjun.com/Wlzs/484.html,标题:z-blog博客导航栏右上方添加new、hot、惊喜等醒目小图标的方法

【我来说两句】
分享到:

评论 2

发表评论:

阿光验证码

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

    1.跨境电商  2016/1/9 12:57:13 回复
    很好,感谢![嘻嘻]
    2.zazxs  2019/8/6 17:22:38 回复
    宅男 的 福利 http://t.cn/AiYOeJrx