Bloggerの記事フッターに関連記事を自動生成させるスクリプト…jQuery編 page3

Page 3 of 3 / CSS & HTML 編

使用画像は4個です…

 タイトル画像
 タイトル画像 (2011.02.21 追加しました)
 リストマーク画像
背景画像 (2010.12.01 追加しました)

ダッシュボードの「デザイン」「HTMLの編集」から…

以下を記述します…

CSS です…

/* Related Posts
------------------------------ */
#related-posts {
background: #222222 url(背景画像の URL) repeat;
margin-top: 2em;
border-top: 2px solid #555555;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
border-left: 2px solid #555555;
}
#related-posts h2 {
background: url(タイトル画像の URL) no-repeat;
margin: 5px 0 5px 5px;
padding: 0;
color: #7777FF;
font-weight: bold;
font-style: italic;
font-size: 14px;
}
#related-posts ul {
margin: 0;
padding: 0 5px 5px 20px;
}
#related-posts ul li {
list-style-image: url(リストマーク画像の URL) no-repeat;
font-size: 11px;
font-weight: normal;
font-style:italic;
}
#related-posts ul li a {
color: #99AA99;
}
#related-posts ul li a:hover {
color: #F15B55;
}
#related-posts span {
vertical-align: top;
}

HTML です…

div の id など指定する必要はありません…

ただ…</body> の直前に以下を記述するだけです…

<script src='jQuery の URL' type='text/javascript'/>
<script src='整形済みのスクリプトの URL' type='text/javascript'/>

jQuery を導入済みの方は２列目だけでOKです…

「テンプレートを保存」して完了です…

尚…「$」を使う他の JavaScript Library を入れている方は…

「$」は jQuery に使わせてあげましょう…（￣ー￣）邪笑

• Prev
• 1
• 2
• 3
• Next

Tips Universal Header Sidebar Footer Current-Label : Main