January 6, 2008

シンプル&クリーンな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.org10秒で入手 可。ここでは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!

9 comments:

template-godown said...

agree with you. now blogger is more flexible, the templates can adopt any theme around the world.

i also use terrafirma and modified it to 3 columns instead of two.

recoding then make me addicted and some of wordpress theme is now also available for blogger platform.

if you have time, kindly visit my blog and gimme some comments. :) thank you.

satomi said...

Cool!

Your link was broken, but I could figure it out. Well done! I found some elements I'm missing here (e.g. tag clouds, visitors), so that's gonna be another weekend job. Thanks for the inspiration!

Yeah, it sure is more addictive than before. I don't even remember how many templates I tried.

KMFIS said...

記事を参考にブックマーク機能を付けました。
ありがとうございます。

KMFIS said...

AddClilpsがBlogger対応になりました。
サイトの種類>ブログ>Blogger
動作(個別記事に対応)は確認済みです。

satomi said...

わ、本当だ!!! このエントリ書いた時は無かったのに(忍者ブログはあるくせに)!

てことはコード探さなくてもブログで「Blogger」選ぶだけで導入できるんですねー、わー便利便利♪ 

情報ありがとうございますー:)

tamrin said...

Hi... i've downloaded template from u'r site ... nice template Sashimi ... ^_^.

satomi said...

Wow, Vista template!

Love4All1080 said...

nice blog - free-style-love.blogspot.com

Bulma said...

thanks for links, please visit us at

http://bigtos.blogspot.com = Best roms NDS GBA

Smile :-)

Post a Comment