クリックすると、ブログ内からランダムに抽出された記事にジャンプするボタンを作ってみます。
うちではトップページのメッセージボード下に設置しています。
※コードの表示がバグっていたのを修正しました!
まず最初に好きな場所に<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>
ボタンをクリックすると、どこかの記事に飛んじゃいます。
お試しを!