Pages

Thursday, 1 January 2015

How To add post label

What are labels and how to use labels in Blogger to sort your content?

What are labels and how to use labels in BloggerAre you using your Blogger labels in a right way to sort your content or you just spamming it? We see most new bloggers think labels as a Meta keywords and just spamming it. So in this post we will see what labels in blogger are and how to use labels the right way. It might differ in other blogging platforms. So in wordpress instead of labels we havecategories and tags and we made a detailed article for wordpress users in order to better understand categories and tags in wordpress.
Now it’s time to explain about labels in Blogger. Categories, tags and labels all the three are same and their main purpose is to sort your content. Labels are mainly for your site visitors for better navigational purpose and not for search engines. By sorting right content using right labels your visitors can easily pick the right topic that they are interested in.

What are labels in Blogger?

What are labels and how to use labels in BloggerLabels are known as blog categories. For example services, about us, contact us are pages that you add it in your menu tabs. So that users can know about your blog what service you offer this and that etc. Labels are linked pages that show several related blog posts.
For example let’s say you running a cookery blog and you are posting about “how to make a pizza” and you are sorting it with three labels such as cooking, oven and pizza. Now you are posting another topic about “how to make French fries” and you are sorting it with fry pan, French fries and cooking. So if your visitors want to learn more about cooking they will use the label cooking which contains two posts.
Labels help users to pick related posts that they are interested in just as like related posts widget that you show below your blog posts.

How many labels in blogger are too much?

This question actually depends upon your blog topics. In wordpress we have two options, where we use categories as main topics and tags as micro topics. In Blogger you have only one option that is labels. You can have as many labels you want for your site, but sort your content with not more than three labels and not more than three words per labelNever have a label with no posts in it.
For better navigation and user experience you can show your labels in both menu tabs and in sidebar. Show your main blog labels in your menu tab that is the label that has most filled article. Show labels in sidebars that has fewer topics in it.

Labels in search engine optimization

As it’s already mentioned above labels are only for humans and not for search engines. So use labels wisely to sort your content and never spam your keywords. When your posts increases your blog labels will also get increased so better is to have rel=noindex and nofollow tags. By default you labels are blocked in your robots.txt so you don’t need to worry about this.

How to use labels in Blogger menu tab and sidebar

what are labels and how to add labels in Blogger
Adding labels in your menu tab and sidebar is easy and here is a tutorial about adding labels in Blogger menu tab.
To add labels in Blogger sidebar login to your Blogger dashboard >> layout and select add a gadget from sidebar. Now open labels in the popup window and configure it as you like. Once done save the layout arrangement.
What are labels and how to use labels in Blogger

Blogger labels – key points

Keep in mind that labels are only to enhance your user experience so…
  1. Use labels wisely to sort your content
  2. Do not use more than three labels per post
  3. Do not use more than three words per labels
  4. Never have or add labels with no post in it.
Hope this article helped you with better understand labels and how to use labels in Blogger. Share, comment and subscribe for blog updates.

Html 5

We hand-pick some great HTML examples, and talk to the designers behind them to find out how they went about it.

We bring you some of the best HTML examples around and ask the designers who made them just how they achieved their goals. HTML5 is the latest version of HTML - the markup language used to display web pages.
Although it's technically still in development, it's very much ready to use today, to build websites and web apps. And here are some great examples of HTML5 in action, to see exactly what you can achieve with it.

Add Dropdown Menus to Blogger




Step ONE:  Plan for your menu bar, creating a sitemap with all the links that you want to use.
Step TWO: Grab this code … replacing it with all your links … then add it into a new HTML widget where you want your menu bar to appear:
<!-- start navmenu -->
<ul id='cssnav'>
<li class="active"><a href='http://LINK.com'>Home</a></li>
<li class="sub"><a href='http://CATEGORY-ONE-LINK.com'>Category 1</a>
<ul>
<li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li>
<li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li>
<li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li>
</ul>
</li>
<li><a href='http://CATEGORY-TWO-LINK.com'>Category 2</a>
<ul>
<li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li>
<li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li>
<li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li>
</ul>
</li>
<li><a href='http://CATEGORY-THREE-LINK.com'>Category 3</a>
<ul>
<li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li>
<li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li>
<li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li>
</ul>
</li>
<li><a href='http://CATEGORY-FOUR-LINK.com'>Category 4</a>
<ul>
<li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li>
<li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li>
<li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li>
</ul>
</li>
</ul>
<!-- end navmenu -->
NOTE 1:  There is no styling added yet … so this will not look like much just yet.  But stay with me :)
NOTE 2: You are welcome to add more categories and sub-categories as you need. Just copy the same format as listed in the example.
Step THREE: Go into the Blogger Template Designer (click on CUSTOMIZE … then on ADVANCED … then on ADD CSS) and add the following:
/* ----- CSS Nav Menu Styling ----- */
#cssnav {
margin: 0px 0 0 -30px;
padding: 0px 0px 0px 0px;
width: 1050px;  /* Set your width to fit your blog */
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
color: $(tabs.text.color); /* Template Designer - Change Font Size */
}

