Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. 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

Tuesday, 21 May 2013

How to add Floating Social Share bar



Hi guys! In this post I would like to tell you ‘How to add Floating Social Share bar’.

Generally bloggers use social networking sites to promote their content and get visibility. With this widget we can easily access different kind of social networking platforms at one place.

Adding this to your blog is so simple that it takes barely two minutes to do so.

Follow these simple steps:

  1. Log in to blogger and go to Layout.
  2. Click on Add a Gadget and select HTML/JavaScript and paste the following code and save it.
  3. Before saving it change the techpro4u with your twitter account name.
  4. You can customize this widget according to your convenience.
  5. By default the position of the widget is left if you want to change it to right change left to right.
  6. Check out your blog for the changes.

CODE:

<!-- Sidebar share buttons techpro365.blogspot.in--><style type="text/css"> #pageshare {position:fixed; bottom:5%; margin-left:-780px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color: #b2e0ff;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="Get this from techpro365.blogspot.in">
<div style="margin-left:8px;"><div class='sbutton' id='like' style='margin: 5px 0 0 5px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script><fb:like layout='box_count' show_faces='false'></fb:like> </div></div>
<br /><div class='sbutton'><a class='twitter-share-button' data-count='vertical' data-via='techpro4u' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script>
<br /><div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone></div><br/><div class='sbutton' id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script> <a class="DiggThisButton DiggMedium"></a> </div> <div style="clear: both;font-size: 9px;text-align:center;">
<a href="http://techpro365.blogspot.in/" target="blank"><font color="red">Get This<font></font></font></a></div><!-- Sidebar share buttons End --></div></div>



 If you have any genuine queries or facing any difficulties in following the post feel free to ask through the forum or the contact page.


Print Page

Monday, 20 May 2013

How to add 'Wibiya toolbar' to blogger.


HI guys! Today in this post I am going to tell you ‘How to add Wibiya toolbar to blogger’.

What is Wibiya toolbar ?

Wibiya toolbar is a customizable, free and attractive toolbar which allow users to share or promote your content mainly through the social networking sites. The main feature of this toolbar is that the user has no need to navigate away from the site.

Adding this toolbar to your blog or website is very easy. Just follow these simple steps.

  1. Go to Wibiya click on get it now.
  2. Fill in the form details.
  3. Now you will see a screen that looks like this.


  4. Log in to your blogger account.
  5. Follow the instructions on wibiya website.
  6. Click on “Add Widget” at the bottom of the directed page.


  7. Now check your blog for the attractive wibiya toolbar at the bottom of the page.

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

Monday, 6 May 2013

How to add 'Facebook-Twitter-Google+' follower box


Today in this post I would like to take you through the process of “Adding a useful followers widget”. As you guys already know about a ‘follow box’. In this widget we have three in one follow box facility for Facebook , Twitter and Google+. This is a cool widget which shows all your followers at one place. Adding this widget to your blog is very easy.

Follow these steps to add this widget to your blog:

1. Login into your blog and go to Layout.
2. Click on ‘Add a Gadget’.
3. Copy and paste the below given code and click on ‘save’.
4.  Now open your blog and you can view the widget working.


Before adding the code to your blog, please paste it in notepad and make these changes:

1. Change ‘Techpro365’ to your blog’s fan page.
2. Change ‘techpro4u’ to your twitter.
3. Change the google+ id ‘106197391344352891445’ with yours.

CODE:


If you have any genuine queries about this post or facing any problem feel free to ask by posting in the comment box.


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

Subscribe to: Posts ( Atom )