SisiLab

Programming Basics for Beginners - Common Terms, Practices and Principles

noreply@blogger.com (lihengu Dady) — Sun, 01 Jan 2017 21:41:00 +0000

Before You Start To Code

When you first set out to learn the science and art of computer programming, there is a huge amount to learn and it can sometimes seem a little bit overwhelming. You are effectively learning a whole new language to write your code in, at the same time as learning a wide range of new concepts, principles, working practices, technical terminology, software tools and more. That's quite a lot to take in all at the same time.

Because of this I think that it is well worth taking the time to learn some programming basics before you even start learning the ins and outs of a programming language and writing your first line of code. These basics include common terminology, working practices, and software tools.

The purpose of this article is to introduce you to some of these programming basics, which you are likely to come across no matter which language you decide to learn

Some Free Code Editors

A Beginners Guide to Notepad++
A beginners guide to the free Notepad++ code editor, with everything you need to know to get started as a programmer!
DroidEdit for Android
A free app for writing code on your Android phone or tablet
Bare Bones Software | TextWrangler
A code editor for Macs which also has integrated FTP

A Beginners Guide to Code Editors

You can't write code in a word processor, because the document will contain formatting which itself is created using programming code. You can choose to use a basic text editor of the kind which comes pre-installed on most computers and which doesn't use any formatting, such as the notepad program, but it is much better to get yourself a proper 'code editor'. Don't worry - there are plenty of good ones available for free (I've include links to the right of this text)

Code editor software makes programming much easier, by making your code more readable and offering you a range of handy features. The first thing that you will notice when using a code editor is that each line is numbered. This makes it easier find things - including errors as you will often be told where in your code the problem has occurred when there is an error. Numbered lines mean that you can easily write a change log to keep track of exactly where modifications to a program have been made, and if you are collaborating it means that you can point a colleague to a particular place with ease.

When you start writing your code you will notice that the program adds colour coding to make it more readable. Because many types of code include the use of brackets, which are there to organise the code and which can cause errors if they are not opened and closed properly, many editors let will highlight the closing bracket when you click next to the opening bracket, and vice versa. They will also automatically indent lines of your code where appropriate.

If you look in the example picture below, you will also see a line down the side with little squares that feature either a plus or a minus sign. These can be used to collapse or expand sections of your code, which is useful when you are working on larger pages.

Most code editors also give you a button to you run your code in your choice of browser, allow you to add plug-ins to customize your editor, and use a range of advanced search features and more. Taking the time to pick out a good editor and explore its various functions before you actually need them is a really good idea.

Example Code Written in PHP with Notepad++

Syntax

Programming languages are just like human languages - they have their own 'syntax', or rules to describe how statements should be written. You will find that many programming languages share a great many common features and functions, but each one will have their own syntax rules.

Getting the syntax right is very important, and as a beginner you will find that many of your errors end up being down to a missing semi-colon, bracket or apostrophe. The solution is to take your time, proofread as you go, and use a good code editor which highlights your syntax and gives each element a different colour.

Yoda Coding

Sometimes the computer doesn't mind which order you put things in, but other programmers might find it strange if you deviate from the norm. This is called 'Yoda Coding'. The example here says 'if 5 is the count', rather than 'if the count is five'.

Commenting, Indentation and Readability

When you are writing code it is very important to maintain readability. It is not just the computer that needs to be able to read your code and understand what it means - there is a good chance you will need to read back over your code at a later date to make changes (or to copy something for a new program!) and in a professional environment other people will need to as well.

Taking a bit of time to choose descriptive words as names for things like variables and functions can really help with this. Structuring your code with indentation is also useful, and you will learn how to do this alongside your language of choice. Each language will have its own format for indentation, but unless you are learning a language like Python where blank spaces are part of the syntax, this is just for your own benefit.

Commenting is also very important. Even when you are an experienced programmer you will find that some code is difficult to read and would take a long time to work through if you wanted to figure out exactly what is happening. Placing regular comments in your code to explain what it is doing is a very important habit, and one which you should work on developing from the very start of your programming career. Good commenting is an art form, as you need to include as much information as possible in as short a space as possible.

Do you ever read the instruction manual?

Documentation and Libraries

Being good at programming isn't like being good with gadgets - you have to read the instruction manual. The term 'documentation' refers to the instruction manual which will be provided for any language you learn, as well as for third part resources and for SDK's and API's (see below). As a developer, you will spend a lot of time reading documentation. And the more time you devote to this, the better you will be at your job.

The simple fact is that no course will teach you everything that you ever need to know about a programming language - and even after getting years of experience under you belt there will still probably be things you aren't sure about. Getting used to reading and using documentation is very important, and when you start to learn a programming language it is a great idea to browse through the documentation to complement any course you are doing - even if a lot of it doesn't make much sense to start off with!

Libraries are another very useful repository for information, and it is well worth finding a few good quality libraries and familiarizing yourself with them when you start to learn a new language. Essentially a library is full of pre-written code which you can use to implement common features without having to write a everything from scratch yourself. In Python you can use 'modules' to import a set of functions with a single line. A good knowledge of libraries and modules can save you a great deal of time and trouble!

Pseudo Code

Pseudo code is an informal general description of what a piece of code should or does do, written in regular English (or whatever your language is!). It is essential partway between code and human language. It uses a logical and even mathematical style to explain the purpose of a piece of code, but without any of the formal structure and syntax of actual code.

There are no rules for creating pseudo code, so you are free to use it however works best for you.

It is very useful for two reasons:

Problem solving / knowing where to start: When you sit down to write a piece of code you often won't know how it is going to be structured, or even how to start. Writing down your intentions in a very logical way like this before you start can make it easier to figure out where to start with actually writing the code and what structures you will need to use.
Commenting: Pseudo code can sometimes be used for comments to explain your code in a succinct and easy to read way. Sometimes you can even use the pseudo code you wrote when you started out as the basis for your comments (perhaps divided up and put in the relevant location) so that you don't need to write anything new for your comments!

An Example of Pseudo Code

Set score to zero
while quiz is active
 if questions have been answered
  current score = 10 * no. of correct answers
  display current score
 else 
  print 'please begin'
if quiz has been taken
 print score
else
 print 'test your knowledge!'

Popular Free IDEs

NetBeans
NetBeans IDE is open source and has a worldwide community of users and developers.
Eclipse
The Eclipse Foundation open source community website.

Integrated Development Environments (IDE)

An integrated development environment (IDE), sometimes also known as an interactive development environment, is essentially one step up from a basic code editor.

An IDE includes a source code editor, as well as 'build automation' tools to automate various tasks, a debugger to help you to identify and fix errors, and perhaps a compiler (see common terminology below), access to code libraries, and more.

If you are learning a common web language like JavaScript or PHP then you may well just use a regular code editor and won't need an IDE, but for more heavyweight languages they are essential.

Many popular IDE's support multiple languages, but you must ensure that your choice of IDE is appropriate for the language you are learning.

GIT Version Control and Collaboration

GIT is a term for a piece of distributed revision control software which is also used as a source code management system (SCM).

It is a commonly used tool for developers to keep track of changes that they make to their projects (revision control) - which is very important because if there is a problem with your code you will want an easy way to go back to a previous stable version. It is also used to store and share 'repositories' - libraries full of general code that can be reused on different projects, so you don't need to write common features all over again. Software such as the very popular GitHub also includes powerful collaboration features for teams to work jointly on a project, or for interested parties to contribute towards open source projects.

Software Development Kits

A 'software development kit' or SDK is a bundle of software tools for the creation of new applications for a specific platform or framework. For example, if you want to develop an app for Android smartphones then you will need to download and install the Android SDK on your computer. Often SDKs are free, but some companies will charge new developers for the download. There may also be a range of different license options - so make sure you download the correct SDK for your purposes.

An SDK will often include an Integrated Development Environment, libraries, tutorials and simple code examples.

APIs

An API is an 'Application Programming Interface'. They contain a set of rules through which your code can communicate with third party software or websites.

You can use API's to access content and features from, or develop apps for, popular websites such as Twitter or YouTube. This kind of API is generally free to use, as the development of third party tools and integration into other websites can be a very powerful promotional tool for a big site. Another kind of API is created by 'software as a service' companies to offer advanced functionality to your site. You will generally have to pay for access to these.

Some Other Common Programming Terminology

