Showing posts with label Blogger Tips. Show all posts
Showing posts with label Blogger Tips. Show all posts

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

Monday, 26 August 2013

How to add a widget to the header in blogger

Add a widget to header-techpro365


 Many blogger templates will have a feature that allows you to add an extra widget to the header section. The single column structure templates will not have this feature.

 In this tutorial I will tell you ‘How to add a widget to the header section’ in blogger.
We have to make some simple changes to the template. Don’t worry; I will help you through this. Before making any changes “please backup your template”.

Follow these steps:
  1. Log in to blogger dashboard.
  2. Go to template. Click “Backup/Restore”. Click “Download full template”.
  3. After downloading your template, click “Edit HTML”.
  4. Search /*Header or /*-----Header (something like this).
  5. Now below it add this piece of code.
  6. Find <b:section class=’header’ id=’header’ maxwidgets=’1’>  and replace it with 
  7. Now search for </header> and add the below code before the header.
  8. Find ]]></b:skin> and before it add the following CSS code.
  9. Now save your template and see the layout of your template, you will find an ‘Add a Gadget’ box to the right of your header.
  10. You can make changes to the font-size, width, float and other parameters according to your template.
If you have any genuine problems regarding this post please feel free to contact.
Print Page

Wednesday, 17 July 2013

How to add Facebook popup like box for blogger

Facebook popup

Hi! Guys in today’s post I would like to tell you ‘How to add Facebook popup like box for blogger’. After the page is fully loaded the Facebook popup like box slides from the bottom of the page to the center.

Adding this widget to your blog is very simple.


Follow these simple steps:

  1. Log in to blogger and go to Layout.
  2. Click on “Add a Gadget” and select HTML/Javascript.
  3. Copy the below code and save it.
 Before adding the code, please change Techpro365 with your Facebook fan page.

 You can also change the “Don’t forget to join with our community” to whatever you feel   like adding.

CODE:

<style type='text/css'>
#Techpro365FBpop {
position:fixed !important;
position:absolute;
top:350px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background: #FEFEFE;font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#Techpro365FBpop a.bsclose {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#000000;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:25px;
cursor:pointer;
}
</style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top
$('#Techpro365FBpop').animate({top:"180px"}, 1000);
// Widget by www.Techpro365.com
$('a.bsclose').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='Techpro365FBpop'>
<!-- Widget by www.Techpro365.com Start -->
<center><b><a class="Techpro365">Don't Forget To Join With Our Community</a></b></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FTechpro365&amp;width=292&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=true&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe></center>
<!-- Widget by www.Techpro365.com End -->
<a class='bsclose' href='#'>&times;</a>
<center style="float:right; margin-right:10px;">
</center></div>

 If you have any genuine problems regarding this post please feel free to contact. 

Print Page

Wednesday, 19 June 2013

How to add a floating or fixed header to blogger.

floating-header

Hi! Guys in this post I would like to tell you about ‘How to add a floating or fixed header to blogger.’

The header portion remains fixed while you scroll down the page of your blog. This can be done by making some changes to the style sheet of the template. Don’t worry I am with you throughout this.

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

Now follow these simple steps:

  1. Log in to blogger.
  2. Go to template and backup it first.
  3. Click on ‘Edit HTML’.
  4. Now search for #header or header#masthead or something like this that defines the header portion of the template. You can do the search by pressing Ctrl+F.
  5. Add position:fixed; z-index:200; background-color: #fff; to the #header portion of style sheet.
  6. This part of the code makes the header portion to stick at the top of the blog and any other content.
  7. Now we have to make some changes in the #main portion to prevent the posts from being positioned underneath the header.
  8. Search for #main or the portion that defines the main portion of the blog.
  9. Add margin-top:200px; to the #main portion of the style sheet.
  10. Sometimes you have to make some modifications in the style sheet according to your needs.


If you have any genuine problems regarding this post please feel free to contact.

Print Page

How to add arrow keys to navigate in blogger


Hi! Guys in this post I would like to tell you ‘How to add arrow keys to navigate in blogger’.

This widget helps you to navigate from one page to next page and also one post to the next. Navigating through this widget is so helpful because otherwise we have to search for the next post link on the blog, with this that problem can be avoided.


Adding and removing this widget from your blog is so simple. You can add it by clicking on the ‘Add to Blogger’ button.



How to let others know of this?

You can do it by adding some floating images like I done it on this blog. You can let them know by showing some text on your blog.

If you want to show some floating images follow these simple steps.

Log in to blogger.

Go to template. At first backup your template and click on edit HTML.

Search for ]]></b:skin> . You can do this by pressing Ctrl+F.
Add this below code just before ]]></b:skin>.



Now search for </body> and add the below code just before </body>.


Now click on ‘save’ button and you can see the changes on your blog.

You can edit the image links of the navigation keys in the above code.

 If you have any genuine problem regarding this post please feel free to contact.

Print Page

Friday, 17 May 2013

How to customize themes of comment box in blogger


Hi! Guys many of us got bored using the simple theme in the comment-box in blogger. Can we change the theme? Of course yes!

In this post I will tell you how to change the comment box theme.

Follow these simple steps:

  1. Log in to blogger.
  2. Go to template, click on Edit Html.
  3. Now find this code]]></b:skin> and paste the below given code before it. You can do it by using Ctrl+F. Also find <div class='comment-form'> and replace class with id.
CODE:

You can change the background URL with the image URL you like from the images given below. You can also change the color:#0ab00a, Arial and other attributes of your choice.

If you have any genuine doubts about changing the comment-box template, please feel free to contact.

Print Page

Saturday, 6 April 2013

How to add 'Facebook like and send buttons' for blogger.



Hello! You are here because you searched for ‘How to add 'Facebook like and send box' for blogger.’ Facebook has come up with a new set of social plugins which enable you to provide engaging social experiences to your users with just a line of HTML. The Facebook Like Button is One of them. Facebook like button will allow your readers to quickly share your posts with their Facebook Friends. You can also get to know how many people liked your Blog Post .This process includes adding a small code to your blogger template. So, before going any further please backup your template.
  
Now Login to your Blogger Account and go to Design > Edit HTML and click on the check box which says “Expand Widget Templates”.

Your template should have the specification for the fb tag that you have used. The following namespace declaration will take care of that. To declare the namespace, find “<html” and change it to <html xmlns:fb="https://www.facebook.com/2008/fbml". This is necessary for all FBML widgets using the fb tag.  So if you have already added the namespace while adding some other FB plugin, then you can skip this.

Search for “<data:post.body/>”. You may find this by pressing “Ctrl+F” buttons and type it in the search box.

Now copy the code and place it just before <data:post.body/>
 CODE:



Now save your template and you will find these buttons in every post of your blog.

Print Page

Saturday, 16 March 2013

How to remove 'comments box' from static page on blogger

Many bloggers face the problem of removing the ‘comments box’ from static pages on blogger. This can be done by using the page settings at the right side of the editor.
Click on ‘page settings’--> ‘options’ and select the ‘Don’t allow,hide existing’ radio button and click on ‘Done’ and update it and you are done.

page settings for static pages in blogger


Print Page

How to create an excellent 'About me' page for blogger


When it comes to putting together a powerful website or blog, every page is important. Yet many people seem to overlook the most important pages like “About me” page, and thereby commit a big mistake.
If you are here means you are so lucky that you are not committing that mistake that many others are doing. It is so true that many people want to know about you and your ability to solve their problem. If you are not sure of how to make “About me” page don’t get tensed as I will explain about some important elements of this page.
What is an “About me” page?
An about page of a website or a blog contains some important information about your Website/Service or organization. This single page speaks about Who you are, what you can do and why this website. This is a place where you talk about you and show your achievement and strong points. Of all the elements of a website, “About us” or “About me” page is one of the most important elements.
Some of the elements you should keep in mind before making an “About me” page are:
Maintain Human Touch:
Always remember it’s a point of connection between your readers and you. So, you might like to maintain the human touch, add some funny comments and also maintain the professionalism at the same time. You can start with your blog foundation, vision, what do you do, and what action they can take next.
Keep it Focused:

The main reason people will visit your “About Me” page is to find out more about who you are, and why you are the right person to solve their problem. You don’t need to write an autobiography to achieve this.

Make this page short and sweet by giving the people a little background about yourself, your qualifications and your expertise in an engaging manner.
Never ever lie to your readers:
Many people make the biggest mistake of bragging about them to make their page or biography look good. But, remember a bad reputation spreads like light! So, never lie to your readers and tell them frankly about yourself and your skills and achievements.
Keep your personal stuff aside:
This page should be more professional rather than personal. Keep your personal stuff like your hobbies, things you like etc.., away from this page. They should be presented in your social networking profile. Add a picture of yourself; tell them about your educational background and the reason behind to start this blog or website.
Think from a reader perspective:
You should think from a reader perspective view more than an author’s. You should think about what they are expecting from you. Sometimes they might be interested in connecting to you through social networking. So, give them the links of your personal profile and fan pages if any.
I think you are now ready to make your own “About me” page. Please feel free to let me know if I had missed any important aspect through the comment box below.

Thursday, 28 February 2013

5 Mistakes to avoid while using and starting a blog




A good number of people are interested in starting a new blog in this highly developing internet era. Some of them had taken it as a hobby while some as a daily profession. However as we know that nothing is easy, it also is applicable for blogging. Plan before you act as there are many things that you cannot modify or change when once done. A number of essential parameters are there that are to be considered before starting a new blog while some of them are discussed here in this post. Many new bloggers end up in taking those steps that are to be avoided while blogging. So, here in this post I would like to point out those aspects which are to be avoided preferably.

Let’s have a look at some of the commonly committed mistakes while starting a new blog:

Settle Down for the Best Niche and Stick to it!

The first thing you need to keep in mind in order to become a successful blogger is to settle down for the best niche. Most of the time new bloggers take up random topics and start to blog on those random topics. This approach usually fails to create an impact in the blogging field and make them to quit blogging. Do some research on the niche before taking up the task of blogging as it is one of the major aspects in the process of blogging. So, make sure that you settle down for the right and best niche.

Don’t Start a Blog Merely for Money

There are a number of new bloggers who start a blog for earning some quick money. However they are not successful in either getting money or getting the considerable amount of traffic. Stick to the topic and provide a good, useful and interesting content to attract more number of visitors and thereby earning money through monetising your blog. It is always advisable to concentrate more on the content and other aspects related to it rather than thinking in earning point of view. Your earnings start easily if you have considerable amount of daily traffic.

Say ‘No’ to Plagiarism

Plagiarism means copying the content from other blogs and websites and posting it on your blog. In simple words the using of Ctrl+C and Ctrl+V combinations. Some of the new bloggers who usually don’t want to put in some hard work in research about a particular problem or topic follow these shortcut ways. During the starting days it will be easy but as the time goes on they face the difficulties in that shortcut path. The quality of the content is the main root of the blog. So, don’t opt for any shortcut ways for the blog content. Do some research before posting something on your blog and your aim should be is to generate good quality original content.

Don’t fall for Showy or Garish Blog Designs

One of the major mistakes bloggers generally commit is to fall for showy template designs. Most of the times they tend to use fancy and colourful templates. However these templates lack the official look. Many readers may find it difficult to read your posts and may also miss the important content and complain about the appearance of your blog. So it is always advisable to stick with a highly professional and simple light kind of template. It may increase the chance of getting more number of return visitors.

Avoid Complex Categorizing and Tagging

Categories and tags usually refer to the table of contents of your blog. They help the visitors or readers to find the content needed to them with ease. This is another aspect in which most of the new bloggers tend to make mistakes in.

The problem with them is that they fail to understand the mere purpose of categories and tags is to simplify your blog visitor’s visit to your blog. They try to use the maximum number of keywords related to the post that may result in a huge number of tags which is so confusing. 

Many a time in the process of keeping things organized, new bloggers forget to take into consideration this parameter, which is exactly why categories and tags come out to be of no use to them. This is why you need to be very careful while choosing categories and tags. Maintain balance while using these parameters. You must plan categories well in advance as they need to possess a meaning. On the other hand the tags that you need must be based on the keywords that are likely to be searched by the visitors.

So, if you are starting a new blog try to avoid these aspects. If you already started blogging stick with your niche and avoid making mistakes like changing the theme or posting something that is not related to your niche or the theme.

If you think there are also other aspects that are need to be discussed but are left, please feel free to let me know by posting in the comment section below. I wish you all the best and for a grand success in the field of blogging.



Print Page

Subscribe to: Posts ( Atom )