Blogger:レイアウト編集(1)二列にガジェットを表示させる

ヘッダーの下に2列のセクションを作る



管理画面→テンプレート→HTMLの編集

Ctrl+F(Chromeの場合)で検索窓をだしてcrosscolで検索します。

      <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
      <b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>

赤字部分を以下と置き換えます。

<b:section class='tabs' id='crosscol-left' maxwidgets='' showaddelement='yes'/>
<b:section id='crosscol-right' showaddelement='yes'/>
<div style='clear: both;'/>

こんな風になります。


次に </b:skin> で検索。

その上行に

#crosscol-left {width:40%;display:inline-block;_float:left;}
#crosscol-right {width:40%;display:inline-block;float:right;padding: 15px}
#crosscol-right .widget {margin:0;}

をコピペ。

</b:template-skin> で検索。

 ]]>の上行に次をコピペ。

#layout #crosscol-left {width: 50%; float: left;}
#layout #crosscol-right {width: 50%; float: right;}


「テンプレートを保存」ボタンをクリック。

レイアウト画面に移動してブラウザでリロードします。

参考にしたサイト


Crosscol Plus Split Crosscol for Blogger Blogs | Eblogger Tricks.com
ヘッダーの下に2列のセクションを作る

次の関連記事:Blogger:レイアウト編集(2)トップページだけに表示されるガジェット

PR

0 件のコメント:

コメントを投稿