July 2013 ~ Easy HTML Tricks for Blogging

How to add a gadget/widget inside your Blogger Blog header

Maybe you have seen that many blogs have AdSense Units or other ads and widgets in the header section of the blog, the most popular format being the AdSense 468x60 ad unit - see in the screenshot below:

But how we can add something inside blogger header - be it a Adsense unit, a search bar, social media buttons or a widget? By simply adding a section in the header. First off, to give space for the extra gadget to fit in, our blogger header should be resized.

A. Resize blogger header

Step 1: Go to Blogger Dashboard > Template > Edit HTML and backup your template

Step 2: Click anywhere inside the code area and open the search box by using the CTRL + F keys:

adsense, blogger tricks, blogger widgets

Step 3: Search for this piece of code:

/* Header
----------------------------------------------- */

Note: If you can't find it, search only for the first line:

/* Header

Screenshot:

blogger gadgets, blogger widgets, blogspot tricks

Step 4: Replace it with this code:

/* Header
----------------------------------------------- */
.header-left{
display: inline-block;
height: 35px;
width: 350px;
float: left;
}
.header-right {
display:inline-block;
float:right;
}

Change the pixels in red with the image's height and width of your blogger header and change float: left; to float: right; if you want to change the position of your logo.

Step 5: Find the below code:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Step 6: Replace it with:

<b:section class='header header-left' id='header' maxwidgets='1' showaddelement='no'>

Now "Preview" your template, you will find that the background color of Blogger's header is not visible or it's missing. To bring it back, you need to add some more snippets:

Step 7. Find the following code:

</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>

Step 8. Just above it, paste this:

<div style='clear:both;'/>

Note: if you can't find the code from step 7, search for this instead:

<b:include name='description'/>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>

... and paste the code from step 8 just below it.

B. Add extra gadget/widget section to Blogger Header

Let's go one step forward and add an extra gadget section within Blogger header in new template designers.

Step 9. Just below the code from step 8, paste this codejust before/above it:

<b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'/>

Step 10. Now find:

]]></b:skin>

Step 11. Paste just above it, this CSS code:

.header-right {
display:inline-block;
float:right;
width:400px;
}

Change the width that is marked in red color. Increase or decrease the pixels according to your needs and positioning new header section.

Step 12. Save the Template.

Step 13. Now all you have to do is to go to Layout and Add a Gadget to the newly created extra header section in Blogger.

The widget now should appear side by side.

Date Header Style

I got the inspiration to style and design blogspot date from a wordpress website and tried with very simple css adjustment to make the date header floats left side of webpage and to be partially out of the structure like a banner with colorful appearance. You can see the result in the image below:

How to style the blogspot date header

Step 1. Login into your Blogger Dashboard, go to Design >> Edit HTML
Step 2. Check to Expand Blogger Template and search for the following code:

date.header

Or...

.date-header

You will find something similar:

.date-header span {
background-color: $(date.header.background.color);
color: $(date.header.color);
padding: $(date.header.padding);
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);

Step 3. Add the code below just after it:

background:white;
border-bottom: 1px solid #000000;
font-size:12px;
margin-left:-105px;
padding:3px 3px 3px 3px;
width:90px;
word-wrap:break-word;
float:left;
}

Putting it all together, will look something like this:

.date-header span {
background-color: $(date.header.background.color);
color: $(date.header.color);
padding: $(date.header.padding);
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);
background:#FFD465;
border-bottom: 2px solid #cc0000;
color:#000000;
font-size:12px;
margin-left:-105px;
padding:3px 3px 3px 3px;
width:90px;
word-wrap:break-word;
float:left;}

To modify the style, replace the bolded tags for....

the background color:

#FFD465: replace with the hex code of the color you want

border:

delete -bottom if you want full border
change: 2px to a higher or lower value
change: solid with dotted if you want a dotted line
change: #cc0000 with the hex code of border color

font size and date color:

