[blogger]スタイリッシュさはかなりのもの！「SexyBookmark」の導入方法について。

お早うございます、すなふです。
ブログへのソーシャルボタン追加で、1つ1つ設定するのが面倒な時に、

SexyBookmarks Version 3 for Blogger

Twitter、Facebookボタンなどをまとめて簡単設置｜忍者おまとめボタン

The Largest Social Sharing and Targeting Platform | AddThis

辺りが使いやすそうと思っています。

今回は、導入までにはいかなかったものの「SexyBookmarks」が、惜しいところまでいくなぁと思ったので、ご紹介。

SexyBookmarksは、記事トップの画像の様に、通常では半分ほど隠れた状態であって、マウスオーバー時に、姿を見せるという、少し遊びの入ったソーシャルボタン。

画像では、多段表示されていますが、実際に置いてみるとマウスオーバーするまでは、1段目だけが表示されていて、マウスオーバーすると、2段目3段目がニュルニュルっと伸び出てきます、凝ってますねｗ

導入方法

スクリプト部分

まずは、
「管理画面＞テンプレート＞HTMLの編集」を開いて、ページ内検索で

</head>

を探して下さい。

該当箇所が見つかったら、その上に

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'
type='text/javascript'/>
<link href='https://sites.google.com/site/mayuradocs/social_bookmarks.css'
rel='stylesheet' type='text/css'/>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('.sexy-bookmarks a.external').attr("target", "_blank");
        var sexyBaseHeight = jQuery('.sexy-bookmarks').height();
        var sexyFullHeight = jQuery('.sexy-bookmarks ul.socials').height();
        if (sexyFullHeight > sexyBaseHeight) {
            jQuery('.sexy-bookmarks-expand').hover(

            function() {
                jQuery(this).animate({
                    height: sexyFullHeight + 15 + 'px'
                }, {
                    duration: 800,
                    queue: false
                });
            }, function() {
                jQuery(this).animate({
                    height: sexyBaseHeight + 'px'
                }, {
                    duration: 800,
                    queue: false
                });
            });
        }
        if (jQuery('.sexy-bookmarks-center')) {
            var sexyFullWidth = jQuery('.sexy-bookmarks').width();
            var sexyBookmarkWidth = jQuery('.sexy-bookmarks:first ul.socials li').width();
            var sexyBookmarkCount = jQuery('.sexy-bookmarks:first ul.socials li').length;
            var numPerRow = Math.floor(sexyFullWidth / sexyBookmarkWidth);
            var sexyRowWidth = Math.min(numPerRow, sexyBookmarkCount) * sexyBookmarkWidth;
            var sexyLeftMargin = (sexyFullWidth - sexyRowWidth) / 2;
            jQuery('.sexy-bookmarks-center').css('margin-left', sexyLeftMargin + 'px');
        }
    });
</script>

と挿入してください。
（いつの間にか、「"」を「"」に直さなくても通るようです・・・というか、自動変換されます。）

表示部分コード

そのまま、ページ内検索で、

<div class='post-footer'>

を探して・・・その下に

・・・コード入れようと思いましたが、めちゃくちゃ長いので、

SexyBookmarks Version 3 for Blogger

公式にある、
【8. Now search for <div class='post-footer'> tag and copy below code right before that tag.】
この箇所の下にあるコードを挿入してください。
長いですね・・・。

ただ、例えば要らないものがあれば、その部分のコードを消していけば、必要な物だけを表示させることは出来ます。

例えばYahoomailだと

<li class='sexy-yahoomail'>
   <a class='external' expr:href='"http://compose.mail.yahoo.com/?Subject= " + data:post.title + "&body=Link:"+ data:post.url' rel='nofollow' title='Email this via Yahoo! Mail'/>
   </li>

このように<li>で囲まれた該当部分を消せばいいわけです。

また、冒頭の

<div class='style-01  sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-center '>

この箇所の「style-01」を変えることで、

アイコン上の文字画像を「1」から「6」まで選ぶことが出来ます。

スタイル画像

style-01

style-02

style-03

style-04

style-05

style-06

また、文字画像いらないって場合は、
「style-00」をしていすれば、文字画像なしにすることも出来ます。

このような感じで、スタイルを選んで、あとは保存！

私は、

Google+1ボタンがない→自分で作ろうと思えば作れるみたいだけど、しんどそう・・・特に画像が。
同じように、フッターだとLivedoorクリップとか、日本のサービスも入れたい。
ツイッターの数字表示と、シェアボタンが標準なので「いいねボタン」を付けようと思うと、これだけで完結しない→他のものと組み合わせた時の見た目が合わない。

という理由から、他の方法を取りました。
他の方法
↓

[blogger]忍者おまとめボタン「も」利用して、記事の下にソーシャルボタンを付ける！ - sunabox

取りましたが、表示内容が自分の好みに合えば、見た目はかなりいい方だと思います。
英語だけだしなぁと思っていたら、導入自体はとても簡単なものでしたので、一度検討してみるのはいかがでしょうか？

ではまた！

Pages

2012/05/27