醫訊站 - 24小時及通宵診所 (中西醫 牙醫 脊醫 獸醫) 資訊平台
  • 首頁
  • 最新消息
  • 網站地圖
  • Web Design Tips
  • 醫管局
  • 衛生署
  • 最新消息
  • 西醫
    • 按「通宵」搜索
    • 按「假期」搜索 >
      • 私家醫生 >
        • 屯門
        • 元朗
        • 荃灣
        • 沙田
        • 西貢
        • 中西區
        • 大埔
        • 北區
        • 葵青
        • 離島
        • 東區
        • 南區
        • 灣仔
        • 九龍城
        • 觀塘
        • 深水埗
        • 油尖旺
        • 黃大仙
      • 醫訊通
    • 按「區域」搜索 >
      • 屯門
      • 元朗
      • 荃灣
      • 大埔
      • 沙田
      • 西貢
      • 北區
      • 葵青
      • 離島
      • 黃大仙
      • 油尖旺
      • 深水埗
      • 觀塘
      • 九龍城
      • 灣仔
      • 南區
      • 東區
      • 中西區
    • 按「專科」搜索
    • 按「性別」搜索
    • 按「醫院」搜索
  • 中醫
    • 按「區域」搜索
    • 按「專科」搜索
    • 按「性別」搜索
  • 牙醫
    • 按「通宵」搜索
    • 按「假期」搜索
    • 公眾假期牙醫
    • 按「區域」搜索 >
      • 沙田
      • 大埔
      • 荃灣
      • 屯門
      • 元朗
      • 黃大仙
    • 按「性別」搜索
    • 免費牙科診所
  • 外地醫療
    • 按「通宵」搜索
    • 中醫
    • 西醫
    • 牙醫
    • 獸醫
  • Pharmacy
  • Mannings
  • Watsons
  • 聘請外傭
    • 入境處規例
    • 勞工處規例 (權利 + 責任)
    • 外傭最新消息
  • Regulators
    • The Medical Council of Hong Kong
    • Chinese Medicine Council of Hong Kong
    • The Dental Council of Hong Kong
    • Veterinary Surgeons Board of Hong Kong
  • 租務
    • 免費慈善項目 >
      • 香港運動教學會 >
        • 動樂天地專欄 (蘋果)
      • 善本書
      • 關愛互聯
      • 自然協會
    • 本站捐贈項目 >
      • 重返校園計劃 (五餅二魚)
      • 助養兒童計劃 (世界宣明會)
      • 支援汶川地震 (港府基金)
      • 支援弱勢兒童 (台灣公益)
      • 中國教育助學 (苗圃行動)
      • 支援貓BB奶粉 (獨立義工Olausen Lisa)
      • 預防盲疾計劃 (奧比斯)
    • 合作伙伴
    • 贊助支持本站
  • 專題
    • 疫苗接種計劃 >
      • 兒童 (補種十三 13價) >
        • 參與醫生名單
  • Knowledge Base
    • Columns >
      • 醫管局 On-Line
      • 浸大中醫藥
      • 精神點擊
  • 獸醫
  • 寵物
  • 牙醫網
  • 活動
  • 專欄
  • 隨筆
  • 聯絡我們
  • 中醫網
  • 脊醫網
  • 家計會
  • 醫療百科
  • 醫護名人堂
  • 叻叻寵物逸事
  • 市場資訊
  • First Aid
  • 首頁
  • 最新消息
  • 網站地圖
  • Web Design Tips
  • 醫管局
  • 衛生署
  • 最新消息
  • 西醫
    • 按「通宵」搜索
    • 按「假期」搜索 >
      • 私家醫生 >
        • 屯門
        • 元朗
        • 荃灣
        • 沙田
        • 西貢
        • 中西區
        • 大埔
        • 北區
        • 葵青
        • 離島
        • 東區
        • 南區
        • 灣仔
        • 九龍城
        • 觀塘
        • 深水埗
        • 油尖旺
        • 黃大仙
      • 醫訊通
    • 按「區域」搜索 >
      • 屯門
      • 元朗
      • 荃灣
      • 大埔
      • 沙田
      • 西貢
      • 北區
      • 葵青
      • 離島
      • 黃大仙
      • 油尖旺
      • 深水埗
      • 觀塘
      • 九龍城
      • 灣仔
      • 南區
      • 東區
      • 中西區
    • 按「專科」搜索
    • 按「性別」搜索
    • 按「醫院」搜索
  • 中醫
    • 按「區域」搜索
    • 按「專科」搜索
    • 按「性別」搜索
  • 牙醫
    • 按「通宵」搜索
    • 按「假期」搜索
    • 公眾假期牙醫
    • 按「區域」搜索 >
      • 沙田
      • 大埔
      • 荃灣
      • 屯門
      • 元朗
      • 黃大仙
    • 按「性別」搜索
    • 免費牙科診所
  • 外地醫療
    • 按「通宵」搜索
    • 中醫
    • 西醫
    • 牙醫
    • 獸醫
  • Pharmacy
  • Mannings
  • Watsons
  • 聘請外傭
    • 入境處規例
    • 勞工處規例 (權利 + 責任)
    • 外傭最新消息
  • Regulators
    • The Medical Council of Hong Kong
    • Chinese Medicine Council of Hong Kong
    • The Dental Council of Hong Kong
    • Veterinary Surgeons Board of Hong Kong
  • 租務
    • 免費慈善項目 >
      • 香港運動教學會 >
        • 動樂天地專欄 (蘋果)
      • 善本書
      • 關愛互聯
      • 自然協會
    • 本站捐贈項目 >
      • 重返校園計劃 (五餅二魚)
      • 助養兒童計劃 (世界宣明會)
      • 支援汶川地震 (港府基金)
      • 支援弱勢兒童 (台灣公益)
      • 中國教育助學 (苗圃行動)
      • 支援貓BB奶粉 (獨立義工Olausen Lisa)
      • 預防盲疾計劃 (奧比斯)
    • 合作伙伴
    • 贊助支持本站
  • 專題
    • 疫苗接種計劃 >
      • 兒童 (補種十三 13價) >
        • 參與醫生名單
  • Knowledge Base
    • Columns >
      • 醫管局 On-Line
      • 浸大中醫藥
      • 精神點擊
  • 獸醫
  • 寵物
  • 牙醫網
  • 活動
  • 專欄
  • 隨筆
  • 聯絡我們
  • 中醫網
  • 脊醫網
  • 家計會
  • 醫療百科
  • 醫護名人堂
  • 叻叻寵物逸事
  • 市場資訊
  • First Aid




