シンプル＆クリーンなBloggerテンプレート集と導入手順：Simple and Clean Blogger Templates

I've just changed my template. There are very simple and clean XML based Blogger templates out there, and changing the look and feel of your blog can be done effortlessly. Make sure you download the current design for backup, before uploading the new template.

If you just need a quick tweak to your current design, upload your favorite image to your header; Layout > Page Element > Header. Make sure to resize image so that it fits in the body width.

Where to Find Cool Templates

Searched by 'Blogger Template,' you may land on the followings;

new! Delux Templates
Blogger Templates
Blogger-Templates
BlogCrowds
BlogspotTemplates
Final Sense
Mashable's best 50
FreshBloggerTemplates
Mashsable's best 70 -2008.05.
BloggerTricks
Blogger Buster


I picked Web 2.0 focused 'Mr. Techie and deleted the header image and downsized the right column width by 70px to keep 500px for entry body. I was a bit uneasy with its max width of 950px, but nowadays it seems 1024px is the new 800px for Web Design.

To add favicon, I generated mine here (make sure you sign-up before editing) and uploaded the ICO file to Google Pages and right-clicked it to get its URL and added the code that looks like these two lines right before /head tag.

UPDATE-Aug 30, 2008: I changed the template and added AdSense custom search code to the menu [div id='menu'] field.; Layout > Page Elements > Add Gadget > AdSense custom search.

UPDATE-Oct 11, 2008: I changed the template to Connexion. You can change the top image with your own. Here's how;

(1)Right-click the photo and see the property to figure out its size (in this case, 1000 x 238).
(2)Resize your photo to the same size as (1) and saved it to your web album (mine is photobucke Flickr. This is what happens if you don't transfer all the image files to your host).
(3)Open the photo in original size of 1000 x 238, and right-click to copy the image URL.
(4)Find the following part, and overwrite the image URL.

/* The Top */
.top {background:url(http://photoURL---------);

Get code for "AddThis" bookmarking button: Visit iMessengr and click on 'get this code' and Select All to save it. Open your Dashboard > Edit Layout > Edit HTML > Expand HTML > Copy the code right under 'div class='post-body entry-content' and save.

Drop Down link list: Visit here to get your code. Open Dashboard > Add and Arrange Page Elements > Add the code as 'HTML/Java' element.

Snap Page Preview: Visit here to get your code. Save it right below the dropdown link list.




ブログのデザインを変えてみた。

「クールなテンプレはどこで？」


new! Delux Templates
Blogger Templates
Blogger-Templates
BlogCrowds
BlogspotTemplates
Final Sense
Mashable's best 50
FreshBloggerTemplates
Mashsable's best 70 -2008.05.
BloggerTricks
Blogger Buster

ここで最初使ったのは、無料CSSテンプレートをBlogger用に変換した「Mr. Techie」というデザイン。

新テンプレート導入手順

1. スクリーンショット下のDOWNLOADボタンでファイルを保存
2. Bloggerダッシュボード > Edit Layout > Edit HTML > 一番上「Download Full Template」で今のテンプレートを保存（重要）
3. すぐ下の空欄脇の参照ボタンで(1)で保存したXMLファイルを選んでUploadクリック
4. 編集画面下「Preview」クリックで「なんか違うな～」と思ったら左の「Clear Edit」でチャラに。他のテンプレを探し(1)(3)の手順を繰り返します（これが楽しいのよね）。後悔したら(2)で保存した前のデザインを(3)のようにアップロードするといつでも戻れるので大丈夫。
5. 納得したら右の「Save Template」を押します。

因みにここのテンプレでは「メニューバー変更」が必須。これは下から10分の1ぐらいんとこ（div id='header-wrapper'（なんたらかんたら）div id='menu'　の下、ul li でどうぞ。目がチラチラする人はheader-wrapperとブラウザ検索窓入れてハイライトするとはやい。

It's fun to browse through cool designs.デザインってデモ見るだけで楽しい！

覚えとくと便利なコツ

「本文の幅を広げたい」
これは上から3分の1ぐらいの　*Outer-Wrapperの下にある「main-wrapper width: 440px;」の数字を500pxとかに増やし、その下の下「#sidebar-wrapper2　width: 160px;」の数字をその分減らします。引き算間違えないで。

「過去アーカイブとアドセンス諸々を入れたい」
Edit Layout >　Page Elements > Add a Gadgetで好きなガジェットは追加、嫌いなガジェットは削除。

「ブックマークのそのボタンはどこで？」
これはAddThis.com。ここで拾うのが手っ取り早い。好きなボタンの下で「get this code」で出てくるコードをSelect Allで全文保存したら、あとはEdit Layout > Edit HTML > Expand HTML > 編集画面で「div class='post-body entry-content」のすぐ下にコピー＆保存するだけ。（追：日本のブックマークボタンはAddClips.orgで10秒で入手 可。ここではdivclass='post-footerとp class='post-footer-line post-footer-line-1と2行並んでる上に置きました）

「うちもリンクが増える一方です！ドロップダウンのコードはどこで？」
自動生成マシンでリンク名とURL入れて「generate」クリック。私は横幅ないから「no button」選んで「text on button」は「LINK」に。文字化けしないのでオススメ。10個で足りない人は生成したコード見て、option valueから丸ごとコピーしてURLと名前入れ替えて増やしてみて。コードはEdit layout & Page Elements で「Java/HTML」として追加します。

「リンクをマウスオーバすると画面が見えるソレはどこで？」
Snapのプレビュー機能です。導入方法はこちら。上記ドロップダウン用コードの下とかに保存。

「ファビコン入れたい！」
私はココで作って（作成前に要登録。じゃないとせっかく作っても全部消えるので）、Google Pagesにアップロードし、ファイル名右クリックで拾ったURLでこんな2行コード作って、/headの前に保存しました。

UPDATE-2008年8月： また変更。ナビバーdiv id='menu'　のところにアドセンスのカスタム検索のコードをボタン抜きで入れてみた。花の巨大な画像は外したけど、このdiv位置には好きな写真や広告入れて楽しみたい。

UPDATE-2008年10月：　Connexionに変更。トップの写真はNYなので差し替えた。手順はこう。；
（1）NYの写真を右クリックでプロパティ開いて縦横サイズを確認（この場合は1000 x 238）。

（2）好きな写真を（1）と同じにリサイズ、オンラインアルバムに保存（私はflickrphotobucket。画像は全部自分のホストにコピーすること！　じゃないとこうなっちゃうので…）。

（3）写真を1000 x 238のオリジナルサイズで開いて右クリックで「画像のURLをコピー」を押す。

（4）以下のパートを探して、画像URLに（3）を貼り付けて上書きします。
/* The Top */
.top {height:238px;
margin-top:0px;
background:url(http://photoURL---------/);

クールな横長の写真・イラストをヘッダに埋めるとガラリと印象が変わるので、試してみて。画像にブログ名入ってるんならブログタイトルは削除してもいい。このやり方はスクリーンキャスト（英語）をご参考に。

-enjoy!