Upside Down: Blogger

ラベル Blogger の投稿を表示しています。すべての投稿を表示

2008/12/03

Bloggerで雪を降らせるWidget 「Snow Effect Widget」

A Simple Snow Effect Widget for Blogger Blogs!
Blogger Busterさんの↑の記事のところに行って･･･

「Add Snow Effect to your Blogger Blog」のボタンを押すだけ！

レイアウトに要素を追加するページに遷移するのでレイアウトに追加してあげましょうｗ

シーズン的に面白いWidgetですｗ　

サンプルはこのブログです！
こんなときに限ってWidgetが多くて表示が遅い･･･orz

2008/09/30

We Love Blogger⇔Blogger Buster？？？

We Love Blogger
以前からいろいろと情報を得てお世話になっているBloggerBusterですが、
なんだか新しいサイトを作成した？ようです。そして、デザインに凝ったブログを
選定して紹介してくれるようです。

ブログのデザインに自信のある方は挑戦してみては？

2008/09/29

BloggerにAdmin Control Panelを表示させる Part2

以前、BloggerにAdmin Control Panelを表示させるで紹介した
コントロールパネルですが、ちょっとカスタマイズしてみました。

「マイレポート」「投稿の編集」を追加しました。
手順は↑の記事に書いてありますが、貼り付けるコードを一部改変
以下のコードを貼り付けてみてください。
＊「BlogIdNumber」はそれぞれのユーザーの番号になります。

<span class='item-control blog-admin'>
<div align='center'>
<h2>Admin Control Panel</h2>
<table border='1'>
<tr>
<td><a href='http://www.blogger.com/home'>My Report</a></td>
<td><a href='http://www.blogger.com/post-create.g?blogID=BlogIdNumber'>New Post</a></td>
<td><a href='http://www.blogger.com/posts.g?blogID=BlogIdNumber'>EditPost</a></td>
<td><a href='http://draft.blogger.com/blog-options-basic.g?blogID=BlogIdNumber'>Settings</a></td>
<td><a href='http://www.blogger.com/rearrange?blogID=BlogIdNumber'>Change Layout</a></td>
<td><a href='http://www.blogger.com/html?blogID=BlogIdNumber'>Edit HTML</a></td>
<td><a href='http://www.blogger.com/moderate-comment.g?blogID=BlogIdNumber'>Moderate Comments</a></td>
<td><a href='http://www.blogger.com/logout.g'>Sign Out</a></td>
</tr>
</table>
</div>
</span>

すると編集画面は下のような表示が出ると思います。
左から、マイレポート、新規投稿、投稿の編集、設定、レイアウト変更、
HTMLの編集、コメントの管理、サインアウトの順番でリンクが表示されます。

自分自身で便利になったと感じたので書いてみましたｗ

ただ、最初にログインするときどうしよう･･･と思ったので、
ガジェットの追加で、Bloggerのロゴを入れてみましたｗ

2008/09/23

BloggerにAdmin Control Panelを表示させる

このUpsideDownのブログもそうなんですが、デフォルトで表示されている
「Navbar」を非表示にしています。
デザイン的に合わなかったので削除しているんですが、

どこからBloggerにログインしていいものか･･･
ログインしていてもカスタマイズ画面に遷移するのに手間がかかったり･･･

ちょっとしたことなんですが、本当にちょっと不便ｗ

そこで、ログインしている状態の時だけ「NavBar」と同様の機能の
コントロールパネルを表示させる方法を紹介したいと思います。

情報元は
How to create an “Admin Control Panel” in your Blogger template

↑の情報元の手順では･･･
最初にそれぞれのユーザーに割り当てられている「BlogIDNumber」を調べます。
情報元の記述ではログイン時にアドレスバーに表示される
番号をメモするようにと書いてありますが･･･これが難しいｗｗｗ

実際は、
ログインしてBloggerを編集しているときなどにアドレスバーに表示されています。

