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

, , No Comments
汎用性の高いライブドアの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 コメント :

コメントを投稿

※閲覧記事と無関係なコメントはスパムとみなす場合がございます。
(ㆁωㆁ*)管理人がコメントを承認するまで表示されません(ㆁωㆁ*)

ARCHIVE

top