TeLog Anime+Game

アフィカスなのにアドブロを推奨するブログ!
深夜アニメのおもしろ記事・
家ゲー・ネトゲ・スマホゲームの攻略系情報ブログ・知的好奇心をくすぐる記事とか!

TELOG. Powered by Blogger.

RSSフレーム内に自分の広告を取り入れる 【HTML/CSS/Javascript】

汎用性の高いライブドアのRSS機能。そのフレーム(枠)に自分の広告を挿入する簡単なコードをご紹介します。この記事は自分専用のメモ書きとなんら変わりません。久々のコード記事ですが、もしRSSフレーム(枠)内に自分の広告を挿入したくてこの記事に辿り着いた方は参考にしてってどうぞ。
表示させたい位置に以下のコードをコピーして貼り付けて下さい。
<div class="rss-blogroll"><!--blog roll-->

<!-- 相互RSSのコード ひとつ目-->
<script type="text/javascript">
<!--
     var blogroll_channel_id = 表示させたい自分の5桁のRSSコード;
// -->
</script>
<script charset="utf-8" src="http://blogroll.livedoor.net/js/blogroll.js" type="text/javascript"></script>
<!-- 相互RSSのコード ひとつ目-->

<!-- 相互RSSのコード ふたつ目-->
<script type="text/javascript">
<!--
     var blogroll_channel_id = 表示させたい自分の5桁のRSSコード;
// -->
</script>
<script charset="utf-8" src="http://blogroll.livedoor.net/js/blogroll.js" type="text/javascript"></script>
<!-- 相互RSSのコード ふたつ目-->

<!--
RSSの数をひとつだけにしたい場合はチャンネル単位の設定からひとつのRSSの縦横サイズ指定を倍の数値に書き換えてください
-->

<div class="googlead"><!--RSS内に広告-->
自分の広告コードを貼り付けてください
</div><!--RSS内に広告-->

</div><!--blog roll-->

<style type="text/css">
/* BlogRoll
----------------------------------------------- */
/*全体の設定*/
.rss-blogroll:after{
display: block;     
visibility: hidden;
clear:both;
height: 0;
content: ".";
}

.rss-blogroll{
 margin: 10px 0;
 padding: 3px 0;
 border: 2px solid #b0b0b0; /*フレーム(枠)の色*/
 zoom: 100%;
 width: 925px; /*フレームの横サイズを指定*/
 height: 260px; /*フレームの縦サイズを指定*/
}

/*チャンネル単位の設定*/
.rss-blogroll .blogroll-channel{
 float: left; /*左につめる*/
 overflow: auto;
 margin-bottom: 0;
 margin-left: 5px;
 padding: 0;
 width: 300px !important; /*ひとつのRSSの横サイズを指定*/
 height: 260px !important; /*ひとつのRSSの縦サイズを指定*/
 font-size: 12px;
}

/*リストの設定*/
.rss-blogroll .blogroll-channel .blogroll-list {
 padding: 3px 0;
 padding-top: 0;
 border-bottom: 1px dashed #c2c2c2;
 list-style-type: none;
 font-size: 14px;
 line-height: 1.2;
}

/*テキスト部分の設定*/
.rss-blogroll .blogroll-channel .blogroll-list a{
 padding-left: 5px;
 text-decoration: none;
}

.rss-blogroll .blogroll-channel .blogroll-list a:hover{
 text-decoration: underline;
}

/*NEWの文字の設定*/
.rss-blogroll .blogroll-new-entry{
 color: #ff0a00; /*NEWのフォントカラーコードを指定*/
 font-weight: bold;
 font-size: 11px;
}
/* BlogRoll

/* googlead */
.googlead {
        float:right; /*右につめる*/
        padding:5px 5px 5px 5px;
}
/* googlead */
</style>
久々の【HTML/CSS/Javascript】記事を書きましたが、コード把握するのに時間がかかってダメですね…。ライブドアのRSSコードをちょちょいと変えて自分のコード付け加えただけの仕組みになってます。使いたい方はコピペってどうぞ(๑´•.̫ • `๑)
0 件のコメント:
コメントを投稿



※コメント反映までに時間がかかる場合があります。

アフィブログですがアドブロ推奨してます!
アドブロ推奨してる管理人のTwitter→ @TELOG_EUZEU

ARCHIVE

記事に行く

もっとみてあげる