Algorithm - A set of logical or mathematical procedures to solve a problem
Compiler - This is a program which takes the code you have written and translates it into the binary ones and zeros of actual machine code.
Concatenation - Combining two things together, such as two lists or strings of text.
Control Flow - Controlling the order in which various sections of code are run or the rules by which they are repeated.
Dump - a list of data which is saved if a program crashes, often as a text file. It is very useful for diagnosing problems.
Floating point - A decimal number where the point can move, such as 1.23. The opposite is an integer, which is a whole number and cannot have a decimal place.
Function - a set of instructions which are written once to obtain a particular result, and can then be used whenever necessary by 'calling' it.
GUI - General User Interface, refers to 'front end' of a piece of software which the end user actually sees and interacts with
Interpreter - Some languages do not need a compiler, but instead use an 'interpreter' which translates to machine code as the program is run.
Iteration - A sequence of instructions which are repeated. For example, to perform an action for every item in a list you would 'iterate' over that list. Each time it is repeated is one iteration.
JSON - A format for transmitting information between locations which is based on JavaScript. Many APIs use JSON.
Logical Operation - The use of simple Bolean logical such as and, or andnot.
Loop - a piece of code which keeps running until a certain condition is fulfilled - or isn't fulfilled in the case of an 'infinite loop' which will crash the system running it.
Markup Language - A relatively simple language used to format pages, such as HTML.
Nested - When one thing is contained within another it is said to be 'nested'.
Recursion - When something refers to itself. For example a variable may add something to itself for each iteration of a code loop.
Run time - The time during which a program is running.
Sandbox - A place to run a program for testing, and for experimenting.
Subroutine - a function or other portion of code which can be run anywhere within a program.
Variable - A way to store a piece of data which can then be modified at any time.

Dilbert on Programming Terminology

How To Align Images Side-By-Side Using HTML

noreply@blogger.com (lihengu Dady) — Sun, 01 Jan 2017 21:26:00 +0000

Use HTML and CSS to Build a Photo Gallery

In page one of this tutorial, How to Align Images in HTML, I gave you the basic codes for putting graphics on webpages. Now, here's a template to make a multi-image gallery of pictures side-by-side.

This will work on platforms like Wordpress that let you toggle "code" and input HTML directly. Note that many web publishing tools now have photo gallery widgets or other plugins that take care of this task for you, but now and then, we still find ourselves needing to hand-code.

Before We Begin: You Need Images!

Before you go any further in this tutorial, you must have images uploaded (stored) somewhere on the web, and you must be able to provide the address (URL, location) where each image is stored. There are various options for hosting images:

A blog. If you have a blog, it should have a media or image folder where you can upload those images.
Photobucket. This is the most common solution.
TinyPic is another free image host like Photobucket.

If you view your image gallery or library on the site where you've uploaded it, you'll probably see a line that tells you the image's location (the URL) where it is stored on their site. For instance, Photobucket has a box listing the image's "direct" link.

If you can't find a box like that, then right-click (control-click or Ctrl-click) an image and choose "copy image location" or "copy image URL."

Finding the URL of Your Image in Photobucket

HTML / CSS Codes to Tile Images

For every image in the gallery, use the code below, replacing "imageLocation" with the URL of a photo you've uploaded somewhere on the web (in quotation marks).

<img src="imageLocation" style="float: left; width: 30%; margin-right: 1%; margin-bottom: 0.5em;">

Repeat this chunk of code for each image, without skipping lines or spaces between the chunks. (I repeat: in each instance, you will be replacing "imageLocation" with the URL of the photo you are placing.)

IMPORTANT: After your very last image, add the following code:

<p style="clear: both;">

That means, "Stop tiling left to right. No more floaty images. We're starting on a new line, here." Otherwise, the text below the image gallery might try to crawl up into the space to the right of it. Usually there's not enough room, but it's best to close the gate to make sure.

Explanation of codes:

