Wednesday 7 May 2014

Label Cloud Widget For Blogger

Hi! Guys in this tutorial I would like to present you with a code for ‘Label Cloud Widget For Blogger’.

techpro365.blogspot.in

There will be simple editing of the template.

But before making any changes to your template please backup it.

Now follow these simple steps:

Log in to blogger.

Go to template and backup it first.

Click on ‘Edit HTML’.

Now search for ]]>
in  the template. You can do the search by pressing Ctrl+F.

Copy the given below code and paste it just above ]]>
and save the template.

You can change the colour of the labels according to your choice.

CODE
.label-size{
margin:0;
padding:0;
position:relative;
}
.label-size a{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:20px;
padding:0 10px 0 12px;
background:#3366FF;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
}
.label-size a:before{
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #3366FF transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0; 
}
.label-size a:after{
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
} 
.label-size a:hover{background:#555;}
.label-size a:hover:before{border-color:transparent #555

transparent transparent;}

Saturday 4 January 2014

Basic HTML for beginners!

Hi! Guys, I want to start this year with the basics. So I decided to write a post describing the basic components of HTML code. This post is mainly for the emerging bloggers who should know about HTML. There are numerous reasons to why you should have the basic knowledge of this code.

What if you have done something wrong while formatting the code or while posting? What if you want to make some tweaks with the code of your blog’s template?

Don’t panic after seeing the code of your template. If you are blogging for a considerable number of weeks you can easily understand the code. The Hyper Text Markup Language or simply HTML is a very easy to understand and learn. So let’s move to the important part of this post about the “Basic components of HTML”.

HTML consists of elements with tags like <Html></Html> and each element is ended up with the </> tags. A blog or a webpage mainly consists of <Head> and <Body> parts. Usually the <Head> part consists of the <title> of the blog metadata and other parts like description of the page. The <Body> part contains the main content of the page or blog.

The CSS is the Cascading Style Sheets which has the data regarding the style and formatting of the webpage written in HTML. I will give you a brief overview of some the components of a webpage.

The <!DOCTYPE> declaration helps the browser to display a web page correctly an it is done only when it knows the type and version.The <title> part defines the title of the page and will be in the <head> section.

The body part consists of many tags. The <div> tag defines a division or section element in the body. In this we have the main content of the blog or the webpage. <h1></h1> this tag defines the heading and <p></p> denotes the paragraphs of the content.

techpro365

<a href=http://techpro365.blogspot.in/></a> defines a link and an image is represented by <img src=””></img> tags. If we want to change the text to bold or italic we can use the tags like <Strong> I want this text to be bold </Strong> this will gives an output to
I want this text to be bold
<em> I want this text to be Italic</em> will gives an output to
I want this text to be Italic
The <font></font> tags in CSS defines the style, size, colour and other components of the text that is written in that particular division. In the <div> and <p> components we have the facility to align the text using text-align under the style category.

With this basic knowledge of the HTML tags you will be able to manage your basic components of your blog. HTML plays a vital role in understanding the Cascading Style Sheets. You can also try using different combinations by clicking on the HTML in the post as shown in the image. We have to start from one point or the other and try to learn new things and try practicing them. So, all the best and Happy Blogging.

If you have any genuine queries please feel free to contact.

 Resources: w3schools

Subscribe to: Posts ( Atom )