if you want a bigger text, change: 12px to a higher value
color: replace the hex code (#000000) with the hex of date color

Example:

color: #0000cc;

margin-left:
(the distance between date and blogger post)

change: -105px to a bigger or smaller value, to make it fit with the blogger post

float

change left to right

You can do a lot of changes. Just play with the codes and see what you can get.

How To Customize Your Blog Header with CSS

Customize Your Blog Header with CSS:- Header is the Top Part of Blogger Template,it is the Part which represent Blog Logo,description and title etc.Actually this part bring beauty to your Blog Template,making it awesome and stunning can add 5 star to your Blog Beauty,So time to Customize this Par.Here we have a trick,i.e using CSS we can change its style.When One Hover mouse it will Expand and will bubble up.Let's see How to Do this.

How To Customize Your Blog Header with CSS

Go To Blogger Dashboard
Click On Template
Then Click On Customize
There Click On Advance
and Now Click On Add CSS
There Copy the Below Script and throw it there THen Click On Apply To Blog
That's it!

.header:hover{color: white;border: 1px solid gainsboro;border: 1px solid rgba(0, 0, 0, 0.1);text-transform:uppercase;padding:10px;width:60000px;text-align:center;text-shadow:10px 10px white;font-size:180px;cursor:pointer;-webkit-transition:all 0.8s;-ms-transition:all 0.8s;-moz-transition:all 0.8s;-o-transition:all 0.8s;transition:all 0.8s;height: 100%;background-color: #6188F5;background-repeat: repeat-x;background-position: 8px 0px;background-size: 400px 200px;background-image: -webkit-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);background-image: -moz-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);background-image: -o-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);background-image: linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);-webkit-animation: pb 0.8s linear 0 infinite;-ms-animation: pb 0.8s linear 0 infinite;-o-animation: pb 0.8s linear 0 infinite;-moz-animation: pb 0.8s linear 0 infinite;}@-webkit-keyframes pb { 0% { background-position:8px 0px; } 100% { background-position:120px 0; } }@-ms-keyframes pb { 0% { background-position:10px 0px; } 100% { background-position:-100px 0; } }@-moz-keyframes pb { 0% { background-position:10px 0px; } 100% { background-position:-100px 0; } }@-o-keyframes pb { 0% { background-position:10px 0px; } 100% { background-position:-100px 0; } }
#header {width:1000px;height:120px;background-color: #FFFFFF;
/*First Stitch*/ border: 2px dashed #FF0000; border-radius: 1px;
/*Second Stitch*/ outline: 2px dashed #000000; outline-offset: -8px;
-moz-border-radius 1px; -webkit-border-radius: 10px; -moz-box-shadow: 0 0 0 4px #282247, 2px 1px 4px 4px rgba(10,10,0,.5); -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5); box-shadow: 0 0 0 0px #47403a, 2px 1px 6px 4px rgba(10,10,0,.5);}

Customization:- If you want to change the Color of Border and Expanding Border change the Above mentioned red colors with your Desired Color Code.

Hide/Show Widgets/Gadgets In Home/Post/Static/Archive Pages In Blogger

As some of you may have noticed, all the widgets/gadgets you add to your blog, will be displayed on all the pages by default, including the homepage as well. And I'm sure very few know that AdSense could disable your account in case you've put ad units inside the content of your contact or privacy policy pages. Therefore, hiding certain elements inside your blog pages is not only a matter of design, but it is also a requirement.

To hide (or show) widgets in particular posts, static pages, homepage or archive pages, you can use conditional tags.

Step 1. Go to Blogger's Dashboard > Layout and name the HTML/Javascript gadgets that you have already added. Doing this, it will be easier for you to identify the widgets that you have in your Blogger's template. Give it a unique title so that it does not match with any of the titles of any other widgets already added.

Step 2. Next thing to do is to go to Template and click on Edit HTML

Step 3. Select the "Expand Widget Templates" checkbox.

Step 4. Find the widget's title in the HTML by using Ctrl+F and entering the widget's name in the search box.
Let's say that the title for one of my widgets is "Recent Posts". After searching for the widget's name, I will find a similar code in my template:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

This code represents the widget/gadget that I have added in the Page Elements location (Layout).

Step 5. After you've found your widget's code, add the following conditional tags marked with red just below and above to hide the widget from specific pages or posts in Blogger. For instance, in case you want:

To show the widget only in Homepage:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To show Blogger widget only in post pages

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To show the widget in a specific page

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "URL of the page"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Note: Replace URL of the page with the address of the page in which you want the widget to appear

To hide a widget only in a particular page

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != "URL of the page"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To show widgets only in static pages

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To hide widgets in Static Pages

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To show widgets only in Archive Pages

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Step 6. After you have added the conditional tags, Save Template and view your blog.

That's it!

How To Design A Blog Header

Chose the picture file that you want to edit for your blog header. There are several different edits you can make to the photo and I usually just use the "auto adjust" to get the color/contrast better. In this case, because my file size is larger that I want it, I used Re-Size(at the bottom of the list) first in order to get it the size I want it.

After you have the picture picked out, the first thing you need to do is re-size the image to fit the blog header. There's not really a standard size for the header but I have found through trial and error that the size that seems to work well is 1100 x (350 to 400). In order to resize the photo to this size, I have been using PicMonkey , a free online program to modify pictures.

Within Photoshop for Design Header Image

Within GIMP to Design Header Image

Creating Tab in Blogger

How to create it here some reference provide from youtube

Murach's javascript and jQuery

Murach's javascript and jQuery
Dec. 2012 | 624 pages | English | 1890774707 | PDF | 88.3 Mb

Today, jQuery is used by more than half of the 10,000 most-visited web sites, and jQuery is one of the technologies that every web developer should master. The trouble is that jQuery is difficult to learn, especially for programming novices. Now, this new book makes it easier than ever to learn jQuery, jQuery UI (User Interface), and jQuery Mobile.

In essence, sections 2 and 3 of this book present all of the jQuery and jQuery UI skills that you need for developing professional jQuery applications. With those skills, youвЂ™ll be able to add all of the popular jQuery applications to your web pages: image swaps, image rollovers, collapsible panels, slide shows, accordions, tabs, carousels, and more. Beyond that, though, youвЂ™ll have all the skills that you need for developing unique jQuery applications of your own.

But thatвЂ™s just two of the five sections in the book. Because you need to know javascript in order to use jQuery, section 1 presents the least you need to know about javascript to get the most from jQuery. This is essential for programming novices, but this is also valuable for experienced programmers who may not remember how a specific javascript statement or method works. In short, this section makes this book a complete reference for jQuery programmers.

In contrast, section 4 takes jQuery to a new level by showing you how to use Ajax and JSON to get data from a web server and add it to a web page without reloading the page. It also shows how to use Ajax and JSON with the APIs for popular web sites like Blogger, YouTube, Twitter, Flickr, and Google Maps. These are powerful skills for enhancing a web site.

To complete this package, section 5 presents a complete course in jQuery Mobile, which offers an exciting, new way to develop web sites for mobile devices. Today, the best web sites are available in both full and mobile versions, so this section also shows how to use a javascript plugin to redirect a mobile device from the full version of a web site to its mobile version.

Who this book is for
You can think of jQuery as one of the 4 technologies that every professional web developer should master, along with HTML, CSS, and javascript. So this book is for any web developer today. That includes:

web developers who know HTML and CSS but are new to javascript and jQuery
web developers who have done javascript programming but are new to jQuery
web developers who have used jQuery for special-purpose applications, but donвЂ™t feel comfortable with it
web developers who program in ASP.NET, JSP, or PHP on the server side and now want to master client-side programming
web developers who have already read 3 or 4 jQuery books but still arenвЂ™t sure how to use jQuery in real-world applications

The only prerequisite is a basic familiarity with HTML and CSS. We donвЂ™t expect you to code HTML and CSS, though, so we provide that code for all of the examples and exercises in the book. Then, if you ever want to learn more, please see our book, MurachвЂ™s HTML5 and CSS3.

Table of Contents
Section 1: javascript essentials
Chapter 1. Introduction to web development
Chapter 2. Getting started with javascript
Chapter 3. How to work with objects, functions, and events
Chapter 4. How to test and debug a javascript application
Chapter 5. How to work with arrays
Chapter 6. How to script the DOM with javascript

Section 2: jQuery essentials
Chapter 7. Get off to a fast start with jQuery
Chapter 8. How to use effects and animations
Chapter 9. How to use the DOM manipulation and traversal methods
Chapter 10. How to work with forms and data validation
Chapter 11. How to create and use plugins

Section 3: jQuery UI essentials
Chapter 12. Get off to a fast start with jQuery UI themes and widgets
Chapter 13. How to use jQuery UI interactions and effects

Section 4: Ajax, JSON, and API essentials
Chapter 14. How to use Ajax, JSON, and Blogger
Chapter 15. How to use the APIs for YouTube, Twitter, and Flickr
Chapter 16. How to use the API for Google Maps

Section 5: jQuery Mobile essentials
Chapter 17. Get off to a fast start with jQuery Mobile
Chapter 18. How to enhance a jQuery Mobile web site

Resources
Appendix A. How to set up your computer for this book
Appendix B. A summary of the applications in this book
Appendix C. How to resolve $ conflicts

How to Add Numbered Page Navigation Widget for Blogger / Blogspot

Page navigation is really awesome feature . Page navigation is need for all blogger because it can make navigation easy for your visitors. You can easily navigate page from " newer post " and "older post ".This is a simple way to create horizontal navigation bar at the top of the blogger page or bottom of the blogger page.This is a simple JavaScript which enables your older post , newer post and home link.

How To Add Numbered Page Navigation Widget to Blogger Blog?

I am giving best customizing options to this widget

Note:-Choose colors for your convenience you feel good.

1.Customize Options in Widget Form
2.Click on Generate Button
3.Then finally Click on Add to Blogger Button to add as a Widget