img src="blah" is the placeholder for "Stick an image here. The source (location) of it is...". (Your image's URL replaces the word blah.)
style ="blah" means "And here's how I want it to display on the page." Style is also used for font colors, sizes, and anything to do with layout or appearance. (The line of code I gave you already says how you want the image to be displayed.)
float means "squeeze the picture as far to the left as it will fit; if there's not enough line, wrap around until there is room." Basically, it makes a graphic behave exactly the way a letter of text does when you type it on a computer screen.
width specifies the image's width. 30% restricts its width to 30% of the column. If you string a bunch of pictures together with float, and they're each 30% of the available space, they'll wrap around after the third image on each row.
margin-right is the whitespace to the right of each graphic. Since I don't know how wide your device's screen is, I made the margin 1%. You can play with this number if you need to.
margin-bottom is the whitespace below each graphic. Because webpages can scroll off the bottom of the page, we can't really specify vertical layout in percentages, so I cheated and specified the vertical space in ems. An em is the width of the letter m. Like percentages, ems grow and shrink depending on screen size, whereas pixels are fixed. Three pixels on a mobile phone take up a lot more screen real estate than three pixels on a large computer monitor.

To Place More Than Three Pictures Side-by-Side

What if you want to tile more than three across? Then it's time to do math. Divide 100% by the number of images you want to tile across. That gives you the width of the image AND its margin-right. Now decide how much of that amount you want to be image, and how much you want to be margin.

It's best to fold in a little extra wiggle room, just to make sure.

For example:

Three images across: 30% + 1% times 3 = 99%.
Four images across: 23% + 1% times 4 = 96%.
Five images across: 19% + 0.5% times 5 = 97.5%

Why am I bothering with wiggle room? Because I've found that some idiot browsers act like there's an invisible one-pixel-wide border around images, making images fractionally wider than what we've specified.

Example Side-by-Side Image Gallery

All photos from my trip to Gunnison, Colorado.

Making the Images Into Clickable Links

Each image can be a clickable link. Sometimes this is useful for menus!

Wrap the following code around each image's code:

<a href="URL"><img src="imageLocation" style="float: left; width: 30%; margin-right: 1%; margin-bottom: 0.5em;" ></a>

Replace "URL" with the URL of the page you want the image to link to (but keep the quotation marks). (Copy it from the Location bar at the top of your web browser while viewing that page.)

Multiple Image Photo Gallery With Captions

This Is a Little More Tricky.

What if you want each photo in your image gallery to have a caption? Well, oddly enough, in HTML code, we can say, "Treat a paragraph as a box." And then we can tile those boxes side-by-side just like we did the images in the examples above.

Inside each box can be an image plus a caption.

So, for each image and its caption, use the following chunk of code:

<p style="float: left; font-size: 9pt; text-align: center; width: 30%; margin-right: 1%; margin-bottom: 0.5em;"><img src="imageLocation" style="width: 100%">Caption</p>

Replace the imageLocation with the URL of the image, and the Caption with any text you want. If the text is too long to fit on one line, it'll wrap around.

Repeat that code chunk for each "box" — the image plus its caption— without skipping lines between the chunks.

Finally, to close off the side-by-side image gallery, put this at the end:

<p style="clear: both;">

Again, if you need to have more than three side-by-side images across, then divide 100% by the number of images you want in a row to get the width of theimage plus its margin-right, and then allocate most of that amount to the image's width and a little bit to the margin. But again, it's best to give it a little wiggle room (web browsers are often stupid), so maybe start with 99% instead.

And if you want to make something a clickable link, just wrap <a href="URL">[thing]</a> around it. [thing] can be any text in the caption, or it can be an image, in which case [thing] is <img src="....">

Side-by-Side Images With Captions

Further Tweaks and Tips: More Photos, Clickable Links

Again, if you want more than three side-by-side images across, then divide 100% (or maybe 99% to allow wiggle room) by the number of images you want in a row, to calculate the width of the image PLUS its margin-right. Then allocate most of that amount to the image's width and a little bit of it to the image's right-hand margin.

If you want to make something a clickable link, just wrap <a href="URL">[thing]</a>around it. [thing] can be any text in the caption, or it can be an image, in which case [thing] is <img src="...." style="...">

Images of Different Dimensions

How To Make a Gallery of Images of Different Dimensions

You may have noticed that in the rest of the examples on the page, my images are all the same dimensions. That makes it MUCH EASIER to tile them.

Obviously, sometimes you'll have images of all different dimensions, in which case you can't use width. The imperfect solution I've found is to change width toheight and then specify height with a fixed number of ems. Like so:

<img src="imageLocation" style="float: left; height: 15em; margin-right: 1%; margin-bottom: 0.5em;">

Repeat that for each image in the gallery, then, as usual, end the gallery with <p style="clear: both;"> to turn off side-by-side tiling.

Ems are proportional to the vertical size of the page, so they'll grow and shrink with screen size. If all your images are the same number of ems tall, they'll be the same height relative to each other.

Simple Search Using PHP and MySQL

noreply@blogger.com (lihengu Dady) — Sun, 01 Jan 2017 21:09:00 +0000

How to create simple search using PHP and MySQL. You'll learn:

How to use GET and POST methods
Connect to database
Communicate with database
Find matching database entries with given word or phrase
Display results

Preparation

You should have Apache, MySQL and PHP installed and running of course (you can use XAMPP for different platforms or WAMP for windows, MAMP for mac) or a web server/hosting that supports PHP and MySQL databases.

Let's create database, table and fill it with some entries we can use for search:

Go to phpMyAdmin, if you have server on your computer you can access it athttp://localhost/phpmyadmin/
Create database, I called mine tutorial_search
Create table I used 3 fields, I called mine articles.
Configuration for 1st field. Name: id, type: INT, check AUTO_INCREMENT, index: primary

INT means it's integer
AUTO_INCREMENT means that new entries will have other(higher) number than previous
Index: primary means that it's unique key used to identify row

2nd field: Name: title, type: VARCHAR, length: 225

VARCHAR means it string of text, maximum 225 characters(it is required to specify maximum length), use it for titles, names, addresses
length means it can't be longer than 225 characters(you can set it to lower number if you want)

3rd field: Name: text, type: TEXT

TEXT means it's long string, it's not necessary to specify length, use it for long text.

Fill the table with some random articles(you can find them on news websites, for example: CNN, BBC, etc.). Click insert on the top menu and copy text to a specific fields. Leave "id" field empty. Insert at least three.

It should look something like this:

Create a folder in your server directory and two files: index.php and search.php (actually we can do all this just with one file, but let's use two, it will be easier)
Fill them with default html markup, doctype, head, etc.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Search</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

</body>
</html>

Create a form with search field and submit button in index.php, you can use GET or POST method, set action to search.php. I used "query" as name for text field

GET - means your information will be stored in url (http://localhost/tutorial_search/search.php?query=yourQuery)
POST - means your information won't be displayed it is used for passwords, private information, much more secure than GET

<form action="search.php" method="GET">
 <input type="text" name="query" />
 <input type="submit" value="Search" />
</form>

Ok, let's get started with php.

Open search.php
Start php (<?php ?>)
Connect to a database(read comments in following code)

<?php
 mysql_connect("localhost", "root", "") or die("Error connecting to database: ".mysql_error());
 /*
  localhost - it's location of the mysql server, usually localhost
  root - your username
  third is your password
  
  if connection fails it will stop loading the page and display an error
 */
 
 mysql_select_db("tutorial_search") or die(mysql_error());
 /* tutorial_search is the name of database we've created */
 
 
 
?>

You can go and check if there is no errors.

Now go to the <body></body> part of the page
I'm using GET method, if you want to use POST, just use $_POST instead of $_GET
Also some functions to make it more secure. Read comments in the code
Send query to database
Check if there is any results
If there is any, post them using while loop

<?php
 $query = $_GET['query']; 
 // gets value sent over search form
 
 $min_length = 3;
 // you can set minimum length of the query if you want
 
 if(strlen($query) >= $min_length){ // if query length is more or equal minimum length then
  
  $query = htmlspecialchars($query); 
  // changes characters used in html to their equivalents, for example: < to &gt;
  
  $query = mysql_real_escape_string($query);
  // makes sure nobody uses SQL injection
  
  $raw_results = mysql_query("SELECT * FROM articles
   WHERE (`title` LIKE '%".$query."%') OR (`text` LIKE '%".$query."%')") or die(mysql_error());
   
  // * means that it selects all fields, you can also write: `id`, `title`, `text`
  // articles is the name of our table
  
  // '%$query%' is what we're looking for, % means anything, for example if $query is Hello
  // it will match "hello", "Hello man", "gogohello", if you want exact match use `title`='$query'
  // or if you want to match just full word so "gogohello" is out use '% $query %' ...OR ... '$query %' ... OR ... '% $query'
  
  if(mysql_num_rows($raw_results) > 0){ // if one or more rows are returned do following
   
   while($results = mysql_fetch_array($raw_results)){
   // $results = mysql_fetch_array($raw_results) puts data from database into array, while it's valid it does the loop
   
    echo "<p><h3>".$results['title']."</h3>".$results['text']."</p>";
    // posts results gotten from database(title and text) you can also show id ($results['id'])
   }
   
  }
  else{ // if there is no matching rows do following
   echo "No results";
  }
  
 }
 else{ // if query length is less than minimum
  echo "Minimum length is ".$min_length;
 }
?>

Done!

Now it works. Try different words, variations, editing code, experiment. I'm adding full code of both files in case you think you've missed something. Feel free to ask questions or ask for tutorials.

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Search</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
 <form action="search.php" method="GET">
  <input type="text" name="query" />
  <input type="submit" value="Search" />
 </form>
</body>
</html>

search.php

<?php
 mysql_connect("localhost", "root", "") or die("Error connecting to database: ".mysql_error());
 /*
  localhost - it's location of the mysql server, usually localhost
  root - your username
  third is your password
  
  if connection fails it will stop loading the page and display an error
 */
 
 mysql_select_db("tutorial_search") or die(mysql_error());
 /* tutorial_search is the name of database we've created */
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Search results</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<?php
 $query = $_GET['query']; 
 // gets value sent over search form
 
 $min_length = 3;
 // you can set minimum length of the query if you want
 
 if(strlen($query) >= $min_length){ // if query length is more or equal minimum length then
  
  $query = htmlspecialchars($query); 
  // changes characters used in html to their equivalents, for example: < to &gt;
  
  $query = mysql_real_escape_string($query);
  // makes sure nobody uses SQL injection
  
  $raw_results = mysql_query("SELECT * FROM articles
   WHERE (`title` LIKE '%".$query."%') OR (`text` LIKE '%".$query."%')") or die(mysql_error());
   
  // * means that it selects all fields, you can also write: `id`, `title`, `text`
  // articles is the name of our table
  
  // '%$query%' is what we're looking for, % means anything, for example if $query is Hello
  // it will match "hello", "Hello man", "gogohello", if you want exact match use `title`='$query'
  // or if you want to match just full word so "gogohello" is out use '% $query %' ...OR ... '$query %' ... OR ... '% $query'
  
  if(mysql_num_rows($raw_results) > 0){ // if one or more rows are returned do following
   
   while($results = mysql_fetch_array($raw_results)){
   // $results = mysql_fetch_array($raw_results) puts data from database into array, while it's valid it does the loop
   
    echo "<p><h3>".$results['title']."</h3>".$results['text']."</p>";
    // posts results gotten from database(title and text) you can also show id ($results['id'])
   }
   
  }
  else{ // if there is no matching rows do following
   echo "No results";
  }
  
 }
 else{ // if query length is less than minimum
  echo "Minimum length is ".$min_length;
 }
?>
</body>
</html>

Automatically log off idle users in Windows

noreply@blogger.com (lihengu Dady) — Tue, 20 Dec 2016 15:48:00 +0000

Before we get started, I’d like to address two of the ways I’ve seen suggested as a way to handle logging off idle user sessions. One solution that used to be popular is the winexit.scr screensaver included in the Windows NT Server 4.0 Resource Kit. A systems administrator can set the workstation’s screensaver to winexit.scr, and the user would be logged off when the screensaver activated.

This solution doesn’t take into account newer operating systems that include Fast User Switching. It also requires you to lengthen your screensaver activation time so you don’t accidentally log off a user who has gone on a break or lunch period. And, last but not least, getting this old utility to work correctly on newer OSs is just a pain. Do you really want to run something this old on your network if you don’t have to?
Another is a Group Policy setting that a lot of people point to as a solution to this problem. The setting is located in Computer Configuration > Policies > Administrative Templates > Windows Components > Remote Desktop Services > Remote Desktop Session Host > Session Time Limits > Set time limit for disconnected sessions.

“Set time limit for disconnected sessions” policy (for RDS sessions only)

I’ve seen this setting recommended—a LOT—as a solution for logging off idle users. You can use it for logging off idle users on Remote Desktop Services (RDS, formerly Terminal Services). This session doesn’t work for physical computers that people are using at the console.

Computer-side Group Policy settings

To set up our solution, we’ll need to create a new Group Policy Object (GPO) in the Group Policy Management Console (GPMC). For multiuser computers, I usually like to create a new sub-Organizational Unit (OU) inside the original OU that contains all the other non-multiuser computers. This lets the multiuser computers get the same Group Policy as all of the other computers without forcing the “idle logoff” on every single computer.

Create new GPO in the Group Policy Management Console

Next, we’ll need to right-click the new GPO and choose Edit. Once you’re in the Group Policy Management Editor, you’ll need to go to Computer Configuration > Policies > Administrative Templates > System > Group Policy > Configure user Group Policy loopback processing mode. Enable the policy and set it to Merge. This will let us apply a user-side policy to computer objects in Active Directory. (I’ve written articles on loopback processing in Group Policy and common usage scenarios if you’d like more information.)

Configure user Group Policy loopback processing mode to Merge

Next, we’ll need to copy a small utility to the multiuser computers. Go and download idlelogoff.exe. For demo purposes in this article, I’m going to put my copy into Active Directory’s Sysvol folder. For a production environment, you’ll probably want to do this from a file share. Just make sure that domain computers have at least read-only access to both the share and the file system.

IdleLogoff executable in the Sysvol folder

Go back to your GPO and go to Computer Configuration > Preferences > Windows Settings > Files. Right-click Files and choose New > File. In the Source File(s) section, select the IdleLogoff.exe that we put into \\domain.local\sysvol\domain.local\files\IdleLogoff\IdleLogoff.exe. Set the Destination File value to C:\Program Files\IdleLogoff\IdleLogoff.exe.

New File Properties to copy IdleLogoff.exe to computers

User-side Group Policy settings

Next, we’ll need to set our user-side Group Policy settings. Go to User Configuration > Policies > Windows Settings > Scripts (Logon/Logoff). Double-click Logon on the right side of the window.

Logon/Logoff scripts in the Group Policy Management Editor

Click the Show Files button to open a new window where you can place the Logon script we’ll use.

Create a new batch file for a Logon script

Create a new text file named IdleLogoff.bat in the folder, with the following text:

IdleLogoff.bat example

The IdleLogoff.exe utility takes two arguments. The first argument is the time, in seconds, before taking action. In this case, I’m using 1800, which translates to 30 minutes. The second argument is the action to take. The valid actions are logoff, lock, restart, and shutdown. We want to log off idle sessions, so I’m using logoff.

Last, we need to add the Logon script to the GPO. Click the Add button on the Logon Properties window, then click the Browse button on the Add a Script window, select the script (IdleLogoff.bat), and click Open. This will take you back to the Add a Script window where you can click OK. The Logon script will show up on the Logon Properties window; click OK.

Adding the Logon script to the Group Policy Object

Testing on the client ^

On a test client, I’m going to run a manual Group Policy update by running gpupdate.exe at a command prompt just to ensure the system gets the settings in the GPO. Next, I’m going to go to C:\Program Files\IdleLogoff\ and make sure that IdleLogoff.exe is copied to the computer.

IdleLogoff.exe copied to a Windows 8.1 client

Next, we can run Task Manager and see that the IdleLogoff.exe executable is running in the background in the user’s session.

IdleLogoff.exe running on Windows 7

IdleLogoff.exe running on Windows 8.1

Gotchas

A word of warning about Windows 8: Windows 8 includes a number of changes to make the system startup and user logon process faster. One of these changes is to delay the running of logon scripts for five minutes, by default, to make the logon process faster for the end user. Keep this in mind when deploying this solution to computers. You can change this setting in Computer Configuration > Policies > Administrative Templates > System > Group Policy > Configure Logon Script Delay.

Configure Logon Script Delay policy

You might also ask, “If I can see the process, won’t the user be able to see the process?” The short answer here is, yes. The user will be able to run the Task Manager and see this process running in his/her list of processes and can stop it from running. I’ve found that 99 percent of my users logging into a workstation with this configured never know it is there. You can do things like try to hide the process from Task Manager or even rename the file to something like “explorer.exe.”

The only problem with those solutions is that those are the same things malware can do to a system. And, you probably don’t want to implement a solution that looks a lot like malware, or you run the risk of your antivirus/antimalware kicking in and killing it. You can disable the Task Manager by going to User Configuration > Administrative Templates > System > Ctrl+Alt+Del Options > Remote Task Manager. Set the policy to Enabled and click OK.

Disable the Task Manager with the Remove Task Manager policy

Lastly, communicate this new policy to people who may be impacted by the change. Some reception desk computers may need the idle logoff time set anywhere from 45 to 90 minutes so the primary user isn’t kicked out of his/her session while on a lunch break. Other locations, such as computer labs, may need it set to something lower—maybe 15 to 20 minutes. If you have any thoughts on how long it should take, we’d love to hear them in the comments!

Guide on How to Add a Link in WordPress

noreply@blogger.com (lihengu Dady) — Sun, 18 Dec 2016 09:44:00 +0000

How to Add Link Content Cards in WordPress
Have you noticed how Twitter and Facebook automatically display thumbnail images for the links you share? You can make your WordPress site do the same.

WordPress can automatically embed links as content cards for other WordPress powered sites. This functionality was added in WordPress 4.4.

Simply paste a link in the post editor and if the URL is from a WordPress site, then WordPress will automatically embed it.

But if you don’t like WordPress’s implementation of content cards, then you can try Content Cards plugin.

It allows you to whitelist this feature for select few sites, and it uses the Facebook open graph meta data, so it will work on non-WordPress sites as well. See our tutorial on how to add links as content cards in WordPress for details.

But if you don’t like WordPress’s implementation of content cards, then you can try Content Cards plugin.

How to Add Affiliate Links in WordPress

Do you want to increase your site’s revenue by using affiliate links? Affiliate marketing provides a steady income to many blogs and websites.

All you need to do is add your referral links to products and services that you recommend, and when your visitors purchase these products, you get a commission.

The problem that most beginners face is that each product or website they want to recommend has a different URL. Keeping track of all these URLs is not possible specially if you are recommending multiple products.

The best way to add and manage affiliate links is by using an affiliate management plugin.

Simply install and activate ThirstyAffiliates plugin. Upon activation the plugin will add a new menu item labeled Affiliate Links in your WordPress admin menu.

Click on it to add your affiliate links.

Once you are done, you will be able to easily insert affiliate links into your posts and pages by clicking on the add affiliate link button.

For detailed instructions take a look at our guide on how to add affiliate links in WordPress with ThirstyAffiliates.

You may also want to read this article about: Top affiliate marketing mistake you need to avoid.

How to Add an External Link Icon in WordPress

Many sites like Wikipedia, adds an icon next to links for external websites. The purpose of this icon is to tell users that clicking on the link will take them to a third-party website.

Here is how you can do an external link icon on your WordPress site.

First, install and activate the External Links plugin. Upon activation, simply go to Settings » External Links page to configure plugin settings.

You need to check the box next to ‘Mark outbound links with an icon’ and save your settings. You can now visit your website, and you will see an icon next to all external links on your website.

For detailed instructions, take a look at our guide on how to add an external link icon on your WordPress site.

That’s all, we hope this article helped you learn how to add a link in WordPress. You may also want to see our guide on how to fix most common image issues in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

How to Add Link Buttons in WordPress

noreply@blogger.com (lihengu Dady) — Sun, 18 Dec 2016 09:31:00 +0000

Want to add a button to your WordPress posts or pages? There are many ways you can do this. You can write your own HTML and CSS for your buttons, or you can try a plugin.

The problem with most plugins is that they want you to use shortcodes to add buttons and links. Adding different parameters to a shortcode is very much like writing HTML.

We have a better solution.

Simply install and activate Forget About Shortcode Buttons plugin. Upon activation, create a new post or edit an existing one.

You will notice a new button in the visual editor menu to insert buttons into your post or page.

Clicking on the button will bring up a popup where you can customize your button, choose colors, borders, add text, and links while seeing a live preview.

For more information and details take a look at our guide on how to add buttons in WordPress without using shortcodes.

How to Add Title and Nofollow in WordPress Links

noreply@blogger.com (lihengu Dady) — Sun, 18 Dec 2016 09:25:00 +0000

Many experts recommend adding a nofollow tag with links pointing to external websites. It improves your SEO score and protects your site’s link juice.

Here is how you can add title and nofollow options to insert link popup in WordPress.

Simply install and activate the Title and Nofollow for Links plugin. Upon activation, the plugin will add title and nofollow options to insert link popup.

Next time you add a link, you will see an insert link popup like this:

Take a look at our guide on how to add title and nofollow to insert link popup in WordPress for more information.

How to Add Links in WordPress Navigation Menus

noreply@blogger.com (lihengu Dady) — Sun, 18 Dec 2016 09:22:00 +0000

Do you want to add links in your site’s navigation menu? WordPress comes with an intuitive menu editor which allows you to create and manage navigation menus on your WordPress site.

Simply go to Appearance » Menus page. If you don’t have a navigation menu setup, then you can create one by entering a menu name.

If you already have navigation menus set up, then you can add, edit, or delete links from it.

Take a look at our beginner’s guide on how to add navigation menus in WordPress.

How to Add Links in WordPress Text Widgets

noreply@blogger.com (lihengu Dady) — Sun, 18 Dec 2016 09:17:00 +0000

WordPress allows you to add Widgets to your site’s sidebar or other widget ready areas.

Most of these widgets are automated and do not have many options. For example, the recent posts widget will automatically show links to your recent posts.

If you want to add some custom text with links in your sidebar, then you can use the Text Widget.

Text widget allows you to add text and basic HTML inside it.

There are two ways you can add a link into a text widget. First method requires you to write some very basic HTML.

Method 1: Adding a Link in HTML

Creating a link in HTML is very simple. Take a look at the following example.

<a href="http://www.wpbeginner.com">WPBeginner</a>

It will now show WPBeginner linked to wpbeginner.com.

The href tag is where you add the URL. Make sure to add http:// before the domain.

In between the anchor tags, you can add any text that you want to link, in our example WPBeginner.

Here is a screenshot of a text widget with an HTML link inside it.

Method 2: Using a Plugin

If you don’t want to write HTML, then you can enable visual editor for your text widgets.

You would need to install and activate the Black Studio TinyMCE Widgetplugin. If you need help installing a WordPress plugin, then follow our step by step guide to install a WordPress plugin.

Upon activation, simply go to Appearance » Widgets page. You will notice a new widget titled ‘Visual Editor’ under available widgets.

Drag and drop this widget to a sidebar where you want to add your custom text and links. The widget will expand to show a text area with the same Visual Editor as your WordPress posts and pages.

You can now add links and format your text just like you would do in the post editor.

How to Add a Link in WordPress Posts and Pages

noreply@blogger.com (lihengu Dady) — Sun, 18 Dec 2016 09:11:00 +0000

WordPress comes with a user friendly post editor called the Visual Editor.

You can see the visual editor by going to Posts » Add New or by editing an existing post or page.

To create a link, you need to click on the Link button in the visual editor.

When you click on the insert link button, it will bring up a popup window. In the URL field, you will enter the actual hyperlink, and in the link text field you will add the text that will be linked.

You also have the option to check the box next to ‘Open link in a new tab’ option. This will open the link in a new browser tab. It’s recommended that you use this option if you are linking to an external site.

WordPress also allows you to quickly link to posts and pages that you have published on your own website by using the content search feature.

Simply click on ‘Or link to existing content’ option and WordPress will show you recent content and a search field.

You can search for a post or scroll down to find it from the list. You need to click on the post title to select it and then click on Add or Update Link button.

Take a look at our 14 tips for mastering the WordPress visual editor to learn more.

Installing JBoss As Windows Service

noreply@blogger.com (lihengu Dady) — Mon, 10 Oct 2016 14:11:00 +0000

JBoss Web comes with Windows service executable that can run JBoss Web Server as service.

The service executable jbosssvc.exe transforms the run.bat and shutdown.bat batch scripts to services. This means that any change made to those scripts will be used both in service and command line mode.

Installing service

To install the JBoss Web server as Windows service use the provided service.bat batch file

. Change directory to the JBossWeb bin directory
C:\> cd c:\jbossweb-4.0.4RC1-windows-i586\bin
. Install the service
C:\> service.bat install

Starting the service

To start the JBoss Web server as Windows service use Control pannel or net start command.

. Start the service
C:\> net start JBossWebServer
. The JBoss Web Server 4 service is starting.
. The JBoss Web Server 4 service was started successfully.

When running in service mode the console output is redirected to the file run.log. You can inspect the file for any errors during service startup.

Stopping the service

To stop the JBoss Web server as Windows service use Control pannel or net stop command.

. Stop the service
C:\> net stop JBossWebServer
. The JBoss Web Server 4 service was stopped successfully.

When running in service mode the console output is redirected to the file shutdown.log. You can inspect the file for any errors during service shutdown.

Stopping the service

To restart the JBoss Web server as Windows service use Control pannel.

Removing the service

To remove the JBoss Web server as Windows service use the provided service.bat batch file.

. Change directory to the JBossWeb bin directory
C:\> cd c:\jbossweb-4.0.4RC1-windows-i586\bin
. Remove the service
C:\> service.bat uninstall

Customization of the service

Service customization is done by editing the service.bat script. Each command has a separate section that you can customize. The most common customization task would be changing service names if more then one service instances per box are required.

How to Create a VPN Server on Your Windows Computer Without Installing Any Software.

noreply@blogger.com (lihengu Dady) — Thu, 06 Oct 2016 17:21:00 +0000

Windows has the built-in ability to function as VPN server, although this option is hidden. This trick works on both Windows 7 and Windows 8. The server uses the point-to-point tunneling protocol (PPTP.)

This could be useful for connecting to your home network on the road, playing LAN games with someone, or securing your web browsing on a public Wi-Fi connection – a few of the many reasons you might want to use a VPN.

Limitations

While this is a pretty interesting feature, it may not be the ideal way to allow VPN connections to your local network. It has some limitations:

You will need the ability to forward ports from your router.
You have to expose Windows and a port for the PPTP VPN server directly to the Internet, which is not ideal from a security standpoint. You should use a strong password and consider using a port that isn’t the default port.
This isn’t as easy to set up and use as software like LogMeIn Hamachi and TeamViewer. Most people will probably be better off with a more complete software package like those two.

Creating a VPN Server

First, you’ll need to open the Network Connections window. The quickest way to open it is to press the Windows key, type ncpa.cpl, and press Enter.

Press the Alt key, click the File menu that appears, and select New Incoming Connection.

You can now select the user accounts that can connect remotely. To increase security, you may want to
create a new, limited user account rather than allow VPN logins from your primary user account. (Click Add someone to create a new user account.) Ensure the user you allow has a very strong password, as a weak password could be cracked by a dictionary attack.

Select the Through the Internet option to allow VPN connections over the Internet. You can also allow incoming connections over a dial-up modem, if you have the dial-up hardware.

You can then select the networking protocols that should be enabled for incoming connections. For example, if you don’t want people connected to the VPN to have access to shared files and printers on your local network, you can uncheck the File and Printer Sharing option.

Click the Allow access button and Windows will set up a VPN server.

If you want to disable the VPN server in the future, you can delete the Incoming Connectionsitem from your Network Connections window.

Router Setup

You will now need to log into your router’s setup page and forward port 1723 to the IP address of the computer where you set up the VPN server. For more instructions, read How to Forward Ports on Your Router.

For maximum security, you may want to create a port forwarding rule that forwards a random “external port” – such as 23243 – to “internal port” 1723 on your computer. This will allow you to connect to the VPN server using port 23243, and will protect you from malicious programs that scan and attempt to automatically connect to VPN servers running on the default port.

You can also consider using a router or firewall to only allow incoming connections from specific IP addresses.

To ensure you can always connect to the VPN server, you may want to set up a dynamic DNS service like DynDNS on your router.

Connecting to Your VPN Server

To connect to the VPN server, you will need your computer’s public IP address (its IP address on the Internet) or its dynamic DNS address, if you set up a dynamic DNS service above.

Use the Connect to a network option in Windows and enter your computer’s public IP address. Provide the username and password you created to log in.

For more instructions on connecting, read How to Connect to a VPN on Windows.

How To Create FTP Account In WebSitePanel Control Panel.

noreply@blogger.com (lihengu Dady) — Thu, 06 Oct 2016 17:17:00 +0000

1. Login to WebsitePanel.

You can access the WebsitePanel at http://74.124.24.196 or http://cp.yourdoamin.com.

2. Click 'FTP Accounts' Icon

3. Click 'Create FTP Accounts' button

4. Enter the ftp account details

Enter User Name
Enter Password and confirm password
Select the root folder of ftp account
select Access Rights
Click Save

5.Done.

How To Upload/Download Files With FTP over SSL (FTPES).

noreply@blogger.com (lihengu Dady) — Thu, 06 Oct 2016 17:12:00 +0000

We support FTP over SSL in all our shared servers, Please download and install FilleZilla or CuteFTP to connect your FTP folders.

1. Create a FTP account in websitepanel control panel

If you had not create a FTP account, Please follow How To Create FTP Account In WebSite Control Panel? to create it.

2. FTP connect with FileZilla Client

2.1 Download FileZilla Client

If you did not install FileZilla, Please download FileZilla Client from http://filezilla-project.org/

2.2 Start FileZilla Client go to File -> Site Manager and click New site

Enter Your New Site Name
Host: Entry your server IP or ftp.yourdomain.com
ServerType: Please select 'FTPES-FTP over Explicit TLS/SSL'
Logon Type: Please select 'Normal'
User Name: Entry the user name you created in websitepanel control panel
Password: Entry the password of the user
Click Connect

3. FTP connect with CuteFTP Client

3.1 Download CuteFTP Client

If you did not install CuteFTP, Please download CuteFTP Client fromhttp://www.cuteftp.com/

3.2 Start CuteFTP Client click downward pointing arrow and select FTP/SSL Site

3.3 Please follow the informations to connect

Label: Enter Your New Site Name
Host Address: Entry your server IP or ftp.yourdomain.com
Login Method: Please select 'Normal'
User Name: Entry the user name you created in websitepanel control panel
Password: Entry the password of the user
Click Connect

How To Reboot The Dedicated Server With Intelligent Platform Management Interface (IPMI) Remotely.

noreply@blogger.com (lihengu Dady) — Thu, 06 Oct 2016 17:04:00 +0000

Intelligent Platform Management Interface (IPMI)

All our dedicated servers come with free Intelligent Platform Management Interface (IPMI). You can reboot the server remotely at any time by yourself.

Step By Step Guide To Reboot The Server Remotely

1) Login To IPMI

Open your web browser and go to IPMI URL http://74.124.24.xxx. You can get the IP and account information in your welcome email.

2) Go To Remote Control -> Power Control

3) Select 'Reset Server' Option and click 'Perform Action'

4) Your dedicated server will be rebooted in a few minutes.

Related Resources:

How To Access The Dedicated Server BIOS and Operating System With Intelligent Platform Management Interface (IPMI) Remotely?

How To Convert SQL Server 2008 Database To SQL Server 2005.

noreply@blogger.com (lihengu Dady) — Thu, 06 Oct 2016 16:52:00 +0000

Requirements

If you are trying to restore database backup of SQL Server 2008 to SQL Server 2005, you are bound to fail. Database backup of SQL Server 2008 is not compatible backward, you cannot restore it to SQL Server 2005. The following is a solution to convert databases of SQL Server 2008 to 2005

Step by Step Guide

1) Start convert wizard

