Hero Apps

How to Create Tab View Menu in Blogger

It's been a long time I did not write about the tutorial blog, a
few weeks I always write about the news and wonders of
nature. OK, it's time we tried to return to the tutorial blog,
and which we will discuss today is how to create a tab view
menu on the blog.
Tab view menu, very efficient, because it contains many
titles in one place. In addition to saving space, tab view
menu also looked very good. Creating tab view menu
requires a lot of HTML code, so my advice, you should
backup the template before you make the tab view menu.
To make it, please follow the steps below:
1. Login to blogger with your ID.
2. Click Layout.
3. Click Edit HTML.
4. Then look for the code ]]></b:skin>
5. Put the following code before the code ]]></b:skin>
div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Width Main Menu Top */
text-align: center;
height: 30px; /* High Main Menu Top */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Top Menu border color
*/
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Main Menu Top Fonts
*/
font-weight: bold;
color: #000; /* Main Menu Top Font Colors */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px}
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs
a.Active
{
background-color: #E6E6E6; /* Background colors on
Main Menu */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Main Box border color */
overflow: hidden;
background-color: #E6E6E6; /* Main Box background
color */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
6. Then place the following JavaScript code above the code </head>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i
+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height =
(Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId,
id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId,
1); }
//]]>
</script>
7. Save Template.
8. To make the tab view menu, please return to the Layout.
9. Select a Page Elements .
10. Click Add Gadget .
11. Select the HTML / Javascript, then enter the following code :
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 300px; height:
250px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
12. Then Save.

Sent from @jimohib....Follow on twitter.

Go to link download

How To View Recent Web Pages Offline INTERESTING

View Recent Web Pages Offline
You might have suffered many times when you were without Internet, yet you still need to see a webpage that you were looking at just moments earlier. It’s frustrating, but if you’re running Chrome or Firefox then getting to a recently viewed webpage while offline is easy. Both browsers have the ability to display content in their respective caches—temporarily saved web page data—instead of the live version of the site. This can be imperfect since the page can change while you’re offline, rendering the saved version inaccurate, and the browser cache only contains a limited amount of your recent browsing history. It also doesn’t work on sites that provide live feeds of content, such as Facebook or Netflix. Nevertheless, if you need information from a news item or another site you were just viewing, try one of these solutions. Browsers like Google Chrome & Firefox save a cached copy of your recent browsed web pages, and so we will be using this feature to view the recently closed web pages without internet connection.
How to view recent web pages offline in Google Chrome?

Chrome’s method to display stale (not live) web pages is currently experimental. By default Chrome can show some webpages when offline, but with this setting enabled the feature is far more robust.

1. To get ready for offline mode in Chrome type ” chrome://flags/#show-saved-copy " (Without Quotes) in the URL address bar. Then select Enable: Primary from the dropdown menu under the Enable Show Saved Copy Button heading.
2. Once that’s done, restart your browser for the feature to take effect.
3. To test viewing a cached page, take your PC offline and open a webpage from your recent browsing history. You should see Chrome’s typical offline error message—except now you’ll also see a Show saved copy button as pictured above. Click that button and you’ll see the version of the webpage as it was when you were last online.

In my tests, Chrome’s cache would only show you saved copies of sites going back about a half an hour. However, that was during my work day, when I view an enormous amount of web content. Your experience may vary.
How to view recent web pages offline in Mozilla Firefox?
There’s no special flag to set in Firefox in order to view content offline.

1. To view pages from your cache click on the menu “hamburger” icon in the upper right corner.
2. Then select Developer > Work Offline. Now Firefox will display the page you want as long as it’s in the browser’s cache.

That’s all there is to viewing cached webpages offline. It’s not a perfect solution, but still this may help us in most situations.

Go to link download