#cssnav ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
height: 20px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}

#cssnav li {
float: left;
padding: 0px;
}

#cssnav li a {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}

#cssnav > ul > li > a {
color: $(tabs.text.color); /* Template Designer - Change Font Color */
}

#cssnav ul ul a {
color: $(tabs.text.color); /* Template Designer - Change Color */
}

#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */
text-decoration: none;
}

#cssnav li ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
position: absolute;
width: 200px; /* Change Width Of DropDown Menu */
z-index:9999;
}

#cssnav li:hover ul {
display: block;
}

#cssnav li li {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px; /* Change Width Of DropDown Menu */
}

#cssnav li:hover li a {
background: $(tabs.selected.background.color); /* Template Designer - Change Background of Link on Hover */
}

#cssnav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}

#cssnav li ul a:hover, #cssnav li ul li:hover > a {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;
}
NOTE: I’ve listed notes next to a few lines of this code to point out what you can change and style for your own blog.

Ict Notes

Introduction
In the Australian Curriculum, students develop ICT capability as they learn to use ICT effectively and appropriately to access, create and communicate information and ideas, solve problems and work collaboratively in all learning areas at school, and in their lives beyond school. The capability involves students in learning to make the most of the digital technologies available to them, adapting to new ways of doing things as technologies evolve and limiting the risks to themselves and others in a digital environment.
The Melbourne Declaration on the Educational Goals for Young Australians (MCEETYA 2008) recognises that in a digital age, and with rapid and continuing changes in the ways that people share, use, develop and communicate with ICT, young people need to be highly skilled in its use. To participate in a knowledge-based economy and to be empowered within a technologically sophisticated society now and into the future, students need the knowledge, skills and confidence to make ICT work for them at school, at home, at work and in their communities.
Information and communication technologies are fast and automated, interactive and multimodal, and they support the rapid communication and representation of knowledge to many audiences and its adaptation in different contexts. They transform the ways that students think and learn and give them greater control over how, where and when they learn.
Scope of ICT capability
The nature and scope of ICT capability is not fixed, but is responsive to ongoing technological developments. This is evident in the emergence of advanced internet technology over the past few years and the resulting changes in the ways that students construct knowledge and interact with others.
Students develop capability in using ICT for tasks associated with information access and management, information creation and presentation, problem solving, decision making, communication, creative expression, and empirical reasoning. This includes conducting research, creating multimedia information products, analysing data, designing solutions to problems, controlling processes and devices, and supporting computation while working independently and in collaboration with others.
Students develop knowledge, skills and dispositions around ICT and its use, and the ability to transfer these across environments and applications. They learn to use ICT with confidence, care and consideration, understanding its possibilities, limitations and impact on individuals, groups and communities.
For a description of the organising elements for ICT capability, go to Organising elements.
ICT capability across the curriculum
ICT capability supports and enhances student learning across all areas of the curriculum. Students develop and apply ICT knowledge, skills and appropriate social and ethical
2
protocols and practices to investigate, create and communicate, as well as developing their ability to manage and operate ICT to meet their learning needs.
Learning areas provide the content and contexts within which students develop and apply the knowledge, skills, behaviours and dispositions that comprise ICT capability.
ICT capability and the Technologies learning area
Information and communication technology is represented in two ways in the Australian Curriculum: through the ICT capability that applies across all learning areas and within the Technologies curriculum through Digital technologies. The ICT capability will be reviewed (and revised if necessary) to ensure that there is consistency with the Technologies curriculum following its development.
The ICT capability is addressed through the learning areas and is identified wherever it is developed or applied in content descriptions. It is also identified where it offers opportunities to add depth and richness to student learning in content elaborations. An icon indicates where ICT capability has been identified in learning area content descriptions and elaborations. A filter function on the Australian Curriculum website assists users to find where ICT capability has been identified in F–10 curriculum content. Teachers may find further opportunities to incorporate explicit teaching of ICT capability depending on their choice of activities. Students can also be encouraged to develop capability through personally relevant initiatives of their own design.
• Information and communication technology in English (http://www.australiancurriculum.edu.au/English/General-capabilities)
• Information and communication technology in Mathematics (www.australiancurriculum.edu.au/Mathematics/General-capabilities)
• Information and communication technology in Science (www.australiancurriculum.edu.au/Science/General-capabilities)
• Information and communication technology in History (www.australiancurriculum.edu.au/History/General-capabilities)
Background
This background summarises the evidence base from which the ICT capability’s introduction, organising elements and learning continuum have been developed. It draws on recent international and national research, as well as initiatives and programs that focus on ICT across the curriculum.
ICT capability is based on sets of relevant knowledge, skills, behaviours and dispositions. Internationally, such capability is typically represented developmentally across interrelated domains or elements to show increasingly sophisticated experiences with the technology. For example, the ICT curriculum for England presents ‘lines of progression’ in strands and sub-strands. The National Education Technology Standards (NETS) for students provided by the International Society for Technology in Education (ISTE) represent capability with six sets of standards. In Australia, the Statements of Learning for ICT were presented as five broadly defined conceptual organisers, representing key aspects of ICT that apply across
3
the curriculum. The Australian Council for Educational Research (ACER) has also identified a progression in research associated with the National Assessment Program – ICT Literacy.
Early researchers into ICT in education, such as Papert (1980) and Turkle (1984), considered that students constructed reality from experience and prior knowledge. The student interacts with the environment and, to cope with this environment, develops a conceptual framework to explain the interaction.
More recent theorists, such as Dede (2009), echo these earlier propositions even as technologies evolve, giving rise to the set of constructs upon which the ICT capability is based. In particular, the overarching element Applying social and ethical protocols and practices when using ICT addresses the personal, social and cultural contexts introduced by theorists such as Papert and Turkle.
ICT capability is based on the assumption that technologies are digital tools that enable the student to solve problems and carry out tasks. That is, the ICT system needs to suit the student and the task, while the student needs to develop an understanding of what the machine can do and an appreciation of the limitations under which it operates. In this way, students come to perceive ICT systems as useful tools rather than feeling that they themselves are the tools of the machine (Maas 1983). The latter often occurs when users have little information about how ICT systems operate and simply follow set, standard procedures, determined for them by the system.
Therefore, the ICT capability needs to take account of the types of tasks that provide authentic contexts for learning. The range of tasks is categorised into three sets: Investigating with ICT, Communicating with ICT and Creating with ICT. Students also need the knowledge and skills to use ICT based on an understanding of the ‘nature of the machine’. This is encompassed in the Managing and operating ICT element of the continuum.

ICT Intro

Globalization and technological change—processes that have accelerated in tandem over the past fifteen years—have created a new global economy “powered by technology, fueled by information and driven by knowledge.” [1] The emergence of this new global economy has serious implications for the nature and purpose of educational institutions. As the half-life of information continues to shrink and access to information continues to grow exponentially, schools cannot remain mere venues for the transmission of a prescribed set of information from teacher to student over a fixed period of time. Rather, schools must promote “learning to learn,” : i.e., the acquisition of knowledge and skills that make possible continuous learning over the lifetime. [2] “The illiterate of the 21st century,” according to futurist Alvin Toffler,“will not be those who cannot read and write, but those who cannot learn, unlearn, and relearn.”
Concerns over educational relevance and quality coexist with the imperative of expanding educational opportunities to those made most vulnerable by globalization—developing countries in general; low-income groups, girls and women, and low-skilled workers in particular. Global changes also put pressure on all groups to constantly acquire and apply new skills. The International Labour Organization defines the requirements for education and training in the new global economy simply as “Basic Education for All”,“CoreWork Skills for All”and “Lifelong Learning for All”. [3]
Information and communication technologies (ICTs)—which include radio and television, as well as newer digital technologies such as computers and the Internet—have been touted as potentially powerful enabling tools for educational change and reform. When used appropriately, different ICTs are said to help expand access to education, strengthen the relevance of education to the increasingly digital workplace, and raise educational quality by, among others, helping make teaching and learning into an engaging, active process connected to real life.
However, the experience of introducing different ICTs in the classroom and other educational settings all over the world over the past several decades suggests that the full realization of the potential educational benefits of ICTs is not automatic. The effective integration of ICTs into the educational system is a complex, multifaceted process that involves not just technology—indeed, given enough initial capital, getting the technology is the easiest part!—but also curriculum and pedagogy, institutional readiness, teacher competencies, and long-term financing, among others.
This primer is intended to help policymakers in developing countries define a framework for the appropriate and effective use of ICTs in their educational systems by first providing a brief overview of the potential benefits of ICT use in education and the ways by which different ICTs have been used in education thus far. Second, it addresses the four broad issues in the use of ICTs in education—effectiveness, cost, equity, and sustainability. The primer concludes with a discussion of five key challenges that policymakers in developing countries must reckon with when making decisions about the integration of ICTs in education, namely, educational policy and planning, infrastructure, capacity building, language and content, and financing.

CSS Background

Background Color

The background-color property specifies the background color of an element.
The background color of a page is defined in the body selector:

Example

body {
    background-color: #b0c4de;
}

Try it yourself »
With CSS, a color is most often specified by:
  • a HEX value - like "#ff0000"
  • an RGB value - like "rgb(255,0,0)"
  • a color name - like "red"
Look at CSS Color Values for a complete list of possible color values.
In the example below, the h1, p, and div elements have different background colors:

Example

h1 {
    background-color: #6495ed;
}

{
    background-color: #e0ffff;
}

div {
    background-color: #b0c4de;
}

Try it yourself »


Background Image

The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
The background image for a page can be set like this:

Example

body {
    background-image: url("paper.gif");
}

Try it yourself »
Below is an example of a bad combination of text and background image. The text is almost not readable:

Example

body {
    background-image: url("bgdesert.jpg");
}

Try it yourself »


Background Image - Repeat Horizontally or Vertically

By default, the background-image property repeats an image both horizontally and vertically.
Some images should be repeated only horizontally or vertically, or they will look strange, like this:

Example

body {
    background-image: url("gradient_bg.png");
}

Try it yourself »
If the image is repeated only horizontally (repeat-x), the background will look better:

Example

body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}