Open SQL Server Management Studio2008. in 'Object Explorer', right click the database that you want to convert. Select 'Tasks' > 'Generate Scripts...'.

2) Next

Click 'Next'.

3) Select database and objects

Select the database that you want to convert, and check on 'Scripts all objects in the selected databases'

4) Convert Options

Set options:

'Script for Server Version' = 'SQL Server 2005'
'Script Data' = 'True'
'Scirpt Database Create' = 'True'

5) Output Option

Select option 'Script to file', 'Single file' and 'Unicode text'.

6) 'Finish'

View summary and click 'Finish'.

7) Result

Now you got a complete database creation script with data. It can be executed on target database server.

8) Amend Script

Open the generated script in SQL Server Management Studio 2005. Find the following section and amend the path to proper data folder

    CREATE DATABASE [StockTraderDB] ON  PRIMARY 
( NAME = N'StockTraderDB', 
FILENAME = N'c:\Program Files\Microsoft SQL Server\MSSQL10.SQLEXPRESS\MSSQL\DATA\StockTraderDB.mdf ,
 SIZE = 4352KB , MAXSIZE = UNLIMITED, FILEGROWTH = 1024KB )
 LOG ON 
( NAME = N'StockTraderDB_log', 
FILENAME = N'c:\Program Files\Microsoft SQL Server\MSSQL10.SQLEXPRESS\MSSQL\DATA\StockTraderDB_log.LDF',
 SIZE = 6272KB , MAXSIZE = 2048GB , FILEGROWTH = 10%)

