Your Xbox 360 credit card details Vulnerable to Hack | The Hacker News (THN)
Many businesses create a website to just follow the fashion as every one has these days and for many it might be an integral component of marketing strategy. The ones who are having websites for the purpose of marketing strategy, have to make sure that they go for redesigning their website, this time with the div tags. If we put the usage of div tags in simple words, it can be said that creation of a website that has no tables. It make use of style sheets or Cascading Style Sheets as they permit the website to be independent of the data entirely. Various things that can be included in these style sheets include layout, design, positioning, fonts, colors and backgrounds. As all these are included in the style sheets, the only information present on the pages include the div tags code and the information related to the website.
<p style="background-color:green;text-align:justify;font:16pt;courier;color:blue";> <img style="float: left;margin: 0 0 5px 5px;border: 1px solid #666;pading:3px;" alt="" src="http://ezinearticles.com/members/mem_pics/Neeraj-Arora_212312.jpg" height="100" width="100" />Many businesses create a website to just follow the fashion as every one has these days and for many it might be an integral component of marketing strategy. The ones who are having websites for the purpose of marketing strategy, have to make sure that they go for redesigning their website, this time with the div tags. If we put the usage of div tags in simple words, it can be said that creation of a website that has no tables. It make use of style sheets or Cascading Style Sheets as they permit the website to be independent of the data entirely. Various things that can be included in these style sheets include layout, design, positioning, fonts, colors and backgrounds. As all these are included in the style sheets, the only information present on the pages include the div tags code and the information related to the website.
To add a border to the image, use "border: 1px solid #666;". Again, Netscape 4 does not like this rule, so it should be hidden from the browser using "@import".
CSS CODE
.floatright
{
float: right;
margin: 0 0 10px 10px;
border: 1px solid #666;
padding: 2px; }
HTML CODE
<p>
<img class="floatright" src="images/image.gif" alt="" width="100" height="100">Lorem ipsum dolor sit amet, consectetuer...
</p>
Margins can be added to push the content away from the left and bottom sides of the image.
Netscape 4 badly misinterprets margins. To hide margins from this browser, but allow them to be applied by standards compliant browsers, place the margin rules in a separate style sheet and use "@import" to link the style sheet to your html page.
We are using a shorthand rule here: "margin: 0 0 10px 10px;". Keep in mind that shorthand values are applied in a clockwise order; top, right, bottom, left.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
CSS CODE
.floatright
{
float: right;
margin: 0 0 10px 10px;
}
HTML CODE
Lorem ipsum dolor sit amet, consectetuer...
To force the image over to the right edge, "float: right" is applied to the image using a class selector. In this case, the name of the class is ".floatright" to help illustrate the point, but any name can be used. However, it is better to name classes based on their meaning, rather than their appearance.
No width is needed in this instance as the image has an intrinsic width. If this were a div, a width would have to be used.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
CSS CODE
.floatright { float: right; }
HTML CODE
<p>
<img class="floatright" src="images/image.gif" alt="" width="100" height="100">Lorem ipsum dolor sit amet, consectetuer...
</p> 
For this exercise, we want to force an image over to the right to allow the content to flow alongside it. We also want to add margins to the left and bottom sides of the image to push the content away. Finally, we want to add a border around the image. We start with an image sitting inside a paragraph of text.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
CSS CODE
None
HTML CODE
<p>
<img src="images/image.gif" alt="" width="100" height="100">Lorem ipsum dolor sit amet, consectetuer...
</p> 
Let’s go one step forward and add an extra gadget section within Blogger header in new template designers. Within this gadget section you can add anything that you may want, for example, subscribe buttons, search box, Pages links list (navigation bar) or your AdSense ads.
In previous tutorial I have told you How to resize Blogger header section which needs to be done first to give space for the extra gadget to fit in. When done, follow the below steps.
Step 1: Go to Design > Edit HTML tab and backup your template.
Step 2: Find for the below code which you have edited and implemented in previous tutorial:
<div class='fauxborder-left header-fauxborder-left'> <div class='fauxborder-right header-fauxborder-right'/> <div class='region-inner header-inner'> <b:section class='header <strong><code>header-left</code></strong>' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Blog's Title (Header)' type='Header'/> </b:section> <font color="red"><div style='clear:both;'/></font> </div> </div>
Now find for
<b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'/>
So the full code will be:
<div class='fauxborder-left header-fauxborder-left'> <div class='fauxborder-right header-fauxborder-right'/> <div class='region-inner header-inner'> <b:section class='header <strong><code>header-left</code></strong>' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Blog's Title (Header)' type='Header'/> </b:section> <b><b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'/></b> <span class="Apple-style-span" style="color: red;"><div style='clear:both;'/></span> </div> </div>
Step 3: Find ]]> and before it add the following CSS:
.header-right { display:inline-block; float:right; width:<b>400px</b>; }Now all is left is to change the width that are marked in bold. Increase or decrease the pixels according to your needs and positioning new header section.
Step 5: Save your template. Go to Design > Page Elements tab and from there you can add a new gadget to the newly created extra header section in Blogger. You may find that the extra gadget section is created just under your Blogger header as shown in the image below.
You need not to worry about it as when you will view your blog, it will appear side by side as it's seen on the demo.
And again you have to remember that it's only for new Blogger templates. If you have a layout template then you must have a look at this tutorial: How to Add Sidebar (Gadget Section) to Header in Blogger
One of the drawbacks of Blogger is its header. When you are using text as your blog title, you will find that there is no problem but when you add an image or logo to the header portion instead of title and description or having description placed after the image from Layout > Page Elements tab, you will find that it’s not the logo but the whole header becomes clickable. So in this tutorial we will find out how to resize the Blogger header in new templates from template designer.
Step 1: Make yourself a logo or image in any photo editing software with a particular size and note down its width and height and upload it to your image hosting site. In this tutorial, I will use my logo with 200 pixels in width and 35pixels of height and Blogger’s default template from Picture Window (2nd one). If you know how to add image to Blogger header and already applied it, then follow the steps below.
Step 2: Go to Design > Edit HTML tab and backup your template.
Step 3: Find ]]></b:skin> and before it add the following CSS:
.header-left{ display: inline-block; height: <b>35px</b>; width: <b>200px</b>; float: <b>left</b>; }Replace the bold pixels with your image’s height and width and increase or decrease the margins to position your logo. Changing “float: left;” to “float: right;” will change the position of the displayed logo, whether you want it to float to left or right.
Step 4: Find for the below codes and emphasize on the bold snippets:
<div class='fauxborder-left header-fauxborder-left'> <div class='fauxborder-right header-fauxborder-right'/> <div class='region-inner header-inner'> <strong><b:section class='header' id='header' maxwidgets='1' showaddelement='no'></strong> <b:widget id='Header1' locked='true' title='<span style="color: blue;">Blog's Title</span> (Header)' type='Header'/> </b:section> <font color="red"></div></font> </div>
Replace the bold snippet with:
<b:section class='header <code>header-left</code>' id='header' maxwidgets='1' showaddelement='no'>
As you can find out that an extra class, header-left has been added, highlighted in green. If you want then you can add this class, as shown above, without replacing the whole snippet.
Now “Preview” your template, you will find that the background color of Blogger’s header is not visible or it's missing.
So you need to add some more snippets to bring it back. So find for closing div (highlighted in red) and before it add:
<div style='clear:both;'/>
So the whole code will look like:
<div class='fauxborder-left header-fauxborder-left'> <div class='fauxborder-right header-fauxborder-right'/> <div class='region-inner header-inner'> <b:section class='header <strong><code>header-left</code></strong>' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='<span style="color: blue;">Blog's Title</span> (Header)' type='Header'/> </b:section> <strong><div style='clear:both;'/></strong> <font color="red"></div></font> </div>
Remember that "Blog's Title" is referred to the title of your blog.
Step 5: Save your template and view your blog. You have successfully added your logo to header and resized it to logo size. To recheck, on placing the cursor over the header, you will find that the whole header in not clickable, instead it’s your logo only.
<code>.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
#kwick5 a{background-position:-760px 0}
#kwick5 a:hover{background-position:-760px -50px!important}
#kwick6 a{background-position:-950px 0}
#kwick6 a:hover{background-position:-950px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block
}
</code>4. Then copy the code below, and paste above <code><script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery-1.2.3.js' type='text/javascript'/><br /><script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery.kwicks-1.5.1.js' type='text/javascript'/><br /><script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/><br /></code>5. Click SAVE TEMPLATE
<code><div class='kwickswrap'><br /><ul class='kwicks'><br /><li id='kwick1'><a href='#' title='Home'>Home</a></li><br /><li id='kwick2'><a href='#' title='Contents'>Blog</a></li><br /><li id='kwick3'><a href='#' title='About'>About</a></li><br /><li id='kwick4'><a href='#' title='Futures'>Portfolio</a></li><br /><li id='kwick5'><a href='#' title='Contact us'>Contact</a></li><br /><li id='kwick6'><a href='#' title='Recomended links'>Resource</a></li><br /></ul><br /></div><br /></td><br /><script type="text/javascript"><br />$().ready(function() {<br />$('.kwicks').kwicks({<br />max : 190,<br />duration: 800,<br />easing: 'easeOutQuint'<br />});<br />});<br /></script><br /></code>=> You have to customize the URL first
<code><div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Click here!</b>: <input value="View" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hidden'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'View'; }" type="button" />
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Put Your Text Here
</div>
</div>
</div>
</code>
 |
