※修正済【新スキン】ランダム記事ボタンを設置する | blog lab 【アメブロカスタマイズとネタ話】

blog lab 【アメブロカスタマイズとネタ話】

コメント欄にプロフィール画像、などのカスタマイズの小ネタと、普段の話のネタを書いていきます。

photo by Arenamontanus


クリックすると、ブログ内からランダムに抽出された記事にジャンプするボタンを作ってみます。
うちではトップページのメッセージボード下に設置しています。

※コードの表示がバグっていたのを修正しました!

まず最初に好きな場所に<div id="rdBtn"></div>と書いておきます。
この中にボタンが現れます。

次に、サイドバーに『テーマ一覧』を設置します。
ここから抽出する仕組みになっています。

次にフリープラグイン。
jQueryを導入していない方は、フリープラグインの最初に

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
< script type="text/javascript" >
(function($){
var JQ16 = $;
JQ16(function(){window.$=window.jQuery=JQ16;});
}(jQuery));
</script>

このように記述しjQueryをインポートしておいてください。

最後にフリープラグインに以下のように書き足します。

< script type="text/javascript" >
(function($){
$(function(){
$('div#rdBtn').html('<button id="rdmArticle">ランダム記事</button>');
$('#rdmArticle').click(function(e){
var articles =0;
var themes = $('.themeMenu ul.skinSubList a');
var themelength = themes.length;
for(var i=0; i<themelength; i++){
articles += parseInt(
(
themes.eq(i).html().split('( ')[1]
).split(' )')[0]
);
}
var jumpNum = ~~(Math.random() * articles);
var jumpPage = ~~((jumpNum + 20) / 20);

$.ajax({
url: "http://ameblo.jp/"+location.pathname.split("/")[1]+"/entrylist-"+jumpPage+".html",
cache: false,
success: function(html){
location.href = $('ul.contentsList li h1 a',html).eq((jumpNum + 20)%20).attr('href');
}
});
});
});
}(jQuery));
</script>


ボタンをクリックすると、どこかの記事に飛んじゃいます。
お試しを!