9) Execute the Script

When finished, You should get converted database of SQL Server 2005

Related Resources

Restore a SQL Server 2008 Database into SQL Server 2005

How To Access Hosted Microsoft SQL Server Database With SQL Server Management Studio Remotely.

noreply@blogger.com (lihengu Dady) — Thu, 06 Oct 2016 16:49:00 +0000

Step By Step Guide To Access The MSSQL Database

1) Create Your MSSQL Database First

Please follow How To Create SQL Server 2008/2005 Database In WebsitePanel Control Panel?.

2) Get the IP and port for your database

Please follow How To Get The IP and Connection String for My Hosted SQL Server Databases?.

3) Access SQL Server 2005 or 2008 Database via Microsoft SQL Server Management Studio

You need to use SQL Server Management Studio 2005 SP3 or 2008 to manage your 2008 databases. Here is a free one SQL Server Management Studio Express . Please always specify IP address and port number in "Server name" box.

Related Resources

How To Setup Blogger Custom Domain With Namecheap

noreply@blogger.com (lihengu Dady) — Wed, 05 Oct 2016 16:32:00 +0000

Many users of Blogger.com want to use TLD (Top Level Domain) or Custom Domain to replace their blog address (yourblog.blogspot.com). Many of them have difficulty in configuring custom domain in Blogger, especially for those who register their domain in Namecheap.com. Besides the absence of clear guidance from Blogger for Namecheap registrar, there are also a lot of tutorials on the internet that are not applicable anymore because there are some changes from Blogger in the configuration of the Custom Domain. Here is the latest guide in how to setup a custom domain for your blog at Blogger.com with Namecheap as the domain registrar

