Audrino

This is a very nice horizontal menu in which its sub-tabs are displayed in two columns and is also made with CSS, without any scripts. The "advantage" so to speak, is that the sub-tabs when arranged in two columns are not very long, so it will be neat and less space along. You can see an example here: Tab 1 Title Here Tab 2 Title Here Tab 3 Title Here Sub Tab 3.1 Sub Tab 3.2 Sub Tab 3.3 Sub Tab 3.4 Sub Tab 3.5 Sub Tab 3.6 Tab 4 Title Here Sub Tab 4.1 Sub Tab 4.2 Sub Tab 4.3 Sub Tab 4.4 Sub Tab 4.5 Sub Tab 4.6 Tab 5 Title Here Sub Tab 5.1 Sub Tab 5.2 Sub Tab 5.3 Sub Tab 5.4 Sub Tab 5.5 Sub Tab 5.6 Sub Tab 5.7 Sub Tab 5.8 Tab 6 Title Here Adding A Horizontal Menu With Sub Tabs in Two Columns To Blogger STEP 1 : In Blogger, go to your " Layout " and on the "Page Elements" section. Click on the " Add a Gadget " link just under your header image From the Gadget's List, select " HTML/JavaScript " option. STEP 2 : Simply copy and paste th...

A very common effect in jQuery is the fade effect that hides or shows an element by fading it, and we can use it in many ways as for example in the blog's navigation. The following script does just that, by loading the page with a fading effect when we browse on internal links that are in the blog, such as post titles, labels links, archive, navigation links, etc.. You can see an example in this demo blog , click on the title of any post and see the fading effect when the page is loading. How To Implement the Fade In Loading Effect 1) To put this fading effect on your blog, go to your Template > Edit HTML : 2) Click anywhere inside the code area and search for the </head> tag using CTRL + F keys: 3) Then, just above </head> add the following code: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { $(...

This is another method of using the :after and :before properties and it will work without too many problems in any browser, including IE8. What this trick will do is to divide the header bar into left and right sections, where the left will contain an explanatory title and the right, a related link. The idea of generating Adobe-like Arrow Headers was actually discussed by css-tricks and adapted to Blogger. How to Add Adobe-like Headers to Blogger Step 1. Log in to your Blogger dashboard > go to Template > Edit HTML, then click anywhere inside the code area to search - using the CTRL + F keys - for the following tag: </head> Step 2. Just above it, copy and paste this code:  <style> .module h2 {   background-color: #D5D5D5;   border-radius: 20px 0 0 20px;   color: #FFFFFF;   font-family: Verdana;   font-size: 14px;   line-height: 32px;   margin: 0;   padding: 0 0 0 20px;   text-shadow: 2px 1px 1px #222; } .modul...