この「BlogID = 」以下の数字があなたの「BlogIDNumber」です。
この数字を控えておいてください。そして･･･マイレポートの
「レイアウト」→「HTMLの編集」(「ウィジットのテンプレートを展開」にチェックを入れる)
そして、次の1行を探します。(この1行って頻繁に出てきますねｗ）

<b:section class='sidebar' id='sidebar' preferred='yes'>

そして、この1行より上に以下のコードを貼り付けます。
さらに、「BlogIdNumber」の部分に先ほど調べた、それぞれのユーザーの
BlogIDNumberを入れます。

<span class='item-control blog-admin'>
<h2>Admin Control Panel</h2>
<a href='http://www.blogger.com/post-create.g?blogID=BlogIdNumber'>New Post</a>
<a href='http://draft.blogger.com/blog-options-basic.g?blogID=BlogIdNumber'>Settings</a>
<a href='http://www.blogger.com/rearrange?blogID=BlogIdNumber'>Change Layout</a>
<a href='http://www.blogger.com/html?blogID=BlogIdNumber'>Edit HTML</a>
<a href='http://www.blogger.com/moderate-comment.g?blogID=BlogIdNumber'>Moderate Comments</a>
<a href='http://www.blogger.com/logout.g'>Sign Out</a>
</span>

＊情報元のコードは間違いがありますので修正しました。

以上で、テンプレートの編集は終了です。テンプレートを保存してください。
ここで、「プレビュー」を行っても何も表示されません。
そのまま、保存してブログを確認してみてください。
すると、右側のサイドバーの一番上に「AdminControlPanel」が表示されて、
そこからそれぞれの編集画面へ移動できると思います。

ただ、この位置に表示されていると右サイドバーのレイアウトが下がってしまうので･･･
編集の際には邪魔になってしまうし、全体のレイアウトを読めないｗ
そして、こういうコントロールパネルは一番上がいい！（じゃあNavbar使えよｗ）

というわけで、もう一度「HTMLの編集」で、次の1行を探します。
<b:section class='header' id='header' showaddelement='no'>
そして、この1行の上に以下のコードを貼り付けます。
＊BlogIdNumberの部分はそれぞれの番号に書き直してください。

<span class='item-control blog-admin'>
<div align="center">
<h2>Admin Control Panel</h2>
<table border="1">
<tr>
<td><a href='http://www.blogger.com/post-create.g?blogID=BlogIdNumber'>New Post</a></td>
<td><a href='http://draft.blogger.com/blog-options-basic.g?blogID=BlogIdNumber'>Settings</a></td>
<td><a href='http://www.blogger.com/rearrange?blogID=BlogIdNumber'>Change Layout</a></td>
<td><a href='http://www.blogger.com/html?blogID=BlogIdNumber'>Edit HTML</a></td>
<td><a href='http://www.blogger.com/moderate-comment.g?blogID=BlogIdNumber'>Moderate Comments</a></td>
<td><a href='http://www.blogger.com/logout.g'>Sign Out</a></td>
</tr>
</table>
</div>
</span>

＊このコードは情報元より見やすいように少し編集しました。

上の画像のように表示されるはずです･･･表示されなかったら教えてくださいｗ

こうすることで、編集作業の際にそれぞれのページへのアクセス性が上がるのでは？

2008/09/22

Bloggerで「Flash Tag Cloud」 vol.2

以前紹介したFlash Tag Cloudですが、コードの修正があったようです。
Alternative installation for Blogumus (fixes the blank widget problem)
空白のタグや長いタグが存在した場合、Flash Tag Cloudが表示されないという
不具合があったようで、その修正がされたようです。

私が把握というか発見したのは「'」の記号が入っていると表示されないようです。
その他の記号も駄目かもしれませんね･･･確認はしていませんが

前回と同様に、次の1行を探します。
<b:section class='sidebar' id='sidebar' preferred='yes'>
↑の1行のすぐ下に以下のコードを追加してテンプレートを保存します。
「sidebar」の部分はユーザーによって違うかと思います。preffered='yes'を目印に！

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>

    <object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >
        <param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" />
        <param name="bgcolor" value="#ffffff" />
        <param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>
      <b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
</tags>" />
        <p>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></p>
    </object>

  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>

以上で、テンプレートへのインストールは完了です。

・サイズ変更は：width="250" height="200"
・背景色の変更は： <param name="bgcolor" value="#ffffff" />
　「#ffffff」の値を変更します
・テキストカラーの変更は："tcolor=0x000000&mode=tags&
　「tcolor=0x000000」の「000000」の値を変更します　
・タグクラウドのスピードの変更は：tspeed=100&tagcloud=<tags>
　「tspeed=100」の「100」の値を変更します
・テキストのフォントサイズの変更は：expr:href='data:label.url' style='12'
　「style='12'」の「12」の値を変更します

Bloggerのカスタマイズ

ちょっとブロガーをカスタマイズしたので、備忘録として
タグクラウドの設定とNavbarの削除方法、サイドバーのラベルのカスタマイズ

・Bloggerでタグクラウド
Setup and configuration for New Blogger Tag Cloud / Label Cloud
　↑を参考にしました。
　
1.「マイレポート」→「レイアウト」→「HTMLの編集」
（ウィジットのテンプレートを展開のチェックボックスにチェックを入れる）

2.]]></b:skin>より前に(CSS部分)以下のコードを貼り付ける

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