Register domain that you want in Namecheap. You are free to use .com .net .org .info or whatever you want. This time I use domain .info

Log in to your Blogger account, then click Settings > Basic > +Setup a 3rd party URL for your blog

Type the domain address that is previously registered in Namecheap, and then click Save. Make sure you use "www" part

It would appear an error "We have not been able to verify your authority to this domain. Error 12. " Do not worry. Notice that there are two CNAME records below. Go on to step 6

Open a new tab in your browser and log in to Namecheap account > My Account > Manage Domains > yourdomain > then on the left menu bar, click "All Host Records"

Enter data CNAMEs as it is presented below and then click Save For @ field you put http://www.yourdomainname.tld/ (make sure you put your domain name and do not forget about the http://www.)

Back to blogger settings page and then click Save

During the making of this tutorial, custom domain www.simpleblogger.info can be directly accessed shortly after I click the save button. The redirecting process from the regular blogspot address to www.simpleblogger.info also works instantly. This is due to this blog is a new blog that I have just made. But if your blog is quite old, this new changes of domain will just have an effect after 3 hours or more. If there are steps that are not clear enough, you can ask in the comments field.

How to make a gadget only appear on the first page

noreply@blogger.com (lihengu Dady) — Wed, 05 Oct 2016 13:34:00 +0000

Note: in Blogger, the words "gadget", "widget", and even "page-element" all mean the same thing. I generally use "gadget", because the Page Elements tab currently says "Add a Gadget". But they're absolutely the same.

1 Add the gadget

Do this in the usual way.

2 Place the gadget

Drag-and-drop the gadget to the place where you want it. It may be over or under your blog-posts gadget, or in a totally different place.

A popular place for a gadget that is going to look like a "home page" would be in the Body section, just above the Blog Posts gadget, where "Test Gadget" is in this example:

3 Find the Gadget-ID in the usual way.

4 Find the code for your gadget:

Click in the search box inside the template editor, and look for the widget name that you noted in step 3. Once you've found it, notice what comes after it. In this example, it's the line for Blog1:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'/>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

Use the expansion triangle at the left side of the template editor to expand this section of the code. After you do, it will look like:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

5 Add conditional formatting

You need to put conditional formatting code around the code for the gadget - makings sure that it doesn't go around the code for anything else! (which is why you noted what comes afterwards in step 4)

And to avoid leaving blank space where the gadget would have gone, you need to update a "hide" instruction to apply it to the gadget-id you noted in step 3.

The code to use is this - except put the gadget-id instead of the XXX.

<b:if cond='data:blog.canonicalUrl == data:blog.homepageUrl'>

THE red CODE FOR YOUR GADGET GOES IN HERE

<b:else/>

<style type='text/css'>
#XXXX {display:none;}/*remove blank space that the gadget leaves*/
</style>
</b:if>

The example above looks like this, when the code has been added:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'>
<b:includable id='main'>
<b:if cond='data:blog.canonicalUrl == data:blog.homepageUrl'> 
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

<b:else/>

<style type='text/css'>
#Text1 {display:none;}/*remove blank space that the gadget leaves*/
</style>

</b:if>

</b:includable>
</b:widget>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

6 Check that it's worked

Preview your blog before you save the changes: check that the the widget is visible.

Save the template changes, and look at your blog. Check that

The widget is on the first page
The widget is not seen when you look at an older page (eg one from your archive)
The other elements of your blog (other widgets, blog post titles, dates and contents) are all as you expect them - on the first screen, and on other screens too.

If anything is wrong with how your blog is working, go back to the template editor (Layout > Edit HTML), and upload from the copy of your template that you made at the beginning of step 1. This will let you blog work properly, while you figure out what went wrong.

How to display a gadget only on a specific post or page

Follow exactly the same approach as above.

But instead of

<b:if cond='data:blog.canonicalUrl == data:blog.homepageUrl'>

Make the conditional statement based on something else.

This can be a different condition, or a specific page URL. For example to display a gadget only on a specific page, use this code, and put the address of the page instead of POST-URL:

<b:if cond='data:blog.canonicalUrl == "POST-URL"'>>

Note: for the address of the page, if your blog does not have a custom domain, then be careful to use the "blogspot.com" version of the address, not one with a country-level name (eg the blogspot.in or blogspot.co.uk version)

To display a gadget on every page except a specifc one, replace the double equals signs (==) with the HTML code for not, which is an exclamation mark followed by an equal sign (!=). For example:

<b:if cond='data:blog.canonicalUrl != data:blog.homepageUrl'>

Blogger have now provided an expanded list of conditional statements - you can find information about it:

How to allow changes above your blog's header

noreply@blogger.com (lihengu Dady) — Wed, 05 Oct 2016 13:29:00 +0000

Follow these steps to make it possible for you (or any blog administrator) to add gadgets to the area about your blog's heading section:

1 Edit your blog's template in the usual way

2 Find this code in your template:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE(Header)' type='Header'/>

Hint: use the template-editor search tool, to look for a key phrase like "id='Header1'

4 Change it to

<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE(Header)' type='Header'/>

Notice that there are two changes made:

Setting maxwidgets to greater than 1, and
Setting showaddelement to Yes, instead of No

Your Done: after you have successfully saved this change, then the next time you edit your blog layout (Dashboard > Layout ), then you will find that you can add or drag-and-drop up to three gadgets to the Heading section of the blog, making a total of four.

You can add even more gadgets by changing the number for maxwidgets to something else.

How To Put Google Adsense Code To End Of Blogger Post

noreply@blogger.com (lihengu Dady) — Wed, 05 Oct 2016 11:37:00 +0000

If you are looking to know how to put Google Adsense Code at end of blogger post or bottom of blog post in blogger then in this post will show you how to put Adsense Code at end of blog post in blogger,
Below post will show you step by step tutorial on how easily you can put Adsense ads at end of blog posts in blogger.

Put or Add Adsense at End Of Blogger Post
1) Log in to blogger with your account

2) Go to blogger templates tab

3) Before making any changes to your blogger template make sure to backup your template if in case any thing goes wrong you can do this by clicking Backup/Restore button which is at top right hand side

4) Now click on Edit HTML and expand all the small arrow marks throughout your template

5) Once done now find <data:post.body/> you can find by ctrl+f and paste your Adsense code after it but you have to first parse your Adsense code to remove escape codes then only your Adsense ads will display otherwise it will not show ads at end your blog post, You can parse using this Adsense code parser tool

6) Now copy that code after this line <data:post.body/> you may find that this code appearing 2 or 3 times in you template so try to paste the code after second or third

7) Now click save and you are done refresh your blog and now you can see your google Adsense at end of your blog post in blogger

I hope this post helped you to put google adsense code at the end of posts in blogger .

How to Add Page Number Navigation widget for Blogger/ Blogspot Blog

noreply@blogger.com (lihengu Dady) — Tue, 04 Oct 2016 13:51:00 +0000

In Blogger template, we can set Page number Navigation, It is very important for a Blogger Blog.When you post 15 or 20 over then you should do it manually.When your Blog made by good look with nice page navigation then you think you make it one step forward for the visitor.It helps visitor jump from one page to another page or click on a specific page and know the total number of posts Published.Now I share a tutorial of How to Add Page Number Navigation widget for Blogger/ Blogspot Blog. Hopefully, you can setup your page number in blogger blog by following this post.

Recommended: How to Add Meta Description to Blogger Blog.
You can add this by following two steps.
1. Adding The CSS.
2. Adding the JavaScript.

Now let's see how we can do it.

Step One: Adding the CSS

Important: How To Backup Blogger Blog Template.

Step-1 : Firstly go to Blogger Dashboard> Template> Click on the Edit HTML Button.

Spet-2: Click inside the HTML code area and press Ctrl+F for open the Blogger search box.

Step-3: Now find this code ]]></b:skin> by using your search box. When you get it then choose one of the following numbered page navigation style and copy the code just from below.
Now Just above ]]></b:skin> paste the style code what you want in your Blog.

Style 1:

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
.showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
#blog-pager .pages{border:none;}

Style 2

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Style 3

#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;}

Style 4

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 5

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 6

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 7

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Step Two: Adding the Java script

Step 1: Now find </body> this tag .

Step 2: Add the following script just above it .

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
/*<![CDATA[*/
var perPage=7;
var numPages=6;
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
var urlactivepage=location.href;
var home_page="/";
/*]]>*/
</script>
<script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
</b:if>
</b:if>

Step- 3: Now click on the save template Button and enjoy it.

Recommended: Add Social Media Buttons for blogger Blog's Post Sharing.

Now you are done for setup page number navigation. If you find this post useful, help me by sharing this post on Facebook, Twitter or Google+.

Remove Duplicate Meta Title And Distribution Error In Blogger

noreply@blogger.com (lihengu Dady) — Tue, 04 Oct 2016 13:36:00 +0000

As a blogger blog user, you have to know that Blogger dashboard is very sensitive. It's not like a WordPress setting or plugins. If you want to some changes on the template initially then you must go Edit Template and make it which you want. Blogger Blog description, Keyword setting, and meta tag setting is also recommended like previous, even SEO settings also. Maximum blogger faces a common problem that is how can they Remove Duplicate Meta Title And Distribution Error. My previous post is the method of Create Error 404 Not Found Page In Blogger.

Today in this tutorial I am gonna showing you how to remove duplicate meta title and distribution error in blogger. It is a common problem for users of blogger blog. You can solve others blogger's problem from my another blog post in this blog by visiting Blogger Blog Guide menu. Whatever let's see how to remove duplicate meta title and distribution error.

Remove Duplicate Meta Title And Distribution Error

Try to Use one of bellow method.

Method 1:

User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /search
Disallow: /?m=0
Disallow: /?m=1
Allow: /
Sitemap:http://www.yourblog.com/feeds/posts/default?orderby=UPDATED

First, you have to change the green color with your blog URL then it will work for you. Go to Setting and then click on Search Preferences then edit Robots.Txt and paste the code.

Method 2:

Go to Webmaster Tool> Crawl> URL Parameters> Configure URL Parameters click on Add Parameters of If Parameters.