Try it yourself »


Background Image - Set position and no-repeat

NoteNote: When using a background image, use an image that does not disturb the text.
Showing the image only once is specified by the background-repeat property:

Example

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}

Try it yourself »
In the example above, the background image is shown in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much.
The position of the image is specified by the background-position property:

Example

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}

Try it yourself »


Background - Shorthand property

As you can see from the examples above, there are many properties to consider when dealing with backgrounds.
To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property.
The shorthand property for background is simply "background":

Example

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

Try it yourself »
When using the shorthand property the order of the property values is:
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
It does not matter if one of the property values is missing, as long as the ones that are present are in this order.
This example uses more advanced CSS. Take a look: Advanced example

How to add Music

If you've created your blog on blogger.com, you can now easily add music from hulkshare to your blogspot blog by embedding the music player in your posts. Hence, your blog readers won't have to leave your blog for them to listen to the mp3s you share on your blog.

If Hulkshare.com is new to you, it is a website where artists, DJs, music lovers upload their music and share with friends and fans. If you own some music files, you can easily upload them to hulkshare, then use the hulkshare music player to embed them in your blog posts for your readers to listen and even download them.

In this post, I am sharing with you how to embed mp3s from hulkshare in your blogspot blog.

How To Get Started

==> Go to www.hulkshare.com

==> Search for the track you want to embed e.g "Iyanya"

==> Once you see the music track in the search results, click on it. This will open a new page.

==> Scroll down the new page and click "embed"

==> A new window will pop up with two options: Hulkshare comment player and legacy flash

==> Click the "Get embed widget" link below the "Hulkshare comment player" option

==> Customize as you desire and click the "copy to clickboard" button

==> Go to your Blogger post editor

==> While using the compose tab, write the main content of your post as normal, then place your cursor where you would like the hulkshare audio player to appear.

==> Paste the code you copied earlier

==> Preview your post and if OK, publish it.

NOTE: Be sure to check the "Interpret Typed HTML" option on the post "Options" in the right side of the post editor, otherwise the raw code for your player will be displayed instead!

Alternatively, switch to the HTML mode of the post editor when composing a post and paste your code as HTML before publishing it.

That's all.