轻松 3 步搞定,让你的 Solo 博客充满爱

本贴最后更新于 3047 天前,其中的信息可能已经时过境迁

效果如下:
1471589118820
1、首先要添加心形图标的 CSS
访问这个地址,填写你的邮箱
http://fontawesome.io/get-started/
然后你会收到它发来的一个 CDN 链接:
1471589263375
把这个链接粘贴到 SOLO 管理后台的 HTML head 中:
1471589356088
2、添加 Jquery 的 CDN:

<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>

3、添加代码:

<script> 
  // mouse click special effects
    var click_cnt=0;
    jQuery(document).ready(function($) {
        $("html").click(function(e) {
            var n=18;
            //var $i=$("<b></b>").text("+"+n);
            var $i;
            click_cnt++;
            if(click_cnt==10) {
                $i=$("<b></b>").text("OωO");
            } else if(click_cnt==20) {
                $i=$("<b></b>").text("(๑•́ ∀ •̀๑)");
            } else if(click_cnt==30) {
                $i=$("<b></b>").text("(๑•́ ₃ •̀๑)");
            } else if(click_cnt==40) {
                $i=$("<b></b>").text("(๑•̀_•́๑)");
            } else if(click_cnt==50) {
                $i=$("<b></b>").text("( ̄へ ̄)");
            } else if(click_cnt==60) {
                $i=$("<b></b>").text("(╯°口°)╯(┴—┴");
            } else if(click_cnt==70) {
                $i=$("<b></b>").text("૮( ᵒ̌皿ᵒ̌ )ა");
            } else if(click_cnt==80) {
                $i=$("<b></b>").text("╮(。>口<。)╭");
            } else if(click_cnt==90) {
                $i=$("<b></b>").text("( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃");
            } else if(click_cnt>=100 && click_cnt<=105) {
                $i=$("<b></b>").text("(ꐦ°᷄д°᷅)");
            } else {
                $i=$("<i class='fa fa-heart'></i>");
                n=Math.round(Math.random()*14+6)
            }
            var x=e.pageX,y=e.pageY;
            $i.css({
                "z-index":9999,
                "top":y-20,
                "left":x,
                "position":"absolute",
                "color":"#E94F06",
                "font-size":n,
                "-moz-user-select": "none",
                "-webkit-user-select": "none",
                "-ms-user-select": "none"
            });
            $("body").append($i);
            $i.animate(
                {"top":y-180,"opacity":0},
                1500,
                function(){$i.remove();}
            );
            //e.stopPropagation();
        });
    });
</script>

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • relyn
    作者

    @Vanessa 对,可以直接用:♥

    &hearts;
    &heartsuit;
    

    感谢 V 大赐教哈哈

  • 其他回帖
  • huiyadanli

    @relyn @Vanessa 直接用 ♥ 最好加一串 css 防止被选中,一开始我也用的 ♥ ,后来发现还是用 fontawesome 的字体比较方便。。

    .heart {
      moz-user-select: -moz-none;
      -moz-user-select: none;
      -o-user-select:none;
      -khtml-user-select:none;
      -webkit-user-select:none;
      -ms-user-select:none;
      user-select:none;
    }
    
  • 应该不用引 font-icon, 用 HTML Character Entities 简单的就可以了。

  • huiyadanli

    @Vanessa 疯狂点击的时候,很容易双击选中 ♥ ,然后蒙上一片蓝色,不好看。一不小心拖拽还会直接跳转搜索。。。好吧,选中也没什么大问题,强迫症不能忍 😂

  • 查看全部回帖
relyn
永远相信美好的事情即将发生 福州

推荐标签 标签

  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 667 关注
  • sts
    2 引用 • 2 回帖 • 197 关注
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1435 引用 • 10056 回帖 • 489 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    76 引用 • 1737 回帖 • 1 关注
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 632 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    107 引用 • 153 回帖
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    7 引用 • 40 回帖
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖 • 1 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 15 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 4 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 483 关注
  • AngularJS

    AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 483 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 27 关注
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 416 关注
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 6 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    86 引用 • 122 回帖 • 626 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    66 引用 • 114 回帖 • 223 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 635 关注
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    23020 引用 • 92599 回帖
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    171 引用 • 512 回帖
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    343 引用 • 723 回帖
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 60 关注
  • 小说

    小说是以刻画人物形象为中心,通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    28 引用 • 108 回帖
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 75 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 668 关注