3.]]></b:skin>から</head>の間に以下のタグを貼り付ける

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

4.「<b:widget id='Label1' locked='false' title='Labels' type='Label'/>」の
1行を探し出し、<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>から</b:widget>までを以下のコードと差し替える

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>

  <div class='widget-content'>
  <div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
      if(a>b){
          var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
             }
      else{
          var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
          }
      return v
   }

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
     if (!labelCount[ts[t]]){
           labelCount[ts[t]] = new Array(ts[t])
           }
        }
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
    if(ts[t] < cloudMin){
       continue;
       }
    for (var i=0;3 > i;i++) {
             c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
              }
         var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
         li = document.createElement('li');
         li.style.fontSize = fs+'px';
         li.style.lineHeight = '1';
         a = document.createElement('a');
         a.title = ts[t]+' Posts in '+t;
         a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
         a.href = '/search/label/'+encodeURIComponent(t);
         if (lcShowCount){
             span = document.createElement('span');
             span.innerHTML = '('+ts[t]+') ';
             span.className = 'label-count';
             a.appendChild(document.createTextNode(t));
             li.appendChild(a);
             li.appendChild(span);
             }
          else {
             a.appendChild(document.createTextNode(t));
             li.appendChild(a);
             }
         ul.appendChild(li);
         abnk = document.createTextNode(' ');
         ul.appendChild(abnk);
    }
  lc2.appendChild(ul);
</script>

<noscript>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <data:label.name/>
        <b:else/>
          <a expr:href='data:label.url'><data:label.name/></a>
        </b:if>
        (<data:label.count/>)
      </li>
    </b:loop>
    </ul>
</noscript>
    <b:include name='quickedit'/>
  </div>

</b:includable>
</b:widget>
　
5.テンプレートを保存して終了
表示のカスタマイズ方法は「1」のサイトの下段に表示

・Navbarを消す
→以下のCSSをテンプレートの

<head>～</head>

内に記述する。

#navbar #Navbar1 iframe{
height:0px;
display:none;
visibility:hidden;
}

・サイドバーのラベルの高さを変える。
→paddingの値を変える
/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
margin: 1.6em 0.5em;
padding: 2.5px 2.5px;
background-color: $sidebarTitleBgColor;
font-size: 100%;
color: $sidebarTitleTextColor;
}

2008/09/17

以上、なのですが、今回は私のスキル不足により、

スクリーンショットで対応しました。後日修正します。

登録: 投稿 (Atom)

Admin Control Panel

Upside Down

人気の投稿

Counter

My Favorite Blog List

Friends Blogs

Oversea Blogs

2008/12/03

Bloggerで雪を降らせるWidget 「Snow Effect Widget」

2008/09/30

We Love Blogger⇔Blogger Buster？？？

2008/09/29

BloggerにAdmin Control Panelを表示させる Part2

2008/09/23

BloggerにAdmin Control Panelを表示させる

2008/09/22

Bloggerで「Flash Tag Cloud」 vol.2

Bloggerのカスタマイズ

2008/09/17

Bloggerで「Flash Tag Cloud」

最近の記事

My Favorite Websites

ブログアーカイブ

Admin Control Panel

人気の投稿

Counter

My Favorite Blog List

Friends Blogs

Oversea Blogs

2008/12/03

2008/09/30

2008/09/29

2008/09/23

2008/09/22

2008/09/17

最近の記事

My Favorite Websites

ブログ アーカイブ

ブログアーカイブ