LinkWithinを使って関連記事を表示する

Social_Media_DimSum --Social Media Small Plate Style
記事下に関連記事を表示する方法を紹介します。

photo credit: The Daring Librarian via photopin cc


記事下に関連記事を表示したければ、LinkWithinというものを使います。Bloggerには、以下の方法で追加します。まずは、必要な情報の入力です。





コードが発行されますので、承認します。


トップページに表示したくない場合は、以下のコードを追加します。

<b:widget id='HTML7' locked='false' title='linkwithin' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:content/>
</b:if>
</b:includable>
</b:widget>



タイトルを変更するには、以下のようにします。

<script>
var linkwithin_site_id=あなたのID;
var linkwithin_text='関連記事';
</script>



CSSを追加することで、ある程度の表示をカスタマイズ出来ます。

/*記事のタイトル部分の色や大きさを設定*/
.linkwithin_title_0{
margin-top:-5px!important;
padding:10px 0;
background:#202020;
color:#ffffff!important;
}

/*コンテンツの高さを設定*/
.linkwithin_posts{
height:130px!important;
overflow:hidden;
}

/*全体の幅をいっぱいに表示*/
.linkwithin_inner{
width:100% !important;
}

/*コンテンツのリンク部分に隙間を設定*/
.linkwithin_posts a{
padding: 13px !important;
}



参考 :

Blogger にオススメ記事を表示するLinkWithinを導入して、さらにレイアウトまでもカスタマイズする。 | ふりむけばコウホウ


LinkWithinのちょっとした裏技 【カスタマイズ】 | 某氏の猫空