Audrino

The tabviews are elements that allow us to group in a single container various gadgets and these can be selected via tabs. Its main function is to save space on the blog to avoid scattered gadgets in the same category so you can group multiple gadgets into one. There are several methods for creating tabviews, some require jQuery, other MooTools, or any other script. To add this widget to your blog, just follow the steps below: Step 1. From your Blogger Dashboard , go to Template and click on the Edit HTML button Step 2. Expand the style of the template, by clicking on the sideways arrow before <b:skin> ... </b:skin> Step 3. Search using CTRL + F for the following tag: ]]></b:skin> Step 4. Just above it, add the following code: /* Tabview for Blogger ----------------------------------------------- */ .tabviewcont{ margin:15px 0; padding:0; clear:both; } .tabviewnav { margin: 0 0 0 14px; padding:3px 0; /* If you are using a Blogger Template change 0 with 15px */...

The Expandable Recent Comments widget for Blogger is a very accessible widget that can be collapsed or expanded through user interaction, so we don't have to click the author's name or post title link in order to read the content of a comment. The expanding content can be shown or hidden by clicking the plus/minus icon or by hitting the "Show all" or "Hide all" button. To add the Expandable Recent Comments widget for Blogger, please follow the next steps below: Adding Expandable Recent Comments Widget to Blogger 1. From your Blogger dashboard , go to "Layout", then click on "Add a Gadget" link: 2. When the pop-up window appears, scroll down and select the "HTML/JavaScript" widget: 3. Copy and paste this code inside the empty box: <style type="text/css">.row-div {margin-bottom:10px;}.comment-header {margin:10px 0;}.comment-box{margin:0px;padding:0px;font-size:0.9em;height:330px;overflow:auto;}.comments1{padding:3...

This drop down menu made with CSS only is a horizontal menu with sub-tabs and a rounded search bar on the right side. A menu like this can be handy for users who don't need complex menus or prefer not to use one that requires scripts and/or too many images. Also, the installation and customization is quite easy and, to top it off, it is quite functional. To see this CSS drop down menu in action, please visit this demo blog Before changing anything, if you are using a template available in Blogger Template Designer, then you should consider doing these changes in the template, otherwise the menu might not be displayed correctly: From the Blogger Dashboard , go to Template and press the "Edit HTML" button: Search using CTRL + F for the following line: <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'> Screenshot Remove the code in red. You may have many parts as the one in red, delete all you find. ....then find...

The Blogger template editor now includes a number of changes that seem interesting and make it much more friendly than it was. To begin with, what we see now is all the template's code starting with numbered and colored lines showing us different code snippets: tags, variables, properties, etc.. depending on the HTML, CSS, JavaScript and even the language of Blogger - include , b:if and other occurrences. This is what any decent external editor does, but certainly, from now on it will be much easier to find that little bug that drives us crazy when we omit quotation marks or add one more semicolon. This also applies to CSS, which appears mostly in dark blue without distinguishing selectors and rules, but the rest is a major improvement. Another great help are the numbers that appear in front of each fragment of code, so that we can easily pinpoint and correct errors of this type: "Error parsing XML, line 103, column 9: The element ... " Using the New Blogger Template ...

Sometimes we want to have everything organized, so that our readers can find topics of interest more easily. To accomplish this, instead of putting a widget with the latest posts, we can put together the latest entries sorted by category, so that we'll be able to show the latest posts for each label we want and also display a thumbnail for our category. To add this recent posts widget for labels or categories in a Blogger blog, follow the next steps: Recent Posts with Thumbnails Sorted by Labels Step 1. From your Blogger Dashboard , go to 'Template' and click the 'Edit HTML' button Step 2. Click anywhere inside the code area and search (CTRL + F) for this piece of code: ]]></b:skin> Just above ]]></b:skin> , paste this CSS style: /* Recent posts by labels --------------------------------- */ img.label_thumb{ float:left; margin-right:10px !important; height:65px; /* Thumbnail height */ width:65px; /* Thumbnail width */ border: 1px solid #fff; -webk...