A picture window blogger theme with neat-dropdown-menu and google-code-prettify
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


What is this?

This is the theme for my blog.

It is based on the default "Picture Window" template from blogger, with some modification:

  • Added a neat Dropdown menu tabs modified from helplogger.

  • Added google-code-prettify code highlight, and a customized CSS snippet modified from this blog.

  • Added customized CSS(Table, Blockquote) modified from Bootstrap.

  • Added related articles widget from WFU blog.

  • <a> links in posts will be opened at new tabs. TOCs will not be effected. As described in this article.

  • The width, layout, font-size, font-family, and others have also been modified based on my own preference.

Customized Neat-Menu

Customized CSS Neat-Menu is just above ]]></b:skin>, or you can search for: <!-- neatMenu CSS starts -->

To modify items of neat-menu(e.g. add tabs, add dropdown lists), go to Layout, click Neat Menu, then edit HTML.

<div id='contact-links'>
    <div id='menu-container'>
        <nav id='neat-menu'>
            <li><a href='/'>Home</a></li>
            <li><a href='linkToYourPage'>My Page</a></li>
            <li><a>Dropdown lists ▼</a>
                    <li><a href='#'>Item 1</a></li>
                    <li><a href='#'>Item 2</a></li>
                    <li><a href='#'>Item 3</a></li>
            <li><a href='#'>Another Page</a></li>

Customized Google Code Prettify

Customized Google Code Prettify can be located under:

  • <!-- googleCodePrettify CSS starts -->
  • <!-- googleCodePrettify javascript starts -->

Customized Bootstrap-Style CSS

Customized Bootstrap-Style Table can be located under:

  • <!-- bootstrapTable javascript starts -->

It uses the style from bootstrap-table.css in this repository.

Related Articles Widget

CSS: search for /* 相關文章2 */

js: search for <!-- 相關文章2 start -->

Open links in new tabs

    // 將所有在 .post-body.entry-content 文章內的連結都設定為 target = _blank
    $(&quot;.post-body.entry-content a&quot;).attr(&#39;target&#39;, &#39;_blank&#39;);
    // 但是目錄 TOC 的連結不要
    $(&quot;.toc a&quot;).attr(&#39;target&#39;, &#39;&#39;);

Other Modification Notes

.post-body { font-size: 130%; }

.content-outer{ font-size: 90%; }