Add Social Links Buttons for Octopress

Ri Xu February 22, 2014 Web No Comments

My Octopress theme is Slash, Slash is a clean one-column theme designed for Octopress, supporting all features in classic theme and built-in Fancybox.

Slash Author Website zespia.tw/Octopress-Theme-Slash

Install

$ cd octopress
$ git clone git://github.com/tommy351/Octopress-Theme-Slash.git .themes/slash
$ rake install['slash']
$ rake generate

Have problems when installing with zsh? Try rake install\['slash'\] instead.

Adding Social Links Buttons

For example, I add a Sina Weibo links buttons

In octopress/_config.yml

# Sina Weibo
weibo_user: your-ID
weibo_button: true

Add a Sina Weibo icon in octopress/source/images/social/, named weibo.png

Add CSS Code in octopress/source/stylesheets/screen.css

#sub-nav .social a.weibo {
    background:url('/images/social/weibo.png?1392973048') center no-repeat #c83d20;
    border:1px solid #c83d20;
}

#sub-nav .social a.weibo:hover {
    border:1px solid #c83d20

}

Add to octopress/source/includes/header.html

{% if site.weibo_user %}
    <a class="weibo" title="Weibo" href="http://weibo.com/{{ site.weibo_user }}" target="_blank">
        Weibo
    </a>
{% endif %}
0.00 avg. rating (0% score) - 0 votes