Now, "m" is present click on edit and do the following settings which provide bellow screenshot.

I hope it will work and help you to solve the problem of remove duplicate met title and distribution error. But remember one thing is after doing one of above them wait 1- 15 days and check again using webmaster.

How to Add Page Number Navigation widget for Blogger/ Blogspot Blog

noreply@blogger.com (lihengu Dady) — Tue, 04 Oct 2016 13:03:00 +0000

In Blogger template, we can set Page number Navigation, It is very important for a Blogger Blog.When you post 15 or 20 over then you should do it manually.When your Blog made by good look with nice page navigation then you think you make it one step forward for the visitor.It helps visitor jump from one page to another page or click on a specific page and know the total number of posts Published.Now I share a tutorial of How to Add Page Number Navigation widget for Blogger/ Blogspot Blog. Hopefully, you can setup your page number in blogger blog by following this post.

Recommended: How to Add Meta Description to Blogger Blog.

You can add this by following two steps.

1. Adding The CSS.

2. Adding the JavaScript.

Now let's see how we can do it.

Step One: Adding the CSS

Important: How To Backup Blogger Blog Template.

Step-1 : Firstly go to Blogger Dashboard> Template> Click on the Edit HTML Button.

Spet-2: Click inside the HTML code area and press Ctrl+F for open the Blogger search box.

Step-3: Now find this code ]]></b:skin> by using your search box. When you get it then choose one of the following numbered page navigation style and copy the code just from below.

Now Just above ]]></b:skin> paste the style code what you want in your Blog.

Style 1:

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
.showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
#blog-pager .pages{border:none;}

Style 2

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Style 3

#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;}

Style 4

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 5

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 6

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 7

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Step Two: Adding the Java script

Step 1: Now find </body> this tag .

Step 2: Add the following script just above it .

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
/*<![CDATA[*/
    var perPage=7;
    var numPages=6;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
/*]]>*/
</script>
<script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
</b:if>
</b:if>

Step- 3: Now click on the save template Button and enjoy it.

Recommended: Add Social Media Buttons for blogger Blog's Post Sharing.

Now you are done for setup page number navigation. If you find this post useful, help me by sharing this post on Facebook, Twitter or Google+.

Best Top 10 SEO Optimized & AdSense Friendly Templates

noreply@blogger.com (lihengu Dady) — Tue, 04 Oct 2016 07:38:00 +0000

#1 ATB Responsive Blogger Template

ATB Blogger Template is Most Responsive and Advanced SEO Optimized Blogger template. This template is made/customized/designed and used by Imran Uddin on his blog AllTechBuzz when his blog was Blogger Platform. ATB blogger template doesn’t contains any encrypted script insite it so, you are free to edit any elements of this template. Some awesome features of ATB SEO Optimized Template are:

Stylish Heading Tags
2 Column Responsive Template
Full SEO Optimized
Sticky Post
Auto Alt Title Tag Generator Integrated
Responsive Related Posts Wedget
4 Column Stylish Footer
Fully Responsive Designed and more.

Preview | Download

#2 Sensational Blogger Template:

Sensational, a ultra responsive 2 column blogger template is professionally designed and Search Engine Optimized by Chandeep from Blogtipsntricks. It have two navigation menu bar (one is stylish vertical and another is floating horizontal menu bar) and purely neat & clean template adopted from WordPress with special SEO configuration. So, a blogger can get lots of visitor with this template and its main features are:

Ultra Responsive Template
2 Navigation Menu
Highly SEO Optimized
4 Column Footer Widget
Purely Neat & Clean Designed
Responsive Popular Post Widget
Faster loading and more.

Preview | Download

#3 Apriezt Responsive Template

Apriezt is highly User Friendly blogger template with responsive layout and two stlye (Full width and Boxed). It’s design is simple, neat & clean and is perfect template for News, Magazine or portofolio blog. Apriezt Blogger Template has too many awesome features:

100% Responsive Design
Auto/Manual Featured Post widget
Stylish Recent Comment Widget
Highly User-friendly
Custom Error 404 Page
Optimized for Better SEO
AdSense Ready
Light weight and Fast loading

Preview | Download

#4 Bresponsive

Bresponsive is AdSense and SEO friendly, professionally designed premium blogger template for blogger blog looks like wordpress theme. It is fully responsive, clean, smooth and having many features:

Fully Responsive
Horizontal navigation menu
AdSense optimized
Related Post box below every post
Advanced Tweeks Widget
Ads supported in Header and Footer
Social Icons Widget
Customized like WordPress theme
SEO Optimized and more.

Preview | Download

#5 Skill Blogger Template

Skill Blogger Template is fully SEO optimized, professional looking and faster loading template for blogger blogs. It is suitable for all niche blogs and mainly suitable for Tech blogs. Skill is awesome template which gives good experience and impression to the blog visitors. Lots of inbuilt features attached with this template so, you don’t need to take any types of tension about it. Main features of Skill Blogger Template:

100% User Friendly
Subscribe Box With About Widget
Search Engine Optimized
Customized Commenting System
Socialize It Bar
Pop up contact Form
Related Post Widget below every post
Stylish Read More Widget
Extra floating header with menu
About the author widget below post
Social Sharing Widget Below post etc.

Preview | Download

#6 Purez

Purez is High User Friendly blogger template with responsive layout. Its design is simple and clean and perfect for magazine or portofolio blogs hosted on Blogger. Purez is a littile bit similer to Apriezt Blogger Template but having 3 column layout. With an attractive color combination it has many features:

Resonsive Design
Support Blogger Template Customizer Editor
Lightweight Auto Read-more option
Ajax Page Navigation
Tabs Widgets ready (Sidebar and Main Section)
SEO Optimized
Meta Keywords and Description support
Emotion in Comments
Custom Error 404 Page
Custom Share Widget icon (Addthis widget plugin)
Stylish Recent Comments, Featured Post widget
Related Post Widget with Slide Effect

Preview | Download

#7 Tech Shadow Blogger Template

Tech Shadow is 2 column stylish blogger template which is designed specially for technology and blogging niche blog. The header of this template is having two sections, on left side we can place Title of the blog and a little description or logo while on right side we can implement Ads banner. Below Tab menu bar it is having email subscription widget with social icons. Tech Shadow Blogger Template has following features:

SEO Friendly
468×60 Ad Section In Header
Header Subscription Area
2 Column Layout
Auto Thumbnail Post on Home
Threaded Comments
Socializer Widget
Related Posts
3 Column Footer

Preview | Download

#8 Elice Blogger Template

Elice, a free responsive blogger template with premium features designed by Chandeep. This free premium template is having 2 Column layout, a custom opt-in form on the top of the homepage and sidebar in post page. Elice is fast loading & SEO Optimized template made for blog in blogging niche. Its features are listed below:

SEO Ready Template
2 Column Layout
Elegant look
Opt-in form on homepage
Fast Loading
AdSense Friendly
Related Post Widget
4 Column Footer

Preview | Download

#9 Maggner Blogger Template

Magger is a magazine/blog blogger template which is inspired by ribbon WordPress theme having 2 column layout. It is having amazing header banner where we can implement ads(AdSense) code. Main features are:

2 Column layout with amazing header banner
Easy to Modify/customize
Neat & clean and highly user friendly template
SEO Optimized/friendly
Faster Loading
Author info below post
Responsive Related Post widget

Preview | Download

#10 Ijonkz Blogger Template

Ijonkz is a responsive blogger template with two style Boxed or Full width. It is professional looking, ads ready SEO friendly and powerful admin panel. Features of Ijonkz Blogger Template:

Auto Featured Post (Responsive Skitter Slideshow)
100% Responsive (Boxed or Full)
Tabs Widgets ready (Sidebar)
Optimize SEO
Auto Resize Thumbnail image
Meta Keywords And Description Support
Cool blogger threaded comment (Support Google+ Comment) with Emoticon
3 Comment System (Blogger, Facebook, Disqus)
Custom Error 404 Page
Two View Mode (List and Grid) width Cookies
Custom Share widget icon (addthis widget plugin)
Professional admin layout etc.

Preview | Download

Therefore

These are some best SEO friendly blogger templates hope you like it. So just download this free template and use in on your blog and see improvement in Search Engine Results. If you like these template then share it with your blogger friends and don’t forget to tell which is your favorite template and which template you are going to use.