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

Subscribe to: Posts ( Atom )