Weebly Top Bar: The Hidden Potential

14/2/2013

0 評論

 
If I were to suggest one single most important article that every Weebly user must read, then this is it. The Top Bar area gets the maximum amount of attention from your visitors. This is also the area that brings in maximum click through revenue for your Advertisements. Check the Google Heat Map for more information on Ad Placement. Whether for advertisements or for “Call To Action” items, this is the prime area to gather your visitor’s attention. In this article, we will use the SiteShowCase Blog to illustrate how you can add a Persistent Top Bar to Weebly Blog (or) Weebly Pages (or) Both as a drag & drop area.



We will also show you how to restrict the Top Bar to a selected set of pages only. If you have seen our article about creating Flexible Footer, this goes along similar lines. If you are using a theme without a banner, this will actually work as a Drag & Drop Header. Since it expands dynamically depending on the content added, your banner height can be precise to the page need.Before going into the details, notice the following aspects of the top bar of SiteShowCase.Weebly.com/blog :

  1. The Top Bar has its own background and stands out from the rest of the content.
  2. There are multiple elements: Picture, Text, Social Icons.
  3. The Top Bar stays the same for Blog Pages and Blog posts. Click on a Blog post title and the top bar remains as is.
  4. Top Bar does not appear for other regular pages.
This can be achieved in three parts:

1) Defining the style in CSS

2) Including the element in the page layout (index.html, or landing.html, tall-header.html, short-header.html or no-header.html)

3) Dragging & Dropping the Elements into the new top bar content area.

  • Upload the background image via “Edit HTML/CSS -> Add New Files“. We named this file topbar-bg.jpg
  • In main-style.css we add the following style code.
#topbar{ background: url(topbar-bg.jpg); }

#topbar p{ color: red; font-size: 21px; font-family: "Georgia"; font-style: italic; }

Here we are telling the topbar to use the background image “topbar-bg.jpg” and repeat it horizontally and vertically (which is the default when “repeat” is not explicitly stated)

The “topbar p” is where we define how a paragraph within the Top Bar area should look like. Of course, you could always override it by changing the colour of paragraph element. However, if you want precise control over font-size, you better define it here. The size adjustment from paragraph element could be too big or too small.

This is really simple. All you need to do is to add the following line to the page lay out html file just above the div that has {content}

<div id="topbar">{topbar:content global="false"}</div>

The global=”false” is the part that states if the elements that we drag and drop into the top bar area be persistent or not. In case of SiteShowCase.weebly.com, we wanted the top bar to appear only for the blog but not for the rest of the pages. So we chose global=”false”. However, if you want the same top bar content to be persistent across each and every page, simply remove the global=”false” from the above line.

And now you are ready for the cool part, dragging & dropping !!

Note that you do not need to add it to all page layouts. You can add to the ones you like to use.

Go to the Weebly website editor and select your blog page. All you need to do is drag what ever elements you need into this area. In our case, we used the multiple columns elements to create a layout and then used pictures, paragraphs.

Top bar layout for Site Show Case Blog


For the social icons, we just used another multiple columns elements and placed images with links to our facebook page etc. If you would like to add country flags to take your visitors to a language page corresponding to it, you may drop a gallery element at the top of the top bar which makes it intuitive for your visitors.

Note that the top bar itself is available in all the pages but the content in the top bar will stay with just the page it is used in because we used global=”false”. Even though the bar may be slightly visible in the editor window for other pages, its height would be set to zero there upon publishing.

For a little advanced users, following is something you can do for multiple top bars (if you are new, you can skip the rest of the article for now):

What if you want one kind of top bar for Blog but a different persistent top bar for regular pages ? You will need to create a new page type to be used for your regular pages because your blog pages are going to use index.html as its base. You can not change the blog base. However, you have the choice of selecting any page type for your regular pages. So, create a new page type, say non-blog-top-bar.html, and copy all the content from index.html into the new page created. As usual, define a new style for new top bar in main-style.css. Then update your non-blog-top-bar page to include this second top bar without global=”false”. Now, apply the new page type for your regular pages. This will get you one kind of top bar for Blog pages and a different one for your regular pages.

http://weeblyforums.com/2012/04/weebly-top-bar-the-hidden-potential/

0 評論



發表回覆。





    Archives

    一月 2022
    八月 2020
    五月 2020
    四月 2020
    三月 2020
    十二月 2014
    十月 2014
    九月 2014
    八月 2014
    七月 2014
    六月 2014
    五月 2014
    四月 2014
    三月 2014
    一月 2014
    十二月 2013
    九月 2013
    八月 2013
    七月 2013
    六月 2013
    五月 2013
    四月 2013
    三月 2013
    二月 2013
    十二月 2012

提供者 使用自訂式範本建立您的專屬獨特網站。