| New Google Search |
 |
| Google Search for Blogger |
<code>/* div container containing the form */=> Adjust the width with your blog
#searchContainer {
margin:20px;
}
/* Style the search input field. */
#field {
float:left;
width:200px;
height:27px;
line-height:27px;
text-indent:10px;
font-family:arial, sans-serif;
font-size:1em;
color:#333;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-right:none;
}
/* Style the "X" text button next to the search input field */
#delete {
float:left;
width:16px;
height:29px;
line-height:27px;
margin-right:15px;
padding:0 10px 0 10px;
font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;
font-size:22px;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-left:none;
}
/* Set default state of "X" and hide it */
#delete #x {
color:#A1B9ED;
cursor:pointer;
display:none;
}
/* Set the hover state of "X" */
#delete #x:hover {
color:#36c;
}
/* Syle the search button. Settings of line-height, font-size, text-indent used to hide submit value in IE */
#submit {
cursor:pointer;
width:70px;
height: 31px;
line-height:0;
font-size:0;
text-indent:-999px;
color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIoTiWS0SPMvaf7DVvGioiSgWXvfipzpObQ3OV8XN7cMWvFk2jroLTORcSdrwEiBD2YWkJ99yxWlt8U4onuq39rFQZG6sq6qAccK4yKT1U1vaecKPrdaGr9qFhAcFuHkVaecVKmw5kTbnL/s1600/ico-search.png) no-repeat #4d90fe center;
border: 1px solid #3079ED;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
/* Style the search button hover state */
#submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIoTiWS0SPMvaf7DVvGioiSgWXvfipzpObQ3OV8XN7cMWvFk2jroLTORcSdrwEiBD2YWkJ99yxWlt8U4onuq39rFQZG6sq6qAccK4yKT1U1vaecKPrdaGr9qFhAcFuHkVaecVKmw5kTbnL/s1600/ico-search.png) no-repeat center #357AE8;
border: 1px solid #2F5BB7;
}
/* Clear floats */
.fclear {clear:both}
</code>
<code><script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>Adding New Google Search Box
<script type='text/javascript'>
$().ready(function() {
// if text input field value is not empty show the "X" button
$("#field").keyup(function() {
$("#x").fadeIn();
if ($.trim($("#field").val()) == "") {
$("#x").fadeOut();
}
});
// on click of "X", delete input field value and hide "X"
$("#x").click(function() {
$("#field").val("");
$(this).hide();
});
});
</script>
</code>
<code><div id="searchContainer">
<form name="SUYB" action="/search" method="get">
<input type="text" id="field" id="s" name="q" />
<div id="delete"><span id="x">x</span></div>
<input type="submit" name="submit" id="submit" value="Search" />
</form>
</div>
</code>
